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!)
Vue Enterprise Boilerplate
That's all!
Special thanks to my Vuesionary sponsors
- Vuetify
- Vue School
- Vue Mastery
- Ben Hong
@chrisvfritz
slides.com/chrisvfritz/
adt-2020-03