Gleb Bahmutov PRO
JavaScript ninja, image processing expert, software quality fanatic
or
"Everything you know about testing is a lie"
C / C++ / C# / Java / CoffeeScript / JavaScript / Node / Angular / Vue / Cycle.js / functional
EveryScape
virtual tours
MathWorks
MatLab on the web
Kensho
finance dashboards
Cypress.io open source E2E test runner
E2E
integration
unit
E2E
integration
unit
E2E
integration
unit
Vue.use(Vuex)
const store = new Vuex.Store({ ... })
// store makes HTTP calls to the server
const app = new Vue({
store,
el: '.todoapp',
created () {
this.$store.dispatch('loadTodos')
},
...
methods: {
setNewTodo (e) {
this.$store.dispatch('setNewTodo', e.target.value)
},
...
})
window.app = app
})
$ npm install -D cypress
// ui-spec.js
it('loads the app', () => {
cy.visit('/')
cy.get('.todoapp').should('be.visible')
})
const visit = () => cy.visit('/')
describe('UI', () => {
beforeEach(resetDatabase)
beforeEach(visit)
context('basic features', () => {
it('starts with zero items', () => {
cy.get('.todo-list')
.find('li')
.should('have.length', 0)
})
})
})
E2E
integration
unit
E2E
integration
unit
WAIT A MINUTE!
$ npm install -D cypress cypress-vue-unit-test
const mountVue = require('cypress-vue-unit-test')
describe('My Vue', () => {
beforeEach(mountVue(/* my Vue code */, /* options */))
it('renders', () => {
// Any Cypress command
// Cypress.vue is the mounted component reference
})
})
Vue component test demo with Cypress
E2E
integration
unit
Why are they called
cypress-<X>-unit-test ?!
E2E
integration
unit
function add(a, b) {
return a + b
}
add(a, b)
outputs
inputs
a, b
returned value
it('adds', () => {
expect(add(2,3)).to.equal(5)
})
function add(a, b) {
const el = document.getElementById('result')
el.innerText = a + b
}
add(a, b)
outputs
inputs
a, b
DOM
it('adds', () => {
add(2,3)
const el = document.getElementById('result')
expect(el.innerText).to.equal(5)
})
function add() {
const {a, b} =
JSON.parse(localStorage.getItem('inputs'))
const el = document.getElementById('result')
el.innerText = a + b
}
add(a, b)
outputs
inputs
localStorage
DOM
it('adds', () => {
localStorage.setItem('inputs') =
JSON.stringify({a: 2, b: 3})
add()
const el = document.getElementById('result')
expect(el.innerText).to.equal(5)
})
component
outputs
inputs
DOM,
localStorage,
location,
HTTP,
cookies
WW, SW,
...
DOM,
localStorage,
location,
HTTP,
cookies
WW, SW,
...
component
outputs
inputs
DOM,
localStorage,
location,
HTTP,
cookies
WW, SW,
...
DOM,
localStorage,
location,
HTTP,
cookies
WW, SW,
...
Set up
Assert
Mount
E2E
unit
it('logs user in', () => {
cy.visit('page.com')
cy.get('#login').click()
})
E2E
unit
it('logs user in', () => {
mount(LoginComponent)
cy.get('#login').click()
})
E2E
unit
Use same syntax, life cycle and Cypress API
🔋🔋🔋🔋🔋🔋🔋🔋🔋🔋🔋
@cypress_io
@bahmutov
Come join us!  www.cypress.io/jobs
By Gleb Bahmutov
Testing Vue web application using Cypress. End to end testing and integration testing of components. Presented at Vue.js Boston meetup on the last day of February 2018.
JavaScript ninja, image processing expert, software quality fanatic