Skip to content

Automated testing with Mocha #75

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 2 commits into from
Closed

Automated testing with Mocha #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
24292da
add tanslation to Automated testing with Mocha directory files
odsantos Oct 15, 2019
270ebf3
Update article.md
odsantos Oct 28, 2019
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
34 changes: 17 additions & 17 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,49 +1,49 @@
The test demonstrates one of the temptations a developer meets when writing tests.
O teste, demonstra uma das tentações que um desenvolvedor pode ter ao escrever testes.

What we have here is actually 3 tests, but layed out as a single function with 3 asserts.
O que na verdade temos aqui são 3 testes, mas estruturados utilizando uma única função com 3 asserts.

Sometimes it's easier to write this way, but if an error occurs, it's much less obvious what went wrong.
Por vezes, é mais fácil escrever desta forma, mas se algum erro ocorrer, é muito menos óbvio o que houve de errado.

If an error happens inside a complex execution flow, then we'll have to figure out the data at that point. We'll actually have to *debug the test*.
Se um erro ocorrer dentro de uma execução de um fluxo complexo, então teremos de adivinhar quais os dados nessa altura. Na verdade, temos de efetuar uma *depuração de erros ao teste* (*debug the test*).

It would be much better to break the test into multiple `it` blocks with clearly written inputs and outputs.
Seria muito melhor particionar (*break*) o teste em múltiplos blocos `it` com entrada de dados (*input*) e saída de dados (*output*) claramente escritas.

Like this:
Desta forma:
```js
describe("Raises x to power n", function() {
it("5 in the power of 1 equals 5", function() {
describe("Eleva x à potência de n", function() {
it("5 elevado a 1 é igual a 5", function() {
assert.equal(pow(5, 1), 5);
});

it("5 in the power of 2 equals 25", function() {
it("5 elevado a of 2 é igual a 25", function() {
assert.equal(pow(5, 2), 25);
});

it("5 in the power of 3 equals 125", function() {
it("5 elevado a of 3 é igual a 125", function() {
assert.equal(pow(5, 3), 125);
});
});
```

We replaced the single `it` with `describe` and a group of `it` blocks. Now if something fails we would see clearly what the data was.
Nós substituimos um único `it` por `describe` e um grupo de blocos `it`. Então, se algo falhasse, poderíamos claramente ver que dados existiriam.

Also we can isolate a single test and run it in standalone mode by writing `it.only` instead of `it`:
Também podemos isolar um único teste, e executá-lo no modo *standalone* escrevendo `it.only` em vez de `it`:


```js
describe("Raises x to power n", function() {
it("5 in the power of 1 equals 5", function() {
describe("Eleva x à potência de n", function() {
it("5 elevado a 1 é igual a 5", function() {
assert.equal(pow(5, 1), 5);
});

*!*
// Mocha will run only this block
it.only("5 in the power of 2 equals 25", function() {
// O Mocha apenas correrá neste bloco
it.only("5 elevado a 2 é igual a 25", function() {
assert.equal(pow(5, 2), 25);
});
*/!*

it("5 in the power of 3 equals 125", function() {
it("5 elevado a 3 é igual a 125", function() {
assert.equal(pow(5, 3), 125);
});
});
Expand Down
8 changes: 4 additions & 4 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
Expand Up @@ -2,12 +2,12 @@ importance: 5

---

# What's wrong in the test?
# O que há de errado no teste?

What's wrong in the test of `pow` below?
O que há de errado no teste de `pow` abaixo?

```js
it("Raises x to the power n", function() {
it("Eleva x à potência de n", function() {
let x = 5;

let result = x;
Expand All @@ -21,4 +21,4 @@ it("Raises x to the power n", function() {
});
```

P.S. Syntactically the test is correct and passes.
P.S. Sintáticamente, o teste está correto e passa.
294 changes: 147 additions & 147 deletions 1-js/03-code-quality/05-testing-mocha/article.md
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 8 additions & 8 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,31 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<!-- adicione 'css' para mocha, para mostrar os resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- adicione o código da 'framework mocha' -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
// ative o teste em 'bdd-style'
mocha.setup('bdd');
</script>
<!-- add chai -->
<!-- adicione 'chai' -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// chai has a lot of stuff, let's make assert global
// 'chai' contém muitas funcionalidades, façamos o 'assert' global
let assert = chai.assert;
</script>
</head>

<body>

<!-- the script with tests (describe, it...) -->
<!-- o programa ['script'] com os testes ('describe', 'it'...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- o elemento com id="mocha" conterá os resultados do teste -->
<div id="mocha"></div>

<!-- run tests! -->
<!-- execute os testes! -->
<script>
mocha.run();
</script>
Expand Down
14 changes: 7 additions & 7 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,12 +1,12 @@
describe("test", function() {
describe("teste", function() {

before(() => alert("Testing started – before all tests"));
after(() => alert("Testing finished – after all tests"));
before(() => alert("Iniciando os testes – antes de todos os testes"));
after(() => alert("Terminando os testes – depois de todos os testes"));

beforeEach(() => alert("Before a test – enter a test"));
afterEach(() => alert("After a test – exit a test"));
beforeEach(() => alert("Antes de um teste – entrando para um teste"));
afterEach(() => alert("Depois de um teste – saindo de um teste"));

it('test 1', () => alert(1));
it('test 2', () => alert(2));
it('teste 1', () => alert(1));
it('teste 2', () => alert(2));

});
20 changes: 11 additions & 9 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,17 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<!-- adicione 'css' para mocha, para mostrar os resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- adicione o código da 'framework mocha' -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
mocha.setup('bdd'); // minimal setup
// configuração ['setup'] mínima
// ative o teste em 'bdd-style'
mocha.setup('bdd');
</script>
<!-- add chai -->
<!-- adicione 'chai' -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// chai has a lot of stuff, let's make assert global
// 'chai' contém muitas funcionalidades, façamos o 'assert' global
let assert = chai.assert;
</script>
</head>
Expand All @@ -20,17 +22,17 @@

<script>
function pow(x, n) {
/* function code is to be written, empty now */
/* código da função a ser escrito, agora vazio */
}
</script>

<!-- the script with tests (describe, it...) -->
<!-- o programa ['script'] com os testes ('describe', 'it'...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- o elemento com id="mocha" conterá os resultados do teste -->
<div id="mocha"></div>

<!-- run tests! -->
<!-- execute os testes! -->
<script>
mocha.run();
</script>
Expand Down
18 changes: 9 additions & 9 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,18 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<!-- adicione 'css' para mocha, para mostrar os resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- adicione o código da 'framework mocha' -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
// ative o teste em 'bdd-style'
mocha.setup('bdd');
</script>
<!-- add chai -->
<!-- adicione 'chai' -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// chai has a lot of stuff, let's make assert global
// 'chai' contém muitas funcionalidades, façamos o 'assert' global
let assert = chai.assert;
</script>
</head>
Expand All @@ -21,17 +21,17 @@

<script>
function pow(x, n) {
/* function code is to be written, empty now */
/* código da função a ser escrito, agora vazio */
}
</script>

<!-- the script with tests (describe, it...) -->
<!-- o programa ['script'] com os testes ('describe', 'it'...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- o elemento com id="mocha" conterá os resultados do teste -->
<div id="mocha"></div>

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

it("raises to n-th power", function() {
it("eleva à n-ésima potência", function() {
assert.equal(pow(2, 3), 8);
});

Expand Down
18 changes: 9 additions & 9 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,18 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<!-- adicione 'css' para mocha, para mostrar os resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- adicione o código da 'framework mocha' -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
// ative o teste em 'bdd-style'
mocha.setup('bdd');
</script>
<!-- add chai -->
<!-- adicione 'chai' -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// chai has a lot of stuff, let's make assert global
// 'chai' contém muitas funcionalidades, façamos o 'assert' global
let assert = chai.assert;
</script>
</head>
Expand All @@ -21,17 +21,17 @@

<script>
function pow(x, n) {
return 8; // :) we cheat!
return 8; // :) aldrabámos!
}
</script>

<!-- the script with tests (describe, it...) -->
<!-- o programa ['script'] com os testes ('describe', 'it'...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- o elemento com id="mocha" conterá os resultados do teste -->
<div id="mocha"></div>

<!-- run tests! -->
<!-- execute os testes! -->
<script>
mocha.run();
</script>
Expand Down
6 changes: 3 additions & 3 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() {
describe("potência", function() {

it("2 raised to power 3 is 8", function() {
it("2 elevado a 3 são 8", function() {
assert.equal(pow(2, 3), 8);
});

it("3 raised to power 3 is 27", function() {
it("3 elevado a 3 são 27", function() {
assert.equal(pow(3, 3), 27);
});

Expand Down
16 changes: 8 additions & 8 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,18 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<!-- adicione 'css' para mocha, para mostrar os resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- adicione o código da 'framework mocha' -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
// ative o teste em 'bdd-style'
mocha.setup('bdd');
</script>
<!-- add chai -->
<!-- adicione 'chai' -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<script>
// chai has a lot of stuff, let's make assert global
// 'chai' contém muitas funcionalidades, façamos o 'assert' global
let assert = chai.assert;
</script>
</head>
Expand All @@ -31,13 +31,13 @@
}
</script>

<!-- the script with tests (describe, it...) -->
<!-- o programa ['script'] com os testes ('describe', 'it'...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- o elemento com id="mocha" conterá os resultados do teste -->
<div id="mocha"></div>

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

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