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

Made with Slides.com

BDD Testing with Cypress Cucumber

Presentation for Denver Vue.js, April 2020

  • 1,593

More from Kyle Coberly