/// <reference types="cypress" />
import {
resetDatabase,
visit,
newId,
enterTodo,
stubMathRandom,
makeTodo,
getTodoItems,
getNewTodoInput,
} from '../support/utils'
// testing the central Vuex data store
describe('UI to Vuex store', () => {
beforeEach(resetDatabase)
beforeEach(() => visit())
const getStore = () => cy.window().its('app.$store')
it('has loading, newTodo and todos properties', () => {
// getStore().its('state').should('have.keys', ['loading', 'newTodo', 'todos'])
getStore()
.its('state')
.then(Object.keys)
.snapshot()
})
it('starts empty', () => {
const omitLoading = (state) => Cypress._.omit(state, 'loading')
getStore()
.its('state')
.then(omitLoading)
.snapshot()
})
it('can enter new todo text', () => {
const text = 'learn how to test with Cypress.io'
cy.get('.todoapp')
.find('.new-todo')
.type(text)
.trigger('change')
getStore()
.its('state.newTodo')
.snapshot()
})
it('stores todos in the store', () => {
enterTodo('first todo')
enterTodo('second todo')
getStore()
.its('state.todos')
.should('have.length', 2)
const removeIds = (list) => list.map((todo) => Cypress._.omit(todo, 'id'))
getStore()
.its('state.todos')
.then(removeIds)
.snapshot()
})
const stubMathRandom = () => {
// first two digits are disregarded, so our "random" sequence of ids
// should be '1', '2', '3', ...
let counter = 101
cy.window().then((win) => {
cy.stub(win.Math, 'random').callsFake(() => counter++)
})
}
it('stores todos in the store (with ids)', () => {
stubMathRandom()
enterTodo('first todo')
enterTodo('second todo')
getStore()
.its('state.todos')
.should('have.length', 2)
getStore()
.its('state.todos')
.snapshot()
})
})
describe('Vuex store', {
retries: {
runMode: 2,
openMode: 1,
},
}, () => {
beforeEach(resetDatabase)
beforeEach(() => visit())
beforeEach(stubMathRandom)
// returns the entire Vuex store
const getStore = (log = true) => cy.window({ log }).its('app.$store', { log })
// and a helper methods because we are going to pull "todos" often
const getStoreTodos = () => {
// always wait for the store to finish loading
getStore(false).its('state.loading').should('be.false')
return getStore().its('state.todos')
}
it('starts empty', () => {
getStoreTodos().snapshot()
})
it('can enter new todo text', () => {
const text = 'learn how to test with Cypress.io'
cy.get('.todoapp')
.find('.new-todo')
.type(text)
.trigger('change')
getStore().its('state.newTodo').snapshot()
})
it('can compare the entire store', () => {
getStore().its('state').snapshot()
})
it('starts typing after delayed server response', () => {
// this will force new todo item to be added only after a delay
cy.intercept(
'POST',
'/todos',
{
delay: 1000,
body: {},
}
)
const title = 'first todo'
enterTodo(title)
const newTitleText = 'this is a second todo title, slowly typed'
getNewTodoInput()
.type(newTitleText, { delay: 50 })
.trigger('change')
getNewTodoInput().snapshot()
})
it('can add a todo, type and compare entire store', () => {
const title = 'a random todo'
enterTodo(title)
const text = 'learn how to test with Cypress.io'
cy.get('.todoapp')
.find('.new-todo')
.type(text)
.trigger('change')
getStore().its('state').snapshot()
})
it('can add a todo', () => {
const title = `a single todo ${newId()}`
enterTodo(title)
getStoreTodos()
.should('have.length', 1)
.its('0')
.and('have.all.keys', 'id', 'title', 'completed')
})
// thanks to predictable random id generation
// we know the objects in the todos list
it('can add a particular todo', () => {
const title = `a single todo ${newId()}`
enterTodo(title)
getStoreTodos().snapshot()
})
it('can add two todos and delete one', () => {
const first = makeTodo()
const second = makeTodo()
enterTodo(first.title)
enterTodo(second.title)
getTodoItems()
.should('have.length', 2)
.first()
.find('.destroy')
.click({ force: true })
getTodoItems().should('have.length', 1)
getStoreTodos().snapshot()
})
it('can be driven by dispatching actions', () => {
getStore().then((store) => {
store.dispatch('setNewTodo', 'a new todo')
store.dispatch('addTodo')
store.dispatch('clearNewTodo')
})
// assert UI
getTodoItems()
.should('have.length', 1)
.first()
.contains('a new todo')
// make sure the store is done loading
getStore(false).its('state.loading').should('be.false')
// then snapshot it
getStore().its('state').snapshot()
})
})
describe('Store actions', {
retries: {
runMode: 2,
openMode: 1,
},
}, () => {
const getStore = () => cy.window().its('app.$store')
beforeEach(resetDatabase)
beforeEach(() => visit())
beforeEach(stubMathRandom)
it('changes the state', () => {
getStore().then((store) => {
store.dispatch('setNewTodo', 'a new todo')
store.dispatch('addTodo')
store.dispatch('clearNewTodo')
})
// Wait for the store to finish loading
getStore().its('state.loading').should('be.false')
// And then snapshot it
getStore().its('state').snapshot()
})
it('changes the state after delay', () => {
// this will force store action "setNewTodo" to commit
// change to the store only after a second
cy.intercept(
'POST',
'/todos',
{
delay: 1000,
body: {},
}
).as('post')
getStore().then((store) => {
store.dispatch('setNewTodo', 'a new todo')
store.dispatch('addTodo')
store.dispatch('clearNewTodo')
})
getStore()
.its('state.todos')
.should('have.length', 1)
// Wait for the store to finish loading
getStore().its('state.loading').should('be.false')
// And then snapshot it
getStore().its('state').snapshot()
})
it('changes the ui', () => {
getStore().then((store) => {
store.dispatch('setNewTodo', 'a new todo')
store.dispatch('addTodo')
store.dispatch('clearNewTodo')
})
// assert UI
getTodoItems()
.should('have.length', 1)
.first()
.contains('a new todo')
})
it('calls server', () => {
cy.intercept('POST', '/todos').as('postTodo')
getStore().then((store) => {
store.dispatch('setNewTodo', 'a new todo')
store.dispatch('addTodo')
store.dispatch('clearNewTodo')
})
// assert server call
cy.wait('@postTodo')
.its('request.body')
.snapshot()
})
it('calls server with delay', () => {
cy.intercept(
'POST',
'/todos',
{
delay: 1000,
body: {},
}
).as('postTodo')
getStore().then((store) => {
store.dispatch('setNewTodo', 'a new todo')
store.dispatch('addTodo')
store.dispatch('clearNewTodo')
})
// assert server call - will wait a second until stubbed server responds
cy.wait('@postTodo')
.its('request.body')
.snapshot()
})
})
