/
ui-spec.js
69 lines (63 loc) · 1.92 KB
/
ui-spec.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// @ts-check
import { createItems } from './utils'
import { deleteAll } from './utils-using-client'
describe('TodoMVC', () => {
beforeEach(() => {
// make sure we start with several todos
deleteAll()
const randomTodos = Cypress._.range(0, Cypress._.random(5, 10)).map((k) => {
return {
title: `Todo ${k}`,
completed: Cypress._.sample([true, false]),
}
})
cy.log(`creating ${randomTodos.length} todos`)
createItems(randomTodos)
})
it('toggles todo', () => {
// this test looks at the page UI
// to determine how the class changes
// when we toggle a todo
let startClass
cy.visit('/')
cy.get('li.todo')
.should('have.length.gt', 0)
.first()
.invoke('attr', 'class')
.then((x) => {
startClass = x
})
cy.get('li.todo').first().find('.toggle').click()
// the class names should change
cy.get('li.todo')
.first()
.invoke('attr', 'class')
.should((x) => {
expect(x).to.not.equal(startClass)
})
})
it('toggles todo after observing network calls', () => {
// this test spies on the initial network call
// to see the first todo item and if it is completed or not
cy.intercept('POST', '/').as('allTodos')
cy.visit('/')
cy.wait('@allTodos')
.its('response.body.data.allTodos.0.completed')
.then((completed) => {
// from the network response
// we can form the right assertion
const classAssertion = completed ? 'have.class' : 'not.have.class'
cy.get('.todo')
.should('have.length.gte', 2)
.first()
.should(classAssertion, 'completed')
.find('.toggle')
.click()
const toggleAssertion = completed ? 'not.have.class' : 'have.class'
cy.get('.todo')
.should('have.length.gte', 2)
.first()
.should(toggleAssertion, 'completed')
})
})
})