End-to-End Testing Vue Apps with Cypress

Transcript

1. End-to-End Testing Vue Apps with Cypress @amirrustam Vue Conf Toronto 2019
2. Head of Developer Experience @amirrustam Amir Rustamzadeh amir@cypress.io
3. @amirrustam + Let’s keep to the conversation going after the talk… See something, tweet something. I’ll follow up with all questions and points of interest after the talk.
4. Let’s talk about testing @amirrustam but I’m not here to tell you to eat your broccoli
5. We need to change our perspective on where testing fits within the development lifecycle. @amirrustam
6. Testing is often an afterthought @amirrustam especially E2E tests
7. E2E Integration Unit Visit The Testing Pyramid Easy, developers really like to write these. More Difficult, costly, slower… Often completely ignored @amirrustam
8. You might of heard of Shift-left @amirrustam
9. Shift-left is a great direction, but it still segregates testing from development. @amirrustam
10. Testing can accelerate iteration during the implementation stage. @amirrustam I don’t mean TDD
11. We need to be able experiment as we’re figuring out the implementation. @amirrustam We’re often faced with new and unfamiliar libraries, patterns, components, etc.
12. Let’s look at some real world engineering examples @amirrustam
13. @amirrustam SpaceX Falcon Rocket Engine Controller Vibration Mitigation System
14. @amirrustam Mechanical Vibration Test System
15. @amirrustam Test Apparatus Mechanical Vibration Test System Engine Controller Instrumentation Simulate vibration scenarios Attached accelerometers tracked response/performance of implementation
16. @amirrustam Curiosity Mars Rover Actuator Electronic Ground Support Equipment (AEGSE)
18. @amirrustam Electronic Ground Support Equipment
19. @amirrustam Electronic Ground Support Equipment Simulate conditions on Mars to help with design/implementation iterations
20. Being able to consistently and reliably simulate real scenarios is key to quickly developing a viable implementation. @amirrustam
21. I wanted this same test apparatus for the web…. @amirrustam
22. Enter A tool to quickly and reliably test anything that runs in a browser. @amirrustam Free & Open Source (MIT License)
23. Stateless Stateful @amirrustam
24. $ npm install -D cypress ☝ All-in-one tool You get everything you need ❤ Familiar tools underneath Mocha, Chia, Sinon
25. Easy w/ Vue CLI @amirrustam
26. @amirrustam
27. @amirrustam
29. Cypress is built with the developer experience (DX) as the top priority. @amirrustam
30. @amirrustam Command Log Your App
31. Human readable error messages Error Reporting is Important
32. Debuggability is Important Debug your app and tests at the same time
33. Time-travel through your app’s state and tests
34. Let’s check out the Cypress API @amirrustam Intuitive & English-like
35. @amirrustam cy.<command> Cypress API
36. Cypress API @amirrustam cy.get('button')
37. Cypress API @amirrustam cy.get('button') .click() .should('have.class', 'active')
38. Cypress API @amirrustam cy.request('/users/1') .its('body') .should('deep.eql',{ name:'Amir'})
39. Cypress API @amirrustam cy.get('button') .click() .should('have.class', 'active') Subject is passed through the chain 1
40. Deterministic Execution Order @amirrustam it('send email with contact form', () => { cy.get('#name-input').type('Amir') cy.get('#email-input').type('amir@cypress.io') cy.get('form').submit() cy.get('#success-message').should('be.visible') }) 1 2 3 4 Necessary for flake-free test runs
41. Cypress Architecture @amirrustam Browser Provisioning & System-level tasks Your App Your Tests Backend Browser
42. Cypress Architecture @amirrustam #1 Perk: Faster Test Runs &
43. @amirrustam cy.get('button') .click() .should('have.class', 'active') Cypress will wait up to 4 seconds (default) for this assertion to pass. Automatic Waiting Cypress will wait for the button to be clickable. Takes the guess-work out of arbitrary timeouts & pauses.
44. How should you approach testing an app? @amirrustam
45. @amirrustam Layers to Test Network Logic & State Interface
46. #1 Tip: Always test from the user’s perspective. Don’t waste time testing specific implementation. @amirrustam
47. @amirrustam Layers to Test Network Logic & State Interface Interact with the UI Spy & Stub (or mock) network requests Provision internal state and utilize internal logic to in test code Check for Visual Regressions
48. Spy or Stub Network Requests @amirrustam it('starts with zero items', () => { // start Cypress network server // spy on route `GET /todos` // THEN visit the page cy.server() cy.route('GET', '/todos').as('todos') cy.visit('/') cy .wait('@todos') // wait for `GET /todos` response // inspect the server's response .its('response.body') .should('have.length', 0) // then check the DOM cy.get('li.todo').should('have.length', 0) })
49. Spy or Stub Network Requests @amirrustam it('starts with zero items (fixture)', () => { // start Cypress network server // stub route `GET /todos`, return data from fixture file // THEN visit the page cy.server() cy.route('GET', '/todos', ‘fixture:sample-todos').as('todos') cy.visit('/') cy .wait('@todos') // wait for `GET /todos` response // inspect the server's response .its('response.body') .should('have.length', 0) // then check the DOM cy.get('li.todo').should('have.length', 0) })
50. Spy or Stub Network Requests @amirrustam
51. Utilizing Internal Logic & State @amirrustam const app = new Vue({ ... }) if (window.Cypress) { window.__app__ = app }
52. Utilizing Internal Logic & State @amirrustam const app = new Vue({ ... }) if (window.Cypress) { window.__app__ = app }
53. Utilizing Internal Logic & State @amirrustam cy.window().then(win => { return win.app.$store.dispatch('login', { email: 'amir@cypress.io', password: '1234' }) }) Use your app code to help you write your test code. It can be more efficient, and can provide a higher level of confidence.
54. Utilizing Internal Logic & State @amirrustam cy.window().then(win => { return win.app.$store.commit(‘SET_TODOS’, {…}) }) Provision the state of your app for testing
55. Utilizing Internal Logic & State @amirrustam cy.window().then(win => { cy.wait('@todos') .its('response.body.todos') .should('have.length', win.app.$store.state.todos.length) })
56. Isolated Component Tests @amirrustam import mount from 'cypress-vue-unit-test' import MyComponent from './app/components/MyComponent.vue' describe('My Component', () => { beforeEach(mount(MyComponent)) it('loads', () => { cy.get('button').should('be.visible') }) }) Experimental
57. @amirrustam Visual Regression Testing OSS Options and Paid Services on.cypress.io/visual-testing https://applitools.com/tutorials/cypress.html https://docs.percy.io/docs/cypress
58. @amirrustam Visual Regression Testing https://www.youtube.com/watch?v=3EJaforaVkA
59. How do I know when I’m done testing my app? @amirrustam
60. @amirrustam Code Coverage Use it to help guide your tests, but it’s not a silver-bullet. Write the minimum set of E2E tests to maximize coverage. Consider unit-tests for unreachable part of your code. Or refactor.
61. @amirrustam Code Coverage Use it to help guide your tests, but it’s not a silver-bullet. on.cypress.io/code-coverage
62. * cypress open Great for everyday development workflow Cypress + Editor Side-by-Side TDD Nirvana cypress run Testing in CI/CD Pipeline Headless More efficient for running all your tests @amirrustam
63. Automatic Screenshots and Video Recording in Headless Mode
64. cypress run --record --parallel Parallelization via Cypress Dashboard @amirrustam cypress.io/dashboard
65. cypress run --parallel cypress run --parallel cypress run --parallel Your CI Machines 3x parallelism Ready for work signup.spec.js login.spec.js widget.spec.js @amirrustam
66. Previous Spec Test Runs Spec Test Duration History Test Duration (seconds) The Future Automatic Load Balancing of Test Specs Duration Forecast @amirrustam
67. Automatic Load Balancing of Test Specs login.spec.js signup.spec.js widget.spec.js @amirrustam
68. @amirrustam cypress-example-kitchensink
69. @amirrustam cypress-dashboard 83%
70. @amirrustam Upcoming features from the Roadmap Full Network Layer Stubbing: You’ll be the master of the network. Great for handling GraphQL and fetch requests. Improved Error Reporting: From error to the point of the problem in your cord. Better communication of context around errors. Test Retries: Identify flake and save broken CI builds due to false negatives.
71. @amirrustam One more thing… Cross Browser: You’ve been waiting. We’ve been working.
72. @amirrustam One more thing… Firefox support coming out any day now. Let me show you….
73. @amirrustam Check out the Docs No really, do it. They are some of the best you’ll ever read. docs.cypress.io
74. @amirrustam There is a plugin for that Plugins for accessibility testing, visual testing, helpful utilities, etc. docs.cypress.io
75. docs.cypress.io/examples/examples/tutorials.html Tutorial Videos
76. Testing Workshop docs.cypress.io/examples/examples/workshop.html
77. @amirrustam We’re trying to change the status quo of testing. We want to testing to be enjoyable and productive. We’re only getting started.
78. @amirrustam Happy Testing ❤