Presented at Web Unleashed 2017. More info at www.fitc.ca/webu Presented by Haris Mahmood, Shopify Overview As front-end developers become more and more capable of building web applications, the value of testing front-end code is now more valuable than ever. Unfortunately, the testing ecosystem can be confusing, and daunting to those just getting started with the vast number of libraries and testing frameworks offering various tools and capabilities. This talk aims to navigate the world of testing front-end code, and provide steps for front-end developers to incorporate testing into their work and projects quickly and with ease! Objective Provide an introduction and overview of the world of testing for front-end development, and tips and steps to get started today. Target Audience Front-end developers with no or little experience with testing. Five Things Audience Members Will Learn Understanding on why testing is important What options exist for testing today What type of tests are best for what scenario How to assess what frameworks and libraries to use Steps on getting started with testing

3. engineer at shopify.
haris —

4. instructor at
hackeryou.
haris —

5. tech apparel + pins
at repitsupply.com
haris —
FITC2017

6. @harismahmood89
@repitsupply
haris —

7. WORLD OF
TESTINGfo r F r o n t -E n d D e v e l o p e r s
A n I n t r o d u c t i o n t o t h e

8. a brief intro.

9. i didn’t know where to start.

10. testing seemed hard.

11. testing seemed confusing.

13. front-end has evolved incredibly.

14. ridiculous amount of libraries, tools,
frameworks to choose from.

15. explore various aspects of the testing
world to help you begin.

16. won’t explore every option.

17. the most commonly used.

18. why test?

19. faster than manual testing in
the long run.

20. verify previously tested code still
works as the app/product evolves.

21. tests act like self-updating
documentation.

22. test all edge/weird cases.

23. build rock-solid apps.

24. a couple stories.

25. nest - smart thermostat.

26. drained entire battery after
software update.

27. no heat during one of the
coldest times in 2016.

28. nissan airbag sensor software.

29. washington state’s prison
sentence reduction.

30. update released in 2002.

31. more then 3,000 prisoners
released early.

32. 600 days.

33. people would potentially have
to go back to prison.

34. 13 years.

36. cool, so what first?

37. linting — the first line of defence.

38. linting tools enforce defined
style rules.

39. ensures better readability.

40. highlights issues (particularly
syntax errors) before execution.

41. eslint.

42. companies share their eslint configs
that you can use as a starting point.

43. test tools + concepts.

44. tonnes of different types of
test tools.

45. various functionalities.

46. some tools provide more than
one functionality.

47. develop an ideal combination of tools as per
your preference / project requirement.

48. i. test frameworks.
provides the foundation to test your code.

49. ii. testing structure.
test code organization. usually organized in a
behaviour-driven-development (bdd) structure.

50. describe('calculator', function() {
// describes a module with nested "describe" functions
describe('add', function() {
// specify the expected behaviour
it('should add 2 numbers', function() {
// test assertions go here
})
})
})

51. ii. assertions.
functions that ensure test results are
as expected.

52. // Jasmine
expect(houseName).toBeString()
expect(houseName).toEqual(‘Targaryen’)

53. // Chai
expect(houseName).to.be.a(‘string’)
expect(houseName).to.equal(‘Targaryen’)

54. iii. spies.
gather info about function calls. help
verify functions are called or not.

55. var user = {
...
setName: function(name) {
this.name = name;
}
}
//Create spy
var setNameSpy = sinon.spy(user, ‘setName');
user.setName(‘Jon Snow’);
console.log(setNameSpy.callCount); //output: 1

56. super helpful to test callbacks.

57. function myFunction(condition, callback) {
if(condition) {
callback();
}
}

58. function myFunction(condition, callback) {
if(condition) {
callback();
}
}
describe('myFunction', function() {
it('should call the callback function', function() {
var callback = sinon.spy();
myFunction(true, callback);
assert(callback.calledOnce); // true
});
});

59. iv. stubs.
allow you to replace functions with our
own to ensure a behaviour.

60. var account = {
...
isActive: function() { ... }
}
sinon.stub(account, ‘isActive').returns(true)

61. v. code coverage.
determines whether our test cases are
covering the entirety of an app’s codebase.

62. vi. generate + display tests.
display our tests and results.

63. test types.

64. unit tests.

65. unit tests.
test individual functions / classes. pass in
inputs and ensure expected output is returned.

66. integration tests.

67. integration tests.
test several functions/modules/components to
ensure they work together as expected.

68. functional tests.

69. functional tests.
test a scenario on the app/product.

70. snapshot tests.

71. snapshot tests.
compare resulting data to an expected one.
super useful for component structure testing.

72. tips + things to keep in mind.

73. start with unit tests. they are
quite often easier to write.

74. use a coverage tool to ensure
unit tests cover everything.

75. have unit, and integration
tests at least.

76. snapshot tests can be an alternative
to ui-based integration tests.

77. use the same tools for all
your tests if possible.
testing structure, syntax, assertion
functions, result reporting, etc.

78. choosing a framework.

79. the first thing you’ll want to do
is to pick a testing framework.

80. let’s examine some of the most
popular ones today.

81. jasmine.
provides everything you need out of box -
running environment, reporting, mocking tools,
assertion functions.

82. ready out of the box. you can still switch/add
features if needed.
jasmine.

83. extremely popular in the angular world.
jasmine.

84. relies on third party libraries and tools for
assertions, mocks, spies etc.
mocha.

85. a little harder to setup, but more flexible.
mocha.

86. built and recommended by facebook.
jest.

87. wraps jasmine, and adds features on top.
jest.

88. super impressive speeds and convenience.
jest.

89. mainly used for react apps, but can be used
elsewhere too.
jest.

90. other tools.

91. code coverage tool.
istanbul.

92. lets you run tests in browsers - real,
headless, and legacy.
karma.

93. the most popular assertion library.
chai.

94. testing utility for react apps built by
airbnb. allows for super easy asserts,
traversing the component outputs, etc.
enzyme.

95. provides spies, stubs and mocks.
sinon.

96. how should i start?

97. super quick to set up + get going, provides
tonnes of tooling built right in (due to
jasmine wrapping).
start with jest.

98. just write some tests.

99. you may end up changing to a
different framework + tools.

100. the basic concepts are the same
across them all.

101. quick example.

102. silly movie theatre app. let’s
check it out, setup jest and start
testing!

103. var list = [
{
name: 'Jurassic World 2',
showTime: '7:00pm',
ticketsRemaining: 47,
},
{
name: 'Star Wars: The Last Jedi',
showTime: '10:00pm',
ticketsRemaining: 22,
}
]

104. app-folder
!"" app.js
!"" yarn.lock
#"" package.json

105. app-folder
!"" app.js
!"" yarn.lock
#"" package.json

106. function listMovies(list) {
return list.reduce((acc, item) => {
return `${acc} ${item.name} at ${item.showTime} has $
{item.ticketsRemaining} tickets left n`;
}, '');
}

107. function listMovies(list) {
return list.reduce((acc, item) => {
return `${acc} ${item.name} at ${item.showTime} has $
{item.ticketsRemaining} tickets left n`;
}, '');
}
Jurassic World 2 at 7:00pm has 47 tickets left
Star Wars: The Last Jedi at 10:00pm has 22 tickets left

108. function ticketsLeft(movie) {
return movie.ticketsRemaining > 0;
}

109. function addMovieToList(list, name, showTime) {
let newList = list.slice();
newList.push({
name,
showTime,
ticketsRemaining: 100
});
return newList;
}

110. function buyTickets(movie, quantity) {
const newRemaining = movie.ticketsRemaining - quantity;
if (newRemaining >= 0) {
return Object.assign(movie,
{ticketsRemaining: movie.ticketsRemaining - quantity});
} else {
return 'Error';
}
}

111. module.exports = {
listMovies,
ticketsLeft,
buyTickets,
addMovieToList
}

112. let’s setup jest!

113. yarn add --dev jest
npm install --save-dev jest

114. update package.json

115. {
"name": "example-1",
"version": "1.0.0",
"main": "app.js",
"license": "MIT",
"devDependencies": {
"jest": "^21.1.0"
},
"scripts": {
"test": "jest"
}
}

116. npm test

117. and that is literally it.

118. let’s write some tests!

119. two main ways to have jest run your tests.

120. i. files with *.test.js

121. ii. files in a folder named __test__

124. function ticketsLeft(movie) {
return movie.ticketsRemaining > 0;
}

125. const app = require('./app.js');
describe('the movie app', () => {
describe('ticketsLeft', () => {
it('should return false when no tickets available', () => {
});
});
});

126. const app = require('./app.js');
describe('the movie app', () => {
describe('ticketsLeft', () => {
it('should return false when no tickets available', () => {
});
});
});

127. it('should return false when no tickets available', () => {
const testMovie = {
ticketsRemaining: 0,
};
});

128. it('should return false when no tickets available', () => {
const testMovie = {
ticketsRemaining: 0,
};
const result = app.ticketsLeft(testMovie);
const expected = false;
});

129. it('should return false when no tickets available', () => {
const testMovie = {
ticketsRemaining: 0,
};
const result = app.ticketsLeft(testMovie);
const expected = false;
expect(result).toEqual(expected);
});

130. ‘expect’ and ‘toBe’ are called matchers.

131. npm test

133. 🎉

134. it('should return true when tickets are available', () => {
const testMovie = {
ticketsRemaining: 27,
};
const result = app.ticketsLeft(testMovie);
const expected = true;
expect(result).toEqual(expected);
});

137. function listMovies(list) {
return list.reduce((acc, item) => {
return `${acc} ${item.name} at ${item.showTime} has $
{item.ticketsRemaining} tickets left n`;
}, '');
}

138. describe('listMovies', () => {
it('should list movies, showtimes and tickets', () => {
var list = [
{
name: 'Jurassic World 2’, showTime: ‘7:00pm', ticketsRemaining: 47,
},
{
name: 'Star Wars: The Last Jedi’, showTime: ’10:00pm', ticketsRemaining: 22,
}
];
const result = app.listMovies(list);
const expected = 'Jurassic World 2 at 7:00pm has 47 tickets left nStar Wars:
The Last Jedi at 10:00pm has 22 tickets left n';
expect(result).toEqual(expected);
});
});

140. Difference:
- Expected
+ Received
- Jurassic World 2 at 7:00pm has 47 tickets left
- Star Wars: The Last Jedi at 10:00pm has 22 tickets left
+ Jurassic World 2 at 7:00pm has 47 tickets left
+ Star Wars: The Last Jedi at 10:00pm has 22 tickets left

141. Difference:
- Expected
+ Received
- Jurassic World 2 at 7:00pm has 47 tickets left
- Star Wars: The Last Jedi at 10:00pm has 22 tickets left
+ Jurassic World 2 at 7:00pm has 47 tickets left
+ Star Wars: The Last Jedi at 10:00pm has 22 tickets left

142. function listMovies(list) {
return list.reduce((acc, item) => {
return `${acc} ${item.name} at ${item.showTime} has $
{item.ticketsRemaining} tickets left n`;
}, '');
}

143. function listMovies(list) {
return list.reduce((acc, item) => {
return `${acc}${item.name} at ${item.showTime} has $
{item.ticketsRemaining} tickets left n`;
}, '');
}

145. describe('addMovieToList', () => {
it('adds a movie to the movie list', () => {
const list = [
{ name: 'Jurassic World 2’, showTime: ‘7:00pm', ticketsRemaining: 47 }
];
const results = app.addMovieToList(list, 'Thor', '4:30pm');
const expected = [
{ name: 'Jurassic World 2’, showTime: ‘7:00pm’, ticketsRemaining: 47 },
{ name: ‘Thor', showTime: ‘4:30pm', ticketsRemaining: 100 }
];
expect(results).toBe(expected);
});
});

147. Expected value to be (using ===):

148. Compared values have no visual difference. Looks like you
wanted to test for object/array equality with strict `toBe`
matcher. You probably need to use `toEqual` instead.

149. describe('addMovieToList', () => {
it('adds a movie to the movie list', () => {
const list = [
{ name: 'Jurassic World 2’, showTime: ‘7:00pm', ticketsRemaining: 47 }
];
const results = app.addMovieToList(list, 'Thor', '4:30pm');
const expected = [
{ name: 'Jurassic World 2’, showTime: ‘7:00pm’, ticketsRemaining: 47 },
{ name: ‘Thor', showTime: ‘4:30pm', ticketsRemaining: 100 }
];
expect(results).toBe(expected);
expect(results).toEqual(expected);
});
});

151. other matchers.

152. toBeNull, toBeUndefined, toBeDefined, toBeTruthy,
toBeFalsy, toBeGreaterThan, toBeGreaterThanOrEqual,
toBeLessThan, toMatch, toContain ...

154. all done! i think?

155. let’s setup some code coverage!

156. update our test script.

157. "scripts": {
"test": "jest --coverage"
}

159. buyTickets()

160. add a watcher for continuous testing runs.

161. "scripts": {
"test": "jest --coverage --watch"
}

163. in conclusion.

164. the value of testing is immense.

165. the ecosystem is vast with tonnes
of options to choose from.

166. many options provide tooling for
specific requirements.

167. a few that are all-encompassing.

168. start simple.

169. customize + modify as you go.

170. most importantly —

171. most importantly — start.

172. thank-you!

173. thank-you! #beKind

174. thank-you! #beKind #repItSupply