diff --git a/1-js/03-code-quality/05-testing-mocha/.article.md.kate-swp b/1-js/03-code-quality/05-testing-mocha/.article.md.kate-swp new file mode 100644 index 0000000000..22fbbab4eb Binary files /dev/null and b/1-js/03-code-quality/05-testing-mocha/.article.md.kate-swp differ diff --git a/1-js/03-code-quality/05-testing-mocha/article.md b/1-js/03-code-quality/05-testing-mocha/article.md index 4c2b1aa5e3..5a2eb493ea 100644 --- a/1-js/03-code-quality/05-testing-mocha/article.md +++ b/1-js/03-code-quality/05-testing-mocha/article.md @@ -59,7 +59,7 @@ A spec has three main building blocks that you can see above: `assert.equal(value1, value2)` : The code inside `it` block, if the implementation is correct, should execute without errors. - Functions `assert.*` are used to check whether `pow` works as expected. Right here we're using one of them -- `assert.equal`, it compares arguments and yields an error if they are not equal. Here it checks that the result of `pow(2, 3)` equals `8`. There are other types of comparisons and checks, that we'll add later. +Functions `assert.*` are used to check whether `pow` works as expected. Right here we're using one of them -- `assert.equal`, it compares arguments and yields an error if they are not equal. Here it checks that the result of `pow(2, 3)` equals `8`. There are other types of comparisons and checks, that we'll add later. The specification can be executed, and it will run the test specified in `it` block. We'll see that later. @@ -93,7 +93,46 @@ These libraries are suitable for both in-browser and server-side testing. Here w The full HTML page with these frameworks and `pow` spec: -```html src="index.html" +```html + + + + + + + + + + + + + +
+ + + + + + + + + + + +

AltStyle によって変換されたページ (->オリジナル) /

+ + ``` The page can be divided into five parts: @@ -106,7 +145,7 @@ The page can be divided into five parts: The result: -[iframe height=250 src="pow-1" border=1 edit] +![pow-1](./pow-1.view/pow-1.png) As of now, the test fails, there's an error. That's logical: we have an empty function code in `pow`, so `pow(2,3)` returns `undefined` instead of `8`. @@ -124,7 +163,7 @@ function pow(x, n) { Wow, now it works! -[iframe height=250 src="pow-min" border=1 edit] +![pow-min](./pow-min.view/pow-min.png) ## Improving the spec @@ -180,7 +219,7 @@ So let's continue with the second variant. The result: -[iframe height=250 src="pow-2" edit border="1"] +![pow-2](./pow-2.view/pow-2.png) As we could expect, the second test failed. Sure, our function always returns `8`, while the `assert` expects `81`. @@ -221,7 +260,7 @@ describe("pow", function() { The result: -[iframe height=250 src="pow-3" edit border="1"] +![pow-3](./pow-3.view/pow-3.png) ## Nested describe @@ -257,12 +296,13 @@ describe("pow", function() { The nested `describe` defines a new "subgroup" of tests. In the output we can see the titled indentation: -[iframe height=250 src="pow-4" edit border="1"] +![pow-4](./pow-4.view/pow-4.png) In the future we can add more `it` and `describe` on the top level with helper functions of their own, they won't see `makeTest`. -````smart header="`before/after` and `beforeEach/afterEach`" +```smart header="before/after and beforeEach/afterEach" We can setup `before/after` functions that execute before/after running tests, and also `beforeEach/afterEach` functions that execute before/after *every* `it`. +``` For instance: @@ -294,10 +334,12 @@ After a test – exit a test (afterEach) Testing finished – after all tests (after) ``` -[edit src="beforeafter" title="Open the example in the sandbox."] +![beforeafter](./beforeafter.view/beforeafter.png) + +Please open the `beforeafter.view/index.html` file Usually, `beforeEach/afterEach` and `before/after` are used to perform initialization, zero out counters or do something else between the tests (or test groups). -```` + ## Extending the spec @@ -331,7 +373,7 @@ describe("pow", function() { The result with new tests: -[iframe height=530 src="pow-nan" edit border="1"] +![pow-nan](./pow-nan.view/pow-nan.png) The newly added tests fail, because our implementation does not support them. That's how BDD is done: first we write failing tests, and then make an implementation for them. @@ -369,9 +411,7 @@ function pow(x, n) { Now it works, all tests pass: -[iframe height=300 src="pow-full" edit border="1"] - -[edit src="pow-full" title="Open the full final example in the sandbox."] +![pow-full](./pow-full.view/pow-full.png) ## Summary diff --git a/1-js/03-code-quality/05-testing-mocha/beforeafter.view/beforeafter.png b/1-js/03-code-quality/05-testing-mocha/beforeafter.view/beforeafter.png new file mode 100644 index 0000000000..d517f9567c Binary files /dev/null and b/1-js/03-code-quality/05-testing-mocha/beforeafter.view/beforeafter.png differ diff --git a/1-js/03-code-quality/05-testing-mocha/pow-1.view/pow-1.png b/1-js/03-code-quality/05-testing-mocha/pow-1.view/pow-1.png new file mode 100644 index 0000000000..5303de4ed9 Binary files /dev/null and b/1-js/03-code-quality/05-testing-mocha/pow-1.view/pow-1.png differ diff --git a/1-js/03-code-quality/05-testing-mocha/pow-2.view/pow-2.png b/1-js/03-code-quality/05-testing-mocha/pow-2.view/pow-2.png new file mode 100644 index 0000000000..a803e49633 Binary files /dev/null and b/1-js/03-code-quality/05-testing-mocha/pow-2.view/pow-2.png differ diff --git a/1-js/03-code-quality/05-testing-mocha/pow-3.view/pow-3.png b/1-js/03-code-quality/05-testing-mocha/pow-3.view/pow-3.png new file mode 100644 index 0000000000..26d65bc5cc Binary files /dev/null and b/1-js/03-code-quality/05-testing-mocha/pow-3.view/pow-3.png differ diff --git a/1-js/03-code-quality/05-testing-mocha/pow-4.view/pow-4.png b/1-js/03-code-quality/05-testing-mocha/pow-4.view/pow-4.png new file mode 100644 index 0000000000..16532f50df Binary files /dev/null and b/1-js/03-code-quality/05-testing-mocha/pow-4.view/pow-4.png differ diff --git a/1-js/03-code-quality/05-testing-mocha/pow-full.view/pow-full.png b/1-js/03-code-quality/05-testing-mocha/pow-full.view/pow-full.png new file mode 100644 index 0000000000..b130ce4029 Binary files /dev/null and b/1-js/03-code-quality/05-testing-mocha/pow-full.view/pow-full.png differ diff --git a/1-js/03-code-quality/05-testing-mocha/pow-min.view/pow-min.png b/1-js/03-code-quality/05-testing-mocha/pow-min.view/pow-min.png new file mode 100644 index 0000000000..fb1ea0c62e Binary files /dev/null and b/1-js/03-code-quality/05-testing-mocha/pow-min.view/pow-min.png differ diff --git a/1-js/03-code-quality/05-testing-mocha/pow-nan.view/pow-nan.png b/1-js/03-code-quality/05-testing-mocha/pow-nan.view/pow-nan.png new file mode 100644 index 0000000000..ce52e8e9a5 Binary files /dev/null and b/1-js/03-code-quality/05-testing-mocha/pow-nan.view/pow-nan.png differ