Modern Integration Testing for JavaScript Applications

Dr Gleb Bahmutov PhD

VP of Eng Cypress.io

https://brorlandi.github.io/StarWarsIntroCreator/#!/AKvZH0cnoiZCJIPh7Kz0

C / C++ / C# / Java / CoffeeScript / JavaScript / Node / Angular / Vue / Cycle.js / functional

EveryScape

virtual tours

MathWorks

MatLab on the web

Kensho

finance dashboards

Testing sucks

It is too hard

It takes too long

It is not that useful

@bahmutov

Testing is

a drag

@bahmutov

Testing Pyramid

@bahmutov

Unit tests pass...

https://twitter.com/kentcdodds/status/628658648001048577

@bahmutov

We write more unit tests because our tools make it EASY

@bahmutov

$ npm install -D jest

const add = require('./add')
describe('addition', () => {
  it('adds numbers', () => {
    expect(add(1, 2)).toBe(3)
  })
})

$ npm test

@bahmutov

How test end to end

During a full moon sacrifice two goats
Install Selenium
Quickly write E2E tests and throw them into Selenium before it gets angry

@bahmutov

E2E should be easy

Easy to install
Easy to write tests
Simple to run

Easy to debug when a test fails

@bahmutov

$ npm install -D cypress

Tip: cache "node_modules" folder on CI

https://github.com/bahmutov/effective-e2e-testing-with-cypress

@bahmutov

Let's test "TodoMVC"!

http://todomvc.com/

@bahmutov

Is the app focused on "New Todo" input?

@bahmutov

https://docs.cypress.io

this looks close

@bahmutov

https://docs.cypress.io/api/commands/focused.html

it('is focused on new item', () => {
  cy.visit(url)
  cy.focused()
})

that's result of "cy.focused()"

it('is focused on new item', () => {
  cy.visit(url)
  cy.focused().should('have.class', 'new-todo')
})

I know exactly what happens

it('is focused on new item', () => {
  cy.visit(url)
  cy.focused().should('have.class', 'new-todo')
})

Every command

outputs detailed info

in DevTools

Making Assertions

https://docs.cypress.io/api/commands/should.html

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Assertions

Chai, Chai-jQuery, Sinon-Chai

@bahmutov

https://on.cypress.io/assertions

@bahmutov

Default Assertions

cy.visit() expects the page to send text/html content with a 200 status code
cy.get() expects the element to eventually exist in the DOM
.type() expects the element to eventually be in a typeable state

and many more ...

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Default-Assertions

Failing Test

The first time one of your

tests fails in Cypress

will be one of your best days

as a developer

@bahmutov

zero elements found

@bahmutov

cy.get('#todo-list')
  .find('li')
  .first()
  .type('foo')

Trying to type into a list item element

@bahmutov

Cypress team

carefully hand crafts

each and every

error message

@bahmutov

Giant API

https://on.cypress.io/api

80 commands + events + utilities (lodash, moment, jQuery) + assertions

@bahmutov

Every command is described in excruciating detail

Syntax
Correct usage
Incorrect usage
Options
What it logs
Examples and best practices

https://docs.cypress.io/api/commands/viewport.html

cy.viewport('iphone-6')

@bahmutov

Test whatever you want

const url = 'http://todomvc.com/examples/vue/'
cy.visit(url)

{
  "baseUrl: "http://todomvc.com/examples/aurelia/"
}
cy.visit('/')

cypress.json

$ export CYPRESS_baseUrl=http://todomvc.com/examples/typescript-react/
$ $(npm bin)/cypress run

@bahmutov

https://www.cypress.io/blog/2017/05/30/cypress-and-immutable-deploys/

Need for Speed

@bahmutov

Cypress is VERY FAST

@bahmutov

Selenium

var webdriverio = require('webdriverio');
var options = { desiredCapabilities: { browserName: 'chrome' } };
var client = webdriverio.remote(options);
client
    .init()
    .url('https://duckduckgo.com/')
    .setValue('#search_form_input_homepage', 'WebdriverIO')
    .click('#search_button_homepage')
    .getTitle().then(function(title) {
        console.log('Title is: ' + title);
        // outputs:
        // "Title is: WebdriverIO (Software) at DuckDuckGo"
    })
    .end();

Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
       .withTimeout(30, SECONDS)
       .pollingEvery(5, SECONDS)
       .ignoring(NoSuchElementException.class);

Timeouts, timeouts everywhere!

@bahmutov

Cypress

Test continues as soon as DOM updates

@bahmutov

But wait, there is more ...

Add your commands
Server stubbing
Screenshots and videos
Chromium-based browsers
Easy CI setup

@bahmutov

Is there is a catch?

Multi-browser support is coming
Windows support is coming
Plugin system is coming

https://on.cypress.io/roadmap

https://github.com/cypress-io/cypress

@bahmutov

This week 🤔

Giving Cypress Away

@bahmutov

This week 🤔

Cypress Dashboard

See, share, and fix failing tests.

https://www.cypress.io/dashboard/

@bahmutov

https://docs.cypress.io/dashboard/overview/features-dashboard.html

@bahmutov

Cypress Dashboard

Is a paid Saas complement to Cypress app
Perfect place to store test results, screenshots and videos
Helps find why and when a test started failing

@bahmutov

Thank you

slides.com/bahmutov/boston-js-testing

$ npm install -D cypress

Modern Integration Testing for JavaScript Applications

By Gleb Bahmutov