-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
custom-directives.spec.js
51 lines (46 loc) · 1.34 KB
/
custom-directives.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
import { haveText, html, test } from '../utils'
test('can register custom directive',
[html`
<div x-data>
<span x-foo:bar.baz="bob"></span>
</div>
`,
`
Alpine.directive('foo', (el, { value, modifiers, expression }) => {
el.textContent = value+modifiers+expression
})
`],
({ get }) => get('span').should(haveText('barbazbob'))
)
test('directives are auto cleaned up',
[html`
<div x-data="{ count: 0 }">
<span x-foo x-ref="foo"></span>
<h1 x-text="count"></h1>
<button @click="count++" id="change">change</button>
<button @click="$refs.foo.remove()" id="remove">remove</button>
</div>
`,
`
Alpine.directive('foo', (el, {}, { effect, cleanup, evaluateLater }) => {
let incCount = evaluateLater('count++')
cleanup(() => {
incCount()
incCount()
})
effect(() => {
incCount()
})
})
`],
({ get }) => {
get('h1').should(haveText('1'))
get('#change').click()
get('h1').should(haveText('3'))
get('#remove').click()
get('#change').click()
get('h1').should(haveText('6'))
get('#change').click()
get('h1').should(haveText('7'))
}
)