Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue Testing - Vue Sydney Meetup - Dec 2017

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)

Ce03ee7496c2a1f134e214e8cc7e233a?s=128

Cedric Nicoloso

December 05, 2017
Tweet

Other Decks in Programming

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

  6. 6

  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

  10. 10

  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

  17. 17

  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

  21. 21

  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

  30. 30