Accessibility-Driven Testing

Just test everything?

Are you flossing

after every meal?

Two essentials tests

  • Can users log in?
  • Can they give us money?

Tool recommendations

  • Cypress for end-to-end (e2e) tests
  • Jest + Vue Test Utils for unit tests

What is accessibility-driven testing?

Advantages

  • More reliable
  • Simpler
  • Reveals hidden bugs

How I got here

cy.get('.email-input')
cy.get('.test-email-input')
cy.get('[data-test="email-input"]')

What's the problem?

cy.get('[data-test="email-input"]').type(testUser.email)
cy.get('[data-test="username-input"]').type(testUser.name)
cy.get('[data-test="password-input"]').type(testUser.password)

Think as the user

cy.contains('label', 'email', { matchCase: false }).click()
cy.focused()
  .should('have.attr', 'type', 'email')
  .type(testUser.email)

cy.contains('label', 'name', { matchCase: false }).click()
cy.focused()
  .should('have.attr', 'type', 'text')
  .type(testUser.name)

cy.contains('label', 'password', { matchCase: false }).click()
cy.focused()
  .should('have.attr', 'type', 'password')
  .type(testUser.password)

Too much work... 😓

Reusable custom commands

Cypress.Commands.add('input', (inputType, inputLabel) => {
  inputLabel = inputLabel || inputType 

  cy.contains('label', inputLabel, { matchCase: false }).click()
  
  return cy.focused().should('have.attr', 'type', inputType)
})
cy.input('email').type(testUser.email)
cy.input('text', 'name').type(testUser.name)
cy.input('password').type(testUser.password)
cy.get('[data-test="email-input"]').type(testUser.email)
cy.get('[data-test="username-input"]').type(testUser.name)
cy.get('[data-test="password-input"]').type(testUser.password)

Reveal bugs

cy.contains('button', 'Add to cart').click()

Error!

How to fix?

cy.route("GET", "api/products/1/inventory")
  .as("getProductInventory")
  .wait("@getProductInventory")
cy.wait(5000)

?

?

<button :disabled="isFetchingData" ...>
  Add to cart
</button>

!

Also works for unit tests!

(devs are the users!)

That's all!

Special thanks to my Vuesionary sponsors

  • Vuetify
  • Vue School
  • Vue Mastery
  • Ben Hong

@chrisvfritz

slides.com/chrisvfritz/

adt-2020-03