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

TESTING
VUE APPS
WITH
CYPRESS.IO

CHRISTIAN CATALAN
@christianreyco
UI Engineer
Austin, TX

UI TESTING
THE
STRUGGLE
IS REAL

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/

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

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

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

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

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

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?
Brian Mann
Founder Cypress.io
AssertJS 2018

Cypress - Interactive Test Runner

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

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

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

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

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

Edd Yerburgh
Author vue-test-utils
VueConf US 2018

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.

Testing Boundaries
Method
Args
Primitive

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

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

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

SEMICONDUCTOR
TESTING
(#SCIENCE)

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

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

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

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

CYPRESS
EXAMPLES
PROBESCOUT APP

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

● Stub auth in helper within tests
Cypress - Programmatic Authentication

● Expand a list of items
Cypress - Toggle Interactivity

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

● Deep Selecting table library
Cypress - Filling Out Table Form

Cypress - Filling Out Table Form

Cypress Examples - File Upload

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

Cypress Examples - Simulating Delay

Cypress - E2E Testing Strategies

Cypress - Best Practices

Cypress Programmatic State Management

● 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

Cypress - cypress-vue-unit-test

● 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

● 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

● 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

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

Evan You
Author Vue
UtahJS 2016

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

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

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.

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

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

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

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

https://github.com/vuejs/vue-class-component

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

Sarah Drasner
Vue Core Team, CSS Tricks
NordicJS 2016

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

Vue Data, Props, Computed, Methods Declarative

● 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

Vue Slots - Scoped/Render Props Example
✨Manage State
✨Provide props to slot

Vue Slots - Scoped/Render Props Example
✨ Localized Composition

● 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

● 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

THANK YOU!
@christianreyco
https://www.linkedin.com/in/crcatala

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

More Related Content

What's hot

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

Recently uploaded

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