Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Merged
joaquinelio merged 4 commits intojavascript-tutorial:masterfromalexseik:master
Jun 21, 2020
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,49 @@
The testdemonstrates one of the temptations a developer meets when writing tests.
El testdemuestra 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 errorhappens 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 *debugthe test*.
Si un errorocurre en el medio de un flujo de ejecución complejo, tendremos que imaginar los datos en tal punto. Tendremos, en realidad, que hacer un *debugdel 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 xto power n", function() {
it("5in the power of 1 equals 5", function() {
describe("Eleva xa la potencia n", function() {
it("5elevado a 1 es igual a 5", function() {
assert.equal(pow(5, 1), 5);
});

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

it("5in the power of 3 equals 125", function() {
it("5elevado 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 singletestand run it in standalone mode by writing`it.only`instead of `it`:
Además podemos aislar un únicotesty ejecutarlo individualmente escribiendo`it.only`en lugar de `it`:


```js
describe("Raises x to power n", function() {
it("5in the power of 1 equals 5", function() {
it("5elevado a 1 es igual a 5", function() {
assert.equal(pow(5, 1), 5);
});

*!*
// Mochawill run only this block
it.only("5in the power of 2 equals 25", function() {
// Mochasólo ejecutará este bloque
it.only("5elevado a 2 es igual a 25", function() {
assert.equal(pow(5, 2), 25);
});
*/!*

it("5in the power of 3 equals 125", function() {
it("5elevado a 3 es igual a 125", function() {
assert.equal(pow(5, 3), 125);
});
});
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff 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 thetestof `pow`below?
¿Qué es incorrecto en eltestde `pow`de abajo?

```js
it("Raises xto the power n", function() {
it("Eleva xa 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 thetestis correct and passes.
P.S.Eltestes sintácticamente correcto y pasa.
298 changes: 149 additions & 149 deletions1-js/03-code-quality/05-testing-mocha/article.md
View file
Open in desktop

Large diffs are not rendered by default.

View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<!--add mochacss, to show results -->
<!--incluircss para mocha, para mostrar los resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!--add mochaframeworkcode -->
<!--incluir el código delframeworkmocha -->
<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>
// chaihas a lot of stuff, let's make assert global
// chaitiene 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
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
describe("test", function() {

before(() => alert("Testing startedbefore all tests"));
after(() => alert("Testing finishedafter all tests"));
before(() => alert("Inicio testingantes de todos los tests"));
after(() => alert("Final testingdespués de todos los tests"));

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

it('test 1', () => alert(1));
it('test 2', () => alert(2));
Expand Down
18 changes: 9 additions & 9 deletions1-js/03-code-quality/05-testing-mocha/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<!--add mochacss, to show results -->
<!--incluircss para mocha, para mostrar los resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!--add mochaframeworkcode -->
<!--incluir el código delframeworkmocha -->
<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>
// chaihas a lot of stuff, let's make assert global
// chaitiene 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 scriptwith tests (describe, it...) -->
<!--el scriptcon 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 deletions1-js/03-code-quality/05-testing-mocha/pow-1.view/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<!--add mochacss, to show results -->
<!--incluircss para mocha, para mostrar los resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!--add mochaframeworkcode -->
<!--incluir el código delframeworkmocha -->
<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>
// chaihas a lot of stuff, let's make assert global
// chaitiene 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 scriptwith tests (describe, it...) -->
<!--el scriptcon 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletions1-js/03-code-quality/05-testing-mocha/pow-2.view/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<!--add mochacss, to show results -->
<!--incluircss para mocha, para mostrar los resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!--add mochaframeworkcode -->
<!--incluir el código delframeworkmocha -->
<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>
// chaihas a lot of stuff, let's make assert global
// chaitiene 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 deletions1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
describe("pow", function() {

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

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

});
17 changes: 8 additions & 9 deletions1-js/03-code-quality/05-testing-mocha/pow-3.view/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<!--add mochacss, to show results -->
<!--incluircss para mocha, para mostrar los resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!--add mochaframeworkcode -->
<!--incluir el código delframeworkmocha -->
<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>
// chaihas a lot of stuff, let's make assert global
// chaitiene 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletions1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<!--add mochacss, to show results -->
<!--incluircss para mocha, para mostrar los resultados -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!--add mochaframeworkcode -->
<!--incluir el código delframeworkmocha -->
<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>
// chaihas a lot of stuff, let's make assert global
// chaitiene 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

[8]ページ先頭

©2009-2025 Movatter.jp