Integration testing with

Gleb Bahmutov, PhD

VP of Engineering

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

EveryScape

virtual tours

MathWorks

MatLab on the web

Kensho

finance dashboards

11 people. Atlanta, Philly, Boston, LA

Fast, easy and reliable testing for anything that runs in a browser

I have Cypress.io t-shirts (a few)

E2E

integration

unit

Smallest pieces

Testing Pyramid △

Unit tests pass...

November 2015, AngularJS NYC meetup

Unit Testing AngularJS (ng-describe)

A picture of that meetup (things were very different back then)

E2E

integration

unit

Component

(enzyme with full rendering)

E2E

integration

unit

Website

E2E

integration

unit

Really important to users

Really important to developers

Will Klein

$ npm install -D cypress
it('opens the page', () => {
  cy.visit('http://localhost:3000')
  cy.get('.new-todo')
    .should('be.visible')
})
it('adds 2 todos', () => {
  cy.visit('http://localhost:3000')
  cy.get('.new-todo')
    .type('learn testing{enter}')
    .type('be cool{enter}')
  cy.get('.todo-list li')
    .should('have.length', 2)
})

Cypress demo

  • Opening a page
  • Typical test
  • Failing test
  • API and documentation
  • Recording tests
  • CI setup

To learn more:

Egghead.io Cypress Course

Free course (same Egghead.io author!)

Cypress documentation

How does Cypress make 💵

Cypress Dashboard

See, share, and fix failing tests.

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

Sliding down the testing pyramid

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

$ npm install -D cypress cypress-angularjs-unit-test
import angular from 'angular'
angular.module('demo', [])
  .controller('WelcomeController', function($scope) {
    $scope.greeting = 'Welcome!';
    $scope.version = angular.version.full
  });

AngularJS unit test demo with Cypress

app.js

import {mount} from 'cypress-angularjs-unit-test'
beforeEach(() => {
  const template = `
    <div ng-controller="WelcomeController">
      {{greeting}}
    </div>`
  mount(template, ['demo'])
})
it('shows hello', () => {
  // "WelcomeController" should have replaced template
  // expression {{greeting}} with actual text
  cy.contains('div', 'Welcome!').should('be.visible')
})

AngularJS unit test demo with Cypress

spec.js

More info

Angular + Cypress = Love

An Alternative to Protractor for Angular Projects

Summary

Thank you