Skip to content

Automated testing with Mocha #152

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

Merged
merged 4 commits into from
Jun 21, 2020
Merged

Automated testing with Mocha #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c82f0f1
Update 05-testing-mocha article.md and task.md
alexseik Apr 10, 2020
603aefe
Merge branch 'master' into master
vplentinax Jun 17, 2020
a1b8641
1.3.5 testing // atualiz article by joaquienlio
joaquinelio Jun 21, 2020
e7d3f06
Update solution.md
joaquinelio Jun 21, 2020
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
32 changes: 16 additions & 16 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.
El test demuestra una tentación habitual del/a desarrollador/a al escribir tests.

What we have here is actually 3 tests, but layed out as a single function with 3 asserts.
Lo que tenemos aquí son en realidad 3 pruebas, pero presentadas como una sola función con 3 afirmaciones.

Sometimes it's easier to write this way, but if an error occurs, it's much less obvious what went wrong.
A veces es más fácil escribir de esta manera, pero si ocurre un error, es mucho menos obvio saber qué salió mal.

If an error happens in the middle of a complex execution flow, then we'll have to figure out the data at that point. We'll actually have to *debug the test*.
Si un error ocurre en el medio de un flujo de ejecución complejo, tendremos que imaginar los datos en tal punto. Tendremos, en realidad, que hacer un *debug del test*

It would be much better to break the test into multiple `it` blocks with clearly written inputs and outputs.
Sería mucho mejor dividir la prueba en múltiples bloques 'it' con entradas y salidas claramente escritas.

Like this:
Como esto:
```js
describe("Raises x to power n", function() {
it("5 in the power of 1 equals 5", function() {
describe("Eleva x a la potencia n", function() {
it("5 elevado a 1 es igual a 5", function() {
assert.equal(pow(5, 1), 5);
});

it("5 in the power of 2 equals 25", function() {
it("5 elevado a 2 es 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 es 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.
Reemplazamos el único `it` por un `describe` y agrupamos los bloques `it` dentro. Ahora si algo sale mal, podemos ver claramente qué dato fue.

Also we can isolate a single test and run it in standalone mode by writing `it.only` instead of `it`:
Además podemos aislar un único test y ejecutarlo individualmente escribiendo `it.only` en lugar de `it`:


```js
describe("Raises x to power n", function() {
it("5 in the power of 1 equals 5", function() {
it("5 elevado a 1 es 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() {
// Mocha sólo ejecutará este bloque
it.only("5 elevado a 2 es 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 es 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?
# ¿Qué esta mal en el test?

What's wrong in the test of `pow` below?
¿Qué es incorrecto en el test de `pow` de abajo?

```js
it("Raises x to the power n", function() {
it("Eleva x a la potencia 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. El test es sintácticamente correcto y pasa.
298 changes: 149 additions & 149 deletions 1-js/03-code-quality/05-testing-mocha/article.md
View file
Open in desktop

Large diffs are not rendered by default.

17 changes: 8 additions & 9 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,30 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<!-- incluir css para mocha, para mostrar los resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- incluir el código del framework mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
mocha.setup('bdd');
mocha.setup('bdd'); // configuración mínima
</script>
<!-- add chai -->
<!-- incluir 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 tiene un montón de cosas, hacemos assert global
let assert = chai.assert;
</script>
</head>

<body>

<!-- the script with tests (describe, it...) -->
<!-- el fichero con los tests (describe, it...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- el elemento con id="mocha" que contendrá los resultados de los tests -->
<div id="mocha"></div>

<!-- run tests! -->
<!-- ¡ejecutamos los tests! -->
<script>
mocha.run();
</script>
Expand Down
8 changes: 4 additions & 4 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,10 +1,10 @@
describe("test", function() {

before(() => alert("Testing started – before all tests"));
after(() => alert("Testing finished – after all tests"));
before(() => alert("Inicio testing – antes de todos los tests"));
after(() => alert("Final testing – después de todos los tests"));

beforeEach(() => alert("Before a test – enter a test"));
afterEach(() => alert("After a test – exit a test"));
beforeEach(() => alert("Antes de un test – entramos al test"));
afterEach(() => alert("Después de un test – salimos del test"));

it('test 1', () => alert(1));
it('test 2', () => alert(2));
Expand Down
18 changes: 9 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,17 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<!-- incluir css para mocha, para mostrar los resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- incluir el código del framework mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
mocha.setup('bdd'); // minimal setup
mocha.setup('bdd'); // configuración mínima
</script>
<!-- add chai -->
<!-- incluir 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 tiene un montón de cosas, hacemos assert global
let assert = chai.assert;
</script>
</head>
Expand All @@ -20,17 +20,17 @@

<script>
function pow(x, n) {
/* function code is to be written, empty now */
/* código a escribir de la función, de momento vacío */
}
</script>

<!-- the script with tests (describe, it...) -->
<!-- el script con los tests (describe, it...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- el elemento con id="mocha" que contiene los resultados de los tests -->
<div id="mocha"></div>

<!-- run tests! -->
<!-- ¡ejectuar los tests! -->
<script>
mocha.run();
</script>
Expand Down
19 changes: 9 additions & 10 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,17 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<!-- incluir css para mocha, para mostrar los resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- incluir el código del framework mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
mocha.setup('bdd');
mocha.setup('bdd'); // configuración mínima
</script>
<!-- add chai -->
<!-- incluir 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 tiene un montón de cosas, hacemos assert global
let assert = chai.assert;
</script>
</head>
Expand All @@ -21,17 +20,17 @@

<script>
function pow(x, n) {
/* function code is to be written, empty now */
/* código a escribir de la función, de momento vacío */
}
</script>

<!-- the script with tests (describe, it...) -->
<!-- el script con los tests (describe, it...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- el elemento con id="mocha" que contiene los resultados de los tests -->
<div id="mocha"></div>

<!-- run tests! -->
<!-- ¡ejectuar los tests! -->
<script>
mocha.run();
</script>
Expand Down
2 changes: 1 addition & 1 deletion 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() {

it("raises to n-th power", function() {
it("eleva a la n-esima potencia", function() {
assert.equal(pow(2, 3), 8);
});

Expand Down
20 changes: 9 additions & 11 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,37 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<!-- incluir css para mocha, para mostrar los resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- incluir el código del framework mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
mocha.setup('bdd');
mocha.setup('bdd'); // configuración mínima
</script>
<!-- add chai -->
<!-- incluir 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 tiene un montón de cosas, hacemos assert global
let assert = chai.assert;
</script>
</head>

<body>

<script>
function pow(x, n) {
return 8; // :) we cheat!
return 8; // :) ¡hacemos trampas!
}
</script>

<!-- the script with tests (describe, it...) -->
<!-- el fichero con los tests (describe, it...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- el elemento con id="mocha" que contendrá los resultados de los tests -->
<div id="mocha"></div>

<!-- run tests! -->
<!-- ¡ejecutamos los tests! -->
<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,11 +1,11 @@
describe("pow", function() {

it("2 raised to power 3 is 8", function() {
it("2 elevado a la potencia de 3 es 8", function() {
assert.equal(pow(2, 3), 8);
});

it("3 raised to power 4 is 81", function() {
assert.equal(pow(3, 4), 81);
it("3 elevado a la potencia de 3 es 27", function() {
assert.equal(pow(3, 3), 27);
});

});
17 changes: 8 additions & 9 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,17 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<!-- incluir css para mocha, para mostrar los resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- incluir el código del framework mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
mocha.setup('bdd');
mocha.setup('bdd'); // configuración mínima
</script>
<!-- add chai -->
<!-- incluir 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 tiene un montón de cosas, hacemos assert global
let assert = chai.assert;
</script>
</head>
Expand All @@ -31,13 +30,13 @@
}
</script>

<!-- the script with tests (describe, it...) -->
<!-- el fichero con los tests (describe, it...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- el elemento con id="mocha" que contendrá los resultados de los tests -->
<div id="mocha"></div>

<!-- run tests! -->
<!-- ¡ejecutamos los tests! -->
<script>
mocha.run();
</script>
Expand Down
2 changes: 1 addition & 1 deletion 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
Expand Up @@ -2,7 +2,7 @@ describe("pow", function() {

function makeTest(x) {
let expected = x * x * x;
it(`${x} in the power 3 is ${expected}`, function() {
it(`${x} elevado a 3 es ${expected}`, function() {
assert.equal(pow(x, 3), expected);
});
}
Expand Down
17 changes: 8 additions & 9 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,18 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<!-- incluir css para mocha, para mostrar los resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- incluir el código del framework mocha -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
mocha.setup('bdd');
mocha.setup('bdd'); // configuración mínima
</script>
<!-- add chai -->
<!-- incluir 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 tiene un montón de cosas, hacemos assert global
let assert = chai.assert;
</script>
</head>
Expand All @@ -31,13 +30,13 @@
}
</script>

<!-- the script with tests (describe, it...) -->
<!-- el fichero con los tests (describe, it...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- el elemento con id="mocha" que contendrá los resultados de los tests -->
<div id="mocha"></div>

<!-- run tests! -->
<!-- ¡ejecutamos los tests! -->
<script>
mocha.run();
</script>
Expand Down
Loading