Skip to content

Commit 41bc622

Browse files
mrholekmrholek
committed
tests: update test
1 parent 4e5c661 commit 41bc622

File tree

3 files changed

+179
-31
lines changed

3 files changed

+179
-31
lines changed

‎js/tests/integration/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77

88
<!-- Bootstrap CSS -->
9-
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
9+
<link rel="stylesheet" href="../../../dist/css/coreui.min.css">
1010

1111
<title>Hello, world!</title>
1212
</head>

‎js/tests/unit/carousel.spec.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fi
66

77
describe('Carousel', () => {
88
const { Simulator, PointerEvent } = window
9-
10-
console.log(Simulator)
119
const originWinPointerEvent = PointerEvent
1210
const supportPointerEvent = Boolean(PointerEvent)
1311

‎js/tests/unit/class-toggler.spec.js

Lines changed: 178 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,144 +14,294 @@ describe('ClassToggler', () => {
1414
clearFixture()
1515
})
1616

17-
describe('attach', () => {
18-
it('should add the add-this-class class to c-app element', done => {
17+
describe('add', () => {
18+
it('should add the `add-class` class to `.c-app` element', done => {
1919
fixtureEl.innerHTML = [
2020
'<div class="c-app">',
21-
' <button type="button" class="c-class-toggler" data-target=".c-app" data-attach="add-this-class"></div>',
21+
' <button type="button" class="c-class-toggler" data-target=".c-app" data-add-class="add-class"></div>',
2222
'</div>'
2323
].join('')
2424

2525
const c = document.querySelector('.c-app')
2626
const toggler = document.querySelector('.c-class-toggler')
2727

28-
c.addEventListener('classattached', () => {
29-
expect(c.classList.contains('add-this-class')).toEqual(true)
28+
c.addEventListener('classadded', () => {
29+
expect(c.classList.contains('add-class')).toEqual(true)
3030
done()
3131
})
3232

3333
toggler.click()
3434
})
35+
36+
it('should add `add-class1` and `add-class2` classes to `.c-app` element', done => {
37+
fixtureEl.innerHTML = [
38+
'<div class="c-app">',
39+
' <button type="button" class="c-class-toggler" data-target=".c-app" data-add-class="add-class1,add-class2"></div>',
40+
'</div>'
41+
].join('')
42+
43+
const c = document.querySelector('.c-app')
44+
const toggler = document.querySelector('.c-class-toggler')
45+
46+
c.addEventListener('classadded', () => {
47+
// eslint-disable-next-line max-nested-callbacks
48+
setTimeout(() => {
49+
expect(c.classList.contains('add-class1')).toEqual(true)
50+
expect(c.classList.contains('add-class2')).toEqual(true)
51+
done()
52+
}, 250)
53+
})
54+
55+
toggler.click()
56+
})
3557
})
3658

37-
describe('detach', () => {
38-
it('should remove the add-this-class class from c-app element', done => {
59+
describe('remove', () => {
60+
it('should remove the `remove-class` class from `.c-app` element', done => {
3961
fixtureEl.innerHTML = [
40-
'<div class="c-app add-this-class">',
41-
' <button type="button" class="c-class-toggler" data-target=".c-app" data-detach="add-this-class"></div>',
62+
'<div class="c-app remove-class">',
63+
' <button type="button" class="c-class-toggler" data-target=".c-app" data-remove-class="remove-class"></div>',
4264
'</div>'
4365
].join('')
4466

4567
const c = document.querySelector('.c-app')
4668
const toggler = document.querySelector('.c-class-toggler')
4769

48-
c.addEventListener('classdetached', () => {
49-
expect(c.classList.contains('add-this-class')).toEqual(false)
70+
c.addEventListener('classremoved', () => {
71+
expect(c.classList.contains('remove-class')).toEqual(false)
5072
done()
5173
})
5274

5375
toggler.click()
5476
})
5577

56-
it('should remove following classes from tc-app element `test-xl-show`, `test-lg-show`, `test-md-show`, `test-sm-show`, `test-show`', done => {
78+
it('should remove `remove-class1`, `remove-class2` and ` remove-class2` classes from `.c-app` element', done => {
79+
fixtureEl.innerHTML = [
80+
'<div class="c-app">',
81+
' <button type="button" class="c-class-toggler" data-target=".c-app" data-remove-class="remove-class1,remove-class2, remove-class3"></div>',
82+
'</div>'
83+
].join('')
84+
85+
const c = document.querySelector('.c-app')
86+
const toggler = document.querySelector('.c-class-toggler')
87+
88+
c.addEventListener('classremoved', () => {
89+
// eslint-disable-next-line max-nested-callbacks
90+
setTimeout(() => {
91+
expect(c.classList.contains('remove-class1')).toEqual(false)
92+
expect(c.classList.contains('remove-class2')).toEqual(false)
93+
expect(c.classList.contains('remove-class3')).toEqual(false)
94+
done()
95+
}, 250)
96+
})
97+
98+
toggler.click()
99+
})
100+
101+
it('should remove following classes from the `.c-app` element `test-xl-show`, `test-lg-show`, `test-md-show`, `test-sm-show`, `test-show`', done => {
57102
fixtureEl.innerHTML = [
58103
'<div class="c-app test-xl-show test-lg-show test-md-show test-sm-show test-show">',
59-
' <button type="button" class="c-class-toggler" data-target=".c-app" data-detach="test-xl-show" data-responsive="true"></div>',
104+
' <button type="button" class="c-class-toggler" data-target=".c-app" data-remove-class="test-xl-show" data-responsive="true"></div>',
60105
'</div>'
61106
].join('')
62107

63108
const c = document.querySelector('.c-app')
64109
const toggler = document.querySelector('.c-class-toggler')
65110

66-
c.addEventListener('classdetached', () => {
67-
setTimeout(function() {
111+
c.addEventListener('classremoved', () => {
112+
// eslint-disable-next-line max-nested-callbacks
113+
setTimeout(() => {
68114
expect(c.classList.contains('test-xl-show')).toEqual(false)
69115
expect(c.classList.contains('test-lg-show')).toEqual(false)
70116
expect(c.classList.contains('test-md-show')).toEqual(false)
71117
expect(c.classList.contains('test-sm-show')).toEqual(false)
72118
expect(c.classList.contains('test-show')).toEqual(false)
73119
done()
74-
}, 1000);
120+
}, 250)
121+
})
122+
123+
toggler.click()
124+
})
125+
126+
it('should remove the `test-show` class from the `.c-app` element', done => {
127+
fixtureEl.innerHTML = [
128+
'<div class="c-app test-show">',
129+
' <button type="button" class="c-class-toggler" data-target=".c-app" data-remove-class="test-xl-show" data-responsive="true"></div>',
130+
'</div>'
131+
].join('')
132+
133+
const c = document.querySelector('.c-app')
134+
const toggler = document.querySelector('.c-class-toggler')
75135

136+
c.addEventListener('classremoved', () => {
137+
expect(c.classList.contains('test-show')).toEqual(false)
138+
done()
76139
})
77140

78141
toggler.click()
79142
})
80143
})
81144

82145
describe('toggle', () => {
83-
it('should add the `toggle` class to c-app element', done => {
146+
it('should add the `toggle` class to `.c-app` element', done => {
84147
fixtureEl.innerHTML = [
85148
'<div class="c-app">',
86-
' <button type="button" class="c-class-toggler" data-target=".c-app" data-toggle="toggle"></div>',
149+
' <button type="button" class="c-class-toggler" data-target=".c-app" data-toggle-class="toggle"></div>',
87150
'</div>'
88151
].join('')
89152

90153
const c = document.querySelector('.c-app')
91154
const toggler = document.querySelector('.c-class-toggler')
92155

93-
c.addEventListener('classattached', () => {
156+
c.addEventListener('classtoggle', () => {
94157
expect(c.classList.contains('toggle')).toEqual(true)
95158
done()
96159
})
97160

98161
toggler.click()
99162
})
100163

101-
it('should remove the `toggle` class from c-app element', done => {
164+
it('should remove the `toggle` class from `.c-app` element', done => {
102165
fixtureEl.innerHTML = [
103166
'<div class="c-app toggle">',
104-
' <button type="button" class="c-class-toggler" data-target=".c-app" data-toggle="toggle"></div>',
167+
' <button type="button" class="c-class-toggler" data-target=".c-app" data-toggle-class="toggle"></div>',
105168
'</div>'
106169
].join('')
107170

108171
const c = document.querySelector('.c-app')
109172
const toggler = document.querySelector('.c-class-toggler')
110173

111-
c.addEventListener('classdetached', () => {
174+
c.addEventListener('classremoved', () => {
112175
expect(c.classList.contains('toggle')).toEqual(false)
113176
done()
114177
})
115178

116179
toggler.click()
117180
})
181+
182+
it('should add the `add-class` to `.c-app` element and remove `remove-class`', done => {
183+
fixtureEl.innerHTML = [
184+
'<div class="c-app remove-class">',
185+
' <button type="button" class="c-class-toggler" data-target=".c-app" data-toggle-class="add-class, remove-class"></div>',
186+
'</div>'
187+
].join('')
188+
189+
const c = document.querySelector('.c-app')
190+
const toggler = document.querySelector('.c-class-toggler')
191+
192+
c.addEventListener('classtoggle', () => {
193+
// eslint-disable-next-line max-nested-callbacks
194+
setTimeout(() => {
195+
expect(c.classList.contains('add-class')).toEqual(true)
196+
expect(c.classList.contains('remove-class')).toEqual(false)
197+
done()
198+
}, 250)
199+
})
200+
201+
toggler.click()
202+
})
203+
204+
it('should remove the `test-show` class from the `.c-app` element', done => {
205+
fixtureEl.innerHTML = [
206+
'<div class="c-app test-show">',
207+
' <button type="button" class="c-class-toggler" data-target=".c-app" data-toggle-class="test-xl-show" data-responsive="true"></div>',
208+
'</div>'
209+
].join('')
210+
211+
const c = document.querySelector('.c-app')
212+
const toggler = document.querySelector('.c-class-toggler')
213+
214+
c.addEventListener('classtoggle', () => {
215+
// eslint-disable-next-line max-nested-callbacks
216+
setTimeout(() => {
217+
expect(c.classList.contains('test-show')).toEqual(false)
218+
expect(c.classList.contains('test-xl-show')).toEqual(false)
219+
done()
220+
}, 250)
221+
})
222+
223+
toggler.click()
224+
})
225+
226+
it('should remove the `test-show` class from the `.c-app` element and then add `text-xl-show`', done => {
227+
fixtureEl.innerHTML = [
228+
'<div class="c-app test-show">',
229+
' <button type="button" class="c-class-toggler" data-target=".c-app" data-toggle-class="test-xl-show" data-responsive="true"></div>',
230+
'</div>'
231+
].join('')
232+
233+
const c = document.querySelector('.c-app')
234+
const toggler = document.querySelector('.c-class-toggler')
235+
236+
c.addEventListener('classremoved', () => {
237+
expect(c.classList.contains('test-show')).toEqual(false)
238+
expect(c.classList.contains('test-xl-show')).toEqual(false)
239+
})
240+
241+
c.addEventListener('classadded', () => {
242+
expect(c.classList.contains('test-show')).toEqual(false)
243+
expect(c.classList.contains('test-xl-show')).toEqual(true)
244+
done()
245+
})
246+
247+
toggler.click()
248+
toggler.click()
249+
})
118250
})
119251

120252
describe('class', () => {
121-
it('should add the `toggle` class to c-app element', done => {
253+
it('should add the `toggle` class to `.c-app` element', done => {
122254
fixtureEl.innerHTML = [
123255
'<div class="c-app">',
124-
' <button type="button" class="c-class-toggler" data-target=".c-app" data-toggle="toggle"></div>',
256+
' <button type="button" class="c-class-toggler" data-target=".c-app" data-class="toggle"></div>',
125257
'</div>'
126258
].join('')
127259

128260
const c = document.querySelector('.c-app')
129261
const toggler = document.querySelector('.c-class-toggler')
130262

131-
c.addEventListener('classattached', () => {
263+
c.addEventListener('classtoggle', () => {
132264
expect(c.classList.contains('toggle')).toEqual(true)
133265
done()
134266
})
135267

136268
toggler.click()
137269
})
138270

139-
it('should remove the `toggle` class from c-app element', done => {
271+
it('should remove the `toggle` class from `.c-app` element', done => {
140272
fixtureEl.innerHTML = [
141273
'<div class="c-app toggle">',
142-
' <button type="button" class="c-class-toggler" data-target=".c-app" data-toggle="toggle"></div>',
274+
' <button type="button" class="c-class-toggler" data-target=".c-app" data-class="toggle"></div>',
143275
'</div>'
144276
].join('')
145277

146278
const c = document.querySelector('.c-app')
147279
const toggler = document.querySelector('.c-class-toggler')
148280

149-
c.addEventListener('classdetached', () => {
281+
c.addEventListener('classremoved', () => {
150282
expect(c.classList.contains('toggle')).toEqual(false)
151283
done()
152284
})
153285

154286
toggler.click()
155287
})
288+
289+
it('should remove the `test-show` class from the `.c-app` element', done => {
290+
fixtureEl.innerHTML = [
291+
'<div class="c-app test-show">',
292+
' <button type="button" class="c-class-toggler" data-target=".c-app" data-class="test-xl-show" data-responsive="true"></div>',
293+
'</div>'
294+
].join('')
295+
296+
const c = document.querySelector('.c-app')
297+
const toggler = document.querySelector('.c-class-toggler')
298+
299+
c.addEventListener('classremoved', () => {
300+
expect(c.classList.contains('test-show')).toEqual(false)
301+
done()
302+
})
303+
304+
toggler.click()
305+
})
156306
})
157307
})

0 commit comments

Comments
 (0)