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

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