![var list = [
{
name: 'Jurassic World 2',
showTime: '7:00pm',
ticketsRemaining: 47,
},
{
name: 'Star Wars: The Last Jedi',
showTime: '10:00pm',
ticketsRemaining: 22,
}
]](https://image.slidesharecdn.com/fitcwebu2017-intrototestingforfeds-170926135923/85/FITC-Web-Unleashed-2017-Introduction-to-the-World-of-Testing-for-Front-End-Developers-103-320.jpg)
![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);
});
});](https://image.slidesharecdn.com/fitcwebu2017-intrototestingforfeds-170926135923/85/FITC-Web-Unleashed-2017-Introduction-to-the-World-of-Testing-for-Front-End-Developers-138-320.jpg)
![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);
});
});](https://image.slidesharecdn.com/fitcwebu2017-intrototestingforfeds-170926135923/85/FITC-Web-Unleashed-2017-Introduction-to-the-World-of-Testing-for-Front-End-Developers-145-320.jpg)
![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);
});
});](https://image.slidesharecdn.com/fitcwebu2017-intrototestingforfeds-170926135923/85/FITC-Web-Unleashed-2017-Introduction-to-the-World-of-Testing-for-Front-End-Developers-149-320.jpg)
FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End Developers
- 5. tech apparel + pins at repitsupply.com haris — FITC2017
- 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
- 9. i didn’t know where to start.
- 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.
- 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.
- 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.
- 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.
- 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.
- 67. integration tests. test several functions/modules/components to ensure they work together as expected.
- 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.
- 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.
- 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'; } }
- 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