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

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

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

11f5eb98e734dacdeeb6d33cdbc8ab59?s=128

Christian Catalan

April 19, 2018
Tweet

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