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