-
Notifications
You must be signed in to change notification settings - Fork 3
/
fun-component.js
60 lines (51 loc) · 1.67 KB
/
fun-component.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
/// <reference types="cypress" />
it('can access functional component (experimental)', () => {
cy.visit('/')
cy.log('**initial state**')
cy.get('.fun-counter')
.getComponent()
.its('state')
.should('deep.equal', [7, 14])
cy.get('.fun-counter').within(() => {
cy.contains('[data-cy=count]', '7')
cy.get('[data-cy=add]').click().click()
cy.contains('[data-cy=count]', '9')
})
cy.get('.fun-counter').getComponent().its('props').should('deep.equal', {
initialCount: 7,
something: 'else',
})
// check the hook names used in the component
// expect(comp._debugHookTypes).to.deep.equal(['useState', 'useState'])
cy.get('.fun-counter [data-cy=add]').click().click()
cy.get('.fun-counter')
.getComponent()
.its('state')
.should('deep.equal', [11, 22])
// can we trigger the hooks?
cy.get('.fun-counter')
.getComponent()
.then((comp) => {
comp.memoizedState.queue.dispatch(20)
})
// the component re-renders
cy.contains('.fun-counter [data-cy=count]', '20').should('be.visible')
// how to get the updated state?
// cy.get('.fun-counter')
// .getComponent()
// .then(console.log)
// .its('state')
// .should('deep.equal', [20, 22])
// if we go through the UI, then the internal state is updated
cy.get('.fun-counter [data-cy=add]').click()
cy.contains('.fun-counter [data-cy=count]', '21').should('be.visible')
cy.get('.fun-counter')
.getComponent()
.its('state')
.should('deep.equal', [21, 24])
})
it.skip('can get the hook variable name (really really experimental)', () => {
cy.visit('/')
cy.log('**initial state**')
cy.get('.fun-counter').getComponent().then(console.log)
})