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 4c2b1aa5e..3fea44d8b 100644 --- a/1-js/03-code-quality/05-testing-mocha/article.md +++ b/1-js/03-code-quality/05-testing-mocha/article.md @@ -1,147 +1,147 @@ -# Automated testing with Mocha +# Automatisk testning med Mocha -Automated testing will be used in further tasks, and it's also widely used in real projects. +Automatisk testning vil blive brugt i de følgende opgaver, og det er også bredt anvendt i rigtige projekter. -## Why do we need tests? +## Hvorfor har vi brug for tests? -When we write a function, we can usually imagine what it should do: which parameters give which results. +Når vi skriver en funktion, kan vi normalt forestille os, hvad den skal gøre: hvilke parametre giver hvilke resultater. -During development, we can check the function by running it and comparing the outcome with the expected one. For instance, we can do it in the console. +Under udviklingen kan vi kontrollere funktionen ved at køre den og sammenligne resultatet med det forventede. Dette kan vi for eksempel gøre i konsollen. -If something is wrong -- then we fix the code, run again, check the result -- and so on till it works. +Hvis noget er galt -- så retter vi koden, kører igen, tjekker resultatet -- og så videre, indtil det virker. -But such manual "re-runs" are imperfect. +Men sådanne manuelle "genkørsler" er ufuldkomne. -**When testing a code by manual re-runs, it's easy to miss something.** +**Når man tester kode ved manuelle genkørsler, er det let at overse noget.** -For instance, we're creating a function `f`. Wrote some code, testing: `f(1)` works, but `f(2)` doesn't work. We fix the code and now `f(2)` works. Looks complete? But we forgot to re-test `f(1)`. That may lead to an error. +Et eksempel kunne være at vi oprettede en funktion `f`. Skrev noget kode, testede: `f(1)` virker, men `f(2)` virker ikke. Vi retter koden, og nu virker `f(2)`. Ser det komplet ud? Men vi glemte at teste `f(1)` igen. Det kan føre til en fejl. -That's very typical. When we develop something, we keep a lot of possible use cases in mind. But it's hard to expect a programmer to check all of them manually after every change. So it becomes easy to fix one thing and break another one. +Det er meget typisk. Når vi udvikler noget, har vi mange mulige brugsscenarier i tankerne. Men det er svært at forvente, at en programmør manuelt tjekker dem alle efter hver ændring. Så det bliver let at rette én ting og bryde en anden. -**Automated testing means that tests are written separately, in addition to the code. They run our functions in various ways and compare results with the expected.** +**Automatiseret testning betyder, at tests skrives separat, ud over koden. De kører vores funktioner på forskellige måder og sammenligner resultater med det forventede.** ## Behavior Driven Development (BDD) -Let's start with a technique named [Behavior Driven Development](http://en.wikipedia.org/wiki/Behavior-driven_development) or, in short, BDD. +Lad os starte med en teknik kaldet [Behavior Driven Development](http://en.wikipedia.org/wiki/Behavior-driven_development) eller, kort sagt, BDD. -**BDD is three things in one: tests AND documentation AND examples.** +**BDD er tre ting i én: tests OG dokumentation OG eksempler.** -To understand BDD, we'll examine a practical case of development. +For at forstå BDD vil vi undersøge et praktisk udviklingseksempel. -## Development of "pow": the spec +## Udvikling af "pow": specifikationen -Let's say we want to make a function `pow(x, n)` that raises `x` to an integer power `n`. We assume that `n≥0`. +Lad os sige, at vi vil lave en funktion `pow(x, n)`, der hæver `x` til en potens af `n`. Vi antager, at `n≥0`. -That task is just an example: there's the `**` operator in JavaScript that can do that, but here we concentrate on the development flow that can be applied to more complex tasks as well. +Den opgave er bare et eksempel: der findes operatoren `**` i JavaScript, der kan gøre det, men her koncentrerer vi os om udviklingsflowet, som også kan anvendes til mere komplekse opgaver. -Before creating the code of `pow`, we can imagine what the function should do and describe it. +Inden vi skriver koden til `pow`, kan vi forestille os, hvad funktionen skal gøre, og beskrive det. -Such description is called a *specification* or, in short, a spec, and contains descriptions of use cases together with tests for them, like this: +Sådan en beskrivelse kaldes en *specifikation* eller, kort sagt, en spec, og indeholder beskrivelser af brugsscenarier sammen med tests for dem, som dette: ```js describe("pow", function() { - it("raises to n-th power", function() { + it("hæver til n-te potens", function() { assert.equal(pow(2, 3), 8); }); }); ``` -A spec has three main building blocks that you can see above: +En spec har tre hovedbyggesten, som du kan se ovenfor: `describe("title", function() { ... })` -: What functionality we're describing? In our case we're describing the function `pow`. Used to group "workers" -- the `it` blocks. +: Hvilken funktionalitet beskriver vi? I vores tilfælde beskriver vi funktionen `pow`. Bruges til at gruppere "arbejdere" -- `it`-blokkene. -`it("use case description", function() { ... })` -: In the title of `it` we *in a human-readable way* describe the particular use case, and the second argument is a function that tests it. +`it("beskrivelse af brugsscenarie", function() { ... })` +: I titlen af `it` beskriver vi *på en menneskeligt læsbar måde* det specifikke brugsscenarie, og det andet argument er en funktion, der tester det. `assert.equal(value1, value2)` -: The code inside `it` block, if the implementation is correct, should execute without errors. +: Koden inde i `it`-blokken, hvis implementeringen er korrekt, skal køre uden fejl. - 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. + Funktionen `assert.*` bruges til at tjekke, om `pow` fungerer som forventet. Her bruger vi en af dem -- `assert.equal`, den sammenligner argumenter og giver en fejl, hvis de ikke er ens. Her tjekker den, at resultatet af `pow(2, 3)` er lig med `8`. Der findes andre typer sammenligninger og tjek, som vi vil tilføje senere. -The specification can be executed, and it will run the test specified in `it` block. We'll see that later. +Specifikationen kan køres, og den vil køre testen specificeret i `it`-blokken. Det vil vi se senere. -## The development flow +## Udviklingsflowet -The flow of development usually looks like this: +Udviklingsflowet ser normalt sådan ud: -1. An initial spec is written, with tests for the most basic functionality. -2. An initial implementation is created. -3. To check whether it works, we run the testing framework [Mocha](https://mochajs.org/) (more details soon) that runs the spec. While the functionality is not complete, errors are displayed. We make corrections until everything works. -4. Now we have a working initial implementation with tests. -5. We add more use cases to the spec, probably not yet supported by the implementations. Tests start to fail. -6. Go to 3, update the implementation till tests give no errors. -7. Repeat steps 3-6 till the functionality is ready. +1. En indelende specifikation skrives, med tests for den mest grundlæggende funktionalitet. +2. En indledende implementering oprettes. +3. For at tjekke om det virker, kører vi testframeworket [Mocha](https://mochajs.org/) (mere om det snart), som kører specifikationen. Mens funktionaliteten ikke er komplet, vises fejl. Vi laver rettelser indtil alt virker. +4. Nu har vi en fungerende indledende implementering med tests. +5. Vi tilføjer flere brugsscenarier til specifikationen, sandsynligvis endnu ikke understøttet af implementeringerne. Tests begynder at fejle. +6. Gå til 3, opdater implementeringen indtil tests ikke giver fejl. +7. Gentag trin 3-6 indtil funktionaliteten er klar. -So, the development is *iterative*. We write the spec, implement it, make sure tests pass, then write more tests, make sure they work etc. At the end we have both a working implementation and tests for it. +Så udviklingen er *iterativ*. Vi skriver specifikationen, implementerer den, sikrer os at testene passerer, skriver flere tests, sikrer os at de virker osv. Til sidst har vi både en fungerende implementering og tests for den. -Let's see this development flow in our practical case. +Lad os se dette udviklingsflow i vores praktiske tilfælde. -The first step is already complete: we have an initial spec for `pow`. Now, before making the implementation, let's use a few JavaScript libraries to run the tests, just to see that they are working (they will all fail). +Det første trin er allerede fuldført: vi har en indledende specifikation for `pow`. Nu, før vi laver implementeringen, lad os bruge nogle JavaScript-biblioteker til at køre testene, bare for at se, at de virker (de vil alle fejle). -## The spec in action +## Specifikationen i aktion -Here in the tutorial we'll be using the following JavaScript libraries for tests: +Her i vejledningen vil vi bruge følgende JavaScript-biblioteker til tests: -- [Mocha](https://mochajs.org/) -- the core framework: it provides common testing functions including `describe` and `it` and the main function that runs tests. -- [Chai](https://www.chaijs.com/) -- the library with many assertions. It allows to use a lot of different assertions, for now we need only `assert.equal`. -- [Sinon](https://sinonjs.org/) -- a library to spy over functions, emulate built-in functions and more, we'll need it much later. +- [Mocha](https://mochajs.org/) -- kerneframeworket: det leverer almindelige testfunktioner inklusive `describe` og `it` samt hovedfunktionen, der kører testene. +- [Chai](https://www.chaijs.com/) -- biblioteket med mange påstande (asserts). Det tillader brug af mange forskellige påstande, for nu har vi kun brug for `assert.equal`. +- [Sinon](https://sinonjs.org/) -- et bibliotek til at spionere på funktioner, emulere indbyggede funktioner og mere, det får vi brug for meget senere. -These libraries are suitable for both in-browser and server-side testing. Here we'll consider the browser variant. +Disse biblioteker er velegnede til både browser- og server-side testning. Her vil vi se på browser-varianten. -The full HTML page with these frameworks and `pow` spec: +Den fulde HTML-side med disse frameworks og `pow`-specifikationen: ```html src="index.html" ``` -The page can be divided into five parts: +Siden kan opdeles i fem dele: -1. The `
` -- add third-party libraries and styles for tests. -2. The ` - + + + - + - + diff --git a/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js b/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js index d3de82546..b1986ff05 100644 --- a/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js +++ b/1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js @@ -1,16 +1,16 @@ describe("test", function() { - // Mocha usually waits for the tests for 2 seconds before considering them wrong + // Mocha plejer normalt at vente i 2 sekunder på testene, før den betragter dem som forkerte - this.timeout(200000); // With this code we increase this - in this case to 200,000 milliseconds + this.timeout(200000); // Med denne kode øger vi denne - i dette tilfælde til 200.000 millisekunder - // This is because of the "alert" function, because if you delay pressing the "OK" button the tests will not pass! + // Dette skyldes "alert"-funktionen, fordi hvis du forsinker tryk på "OK"-knappen, vil testene ikke bestå! - before(() => alert("Testing started – before all tests")); - after(() => alert("Testing finished – after all tests")); + before(() => alert("Testning startet – før alle tests")); + after(() => alert("Testning færdig – efter alle tests")); - beforeEach(() => alert("Before a test – enter a test")); - afterEach(() => alert("After a test – exit a test")); + beforeEach(() => alert("Før en test – ind i en test")); + afterEach(() => alert("Efter en test – ud af en test")); it('test 1', () => alert(1)); it('test 2', () => alert(2)); diff --git a/1-js/03-code-quality/05-testing-mocha/index.html b/1-js/03-code-quality/05-testing-mocha/index.html index 28a2ea62b..a66f6e33a 100644 --- a/1-js/03-code-quality/05-testing-mocha/index.html +++ b/1-js/03-code-quality/05-testing-mocha/index.html @@ -1,9 +1,9 @@ - + - + @@ -20,17 +20,17 @@ - + - + - + diff --git a/1-js/03-code-quality/05-testing-mocha/pow-1.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-1.view/index.html index e48a8d3a2..545bf4028 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-1.view/index.html +++ b/1-js/03-code-quality/05-testing-mocha/pow-1.view/index.html @@ -1,40 +1,37 @@ - + - - - - - - - - - - + + + + + + + + + + - + + - + + - - - - - - - - - + + + + + diff --git a/1-js/03-code-quality/05-testing-mocha/pow-1.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-1.view/test.js index 89ba412ed..780304648 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-1.view/test.js +++ b/1-js/03-code-quality/05-testing-mocha/pow-1.view/test.js @@ -1,6 +1,6 @@ -describe("pow", function() { +describe("pow", function () { - it("raises to n-th power", function() { + it("Hæver til n-te potens", function () { assert.equal(pow(2, 3), 8); }); diff --git a/1-js/03-code-quality/05-testing-mocha/pow-2.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-2.view/index.html index e8d6be23d..ec756a713 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-2.view/index.html +++ b/1-js/03-code-quality/05-testing-mocha/pow-2.view/index.html @@ -1,40 +1,37 @@ - + - - - - - - - - - - + + + + + + + + + + - + + - + + - - - - - - - - - + + + + + diff --git a/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js index c803f0e61..b888c95db 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js +++ b/1-js/03-code-quality/05-testing-mocha/pow-2.view/test.js @@ -1,10 +1,10 @@ describe("pow", function() { - it("2 raised to power 3 is 8", function() { + it("2 hævet til 3de potens er 8", function() { assert.equal(pow(2, 3), 8); }); - it("3 raised to power 4 is 81", function() { + it("3 hævet til 4de potens er 81", function() { assert.equal(pow(3, 4), 81); }); diff --git a/1-js/03-code-quality/05-testing-mocha/pow-3.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-3.view/index.html index c71b0d5d5..5dd20ecaa 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-3.view/index.html +++ b/1-js/03-code-quality/05-testing-mocha/pow-3.view/index.html @@ -1,46 +1,43 @@ - + - - - - - - - - - - - - - - + + + + + + + + - return result; - } - - - - - - - + + - - - + + + + + diff --git a/1-js/03-code-quality/05-testing-mocha/pow-3.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-3.view/test.js index 8663952aa..9d14984e1 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-3.view/test.js +++ b/1-js/03-code-quality/05-testing-mocha/pow-3.view/test.js @@ -1,8 +1,8 @@ -describe("pow", function() { +describe("pow", function () { function makeTest(x) { let expected = x * x * x; - it(`${x} in the power 3 is ${expected}`, function() { + it(`${x} hævet til 3de potens er ${expected}`, function () { assert.equal(pow(x, 3), expected); }); } diff --git a/1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html index c71b0d5d5..5dd20ecaa 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html +++ b/1-js/03-code-quality/05-testing-mocha/pow-4.view/index.html @@ -1,46 +1,43 @@ - + - - - - - - - - - - - - - - + + + + + + + + - return result; - } - - - - - - - + + - - - + + + + + diff --git a/1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js index e5ce2ce43..f9bb4feba 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js +++ b/1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js @@ -1,10 +1,10 @@ -describe("pow", function() { +describe("pow", function () { - describe("raises x to power 3", function() { + describe("hæver x til 3de potens", function () { function makeTest(x) { let expected = x * x * x; - it(`${x} in the power 3 is ${expected}`, function() { + it(`${x} hævet til 3de potens er ${expected}`, function () { assert.equal(pow(x, 3), expected); }); } @@ -15,5 +15,5 @@ describe("pow", function() { }); - // ... more tests to follow here, both describe and it can be added + // ... flere tests følger her, både describe og it kan tilføjes }); diff --git a/1-js/03-code-quality/05-testing-mocha/pow-full.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-full.view/index.html index 076b1e5a9..818194707 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-full.view/index.html +++ b/1-js/03-code-quality/05-testing-mocha/pow-full.view/index.html @@ -1,47 +1,44 @@ - + - - - - - - - - - - + + + + + + + + + + - + + - - - + - - + + - - - + + + + + diff --git a/1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js index 75ff5e99f..145a799b7 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js +++ b/1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js @@ -1,10 +1,10 @@ -describe("pow", function() { +describe("pow", function () { - describe("raises x to power 3", function() { + describe("hæver x til 3de potens", function () { function makeTest(x) { let expected = x * x * x; - it(`${x} in the power 3 is ${expected}`, function() { + it(`${x} hævet til 3de potens er ${expected}`, function () { assert.equal(pow(x, 3), expected); }); } @@ -15,11 +15,11 @@ describe("pow", function() { }); - it("if n is negative, the result is NaN", function() { + it("hvis n er negativ, er resultatet NaN", function () { assert.isNaN(pow(2, -1)); }); - it("if n is not integer, the result is NaN", function() { + it("hvis n ikke er et heltal, er resultatet NaN", function () { assert.isNaN(pow(2, 1.5)); }); diff --git a/1-js/03-code-quality/05-testing-mocha/pow-min.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-min.view/index.html index d82a79dca..f71cf956c 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-min.view/index.html +++ b/1-js/03-code-quality/05-testing-mocha/pow-min.view/index.html @@ -1,40 +1,37 @@ - + - - - - - - - - - - + + + + + + + + + + - + + - + + - - - - - - - - - + + + + + diff --git a/1-js/03-code-quality/05-testing-mocha/pow-min.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-min.view/test.js index 89ba412ed..938ce94f4 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-min.view/test.js +++ b/1-js/03-code-quality/05-testing-mocha/pow-min.view/test.js @@ -1,6 +1,6 @@ -describe("pow", function() { +describe("pow", function () { - it("raises to n-th power", function() { + it("hæver til n-te potens", function () { assert.equal(pow(2, 3), 8); }); diff --git a/1-js/03-code-quality/05-testing-mocha/pow-nan.view/index.html b/1-js/03-code-quality/05-testing-mocha/pow-nan.view/index.html index 523ae25ec..307216ca5 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-nan.view/index.html +++ b/1-js/03-code-quality/05-testing-mocha/pow-nan.view/index.html @@ -1,44 +1,41 @@ - + - - - - - - - - - - + + + + + + + + + + - - - - - - + - - + + - - - + + + + +