BDD Testing with Cypress Cucumber

Kyle Coberly

kylecoberly.com

BDD

  • "Specification by example"
  • Link business needs to tests
  • Living, executable documentation
  • Ubiquitous language
  • TDD

Cypress

  • Browser automation
  • BDD assertions
  • API mocking
  • Customizable
describe('My First Test', () => {
  it('clicking "type" navigates to a new url', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')
  })
})

Cucumber

Feature Files

Step Definitions

Business Language

Programming Language

Given I'm on the Google home page
When I search for "dogs"
Then I see links related to "dogs"
Given("I'm on the Google home page", () => {
  visit("https://google.com")
})

Double-Loop Testing

  • Business-facing tests that support the code
  • Technology-facing tests that support the code

paper.ly

An app that tracks how many days of toilet paper you have left.*

*(This was Chad Beninati's fault)

Concepts:

  • "Days Remaining"
  • "Rolls Remaining"
  • "Roll Rate"
  • "Stats"

Test Selectors

  • Data attributes
  • Start with `data-test`
  • Aren't coupled to UI or logic
  • Strippable during builds
<h1 class="logo" data-test-logo>paper.ly</h1>

Cucumber File Structure

/test
	|- e2e
		|- common
		|- plugins
		|- specs
			|- DisplayStats
				|- index.js
			|- DisplayStats.feature
			|- ChangeRollsRemaining
				|- index.js
			|- ChangeRollsRemaining.feature
		|- support
	|- unit

My Cypress BDD Commands

  • the / theFirst
  • clickThe / clickTheFirst
  • fillOutThe / with
  • getStore / dispatch / commit / setState / getState

Vue Unit Testing

Component

Store

Test that actions change state

Test that behavior dispatches actions

Integration Test

Results

  • App is tested
  • App is documented
  • App does stakeholders think it does

Questions?

Kyle Coberly

kylecoberly.com

BDD Testing with Cypress Cucumber

By Kyle Coberly

BDD Testing with Cypress Cucumber

Presentation for Denver Vue.js, April 2020

  • 1,694