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

Testing Myths

It is too hard

It takes too long

It is not that useful

E2E

integration

unit

Smallest pieces

Unit tests pass...

E2E

integration

unit

Component

E2E

integration

unit

Website

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
})

E2E test demo

UI testing

Veux testing

API testing

  • failures
  • recording
  • ci
  • docs
$ 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

Need:

  • real browser (DOM, storage, ...)
  • state cleanup between tests
  • stubbing server

E2E

integration

unit

Need:

  • real browser (DOM, storage, ...)
  • state cleanup between tests
  • stubbing server

WAIT A MINUTE!

Interact, inspect, use

cypress-vue-unit-test

cypress-react-unit-test

cypress-svelte-unit-test

cypress-hyperapp-unit-test

...

$ 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 ?!

Cypress for Integration

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)
})

Unit test

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)
})

Integration test?

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)
})

Integration test?

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,

...

Unit test

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

🔋🔋🔋🔋🔋🔋🔋🔋🔋🔋🔋

Thank you

@cypress_io

@bahmutov

Come join us!    www.cypress.io/jobs

Testing Vue

By Gleb Bahmutov

Testing Vue

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.

  • 349
Loading comments...

More from Gleb Bahmutov