-
Notifications
You must be signed in to change notification settings - Fork 1
/
todo-item-spec.js
66 lines (58 loc) · 1.69 KB
/
todo-item-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
/// <reference types="cypress" />
import { h } from 'hyperapp'
import { TodoItem } from '../../components/todo-item'
import { mount } from '../../src'
/* eslint-env mocha */
describe('TodoItem', () => {
beforeEach(() => {
const state = {
title: 'Try HyperApp',
completed: false
}
const actions = {
toggle: () => state => ({ completed: !state.completed })
}
const view = (state, actions) =>
h(TodoItem, {
id: 1,
title: state.title,
completed: state.completed,
toggle: actions.toggle
})
mount(state, actions, view)
})
it('shows todo', () => {
cy.contains('Try HyperApp')
})
it('is unchecked for unfinished item', () => {
cy.get('.toggle').should('have.length', 1).should('not.be.checked')
})
it('toggles item on click', () => {
cy.get('.todo').click()
cy.get('.toggle').should('be.checked')
})
it('changes state on click', () => {
cy.get('.todo').click()
Cypress.main._getState().should('deep.equal', {
completed: true,
title: 'Try HyperApp'
})
// click again
cy.get('.todo').click()
Cypress.main._getState().should('deep.equal', {
completed: false,
title: 'Try HyperApp'
})
})
it('changes state by invoking action', () => {
// the component's actions are referenced in Cypress.main
Cypress.main.toggle()
cy.get('.toggle').should('be.checked')
// because actions inside Cypress.main are queued into the
// Cypress command queue first we can just call them
// the toggle below will happen AFTER the toggle check above
// has already passed
Cypress.main.toggle()
cy.get('.toggle').should('not.be.checked')
})
})