Skip to content

Automated testing with Mocha #164

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 19 commits into from
Closed

Automated testing with Mocha #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
c482fe9
Update testing-mocha
odsantos Aug 16, 2020
c6084ff
Merge branch 'master' into update-testing-mocha
odsantos Aug 24, 2020
b5cec6e
Merge branch 'master' into update-testing-mocha
odsantos Aug 25, 2020
f5f9bf8
Fix highlighted sections.
odsantos Aug 25, 2020
bc55b11
Update translation of Mocha 05-3.
odsantos May 30, 2021
6b0dfb0
Update Mocha translation: beforeafter.
odsantos May 31, 2021
31133cf
Update Mocha tralation: pow-1.
odsantos Jun 1, 2021
85e5bd6
Update Mocha translation: pow-2, pow-3.
odsantos Jun 2, 2021
dc61dac
Update Mocha translation: pow-4.
odsantos Jun 4, 2021
6b18cfc
Update Mocha translation: pow-full.
odsantos Jun 5, 2021
e133f18
Update Mocha translation: pow-min, pow-nan.
odsantos Jun 6, 2021
66f1d5f
Update Mocha translation: index.
odsantos Jun 7, 2021
e47ff04
Update Mocha translation: article.
odsantos Jun 16, 2021
93d519f
Merge branch 'master' into update-testing-mocha
odsantos Jul 12, 2021
b192115
Update "...testing with Mocha" (1)
odsantos Jan 10, 2023
3284753
Update "...testing with Mocha" (2)
odsantos Jan 11, 2023
eff8a37
Update "...testing Mocha" (3)
odsantos Jan 12, 2023
edf739c
Update "...testing with Mocha" (4)
odsantos Jan 13, 2023
1bbe102
Update "...testing with Mocha" article (5)
odsantos Jan 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions 1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
O teste demonstra uma das tentações que um desenvolvedor encontra ao escrever testes.

O que temos aqui são na verdade 3 testes, mas colocados numa única função com 3 *asserts*.
O que aqui temos são na verdade 3 testes, mas colocados numa única função com 3 *asserts*.

Por vezes, é mais fácil escrever desta forma mas, se ocorrer um erro, é menos óbvio ver o que há de errado.
Por vezes, é mais fácil escrever dessa forma mas, se ocorrer um erro, é menos óbvio ver o que está errado.

Se houver um erro dentro de um fluxo de execução complexo, então teremos que procurar entender os dados nessa altura. Teremos, na verdade, que *debug o teste*.
Se houver um erro dentro de um fluxo de execução complexo, então teremos que procurar entender os dados nessa altura. Teremos, na verdade, que fazer o *debug do teste*.

Seria muito melhor repartir o teste em múltiplos blocos `it`, com claramente escritas entradas e saídas.

Expand All @@ -25,9 +25,9 @@ describe("Eleva x à potência n", function() {
});
```

Nós substituimos o único `it` por `describe` e um grupo de blocos `it`. Agora, se algo falhasse, veríamos claramente que dados estariam errados.
Nós substituímos o único `it` por `describe` e um grupo de blocos `it`. Agora, se algo falhar, vemos claramente que dados estão errados.

Também, podemos isolar um único teste e executá-lo num modo à parte (*standalone*) escrevendo `it.only` em vez de `it`:
Também, podemos isolar um único teste e executá-lo à parte (*standalone*) escrevendo `it.only` em vez de `it`:


```js
Expand Down
4 changes: 2 additions & 2 deletions 1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
importância: 5
importance: 5

---

Expand All @@ -21,4 +21,4 @@ it("Eleva x à potência n", function() {
});
```

P.S. Sintáticamente, o teste está correto e passa.
P.S. Sintaticamente, o teste está correto e passa.
94 changes: 44 additions & 50 deletions 1-js/03-code-quality/05-testing-mocha/article.md
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions 1-js/03-code-quality/05-testing-mocha/beforeafter.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<!-- adicione css mocha, para mostrar resultados -->
<!-- adicione css mocha, para mostrar os resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- adicione código da infraestrutura (framework) mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
Expand All @@ -12,17 +12,17 @@
<!-- adicione chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// chai possui muitas funcionalidades, façamos um 'assert' global
// chai possui muitas funcionalidades, vamos fazer um 'assert' global
let assert = chai.assert;
</script>
</head>

<body>

<!-- o código com testes (describe, it...) -->
<!-- o script com os testes (describe, it...) -->
<script src="test.js"></script>

<!-- o elemento com id="mocha" irá conter resultados dos testes -->
<!-- o elemento com id="mocha" irá conter os resultados dos testes -->
<div id="mocha"></div>

<!-- execute os testes! -->
Expand Down
13 changes: 7 additions & 6 deletions 1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
describe("teste", function() {

// Mocha, geralmente espera pelos testes por 2 segundos antes de os considerar errados

this.timeout(200000); // Com este código nós aumentamos esse tempo - neste caso, para 200,000

// Isto, por causa da função "alert", porque se você se demorar a pressionar o botão "OK" oos testes não irão passar!

before(() => alert("Testes iniciados – antes de todos os testes"));
after(() => alert("Testes terminados – depois de todos os testes"));
// Isto, por causa da função "alert", porque se você se demorar a pressionar o botão "OK" os testes não irão passar!
before(() => alert("Testes começam – antes de todos os testes"));
after(() => alert("Testes terminam – depois de todos os testes"));

beforeEach(() => alert("antes de um teste – entrando para um teste"));
afterEach(() => alert("depois de um teste – saindo de um teste"));
beforeEach(() => alert("Antes de um teste – entrando para um teste"));
afterEach(() => alert("Depois de um teste – saindo de um teste"));

it('teste 1', () => alert(1));
it('teste 2', () => alert(2));
Expand Down
17 changes: 11 additions & 6 deletions 1-js/03-code-quality/05-testing-mocha/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<!-- adicione css mocha, para mostrar resultados -->
<!-- adicione css mocha, para mostrar os resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- adicione código da infraestrutura (framework) mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// ative o teste no estilo-bdd (bdd-style)
mocha.setup('bdd');
mocha.setup('bdd'); // setup mínimo
</script>
<!-- adicione chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// chai possui muitas funcionalidades, façamos um 'assert' global
// chai possui muitas funcionalidades, vamos fazer um 'assert' global
let assert = chai.assert;
</script>
</head>

<body>

<!-- o código com testes (describe, it...) -->
<script>
function pow(x, n) {
/* código da função a ser escrito, vazio agora */
}
</script>

<!-- o script com os testes (describe, it...) -->
<script src="test.js"></script>

<!-- o elemento com id="mocha" irá conter resultados dos testes -->
<!-- o elemento com id="mocha" irá conter os resultados dos testes -->
<div id="mocha"></div>

<!-- execute os testes! -->
Expand Down
8 changes: 4 additions & 4 deletions 1-js/03-code-quality/05-testing-mocha/pow-1.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<!-- adicione css mocha, para mostrar resultados -->
<!-- adicione css mocha, para mostrar os resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- adicione código da infraestrutura (framework) mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
Expand All @@ -12,7 +12,7 @@
<!-- adicione chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// chai possui muitas funcionalidades, façamos um 'assert' global
// chai possui muitas funcionalidades, vamos fazer um 'assert' global
let assert = chai.assert;
</script>
</head>
Expand All @@ -25,10 +25,10 @@
}
</script>

<!-- o código com testes (describe, it...) -->
<!-- o script com os testes (describe, it...) -->
<script src="test.js"></script>

<!-- o elemento com id="mocha" irá conter resultados dos testes -->
<!-- o elemento com id="mocha" irá conter os resultados dos testes -->
<div id="mocha"></div>

<!-- execute os testes! -->
Expand Down
12 changes: 6 additions & 6 deletions 1-js/03-code-quality/05-testing-mocha/pow-2.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<!-- adicione css mocha, para mostrar resultados -->
<!-- adicione css mocha, para mostrar os resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- adicione código da infraestrutura (framework) mochae -->
<!-- adicione código da infraestrutura (framework) mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// ative o teste no estilo-bdd (bdd-style)
Expand All @@ -12,7 +12,7 @@
<!-- adicione chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// chai possui muitas funcionalidades, façamos um 'assert' global
// chai possui muitas funcionalidades, vamos fazer um 'assert' global
let assert = chai.assert;
</script>
</head>
Expand All @@ -21,14 +21,14 @@

<script>
function pow(x, n) {
return 8; // :) aldrabámos!
return 8; // :) nós fizemos trapaça!
}
</script>

<!-- o código com testes (describe, it...) -->
<!-- o script com os testes (describe, it...) -->
<script src="test.js"></script>

<!-- o elemento com id="mocha" irá conter resultados dos testes -->
<!-- o elemento com id="mocha" irá conter os resultados dos testes -->
<div id="mocha"></div>

<!-- execute os testes! -->
Expand Down
4 changes: 2 additions & 2 deletions 1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
describe("pow", function() {

it("2 elevado à potência 3 é 8", function() {
it("2 elevado à potência 3 são 8", function() {
assert.equal(pow(2, 3), 8);
});

it("3 elevado à potência 4 é 81", function() {
it("3 elevado à potência 4 são 81", function() {
assert.equal(pow(3, 4), 81);
});

Expand Down
8 changes: 4 additions & 4 deletions 1-js/03-code-quality/05-testing-mocha/pow-3.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<!-- adicione css mocha, para mostrar resultados -->
<!-- adicione css mocha, para mostrar os resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- adicione código da infraestrutura (framework) mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
Expand All @@ -12,7 +12,7 @@
<!-- adicione chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// chai possui muitas funcionalidades, façamos um 'assert' global
// chai possui muitas funcionalidades, vamos fazer um 'assert' global
let assert = chai.assert;
</script>
</head>
Expand All @@ -31,10 +31,10 @@
}
</script>

<!-- o código com testes (describe, it...) -->
<!-- o script com os testes (describe, it...) -->
<script src="test.js"></script>

<!-- o elemento com id="mocha" irá conter resultados dos testes -->
<!-- o elemento com id="mocha" irá conter os resultados dos testes -->
<div id="mocha"></div>

<!-- execute os testes! -->
Expand Down
8 changes: 4 additions & 4 deletions 1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<!-- adicione css mocha, para mostrar resultados -->
<!-- adicione css mocha, para mostrar os resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- adicione código da infraestrutura (framework) mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
Expand All @@ -12,7 +12,7 @@
<!-- adicione chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// chai possui muitas funcionalidades, façamos um 'assert' global
// chai possui muitas funcionalidades, vamos fazer um 'assert' global
let assert = chai.assert;
</script>
</head>
Expand All @@ -31,10 +31,10 @@
}
</script>

<!-- o código com testes (describe, it...) -->
<!-- o script com os testes (describe, it...) -->
<script src="test.js"></script>

<!-- o elemento com id="mocha" irá conter resultados dos testes -->
<!-- o elemento com id="mocha" irá conter os resultados dos testes -->
<div id="mocha"></div>

<!-- execute os testes! -->
Expand Down
8 changes: 4 additions & 4 deletions 1-js/03-code-quality/05-testing-mocha/pow-full.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<!-- adicione css mocha, para mostrar resultados -->
<!-- adicione css mocha, para mostrar os resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- adicione código da infraestrutura (framework) mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
Expand All @@ -12,7 +12,7 @@
<!-- adicione chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// chai possui muitas funcionalidades, façamos um 'assert' global
// chai possui muitas funcionalidades, vamos fazer um 'assert' global
let assert = chai.assert;
</script>
</head>
Expand All @@ -32,10 +32,10 @@
}
</script>

<!-- o código com testes (describe, it...) -->
<!-- o script com os testes (describe, it...) -->
<script src="test.js"></script>

<!-- o elemento com id="mocha" irá conter resultados dos testes -->
<!-- o elemento com id="mocha" irá conter os resultados dos testes -->
<div id="mocha"></div>

<!-- execute os testes! -->
Expand Down
10 changes: 5 additions & 5 deletions 1-js/03-code-quality/05-testing-mocha/pow-min.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<!-- adicione css mocha, para mostrar resultados -->
<!-- adicione css mocha, para mostrar os resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- adicione código da infraestrutura (framework) mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
Expand All @@ -12,7 +12,7 @@
<!-- adicione chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// chai possui muitas funcionalidades, façamos um 'assert' global
// chai possui muitas funcionalidades, vamos fazer um 'assert' global
let assert = chai.assert;
</script>
</head>
Expand All @@ -21,14 +21,14 @@

<script>
function pow() {
return 8; // :) aldrabámos!
return 8; // :) nós fizemos trapaça!
}
</script>

<!-- o código com testes (describe, it...) -->
<!-- o script com os testes (describe, it...) -->
<script src="test.js"></script>

<!-- o elemento com id="mocha" irá conter resultados dos testes -->
<!-- o elemento com id="mocha" irá conter os resultados dos testes -->
<div id="mocha"></div>

<!-- execute os testes! -->
Expand Down
8 changes: 4 additions & 4 deletions 1-js/03-code-quality/05-testing-mocha/pow-nan.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<!-- adicione css mocha, para mostrar resultados -->
<!-- adicione css mocha, para mostrar os resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- adicione código da infraestrutura (framework) mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
Expand All @@ -12,7 +12,7 @@
<!-- adicione chai -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// chai possui muitas funcionalidades, façamos um 'assert' global
// chai possui muitas funcionalidades, vamos fazer um 'assert' global
let assert = chai.assert;
</script>
</head>
Expand All @@ -29,10 +29,10 @@
}
</script>

<!-- o código com testes (describe, it...) -->
<!-- o script com os testes (describe, it...) -->
<script src="test.js"></script>

<!-- o elemento com id="mocha" irá conter resultados dos testes -->
<!-- o elemento com id="mocha" irá conter os resultados dos testes -->
<div id="mocha"></div>

<!-- execute os testes! -->
Expand Down
2 changes: 1 addition & 1 deletion 1-js/03-code-quality/05-testing-mocha/pow-nan.view/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ describe("pow", function() {

function makeTest(x) {
let expected = x * x * x;
it(`${x} na potência 3 é ${expected}`, function() {
it(`${x} na potência 3 são ${expected}`, function() {
assert.equal(pow(x, 3), expected);
});
}
Expand Down