How to use cellEl method in ng-mocks

Best JavaScript code snippet using ng-mocks

script.js

Source:script.js Github

copy

Full Screen

1const orientations = [[-1, 0], [-1, 1], [0, 1], [1, 1], [1, 0], [1, -1], [0, -1], [-1, -1]];//八个方向234class Game {5 constructor(rowSize, colSize, ratio) {6 this.rowSize = rowSize;//表格的长7 this.colSize = colSize;//宽8 this.ratio = ratio;9 let cells = [];10 this.seconds=0;1112 for (let i = 0; i < this.rowSize; i++) {//循环1613 let row = [];14 for (let j = 0; j < this.colSize; j++) {15 row.push({16 el: null,//存放对象clear17 value: null,//jutizhi18 clear:false,19 20 });21 }22 cells.push(row);23 }24 this.cells = cells;25 }26 //shuffl用来布雷27 shuffle() {28 let mines = [];//雷的坐标29 for (let i = 0; i < this.rowSize; i++) {3031 for (let j = 0; j < this.colSize; j++) {32 let cell = this.cells[i][j];33 if (Math.random() <= this.ratio) {34 cell.value = -1;35 mines.push([i, j]);36 } else {37 cell.value = 0;38 }39 }40 }41 this.mines=mines;42 //计算是否又累43 for (let [i0, j0] of mines) {44 for (let [rowoffset, coloffset] of orientations) {45 let i1 = i0 + rowoffset, j1 = j0 + coloffset;46 if (i1 < 0 || i1 >= this.rowSize || j1 < 0 || j1 >= this.colSize) {47 continue;48 }49 let cell = this.cells[i1][j1];50 if (cell.value === -1) {51 continue;52 }53 54 cell.value += 1;55 }5657 }58 }//相当于出现与所有的数字59 getCellValue(row, col) {60 return this.cells[row][col].value;61 }62 getCellElement(row,col){63 return this.cells[row][col].el;64 }65 setCellElement(row,col,element){66 this.cells[row][col].el=element;6768 }69 isCellClear(row,col){70 return this.cells[row][col].clear;71 }72 setCellClear(row,col){73 this.cells[row][col].clear=true;74 }7576}7778798081 function renderTable(game) {8283 let gameEl=document.querySelector('#game');84 gameEl.innerHTML='';8586 let bannerEl=document.createElement('div');87 bannerEl.className='banner';88 gameEl.append(bannerEl);89 90 let secondsEl=document.createElement('div');91 secondsEl.className='seconds';92 93 bannerEl.append(secondsEl);9495 game.timer=setInterval(()=>{96 game.seconds+=1;97 secondsEl.innerText=game.seconds;},1000);9899 let boradEl=document.createElement('div');100 boradEl.className='game-borad';101 //let headerEl=document.createElement('div');没啥用了！！三句102 //headerEl.className='header';103 let tableEl=document.createElement('table');104 //boradEl.append(headerEl);105 boradEl.append(tableEl);106 gameEl.append(boradEl);107108 // let tableEl = document.querySelector('.game-borad table');109110 for (let i = 0; i < game.rowSize; i++) {111 let rowEl = document.createElement('tr');112 for (let j = 0; j < game.colSize; j++) {113 let tdEl = document.createElement('td');114 let cellEl = document.createElement('div');115 cellEl.className = 'cell';116117118 let value = game.getCellValue(i, j);119120 if (value === -1) { 121 cellEl.innerText = '*';122 } else if (value >= 1) {123 cellEl.innerText = value;124 }125 game.setCellElement(i, j, cellEl);126127 cellEl.onclick = (e) => {128 handleClearAction(i,j,game,cellEl,tableEl);129 };130 tdEl.append(cellEl);131 rowEl.append(tdEl);132 }133 tableEl.append(rowEl);134 }135}136function checkwin(row,col,game,cellEl,tableEl){ 137 for (let [i0,j0] of game.mines) {138 for (let [rowoffset, coloffset] of orientations) {139 let i1 = i0 + rowoffset, j1 = j0 + coloffset;140 if (i1 < 0 || i1 >= game.rowSize || j1 < 0 || j1 >= game.colSize) {141 continue;142 }143 if(game.getCellValue(i1,j1)===-1){144 continue;145 }146147 if (!game.isCellClear(i1,j1)){148 return false;149150 }151 152 }153154}155return true;156}157158159function handleExplodeAction(row,col,game,cellEl,tableEl){160 let value = game.getCellValue(row, col);161 cellEl.classList.add('exploded');162 tableEl.classList.add('exploded');163 let gameEl=document.querySelector('#game');164 let panelEl=document.createElement('div');165 panelEl.className='loser';166 gameEl.append(panelEl);167 panelEl.innerHTML=` <h3>LOSE(╯︵╰)总用时${game.seconds}秒哦</h3>`;168 169170 clearInterval(game.timer)171172}173function handleWin(row,col,game,cellEl,tableEl){174 let value = game.getCellValue(row, col);175 // cellEl.classList.add('exploded');176 // tableEl.classList.add('exploded');177 let gameEl=document.querySelector('#game');178 let panelEl=document.createElement('div');179 panelEl.className='winner';180 gameEl.append(panelEl);181 panelEl.innerHTML=` <h3>WIN(*￣︶￣)总用时${game.seconds}秒哦</h3>`;182 183184 clearInterval(game.timer)185186187}188function handleClearAction(row,col,game,cellEl,tableEl){189 let value = game.getCellValue(row, col);190 if (value === -1) {191 handleExplodeAction(row,col,game,cellEl,tableEl)192 return;193 }194 if (value === 0) {195 clearcells(row, col, game, {});196197 } else {198 cellEl.classList.add('clear');199 game.setCellClear(row,col);200 }201 if (checkwin(row,col,game,cellEl,tableEl)){202 handleWin(row,col,game,cellEl,tableEl);203 204 }205}206207208function clearcells(row, col,game, cleared) {209 cleared[`${row},${col}`] = true;210 game.getCellElement(row,col).classList.add('clear');211 game.setCellClear(row,col);212213 for (let [rowoffset, coloffset] of orientations) {214 let i1 = row + rowoffset, j1 = col + coloffset;215 if (i1 < 0 || i1 >= game.rowSize|| j1 < 0 || j1 >= game.colSize) {216 continue;217 }218 219220 let value = game.getCellValue(i1, j1);221 if (value===-1) {222 continue;223 }224 if (value >= 1) {225 game.getCellElement(i1,j1).classList.add('clear');226 game.setCellClear(i1,j1);227 continue;228 }229 if (cleared[`${i1},${j1}`]) {230 continue;231 }232233 clearcells(i1, j1, game, cleared);234235236 }237238239}240function renderWelcome(){241 let gameEl=document.querySelector('#game');242 gameEl.innerHTML=`243 <div class='welcome'>244 <button id='level0'>初级</button>245 <button id='intermediate'>中级</button>246 <button id='advance'>高級</button>247 </div>248 `;249 let buttonEl=gameEl.querySelector('button#level0');250 buttonEl.onclick=()=>{ 251 let game = new Game(8, 8, 0.15);252 game.shuffle();253 renderTable(game);254 }255 buttonEl=gameEl.querySelector('button#intermediate');256 buttonEl.onclick=()=>{257 let game = new Game(14, 26, 0.15);258 game.shuffle();259 renderTable(game);260 }261 buttonEl=gameEl.querySelector('button#advance');262 buttonEl.onclick=()=>{263 let game = new Game(16, 30, 0.15);264 game.shuffle();265 renderTable(game);266 }267}268 ...

Full Screen

Full Screen

Field.ts

Source:Field.ts Github

copy

Full Screen

1import Result from "./Result";2class Field {3 public rows: number4 public cols: number5 public score: number6 public result: Result7 constructor(rows: number, cols: number, result: Result) {8 this.rows = rows9 this.cols = cols10 this.score = 011 this.result = result12 }13 create() {14 const cells = this.rows * this.cols;15 let field = document.getElementById('matrix')16 if (!field) return17 field.innerHTML = '';18 for (let i = 0; i < cells; i++) {19 let cell = document.createElement('div');20 cell.className = 'cell';21 field.appendChild(cell);22 }23 }24 showSnakeCell(cellCoords: Array<number>): boolean25 {26 let isSnakeAlive = true27 const cellEl = this.getCellElemByCoordinates(cellCoords)28 if (cellEl.classList.contains('fruit')) {29 this.score++;30 this.result.showScore(this.score);31 cellEl.setAttribute("style", "background-image: inherit);")32 cellEl.classList.remove('fruit')33 cellEl.classList.add('on')34 } else if (cellEl.classList.contains('on')) {35 isSnakeAlive = false36 } else {37 cellEl.classList.add('on');38 }39 return isSnakeAlive40 }41 removeSnakeCell(cellCoords: Array<number>)42 {43 const cellEl = this.getCellElemByCoordinates(cellCoords)44 cellEl.classList.remove('on');45 }46 addFruitCell(cellCoords: Array<number>) {47 const cellEl = this.getCellElemByCoordinates(cellCoords)48 const imageId = Math.floor((Math.random() * 10));49 if (!cellEl.classList.contains('on')) {50 cellEl.classList.add('fruit')51 cellEl.setAttribute("style", "background-image: url(img/" + imageId + ".png);")52 }53 }54 getCellElemByCoordinates(cellCoords: Array<number>)55 {56 let row = cellCoords[0]57 let col = cellCoords[1]58 let index = (row - 1) * this.cols + col - 159 let allCells = document.querySelectorAll('.cell')60 return allCells[index]61 }62 removeFruitCell(cellCoords: Array<number>) {63 const cellEl = this.getCellElemByCoordinates(cellCoords)64 cellEl.classList.remove('fruit');65 }66}...

Full Screen

Full Screen

create-dom-cell.util.ts

Source:create-dom-cell.util.ts Github

copy

Full Screen

1const createDomCell = ({ id, cls, bg, size }: { id: string, cls: string, bg: string, size: number }): HTMLDivElement => {2 const cellEl = document.createElement('div') as HTMLDivElement;3 cellEl.style.width = `${size}px`;4 cellEl.style.height = `${size}px`;5 cellEl.style.border = '1px black solid';6 cellEl.style.background = bg;7 cellEl.id = id;8 cellEl.classList.add(cls);9 return cellEl;10};...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { cellEl } from 'ng-mocks';2import { find } from 'ng-mocks';3import { findInstance } from 'ng-mocks';4import { findInput } from 'ng-mocks';5import { findOutput } from 'ng-mocks';6import { findReadonlyProperty } from 'ng-mocks';7import { findReadonlyPropertyDescriptor } from 'ng-mocks';8import { findRenderedText } from 'ng-mocks';9import { findRenderedNodes } from 'ng-mocks';10import { findRenderedDirective } from 'ng-mocks';11import { findRenderedComponent } from 'ng-mocks';12import { findRenderedComponents } from 'ng-mocks';13import { findRenderedDirective } from 'ng-mocks';14import { findRenderedDirectives } from 'ng-mocks';15import { findRenderedElement } from 'ng-mocks';16import { findRenderedElements } from 'ng-mocks';17import { findRenderedInstances } from 'ng-mocks';18import { findRenderedInstance } from 'ng-mocks';19import { findRenderedInputs } from 'ng-mocks';20import {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const cellEl = ngMocks.find('td').nativeElement;2const cellEl = ngMocks.find('td').nativeElement;3const cellEl = ngMocks.find('td').nativeElement;4const cellEl = ngMocks.find('td').nativeElement;5const cellEl = ngMocks.find('td').nativeElement;6const cellEl = ngMocks.find('td').nativeElement;7const cellEl = ngMocks.find('td').nativeElement;8const cellEl = ngMocks.find('td').nativeElement;9const cellEl = ngMocks.find('td').nativeElement;10const cellEl = ngMocks.find('td').nativeElement;11const cellEl = ngMocks.find('td').nativeElement;12const cellEl = ngMocks.find('td').nativeElement;13const cellEl = ngMocks.find('td').nativeElement;14const cellEl = ngMocks.find('td').nativeElement;15const cellEl = ngMocks.find('td').nativeElement;16const cellEl = ngMocks.find('td').nativeElement;17const cellEl = ngMocks.find('td').nativeElement;18const cellEl = ngMocks.find('td').nativeElement;

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { cellEl } from 'ng-mocks';2describe('Test', () => {3 it('should find cell element', () => {4 const fixture = MockRender(`5 `);6 const cell = cellEl(fixture.debugElement, 0, 0);7 expect(cell.nativeElement.textContent).toBe('Cell');8 });9});10import { cellEl } from 'ng-mocks';11describe('Test', () => {12 it('should find cell element', () => {13 const fixture = MockRender(`14 `);15 const cell = cellEl(fixture.debugElement, 0, 0);16 expect(cell.nativeElement.textContent).toBe('Cell');17 });18});19import { cellEl } from 'ng-mocks';20describe('Test', () => {21 it('should find cell element', () => {22 const fixture = MockRender(`23 `);24 const cell = cellEl(fixture.debugElement, 0, 0);25 expect(cell.nativeElement.textContent).toBe('Cell');26 });27});28import { cellEl } from 'ng-mocks';29describe('Test', () => {30 it('should find cell element', () => {31 const fixture = MockRender(`32 `);33 const cell = cellEl(fixture.debugElement, 0, 0);34 expect(cell.nativeElement.textContent).toBe('Cell');35 });36});37import { cellEl } from 'ng-mocks';38describe('Test', () => {39 it('should find cell element', () => {40 const fixture = MockRender(`

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { cellEl } from 'ng-mocks';2describe('MyComponent', () => {3 it('should have a cell', () => {4 const fixture = MockRender(`5 `);6 expect(cellEl(fixture.debugElement)).toHaveText('cell');7 });8});9import { Component } from '@angular/core';10@Component({11})12export class MyComponent {}

Full Screen

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run ng-mocks automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful