-
Notifications
You must be signed in to change notification settings - Fork 3.1k
/
InlineSpecListTree.cy.tsx
103 lines (84 loc) · 3.53 KB
/
InlineSpecListTree.cy.tsx
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import { ref } from 'vue'
import { useSpecStore } from '../store'
import InlineSpecListTree from './InlineSpecListTree.vue'
import type { FuzzyFoundSpec } from './tree/useCollapsibleTree'
describe('InlineSpecListTree', () => {
let foundSpecs: FuzzyFoundSpec[]
before(() => {
cy.fixture('found-specs').then((specs) => foundSpecs = specs.map((spec) => ({ ...spec, indexes: [] })))
})
it('handles keyboard navigation', () => {
const specProp = ref(foundSpecs.slice(0, 4))
cy.mount(() => (
<div class="bg-gray-1000">
<InlineSpecListTree specs={specProp.value}/>
</div>
))
// should have 4 actual spec links
cy.get('[data-cy=spec-row-item] a').should('have.length', 4)
// should have 3 toggle buttons to hide and show directories
cy.get('[data-cy=spec-row-item] button').should('have.length', 3)
.and('have.attr', 'aria-expanded', 'true') // all should be open at the start
cy.findAllByTestId('spec-row-item').should('have.length', 7)
.first()
.find('button')
.focus() // avoid Cypress triggering a 'click' before typing (which causes 2 separate toggles, meaning no state change)
.type('{enter}')
cy.findAllByTestId('spec-row-item')
.should('have.length', 1)
.first()
.find('button')
.should('have.attr', 'aria-expanded', 'false')
.type('{rightarrow}') // expand this folder
.type('{downarrow}') // move to next row
.focused() // focused element should be next row
.type('{enter}') // should close next row
// now only one link should be shown
cy.get('[data-cy=spec-row-item] a').should('have.length', 1)
.and('contain.text', 'Spec-D.spec.tsx')
// some specific assertions about button label text and aria state
cy.contains('button', 'src').should('have.attr', 'aria-expanded', 'true')
cy.contains('button', 'components').should('have.attr', 'aria-expanded', 'false')
cy.contains('button', 'utils').should('have.attr', 'aria-expanded', 'true')
})
it('collapses and rebuilds tree on specs change', () => {
const specProp = ref(foundSpecs.slice(0, 3))
cy.mount(() => (
<div class="bg-gray-1000">
<InlineSpecListTree specs={specProp.value}/>
</div>
))
cy.contains('button [data-cy=directory-item]', 'src/components')
cy.findAllByTestId('spec-file-item').should('have.length', specProp.value.length)
cy.then(() => {
specProp.value = foundSpecs.slice(0, 4)
cy.findAllByTestId('directory-item').first().should('contain', 'src').and('not.contain', '/components')
cy.findAllByTestId('spec-file-item').should('have.length', specProp.value.length)
})
})
it('displays a spec list tree with an active spec', () => {
const specStore = useSpecStore()
specStore.setActiveSpec({
relative: 'src/components/Spec-B.spec.tsx',
absolute: '',
name: 'src/components/Spec-B.spec.tsx',
fileName: 'src/components/Spec-B.spec.tsx',
baseName: 'Spec-B.spec.tsx',
})
const specProp = ref(foundSpecs.slice(0, 4))
cy.mount(() => (
<div class="bg-gray-1000">
<InlineSpecListTree specs={specProp.value}/>
</div>
))
cy.get('[data-selected-spec="true"] span').should('contain', 'Spec-B').should('have.css', 'color', 'rgb(255, 255, 255)')
cy.get('[data-selected-spec="false"]').should('have.length', '6')
.should('contain', 'src')
.should('contain', 'components')
.should('contain', 'Spec-A')
.should('contain', 'Spec-C')
.should('contain', 'utils')
.and('contain', 'Spec-D')
cy.percySnapshot()
})
})