Dia 64/2019 - Jest

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 64, mostrando o uso do Jest.

Código

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
class MemoryGame {
constructor(props) {
this.$board = props.board;

this.items = props.items;
this.itemClass = props.itemClass;
this.getHTML = props.getHTML;
this.endMessage = props.endMessage;

this.cardsValues = [];
this.selectedCards = [];
this.cardsFlipped = 0;
this.output = '';

this.cards = this.initCards();

this.toFlipDown = this.toFlipDown.bind(this);
}

initCards() {
return [...this.items, ...this.items];
}

init() {
this.cardsFlipped = 0;
this.output = '';
this.cards = this.shuffle(this.cards);

this.$board.innerHTML = this.createCards(this.cards);
this.handleClick();

return this.cards;
}

shuffle(cards){
let currentIndex = cards.length, temporaryValue, randomIndex;

while(currentIndex !== 0){
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = cards[currentIndex];
cards[currentIndex] = cards[randomIndex];
cards[randomIndex] = temporaryValue;
}

return cards;
}

handleClick(){
const $cards = document.querySelectorAll(this.itemClass);

for (let i = 0, len = $cards.length; i < len; i++) {
$cards[i].addEventListener('click', evt => {
this.toFlipUp(evt.target, evt.target.getAttribute('data-value'));
});
}

return $cards.length;
}

createCards(cards){
for(let i = 0; i < cards.length; i++){
this.output += this.getHTML(i, cards[i]);
}

return this.output;
}

pairMade(cards){
this.cardsFlipped += 2;

this.cardsValues = [];
this.selectedCards = [];

if(this.cardsFlipped == cards.length){
this.$board.innerHTML = "";
this.init();
return this.endMessage;
}

return false;
}

toFlipDown(){
const card1 = document.querySelector(`[data-id="${this.selectedCards[0]}"]`);
const card2 = document.querySelector(`[data-id="${this.selectedCards[1]}"]`);

this.styleFlipDown(card1);
this.styleFlipDown(card2);

this.cardsValues = [];
this.selectedCards = [];
}

toFlipUp(card, value){
if(card.innerHTML == "" && this.cardsValues.length < 2){
this.styleFlipUp(card, value);

if(this.cardsValues.length < 2){
this.cardsValues.push(value);
this.selectedCards.push(card.getAttribute('data-id'));
}

if(this.cardsValues.length == 2){
if(this.cardsValues[0] == this.cardsValues[1]){
this.pairMade(this.cards);
} else {
setTimeout(this.toFlipDown, 800);
}
}
}
}

// style
styleFlipUp(card, value){
card.style.background = '#fff';
card.innerHTML = value;
}

styleFlipDown(card){
card.style.background = '#000';
card.innerHTML = "";
}
}

module.exports = MemoryGame;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
// Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
// It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
// https://jestjs.io/
const MemoryGame = require('./memory-game');

let memoryGame;

describe('Memory Game', () => {
beforeEach(() => {
document.body.innerHTML = `
<div id="game-board"></div>
`;

memoryGame = new MemoryGame({
board: document.getElementById("game-board"),
items: ['A','B','C','D','E'],
itemClass: '.card',
getHTML: (index, value) => `<div class="card" data-id="card-${index}" data-value="${value}"></div>`,
endMessage: 'O jogo acabou!!'
});
});

it('memoryGame.init', () => {
expect(memoryGame.init().constructor).toBe(Array);
expect(memoryGame.init().length).toBe(10);
});

it('memoryGame.handleClick', () => {
memoryGame.init();
document.querySelector('[data-id="card-2"]').click();

expect(memoryGame.selectedCards[0]).toBe('card-2');
expect(memoryGame.cardsValues[0]).toBe(document.querySelector('[data-id="card-2"]').innerHTML);
});

it('memoryGame.shuffle', () => {
memoryGame.init();

const cards = memoryGame.initCards();
const cards1 = [...cards];

expect(cards).not.toBe(memoryGame.shuffle(cards1));
expect(memoryGame.shuffle(cards).length).toBe(10);
});

it('memoryGame.pairMade', () => {
memoryGame.init();

const cards = memoryGame.initCards();
expect(memoryGame.pairMade(cards.slice(0,2))).toBe('O jogo acabou!!');
});

it('memoryGame.toFlipUp', () => {
memoryGame.init();
const $card1 = document.querySelector('[data-id="card-2"]');
const $card2 = document.querySelector('[data-id="card-3"]');

$card1.click();
$card2.click();

expect($card1.style.background).toBe("rgb(255, 255, 255)");
expect($card2.style.background).toBe("rgb(255, 255, 255)");
});

it('memoryGame.toFlipDown', done => {
memoryGame.init();

const cards = memoryGame.initCards();
const $card1 = document.querySelector('[data-id="card-2"]');
const $card2 = document.querySelector('[data-id="card-3"]');

$card1.click();
$card2.click();

if ($card1.getAttribute('data-value') !== $card2.getAttribute('data-value')) {
setTimeout(() => {
expect($card1.style.background).toBe("rgb(0, 0, 0)");
expect($card2.style.background).toBe("rgb(0, 0, 0)");
done();
}, 900);
} else {
setTimeout(() => {
expect($card1.style.background).toBe("rgb(255, 255, 255)");
expect($card2.style.background).toBe("rgb(255, 255, 255)");
done();
}, 900);
}
});
});

Conclusão

A postagem original pode ser vista no meu Instagram e o código está acessível no meu Github.

Relacionados

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.