Skip to content
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 our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Automated testing with Mocha #63

Merged
merged 17 commits into from
Mar 6, 2020
Merged
Show file tree
Hide file tree
Changes from 10 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
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.
Що ми маємо тут, це насправді 3 тести, але вони були описані однією функцією з 3 припущеннями.

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.
Було б набагато краще розбити тест на кілька блоків `it` із чітко прописаними вхідними даними та результатами.

Like this:
Наприклад:
```js
describe("Raises x to power n", function() {
it("5 in the power of 1 equals 5", function() {
describe("Підносить до n-нного степеня", function() {
it("5 піднесене до степеня 1 дорівнює 5", function() {
assert.equal(pow(5, 1), 5);
});

it("5 in the power of 2 equals 25", function() {
it("5 піднесене до степеня 2 дорівнює 25", function() {
assert.equal(pow(5, 2), 25);
});

it("5 in the power of 3 equals 125", function() {
it("5 піднесене до степеня 3 дорівнює 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.
Ми замінили один блок `it` на `describe` і групу блоків `it`. Тепер, якщо виникає помилка, ми чітко бачимо, з якими даними вона виникає.

Also we can isolate a single test and run it in standalone mode by writing `it.only` instead of `it`:
Також ми можемо виділити один тест і запустити його в автономному режимі, написавши `it.only` замість` it`:


```js
describe("Raises x to power n", function() {
it("5 in the power of 1 equals 5", function() {
describe("Підносить x до n-нного степеня", function() {
it("5 піднесене до степеня 1 дорівнює 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 запустить лише цей блок
it.only("5 піднесене до степеня 2 дорівнює 25", function() {
assert.equal(pow(5, 2), 25);
});
*/!*

it("5 in the power of 3 equals 125", function() {
it("5 піднесене до степеня 3 дорівнює 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?
Що не так з тестом функціій `pow`, вказаним нижче?

```js
it("Raises x to the power n", function() {
it("Підносить x до 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. Синтаксичних помилок не має і тести проходять.
294 changes: 147 additions & 147 deletions 1-js/03-code-quality/05-testing-mocha/article.md

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<!-- додаємо css стилі для mocha, щоб вивести результати -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- додаємо фреймворк mocha до коду -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
// вмикаємо тестування у bdd стилі
mocha.setup('bdd');
</script>
<!-- add chai -->
<!-- додаємо 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 має багато всього, давайте зробимо assert глобальним
let assert = chai.assert;
</script>
</head>

<body>

<!-- the script with tests (describe, it...) -->
<!-- скрипт з тестами (describe, it...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- елемент з id="mocha" буде містити результати тестів -->
<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"));
before(() => alert("Тестування розпочатоперед усіма тестами"));
after(() => alert("Тестування завершенопісля всіх тестів"));

beforeEach(() => alert("Before a test – enter a test"));
afterEach(() => alert("After a test – exit a test"));
beforeEach(() => alert("Перед тестом – початок тесту"));
afterEach(() => alert("Після тесту – вихід з тесту"));

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
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<!-- додаємо css стилі для mocha, щоб вивести результати -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- додаємо фреймворк 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'); // вмикаємо тестування у bdd стилі
</script>
<!-- add chai -->
<!-- додаємо 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 має багато всього, давайте зробимо assert глобальним
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 */
/* код функції треба написати, поки що цей блок пустий */
}
</script>

<!-- the script with tests (describe, it...) -->
<!-- скрипт з тестами (describe, it...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- елемент з id="mocha" буде містити результати тестів -->
<div id="mocha"></div>

<!-- run tests! -->
<!-- запускаємо тести! -->
<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
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<!-- add mocha css, to show results -->
<!-- додаємо css стилі для mocha, щоб вивести результати -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- додаємо фреймворк mocha до коду -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
// вмикаємо тестування у bdd стилі
mocha.setup('bdd');
</script>
<!-- add chai -->
<!-- додаємо 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 має багато всього, давайте зробимо assert глобальним
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...) -->
<!-- скрипт з тестами (describe, it...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- елемент з id="mocha" буде містити результати тестів -->
<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() {
it("підносить до n-нного степеня", 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 -->
<!-- додаємо css стилі для mocha, щоб вивести результати -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- додаємо фреймворк mocha до коду -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
// вмикаємо тестування у bdd стилі
mocha.setup('bdd');
</script>
<!-- add chai -->
<!-- додаємо 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 має багато всього, давайте зробимо assert глобальним
let assert = chai.assert;
</script>
</head>
Expand All @@ -21,17 +21,17 @@

<script>
function pow(x, n) {
return 8; // :) we cheat!
return 8; // :) це обман!
}
</script>

<!-- the script with tests (describe, it...) -->
<!-- скрипт з тестами (describe, it...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- елемент з id="mocha" буде містити результати тестів -->
<div id="mocha"></div>

<!-- run tests! -->
<!-- запускаємо тести! -->
<script>
mocha.run();
</script>
Expand Down
4 changes: 2 additions & 2 deletions 1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
describe("pow", function() {

it("2 raised to power 3 is 8", function() {
it("2 піднесене до степеня 3 дорівнює 8", function() {
assert.equal(pow(2, 3), 8);
});

it("3 raised to power 4 is 81", function() {
it("3 піднесене до степеня 4 дорівнює 81", function() {
assert.equal(pow(3, 4), 81);
});

Expand Down
16 changes: 8 additions & 8 deletions 1-js/03-code-quality/05-testing-mocha/pow-3.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 -->
<!-- додаємо css стилі для mocha, щоб вивести результати -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- додаємо фреймворк mocha до коду -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
// вмикаємо тестування у bdd стилі
mocha.setup('bdd');
</script>
<!-- add chai -->
<!-- додаємо 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 має багато всього, давайте зробимо assert глобальним
let assert = chai.assert;
</script>
</head>
Expand All @@ -31,13 +31,13 @@
}
</script>

<!-- the script with tests (describe, it...) -->
<!-- скрипт з тестами (describe, it...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- елемент з id="mocha" буде містити результати тестів -->
<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-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() {
it(`${x} піднесене до степеня 3 дорівнює ${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 -->
<!-- додаємо css стилі для mocha, щоб вивести результати -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.css">
<!-- add mocha framework code -->
<!-- додаємо фреймворк mocha до коду -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.2.0/mocha.js"></script>
<script>
// enable bdd-style testing
// вмикаємо тестування у bdd стилі
mocha.setup('bdd');
</script>
<!-- add chai -->
<!-- додаємо 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 має багато всього, давайте зробимо assert глобальним
let assert = chai.assert;
</script>
</head>
Expand All @@ -31,13 +31,13 @@
}
</script>

<!-- the script with tests (describe, it...) -->
<!-- скрипт з тестами (describe, it...) -->
<script src="test.js"></script>

<!-- the element with id="mocha" will contain test results -->
<!-- елемент з id="mocha" буде містити результати тестів -->
<div id="mocha"></div>

<!-- run tests! -->
<!-- запускаємо тести! -->
<script>
mocha.run();
</script>
Expand Down
Loading