◐ Shell
reader mode source ↗
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
File filter
Conversations
Jump to
Diff view
Apply and reload
Show whitespace
Diff view
Apply and reload
34 changes: 17 additions & 17 deletions 1-js/03-code-quality/05-testing-mocha/3-pow-test-wrong/solution.md
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.

What we have here is actually 3 tests, but layed out as a single function with 3 asserts.

Sometimes it's easier to write this way, but if an error occurs, it's much less obvious what went wrong.

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*.

It would be much better to break the test into multiple `it` blocks with clearly written inputs and outputs.

Like this:
```js
describe("Raises x to power n", function() {
it("5 in the power of 1 equals 5", function() {
assert.equal(pow(5, 1), 5);
});

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

it("5 in the power of 3 equals 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.

Also we can isolate a single test and run it in standalone mode by writing `it.only` instead of `it`:


```js
describe("Raises x to power n", function() {
it("5 in the power of 1 equals 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() {
assert.equal(pow(5, 2), 25);
});
*/!*

it("5 in the power of 3 equals 125", function() {
assert.equal(pow(5, 3), 125);
});
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ importance: 5

---

# What's wrong in the test?

What's wrong in the test of `pow` below?

```js
it("Raises x to the power 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.
294 changes: 147 additions & 147 deletions 1-js/03-code-quality/05-testing-mocha/article.md
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
mocha.setup('bdd');
</script>
<!-- add 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
let assert = chai.assert;
</script>
</head>

<body>

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

<!-- the element with id="mocha" will contain test results -->
<div id="mocha"></div>

<!-- run tests! -->
<script>
mocha.run();
</script>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
describe("test", function() {

before(() => alert("Testing startedbefore all tests"));
after(() => alert("Testing finishedafter all tests"));

beforeEach(() => alert("Before a test – enter a test"));
afterEach(() => alert("After a test – exit a 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/pow-1.view/index.html
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
mocha.setup('bdd');
</script>
<!-- add 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
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 */
}
</script>

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

<!-- the element with id="mocha" will contain test results -->
<div id="mocha"></div>

<!-- run 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
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
describe("pow", function() {

it("raises to n-th power", 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
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
mocha.setup('bdd');
</script>
<!-- add 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
let assert = chai.assert;
</script>
</head>
Expand All @@ -21,17 +21,17 @@

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

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

<!-- the element with id="mocha" will contain test results -->
<div id="mocha"></div>

<!-- run tests! -->
<script>
mocha.run();
</script>
2 changes: 1 addition & 1 deletion 1-js/03-code-quality/05-testing-mocha/pow-3.view/test.js
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() {
assert.equal(pow(x, 3), expected);
});
}
Expand Down
16 changes: 8 additions & 8 deletions 1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
mocha.setup('bdd');
</script>
<!-- add 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
let assert = chai.assert;
</script>
</head>
Expand All @@ -31,13 +31,13 @@
}
</script>

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

<!-- the element with id="mocha" will contain test results -->
<div id="mocha"></div>

<!-- run tests! -->
<script>
mocha.run();
</script>
Expand Down
Loading
Toggle all file notes Toggle all file annotations