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

Slide 1

Slide 1 text

TESTING VUE APPS WITH CYPRESS.IO

Slide 2

Slide 2 text

CHRISTIAN CATALAN @christianreyco UI Engineer Austin, TX

Slide 3

Slide 3 text

UI TESTING THE STRUGGLE IS REAL

Slide 4

Slide 4 text

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/

Slide 5

Slide 5 text

Testing Pyramid Jeremy Fairbank - Effective React Testing (JazzCon 2018) https://www.youtube.com/watch?v=Eakp29J38YA

Slide 6

Slide 6 text

Testing Pyramid Jeremy Fairbank - Effective React Testing (JazzCon 2018) https://www.youtube.com/watch?v=Eakp29J38YA

Slide 7

Slide 7 text

Testing Pyramid Jeremy Fairbank - Effective React Testing (JazzCon 2018) https://www.youtube.com/watch?v=Eakp29J38YA

Slide 8

Slide 8 text

Testing Pyramid Jeremy Fairbank - Effective React Testing (JazzCon 2018) https://www.youtube.com/watch?v=Eakp29J38YA

Slide 9

Slide 9 text

Testing Pyramid Variations Testing Trophy (Kent Dodds) Edd Yerburgh Jeremy Fairbank

Slide 10

Slide 10 text

+ Faster to run and write + Easier to Debug - Hard to emulate complex interactivity - Mocking can be painful Unit Testing

Slide 11

Slide 11 text

+ Confidence, Coverage + Manage complex interactivity - Slow to run and write - Harder to debug E2E Testing

Slide 12

Slide 12 text

ENTER CYPRESS

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Cypress - Interactive Test Runner

Slide 16

Slide 16 text

Cypress - Installation https://docs.cypress.io/guides/getting-started/installing-cypress.html

Slide 17

Slide 17 text

Cypress - First Run https://docs.cypress.io/guides/getting-started/installing-cypress.html

Slide 18

Slide 18 text

Cypress - Scaffold

Slide 19

Slide 19 text

Cypress - Scaffold

Slide 20

Slide 20 text

Cypress - Scaffold

Slide 21

Slide 21 text

Cypress - Scaffold

Slide 22

Slide 22 text

Cypress - Scaffold https://docs.cypress.io/guides/references/configuration.html

Slide 23

Slide 23 text

DEMO CYPRESS KITCHEN SINK

Slide 24

Slide 24 text

● 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#

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

TESTING BOUNDARIES

Slide 30

Slide 30 text

Edd Yerburgh Author vue-test-utils VueConf US 2018

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

Testing Boundaries Method Args Primitive

Slide 33

Slide 33 text

Testing Boundaries Method Pure Component Args Primitive Props User Action Rendered Output Vue Events Function Calls

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

SEMICONDUCTOR TESTING (#SCIENCE)

Slide 37

Slide 37 text

Comparing Transistor Testing Varietals Wafer-Level Scan Diagnostics Fault Isolation Laser Imaging Wafer Electrical Testing Electron Beam Induced Current

Slide 38

Slide 38 text

Comparing Transistor Testing Varietals Upper Metal Probing Transistor Probing Physical X-Section Physical TEM Lamella Imaging

Slide 39

Slide 39 text

Semiconductor Defect

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

https://en.wikipedia.org/wiki/Nanoprobing Nanoprobing

Slide 42

Slide 42 text

CYPRESS EXAMPLES PROBESCOUT APP

Slide 43

Slide 43 text

● Magic Login (a la Slack) ● Subsequently can programatically mock authentication Cypress - Login Example

Slide 44

Slide 44 text

● Stub auth in helper within tests Cypress - Programmatic Authentication

Slide 45

Slide 45 text

● Expand a list of items Cypress - Toggle Interactivity

Slide 46

Slide 46 text

● Deep Selecting a chart svg ● Interaction with Modal Cypress - Modal + SVG Charts

Slide 47

Slide 47 text

● Deep Selecting table library Cypress - Filling Out Table Form

Slide 48

Slide 48 text

Cypress - Filling Out Table Form

Slide 49

Slide 49 text

Cypress Examples - File Upload

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Cypress Examples - Simulating Delay

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

● 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

Slide 56

Slide 56 text

Cypress - cypress-vue-unit-test

Slide 57

Slide 57 text

● 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--unit-test

Slide 58

Slide 58 text

● cypress--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

Slide 59

Slide 59 text

● 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

Slide 60

Slide 60 text

Part 2 Vue Intro

Slide 61

Slide 61 text

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.”

Slide 62

Slide 62 text

Evan You Author Vue UtahJS 2016

Slide 63

Slide 63 text

Evan You Author Vue UtahJS 2016 "It’s important to have a solution that has the elasticity to adapt to different complexity scenarios"

Slide 64

Slide 64 text

Evan You, NordicJS 2016 https://www.youtube.com/watch?v=Ag-1wmHWwS4

Slide 65

Slide 65 text

Vue - Component Dependencies

Slide 66

Slide 66 text

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.

Slide 67

Slide 67 text

● Docs ● vue-cli ● State management vuex ● Routing - vue-router ● vue-devtools ● vue-test-utils Vue - Community

Slide 68

Slide 68 text

Evan You - State of Vue - VueConf US 2018 https://www.vuemastery.com/conferences/vueconf-2018/opening-keynote-evan-you/ Vue Single File Components

Slide 69

Slide 69 text

Vue Single File Components

Slide 70

Slide 70 text

Vue Single File Components

Slide 71

Slide 71 text

Vue Single File Components

Slide 72

Slide 72 text

Vue Single File Components

Slide 73

Slide 73 text

CSS-in-JS https://github.com/MicheleBertoli/css-in-js

Slide 74

Slide 74 text

CSS-in-JS https://github.com/MicheleBertoli/css-in-js

Slide 75

Slide 75 text

Vue Single File Components https://github.com/vuejs/vue-loader/blob/master/docs/en/configurations/pre-processors.md

Slide 76

Slide 76 text

Vue Single File Components https://github.com/vuejs/vue-loader/blob/master/docs/en/configurations/pre-processors.md

Slide 77

Slide 77 text

Vue Single File Components https://github.com/vuejs/vue-class-component

Slide 78

Slide 78 text

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.”

Slide 79

Slide 79 text

Sarah Drasner Vue Core Team, CSS Tricks NordicJS 2016

Slide 80

Slide 80 text

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.”