forked from riot/custom-elements
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.js
130 lines (115 loc) · 3.53 KB
/
test.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
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import define from './'
const { expect } = chai
const tmpTagName = ((i = 0) => {
return () => `tat-${i++}`
})()
describe('@riotjs/custom-elements', function() {
it('can generate properly the tag options', () => {
const name = tmpTagName()
define(name, {
template: (t, e) => t('<p><!----></p>', [{
selector: 'p',
expressions: [{
type: e.TEXT,
childNodeIndex: 0,
evaluate: (s) => s.props.message // eslint-disable-line
}]
}]),
exports: {
observedAttributes: ['message']
}
})
const el = document.createElement(name)
document.body.appendChild(el)
el.setAttribute('message', 'hello')
expect(el.component.props.message).to.be.equal('hello')
})
it('lifecycle events get properly called', () => {
const name = tmpTagName()
const onBeforeMount = sinon.spy()
const onMounted = sinon.spy()
const onBeforeUpdate = sinon.spy()
const onUpdated = sinon.spy()
const onBeforeUnmount = sinon.spy()
const onUnmounted = sinon.spy()
define(name, {
template: (t, e) => t('<p><!----></p>', [{
selector: 'p',
expressions: [{
type: e.TEXT,
childNodeIndex: 0,
evaluate: (s) => s.props.message
}]
}]),
exports: {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
observedAttributes: ['message']
}
})
const el = document.createElement(name)
document.body.appendChild(el)
expect(onBeforeMount).to.have.been.calledOnce
expect(onMounted).to.have.been.calledOnce
expect(onBeforeUpdate).to.have.not.been.called
expect(onUpdated).to.have.not.been.called
expect(onBeforeUnmount).to.have.not.been.called
expect(onUnmounted).to.have.not.been.called
el.setAttribute('message', 'bar')
expect(onBeforeMount).to.have.been.calledOnce
expect(onMounted).to.have.been.calledOnce
expect(onBeforeUpdate).to.have.been.calledOnce
expect(onUpdated).to.have.been.calledOnce
expect(onBeforeUnmount).to.have.not.been.called
expect(onUnmounted).to.have.not.been.called
el.parentNode.removeChild(el)
expect(onBeforeMount).to.have.been.calledOnce
expect(onMounted).to.have.been.calledOnce
expect(onBeforeUpdate).to.have.been.calledOnce
expect(onUpdated).to.have.been.calledOnce
expect(onBeforeUnmount).to.have.been.calledOnce
expect(onUnmounted).to.have.been.calledOnce
})
it('custom tag api methods will be properly created', () => {
const name = tmpTagName()
define(name, {
template: (t, e) => t('<p><!----></p>', [{
selector: 'p',
expressions: [{
type: e.TEXT,
childNodeIndex: 0,
evaluate: (s) => s.props.message
}]
}]),
exports: {
onClick() {
this.foo = 'bar'
}
}
})
const el = document.createElement(name)
document.body.appendChild(el)
expect(el.component.onClick).to.be.ok
})
it('css will be properly created via shadow DOM', () => {
const name = tmpTagName()
define(name, {
template: (t, e) => t('<p><!----></p>', [{
selector: 'p',
expressions: [{
type: e.TEXT,
childNodeIndex: 0,
evaluate: (s) => s.props.message
}]
}]),
css: ':host { color: red }'
})
const el = document.createElement(name)
document.body.appendChild(el)
expect(window.getComputedStyle(el).color).to.be.equal('rgb(255, 0, 0)')
})
})