Testing is important - it can improve the quality of your code and give you the reassurance to refactor without fear of destroying your application. My talk will cover different types of automated testing in javascript (unit, integration, acceptance) and some regression as well tools to help standardise code (like js lint). I'll also talk about automated build tools like jenkins and travis ci.

1. Testing most things
in JavaScript
Leeds JS
Colin Oakley
@htmlandbacon

2. HELLO

3. why do we test ?

4. reassurance

5. quality

6. automation

7. side effects

8. types of testing

9. unit
intergration
acceptance

11. unit testing in
javascript

12. testing frameworks
• mocha
• jasmine
• jest
• ava
• TAP

13. example code
module.exports = {
format(firstName = '', lastName = '') {
let string = '';
if(firstName != '') {
string = firstName;
}
if(lastName != '') {
if(string.length === 0) {
string = lastName;
} else {
string = string + ' ' + lastName;
}
}
return string.toUpperCase();
}
};

14. example unit tests
const mocha = require('mocha');
const assert = require('chai').assert;
const name = require('../examples/nameFormatter');
const firstName = 'Kevin';
const lastName = 'Flynn';
describe('calling name.format(firstName, lastName)', function() {
it('should return empty string when nothing is supplied', function() {
const returendName = name.format();
assert.equal(returendName, '');
});
it('should return uppercase first name when firstName is provided', function() {
const returendName = name.format(firstName);
assert.equal(returendName, 'KEVIN');
});
it('should return uppercase firstName and lastName when both are provided', function() {
const returendName = name.format(firstName, lastName);
assert.equal(returendName, 'KEVIN FLYNN');
});
});

15. example output
calling name.format(firstName, lastName)
✓ should return empty string when nothing is supplied
✓ should return uppercase first name when firstName is provided
✓ should return uppercase firstName and lastName when both are provided

16. hinting for failure
it('should return uppercase first name when firstName is provided', function() {
const returendName = name.format(firstName);
assert.equal(returendName, 'KEVIN', 'uppercase first name not found');
});

17. failed output
calling name.format(firstName, lastName)
✓ should return empty string when nothing is supplied
1) should return uppercase first name when firstName is provided
2) should return uppercase firstName and lastName when both are provided
1 passing (12ms)
2 failing
1) calling name.format(firstName, lastName) should return uppercase first name when firstName is provided:
AssertionError: uppercase first name not found: expected 'Kevin' to equal 'KEVIN'
at Context.<anonymous> (test/index.js:16:12)
2) calling name.format(firstName, lastName) should return uppercase firstName and lastName when both are provided:
AssertionError: uppercase whole name not found: expected 'Kevin Flynn' to equal 'KEVIN FLYNN'
at Context.<anonymous> (test/index.js:20:12)

18. mocha hooks
• before()
• after()
• beforeEach()
• afterEach()

19. assertions styles chai - BDD
• expect(foo).to.be.undefined;
• expect(everything).to.be.ok;
• expect(thing).to.include.members([3, 2]);
• expect(foo).to.be.above(5);

20. assertions styles chai - TDD
• assert.isUndefined(food)
• assert.isOkay(everything)
• assert.include(thing, [3, 2])
• assert.isAbove(5)

21. Jest

22. Jest - assertions
• expect(foo).toBeUndefined()
• expect(inputs).toBeTruthy()
• expect(foo).toBeDefined()

23. Jest - Snapshots

24. DOM

25. TDD

26. ci build

27. example ci build
1. code style check
2. run tests
3. coverage
4. deploy
5. start intergration tests
6. start accetance tests

28. code style

29. code style js
• Spacing (2 spaces, tabs, moons, whatever!)
• Single quotes for strings
• No unused variables
• No semicolons
• Space after keywords
• Space after function name
https://github.com/airbnb/javascript

30. code coverage
• istanbul
• sonar cube
• Blanket
• JScoverage

31. code coverage example
-------------------|----------|----------|----------|----------|----------------|
File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines |
-------------------|----------|----------|----------|----------|----------------|
examples/ | 88.89 | 83.33 | 100 | 88.89 | |
nameFormatter.js | 88.89 | 83.33 | 100 | 88.89 | 12 |
-------------------|----------|----------|----------|----------|----------------|
All files | 88.89 | 83.33 | 100 | 88.89 | |
-------------------|----------|----------|----------|----------|----------------|
=============================== Coverage summary ===============================
Statements : 88.89% ( 8/9 )
Branches : 83.33% ( 5/6 )
Functions : 100% ( 1/1 )
Lines : 88.89% ( 8/9 )
================================================================================

32. mocks
spies
stubs
and pain

33. intergration

34. example intergration tests
const validUserID = 'A0001';
const invalidUserID = 'B0001';
describe('/api/users', function() {
describe('/:id', function() {
it('returns user when valid user id is given', function(done) {
superagent
.get(`http://localhost:${port}/api/users/${validUserID}`)
.end(function(err, res) {
assert.equal(res.status, status.OK);
const result = JSON.parse(res.text);
assert.equal(result.id, validUserID);
done();
});
});
it('returns 404 error with message when user does not exist', function(done) {
superagent
.get(`http://localhost:${port}/api/users/${invalidUserID}`)
.end(function(err, res) {
assert.equal(res.status, status.NOT_FOUND);
const result = JSON.parse(res.text);
assert.equal(result.message, `User ${invalidUserID} was not found.`);
done();
});
});
});
});

35. acceptance

36. acceptance testing frameworks
• NightwatchJS
• Intern
• WebDriverIO

37. example NightwatchJS
const base = (process.env.SITE || 'http://localhost:3000');
describe('Demo', function () {
describe('with Nightwatch', function () {
after(function (client, done) {
client.end(function () {
done();
});
});
afterEach(function (client, done) {
if (client.options.screenshots) {
client.saveScreenshot(client.currentTest.name + '.png');
}
done();
});
it('should access a page and assert a valid title', function (client) {
client
.url(base + '/docs/examples/elements/forms')
.expect.element('body').to.be.present.before(100);
client.assert.containsText('h1', 'Your details');
});
});
});

38. example cuecumber
NightwatchJS
# features/checkpage.feature
Feature: Check page title
Scenario: Acccessing page
Given I open the form elements page
Then the title is "Your detail"
And I don't even know

39. MORE TESTING

40. a11y

41. automated tools
• aXe
• pa11y
• tenon
• HTML Codesniffer

42. pally example
pa11y words.htmlandbacon.com
Welcome to Pa11y
> PhantomJS browser created
> Testing the page "http://words.htmlandbacon.com"
Results for words.htmlandbacon.com:
• Notice: Check that the title element describes the document.
├── WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2
├── html > head > title
└── <title>html &amp; bacon - The rambling...</title>
0 Errors
0 Warnings
24 Notices

43. visual regression

44. getting started
1. npm install -g backstopjs
2. backstop genConfig
3. Tweak url / css selectors in json
4. backstop reference
5. backstop test

45. backstop.js - example

46. in summary

47. KTHXBYE