Vue Testing - Vue Sydney Meetup - Dec 2017

Throughout this 20ish minutes talk, I've presented four different kind of tests with each time how to run them in a Vue.js application.
1. Functions unit tests (with mocha-webpack)
2. Components unit tests (with vue-test-utils and Mocha or Jest)
3. Snapshot tests (with Jest)
4 UI tests (with Cypress.io)

Transcript

1. 402/55 LIME ST > SYDNEY NSW 2000 > AUSTRALIA > WWW.OCTO.COM.AU CEDRIC NICOLOSO - DEC. 2017 VUE TESTING Going through the pyramid of tests
2. WHOAMI Cedric Nicoloso IT Consultant / Front-end dev @OCTODownUnder 2
3. THE PYRAMID OF TESTS ¤ Unit tests are fast and cheap ¤ UI / E2E tests are slow and expensive Martin Fowler https://martinfowler.com/bliki/TestPyramid.html 3
4. THE TESTS PYRAMID… REVISITED! ¤ Includes functions unit tests ¤ Includes snapshot tests Inspired by Edd Yerburgh https://medium.freecodecamp.org/the-front-end-test-pyramid-rethink-your-testing-3b343c2bca51 4
5. > 01 FUNCTIONS UNIT TESTS
7. KEY POINTS ¤Test JavaScript functions (ideally pure) ¤No need to mount my component ¤Framework-agnostic 7 “user-score.service.js”
8. MOCHA-WEBPACK ¤1. Ask webpack to create a bundle > Our test files > Functions we want to test ¤2. Call mocha on this bundle 8 ¤ Extract these JS functions into separate “service” files ü Lighter components ü TDD-friendly
9. > 02 COMPONENTS UNIT TESTS
11. 11 WEB COMPONENTS (1/2)
12. WEB COMPONENTS (2/2) 12 App Left menu Top toolbar Sign-in button Menu item Main content Home page Map Tutorial dialog Unlock dialog … Question box … … Depends on the active route
13. SHALLOW RENDERING ¤Render a component without its children (by stubbing them) 13 ¤Avoid asserting the behavior of child components ¤Faster to render ¤Included in vue-test-utils Top toolbar Sign-in button
14. FOCUS ON VUE-TEST-UTILS ¤Provides utility functions, makes things easier to test > Mounting > Traversing the DOM > Triggering and catching events > Etc… ¤Returns a wrapper around the mounted Component instance > const wrapper = mount(MyComponent) > const wrapper = shallow(MyComponent) ¤For example, we can access emitted events through this wrapper > And make assertions on them 14
15. ¤Mocha (The classic one) ¤Bring your own > Assertions (chai, should…) > Mocks (sinon, testdouble…) > Coverage (Istanbul) ¤Real browsers with Karma ¤Jest (The new one) ¤All inclusive > Uses popular solutions like Jasmine and Istanbul under the hood ¤New default test stack in vue- cli webpack template TWO MAIN CHOICES
16. > 03 SNAPSHOT TESTS
18. USE SNAPSHOTS WITH JEST ¤Sometimes your UI changes too often > You have to update your tests all the time… ¤“Just notice me when there is a change!” > And I’ll tell you if this is expected or not 18 ¤It will save your rendered component > Creates and stores *.snap files in __snapshots__ folder ¤Works out-of-the-box with Jest > expect(vm.$el.outerHTML).toMatchSnapshot()
19. WHEN IT FAILS 19 ¤ Fails if your rendered component doesn’t match the previous snapshot ¤ Two options: > Fix your code > Tell Jest to update its snapshot
20. > 04 Time to retire for Selenium
22. ¤Open-source ¤No Selenium dependency! ¤Uses your favourite tools under the hood > Mocha > Chai > Sinon ¤Automatic waiting > More consistent results > No need of random ‘sleeping times’ everywhere ¤Readable errors 22 CYPRESS - INTRODUCTION
23. CYPRESS.IO - API ¤Ability to stub server requests with fixtures ¤Works well with promises ¤Includes jQuery ¤Change viewport 23
24. INSTALL IT AND OPEN IT ¤Install cypress as a dev dependency > npm install cypress –save-dev (200 Mb...) ¤Cypress GUI 24
25. RUN IT 25
26. WHEN IT FAILS… 26
27. > WHAT’S TO REMEMBER?
28. YOUR TAKE-AWAYS ¤ Feasible to quickly unit test JavaScript functions 28 ¤ Jest is becoming more and more popular ¤ Snapshot tests are a great new type of tests ¤ Cypress.io is a viable and sexy alternative to Selenium
29. ROTI TIME 29 1 2 3 4 5