• Tests you write for code that
generally runs in the browser︎
︎
Client-side testing
Slide 3
Slide 3 text
• Tests you write for code that
generally runs in the browser︎
︎
• JavaScript, HTML, CSS︎
Client-side testing
Slide 4
Slide 4 text
Test coverage
• Tells you how much of your code
has been executed in your tests︎
Slide 5
Slide 5 text
Test coverage
• Tells you how much of your code
has been executed in your tests︎
︎
• A guide, not a definitive measure︎
︎
Slide 6
Slide 6 text
Test coverage
• Tells you how much of your code
has been executed in your tests︎
︎
• A guide, not a definitive measure︎
• Honest coverage is the best
coverage︎
Slide 7
Slide 7 text
Tools
Slide 8
Slide 8 text
Grunt︎
Slide 9
Slide 9 text
Mocha︎
Slide 10
Slide 10 text
Mocha︎
with Blanket, Sinon & Chai︎
Slide 11
Slide 11 text
Karma︎
Slide 12
Slide 12 text
Karma︎
with Istanbul︎
Slide 13
Slide 13 text
Grunt
Slide 14
Slide 14 text
Takes care of the necessary BS︎
Grunt
Slide 15
Slide 15 text
Takes care of the necessary BS︎
Grunt
Linting︎
Slide 16
Slide 16 text
Takes care of the necessary BS︎
Grunt
Compiling︎
︎
Slide 17
Slide 17 text
Takes care of the necessary BS︎
Grunt
Minifying︎
︎
Slide 18
Slide 18 text
Takes care of the necessary BS︎
Grunt
Bundling︎
︎
Slide 19
Slide 19 text
Takes care of the necessary BS︎
Grunt
Watching︎
︎
Slide 20
Slide 20 text
Takes care of the necessary BS︎
Grunt
Replacing︎
︎
Slide 21
Slide 21 text
Takes care of the necessary BS︎
Grunt
Autoprefixer︎
Slide 22
Slide 22 text
Takes care of the necessary BS︎
Grunt
Autoprefixer-ing?︎
︎
Slide 23
Slide 23 text
Takes care of the necessary BS︎
Grunt
Testing︎
︎
Slide 24
Slide 24 text
• Test framework that runs our test suites︎
︎
Mocha
Slide 25
Slide 25 text
via http://mochajs.org/
Test suite
for an array
Slide 26
Slide 26 text
Test case
via http://mochajs.org/
Slide 27
Slide 27 text
• Test framework that runs our test suites︎
• Expressive BDD-style assertions with Chai︎
︎
Mocha
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
• Test framework that runs our test suites︎
• Expressive BDD-style assertions with Chai︎
• Mock functions with Sinon︎
︎
Mocha
Slide 33
Slide 33 text
calculator.js
Slide 34
Slide 34 text
calculator-test.js
Slide 35
Slide 35 text
Spy on the calculator class’ filter function︎
Slide 36
Slide 36 text
We can test that the filter function was
called after calling the add function︎
Slide 37
Slide 37 text
Always make sure to restore the
original function︎
Slide 38
Slide 38 text
• Test runner that runs our mocha tests in
multiple environments︎
︎
︎
Karma
Slide 39
Slide 39 text
• Test runner that runs our mocha tests in
multiple environments︎
• Watches test related files for changes and re-
runs tests for you︎
︎
︎
Karma
Slide 40
Slide 40 text
• Test runner that runs our mocha tests in
multiple environments︎
• Watches test related files for changes and re-
runs tests for you︎
• Extensible︎
︎
︎
Karma