Testing Vue Apps with Cypress.io (STLJS Meetup April 2018)

Presented at the STLJS Meetup (St Louis, MO)

We dive into a Vue application used in semiconductor labs for transistor measurements. We discuss how get started with E2E testing with Cypress.io. And give a crash course into Vue applications.

Video: https://www.youtube.com/watch?v=dpB0YgnFyZQ

Transcript

1. TESTING VUE APPS WITH CYPRESS.IO
2. CHRISTIAN CATALAN @christianreyco UI Engineer Austin, TX
3. UI TESTING THE STRUGGLE IS REAL
4. Comparing Test Varietals Unit - Domain Logic Unit - Components Snapshots (DOM) Integration/E2E Edd Yerburgh, VueConf US 2018 https://www.vuemastery.com/conferences/vueconf-2018/testing-vue-apps-edd-yerburgh/
5. Testing Pyramid Jeremy Fairbank - Effective React Testing (JazzCon 2018) https://www.youtube.com/watch?v=Eakp29J38YA
6. Testing Pyramid Jeremy Fairbank - Effective React Testing (JazzCon 2018) https://www.youtube.com/watch?v=Eakp29J38YA
7. Testing Pyramid Jeremy Fairbank - Effective React Testing (JazzCon 2018) https://www.youtube.com/watch?v=Eakp29J38YA
8. Testing Pyramid Jeremy Fairbank - Effective React Testing (JazzCon 2018) https://www.youtube.com/watch?v=Eakp29J38YA
9. Testing Pyramid Variations Testing Trophy (Kent Dodds) Edd Yerburgh Jeremy Fairbank
10. + Faster to run and write + Easier to Debug - Hard to emulate complex interactivity - Mocking can be painful Unit Testing
11. + Confidence, Coverage + Manage complex interactivity - Slow to run and write - Harder to debug E2E Testing
12. ENTER CYPRESS
13. Cypress an open source testing tool written entirely in Javascript. Cypress spawns & drives the browser manually exactly like you do in development. Cypress is most often compared with Selenium & Webdriver, but it is not built on either one. What is Cypress? Cypress Best Practices - Brian Mann AssertJS 2018 https://www.youtube.com/watch?v=5XQOK0v_YRE Slides: https://speakerdeck.com/brianmann/cypress-best-practices Brian Mann Founder Cypress.io AssertJS 2018
14. Cypress makes it easy to write & debug tests in a way that hasn't been possible before. Cypress provides you a visual interface to indicate which tests and commands are running. What is Cypress? Cypress Best Practices - Brian Mann AssertJS 2018 https://www.youtube.com/watch?v=5XQOK0v_YRE Slides: https://speakerdeck.com/brianmann/cypress-best-practices Brian Mann Founder Cypress.io AssertJS 2018
15. Cypress - Interactive Test Runner
16. Cypress - Installation https://docs.cypress.io/guides/getting-started/installing-cypress.html
17. Cypress - First Run https://docs.cypress.io/guides/getting-started/installing-cypress.html
18. Cypress - Scaffold
19. Cypress - Scaffold
20. Cypress - Scaffold
21. Cypress - Scaffold
22. Cypress - Scaffold https://docs.cypress.io/guides/references/configuration.html
23. DEMO CYPRESS KITCHEN SINK
24. • UI Interaction • Matchers/Assertions • Mocking requests • cy.clock() - control time • cy.stub() - stub objects • cy.window() - modify stores Cypress API https://docs.cypress.io/guides/overview/why-cypress.html# https://docs.cypress.io/examples/examples/recipes.html#
25. • UI Interaction • Matchers/Assertions • Mocking requests • cy.clock() - control time • cy.stub() - stub objects • cy.window() - modify stores Cypress API https://docs.cypress.io/guides/overview/why-cypress.html# https://docs.cypress.io/examples/examples/recipes.html#
26. • UI Interaction • Matchers/Assertions • Mocking requests • cy.clock() - control time • cy.stub() - stub objects • cy.window() - modify stores Cypress API https://docs.cypress.io/guides/overview/why-cypress.html# https://docs.cypress.io/examples/examples/recipes.html#
27. • UI Interaction • Matchers/Assertions • Mocking requests • cy.clock() - control time • cy.stub() - stub objects • cy.window() - modify stores Cypress API https://docs.cypress.io/guides/overview/why-cypress.html# https://docs.cypress.io/examples/examples/recipes.html#
28. • UI Interaction • Matchers/Assertions • Mocking requests • cy.clock() - control time • cy.stub() - stub objects • cy.window() - modify stores Cypress API https://docs.cypress.io/guides/overview/why-cypress.html# https://docs.cypress.io/examples/examples/recipes.html# ✨Phenomenal Documentation✨
29. TESTING BOUNDARIES
30. Edd Yerburgh Author vue-test-utils VueConf US 2018
31. Edd Yerburgh Author vue-test-utils VueConf US 2018 “Component contract is the interface your component has. The details a user would need to know in order to use your component in an application. Treat the component as a block box. [Where] you’re free to refactor implementation details without rewriting tests.
32. Testing Boundaries Method Args Primitive
33. Testing Boundaries Method Pure Component Args Primitive Props User Action Rendered Output Vue Events Function Calls
34. Testing Boundaries Method Pure Component Connected Component Args Primitive Props User Action Rendered Output Vue Events Function Calls Props User Action Store Rendered Output Vue Events Function Calls Store Dispatch
35. Testing Boundaries Method Pure Component Connected Component App Args Primitive Props User Action Rendered Output Vue Events Function Calls Props User Action Store Rendered Output Vue Events Function Calls Store Dispatch Outbound Network Request User Action Mocked API
36. SEMICONDUCTOR TESTING (#SCIENCE)
37. Comparing Transistor Testing Varietals Wafer-Level Scan Diagnostics Fault Isolation Laser Imaging Wafer Electrical Testing Electron Beam Induced Current
38. Comparing Transistor Testing Varietals Upper Metal Probing Transistor Probing Physical X-Section Physical TEM Lamella Imaging
39. Semiconductor Defect
40. Need Way to quickly compare many transistor measurements ISTFA 2006, Nano-probing Application on Characterization of 6T-SRAM Single Bit Failures with Different Gox Breakdown Defect Cheng-Piao Lin, et al TSMC Taiwan ISTFA 2014, Utilizing Nanoprobing and Circuit Diagnostics to Identify Key Failure Mechanism of Otherwise Non-Visible Defects in 20nm M. K. Dawood, et al, GLOBALFOUNDRIES Singapore Pte. Ltd. Singapore Native Charts Default Excel Manual Excel ISTFA 2013, SEM-based nanoprobing on 40, 32 and 28nm CMOS devices Challenges for Semiconductor Failure Analysis Erik Paul, et al, GLOBALFOUNDRIES Dresden, Germany Nanoprobing Charts
41. https://en.wikipedia.org/wiki/Nanoprobing Nanoprobing
42. CYPRESS EXAMPLES PROBESCOUT APP
43. • Magic Login (a la Slack) • Subsequently can programatically mock authentication Cypress - Login Example
44. • Stub auth in helper within tests Cypress - Programmatic Authentication
45. • Expand a list of items Cypress - Toggle Interactivity
46. • Deep Selecting a chart svg • Interaction with Modal Cypress - Modal + SVG Charts
47. • Deep Selecting table library Cypress - Filling Out Table Form
48. Cypress - Filling Out Table Form
49. Cypress Examples - File Upload
50. Cypress Examples - Drop Events • https://docs.cypress.io/api/utilities/blob.html • https://docs.cypress.io/examples/examples/recipes.html#Drag-and-Drop • https://docs.cypress.io/examples/examples/recipes.html#File-Upload-in-React
51. Cypress Examples - Simulating Delay
52. Cypress - E2E Testing Strategies Cypress Best Practices - Brian Mann AssertJS 2018 https://www.youtube.com/watch?v=5XQOK0v_YRE Slides: https://speakerdeck.com/brianmann/cypress-best-practices
53. Cypress - Best Practices Cypress Best Practices - Brian Mann AssertJS 2018 https://www.youtube.com/watch?v=5XQOK0v_YRE Slides: https://speakerdeck.com/brianmann/cypress-best-practices
54. Cypress Programmatic State Management Cypress Best Practices - Brian Mann AssertJS 2018 https://www.youtube.com/watch?v=5XQOK0v_YRE Slides: https://speakerdeck.com/brianmann/cypress-best-practices
55. • Allows you to use Cypress test runner to unit test your Vue components • Runs the component in the real browser with full power of Cypress • Great talk about this from Gleb Bahmutov @ AssertJS 2018 ◦ https://www.youtube.com/watch?v=5FnalKRjpZk • https://github.com/bahmutov/cypress-vue-unit-test • Promising, interesting to see this steadily improve Cypress - cypress-vue-unit-test
56. Cypress - cypress-vue-unit-test
57. • https://github.com/bahmutov/cypress-vue-unit-test • https://github.com/bahmutov/cypress-react-unit-test • https://github.com/bahmutov/cypress-hyperapp-unit-test • https://github.com/bahmutov/cypress-svelte-unit-test • https://github.com/bahmutov/cypress-angularjs-unit-test • https://github.com/bahmutov/cypress-cycle-unit-test Cypress - cypress-<framework>-unit-test
58. • cypress-<framework>-unit-test ◦ Bundles every component and serves page → can be slow • Cypress API that look like Promise interface are not 100% Promises ◦ No async/await ◦ Cypress promise automatically gets awaited IF RETURNED. • cy.click({ force: true }) -- hidden elements • Stubbing hot updates from dev server • “Contains” is not an exactly assertion, but it does retry until finds element Cypress - Gotchas
59. • Solves a lot of the pain points in testing higher level components • Ideal for developers ◦ Iterative feedback ◦ Live debuggability with DOM snapshots • Can be used for full E2E, or for simply more integration-type tests • Leverage all types test varietals • Analyze testing boundaries to guide decision on test varietal Cypress - Closing Thoughts
60. Part 2 Vue Intro
61. Vue “A progressive framework for building user interfaces. Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.”
62. Evan You Author Vue UtahJS 2016
63. Evan You Author Vue UtahJS 2016 "It’s important to have a solution that has the elasticity to adapt to different complexity scenarios"
64. Evan You, NordicJS 2016 https://www.youtube.com/watch?v=Ag-1wmHWwS4
65. Vue - Component Dependencies
66. Evan You Author Vue NordicJS 2016 "We have a collector for each component in the tree. Each component manages its own virtual DOM tree. When you render the tree, we collect dependencies. And when the dependency changes, we re-render that component, and that component only. [We are able] to determine the exact number of components to re-render when something changes.
67. • Docs • vue-cli • State management vuex • Routing - vue-router • vue-devtools • vue-test-utils Vue - Community
68. Evan You - State of Vue - VueConf US 2018 https://www.vuemastery.com/conferences/vueconf-2018/opening-keynote-evan-you/ Vue Single File Components
69. Vue Single File Components
70. Vue Single File Components
71. Vue Single File Components
72. Vue Single File Components
73. CSS-in-JS https://github.com/MicheleBertoli/css-in-js
74. CSS-in-JS https://github.com/MicheleBertoli/css-in-js
75. Vue Single File Components https://github.com/vuejs/vue-loader/blob/master/docs/en/configurations/pre-processors.md
76. Vue Single File Components https://github.com/vuejs/vue-loader/blob/master/docs/en/configurations/pre-processors.md
77. Vue Single File Components https://github.com/vuejs/vue-class-component
78. Vue Reactivity https://vuejs.org/v2/guide/reactivity.html “Vue will walk through all of its properties and convert them to getter/setters using Object.defineProperty. (ES5-only feature) The getter/setters are invisible to the user, but under the hood they enable Vue to perform dependency-tracking and change-notification when properties are accessed or modified.”
79. Sarah Drasner Vue Core Team, CSS Tricks NordicJS 2016
80. Sarah Drasner Vue Core Team, CSS Tricks NordicJS 2016 “Vue grants us some deeper access to into the reactivity system, which we can leverage as hooks to observe anything that’s changing. This can be incredibly useful because, as application developers, most of what we’re responsible for are things that change.”
81. Vue Data, Props, Computed, Methods Declarative
82. Vue Data, Props, Computed, Methods Declarative
83. Vue Data, Props, Computed, Methods Declarative
84. Vue Data, Props, Computed, Methods Declarative
85. Vue Data, Props, Computed, Methods Declarative
86. Vue Data, Props, Computed, Methods Declarative
87. Vue Transitions
88. • The <slot> element to serve as distribution outlets for content. • Allows to focus on composition • Scoped Slots → Render props/children • Michael Jackson - Never Write Another HoC - React Phoenix 2017 ◦ https://www.youtube.com/watch?v=BcVAq3YFiuc Vue Slots - Composition
89. Vue Slots - Example
90. Vue Slots - Example
91. Vue Slots - Example
92. Vue Slots - Scoped/Render Props Example ✨Manage State ✨Provide props to slot
93. Vue Slots - Scoped/Render Props Example ✨ Localized Composition
94. Vue CLI
95. Vue CLI
96. Vue CLI
97. Vue CLI
98. • Inspired by Next.js • “UI rendering while abstracting away the client/server distribution.” • Convention • Creates routes for you based on folder/file structure • SSR • https://nuxtjs.org/ Nuxt
99. • Really fun to work with • Easy to introduce to a team • Makes just enough decisions/conventions for you • Community + Tooling • Progressive • Declarative, Reactive • Composition Vue - Closing Thoughts
100. THANK YOU! @christianreyco https://www.linkedin.com/in/crcatala