// Store data in ./fixtures/mixed_todos.json
[
{ "id": 1, "name": "Eat", isComplete: true },
{ "id": 2, "name": "Sleep", isComplete: false },
{ "id": 3, "name": "Dream", isComplete: false }
]
// Add you custom command in here: support/commands.js
Cypress.Commands.add('seedAndVisit', (seedData = 'fixture:todos') => {
cy.server()
cy.route('GET', '/api/todos', seedData)
.as('loadToComplete')
cy.visit('/')
cy.wait('@loadToComplete')
})
describe('the Footer component', () => {
it('filters the todos correctly', () => {
cy.sendAndVist('fixture:mixed_todos')
const filters = [
{ link: 'Active', size: 2 },
{ link: 'Completed', size: 1 },
{ link: 'All', size: 3 },
]
// Data-driven approach to testing
cy.wrap(filters)
.each((filter) => {
const { link, size } = filter
cy.contains(link).click()
cy.get('.list-item').should('have.length', size)
})
})
})