forked from alpinejs/alpine
-
Notifications
You must be signed in to change notification settings - Fork 2
/
collapse.spec.js
48 lines (42 loc) · 1.56 KB
/
collapse.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
import { haveAttribute, haveComputedStyle, html, test } from '../../utils'
test('can collapse and expand element',
[html`
<div x-data="{ expanded: false }">
<button @click="expanded = ! expanded">toggle</button>
<h1 x-show="expanded" x-collapse>contents</h1>
</div>
`],
({ get }, reload) => {
get('h1').should(haveComputedStyle('height', '0px'))
get('button').click()
get('h1').should(haveAttribute('style', 'overflow: hidden; height: auto;'))
get('button').click()
get('h1').should(haveComputedStyle('height', '0px'))
},
)
test('@click.away with x-collapse (prevent race condition)',
html`
<div x-data="{ show: false }">
<button @click="show = true">Show</button>
<h1 x-show="show" @click.away="show = false" x-collapse>h1</h1>
</div>
`,
({ get }) => {
get('h1').should(haveComputedStyle('height', '0px'))
get('button').click()
get('h1').should(haveAttribute('style', 'overflow: hidden; height: auto;'))
}
)
test('@click.away with x-collapse and borders (prevent race condition)',
html`
<div x-data="{ show: false }">
<button @click="show = true">Show</button>
<h1 style="border: 1x solid" x-show="show" @click.away="show = false" x-collapse>h1</h1>
</div>
`,
({ get }) => {
get('h1').should(haveComputedStyle('height', '0px'))
get('button').click()
get('h1').should(haveAttribute('style', 'overflow: hidden; height: auto;'))
}
)