Skip to content

Commit 9e4ab7c

Browse files
javvejavve
committed
Remove jquery 💥
1 parent 1f6ea07 commit 9e4ab7c

18 files changed

+451
-422
lines changed

‎__test__/integration/buttons.test.js

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
11
import { screen } from '@testing-library/dom'
22
import userEvent from '@testing-library/user-event'
3-
4-
import $ from 'jquery'
53
import List from '../../src/index'
64

75
describe('Button', function () {
86
var list
97

108
beforeEach(function () {
11-
$('body').append(
12-
$(`<div id="parse-list">
13-
<input class="search" />
14-
<span class="sort" id="sort-name" data-sort="name">Sort name</span>
15-
<span class="sort" id="sort-name-asc" data-sort="name" data-order="asc">Sort name asc</span>
16-
<span class="sort" id="sort-name-desc" data-sort="name" data-order="desc">Sort name desc</span>
17-
<div class="list">
18-
<div><span class="name">Jonny</span><span class="born">1986</span></div>
19-
<div><span class="name">Jocke</span><span class="born">1985</span></div>
20-
</div>
21-
</div>`)
22-
)
9+
const listContainer = document.createElement('div')
10+
listContainer.id = 'parse-list'
11+
listContainer.innerHTML = `
12+
<input class="search" />
13+
<span class="sort" id="sort-name" data-sort="name">Sort name</span>
14+
<span class="sort" id="sort-name-asc" data-sort="name" data-order="asc">Sort name asc</span>
15+
<span class="sort" id="sort-name-desc" data-sort="name" data-order="desc">Sort name desc</span>
16+
<div class="list">
17+
<div><span class="name">Jonny</span><span class="born">1986</span></div>
18+
<div><span class="name">Jocke</span><span class="born">1985</span></div>
19+
</div>
20+
`
21+
document.body.appendChild(listContainer)
2322

2423
list = new List('parse-list', {
2524
valueNames: ['name', 'born'],
2625
})
2726
})
2827

2928
afterEach(function () {
30-
$('#parse-list').remove()
29+
const listElement = document.getElementById('parse-list')
30+
if (listElement) {
31+
listElement.remove()
32+
}
3133
})
3234

3335
describe('Sort', () => {

‎__test__/integration/create.test.js

Lines changed: 60 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1-
import $ from 'jquery'
21
import List from '../../src/index'
32

43
describe('Create', () => {
54
describe('With HTML items', () => {
65
let list, listEl
76
beforeEach(function () {
8-
listEl = $(`
9-
<div id="list">
10-
<ul class="list">
11-
<li><span class="name">Jonny</span></li>
12-
</ul>
13-
</div>
14-
`)
15-
$(document.body).append(listEl)
7+
listEl = document.createElement('div')
8+
listEl.id = 'list'
9+
listEl.innerHTML = `
10+
<ul class="list">
11+
<li><span class="name">Jonny</span></li>
12+
</ul>
13+
`
14+
document.body.appendChild(listEl)
1615
list = new List('list', { valueNames: ['name'] })
1716
})
1817
afterEach(() => {
@@ -21,27 +20,27 @@ describe('Create', () => {
2120

2221
it('should contain one item', () => {
2322
expect(list.items.length).toEqual(1)
24-
expect(listEl.find('li').length).toEqual(1)
23+
expect(listEl.querySelectorAll('li').length).toEqual(1)
2524
})
2625

2726
it('should contain two items', () => {
2827
list.add({ name: 'Jonas' })
2928
expect(list.items.length).toEqual(2)
30-
expect(listEl.find('li').length).toEqual(2)
29+
expect(listEl.querySelectorAll('li').length).toEqual(2)
3130
})
3231
})
3332

3433
describe('With and element instead of id', () => {
3534
var listEl, list
3635
beforeEach(() => {
37-
listEl = $(`
38-
<div id="list">
39-
<ul class="list">
40-
<li><span class="name">Jonny</span></li>
41-
</ul>
42-
</div>
43-
`)
44-
$(document.body).append(listEl)
36+
listEl = document.createElement('div')
37+
listEl.id = 'list'
38+
listEl.innerHTML = `
39+
<ul class="list">
40+
<li><span class="name">Jonny</span></li>
41+
</ul>
42+
`
43+
document.body.appendChild(listEl)
4544
var el = document.getElementById('list')
4645
list = new List(el, { valueNames: ['name'] })
4746
})
@@ -51,19 +50,17 @@ describe('Create', () => {
5150

5251
it('should contain one item', () => {
5352
expect(list.items.length).toEqual(1)
54-
expect(listEl.find('li').length).toEqual(1)
53+
expect(listEl.querySelectorAll('li').length).toEqual(1)
5554
})
5655
})
5756

5857
describe('Without items and with string template', () => {
5958
var listEl, list
6059
beforeEach(() => {
61-
listEl = $(
62-
'<div id="list">\
63-
<ul class="list"></ul>\
64-
</div>'
65-
)
66-
$(document.body).append(listEl)
60+
listEl = document.createElement('div')
61+
listEl.id = 'list'
62+
listEl.innerHTML = '<ul class="list"></ul>'
63+
document.body.appendChild(listEl)
6764
list = new List(
6865
'list',
6966
{
@@ -79,26 +76,24 @@ describe('Create', () => {
7976

8077
it('should contain one item', () => {
8178
expect(list.items.length).toEqual(1)
82-
expect(listEl.find('li').length).toEqual(1)
79+
expect(listEl.querySelectorAll('li').length).toEqual(1)
8380
})
8481

8582
it('should contain two items', () => {
8683
list.add({ name: 'Jonas' })
8784
expect(list.items.length).toEqual(2)
88-
expect(listEl.find('li').length).toEqual(2)
85+
expect(listEl.querySelectorAll('li').length).toEqual(2)
8986
})
9087
})
9188

9289
describe('Without items and with string template for table', () => {
9390
var listEl, list
9491

9592
beforeEach(() => {
96-
listEl = $(`
97-
<div id="list">
98-
<table class="list"></table>
99-
</div>
100-
`)
101-
$(document.body).append(listEl)
93+
listEl = document.createElement('div')
94+
listEl.id = 'list'
95+
listEl.innerHTML = '<table class="list"></table>'
96+
document.body.appendChild(listEl)
10297
list = new List(
10398
'list',
10499
{
@@ -115,21 +110,23 @@ describe('Create', () => {
115110

116111
it('should contain one item', () => {
117112
expect(list.items.length).toEqual(1)
118-
expect(listEl.find('tr').length).toEqual(1)
113+
expect(listEl.querySelectorAll('tr').length).toEqual(1)
119114
})
120115

121116
it('should contain two items', () => {
122117
list.add({ name: 'Jonas' })
123118
expect(list.items.length).toEqual(2)
124-
expect(listEl.find('tr').length).toEqual(2)
119+
expect(listEl.querySelectorAll('tr').length).toEqual(2)
125120
})
126121
})
127122

128123
describe('Without items and with template function', () => {
129124
var listEl, list
130125
beforeEach(() => {
131-
listEl = $('<div id="list"><ul class="list"></ul></div>')
132-
$(document.body).append(listEl)
126+
listEl = document.createElement('div')
127+
listEl.id = 'list'
128+
listEl.innerHTML = '<ul class="list"></ul>'
129+
document.body.appendChild(listEl)
133130
list = new List(
134131
'list',
135132
{
@@ -147,25 +144,27 @@ describe('Create', () => {
147144

148145
it('should contain one item', () => {
149146
expect(list.items.length).toEqual(1)
150-
expect(listEl.find('li').length).toEqual(1)
147+
expect(listEl.querySelectorAll('li').length).toEqual(1)
151148
})
152149

153150
it('should contain two items', () => {
154151
list.add({ name: 'Jonas' })
155152
expect(list.items.length).toEqual(2)
156-
expect(listEl.find('li').length).toEqual(2)
153+
expect(listEl.querySelectorAll('li').length).toEqual(2)
157154
})
158155

159156
it('should get values from items', () => {
160157
list.add({ name: 'Egon' })
161-
expect(listEl.find('li[data-template-fn-egon]').length).toEqual(1)
158+
expect(listEl.querySelectorAll('li[data-template-fn-egon]').length).toEqual(1)
162159
})
163160
})
164161

165162
describe('without items and or template', () => {
166163
it('should throw error on init', () => {
167-
var listEl = $('<div id="list"><ul class="list"></ul></div>')
168-
$(document.body).append(listEl)
164+
var listEl = document.createElement('div')
165+
listEl.id = 'list'
166+
listEl.innerHTML = '<ul class="list"></ul>'
167+
document.body.appendChild(listEl)
169168

170169
expect(() => {
171170
new List('list', {
@@ -180,12 +179,16 @@ describe('Create', () => {
180179
describe('Without items and with HTML template', () => {
181180
var listEl, list, templateEl
182181
beforeEach(() => {
183-
listEl = $('<div id="list"><ul class="list"></ul></div>')
182+
listEl = document.createElement('div')
183+
listEl.id = 'list'
184+
listEl.innerHTML = '<ul class="list"></ul>'
184185

185-
templateEl = $('<li id="template-item"><span class="name"></span></li>')
186+
templateEl = document.createElement('li')
187+
templateEl.id = 'template-item'
188+
templateEl.innerHTML = '<span class="name"></span>'
186189

187-
$(document.body).append(listEl)
188-
$(document.body).append(templateEl)
190+
document.body.appendChild(listEl)
191+
document.body.appendChild(templateEl)
189192

190193
list = new List(
191194
'list',
@@ -203,22 +206,23 @@ describe('Create', () => {
203206

204207
it('should contain one item', () => {
205208
expect(list.items.length).toEqual(1)
206-
expect(listEl.find('li').length).toEqual(1)
209+
expect(listEl.querySelectorAll('li').length).toEqual(1)
207210
})
208211

209212
it('should contain two items', () => {
210213
list.add({ name: 'Jonas' })
211214
expect(list.items.length).toEqual(2)
212-
expect(listEl.find('li').length).toEqual(2)
215+
expect(listEl.querySelectorAll('li').length).toEqual(2)
213216
})
214217
})
215218

216219
describe('Asyn index with existing list', () => {
217220
it('should contain 162 items', () => {
218221
return new Promise((resolve) => {
219-
var listEl = $(`
220-
<div id="list">
221-
<ul class="list">
222+
var listEl = document.createElement('div')
223+
listEl.id = 'list'
224+
listEl.innerHTML = `
225+
<ul class="list">
222226
<li><span class="name">Jonny</span></li><li><span class="name">Sven</span></li>
223227
<li><span class="name">Anna</span></li><li><span class="name">Lisa</span></li>
224228
<li><span class="name">Egon</span></li><li><span class="name">Frida</span></li>
@@ -301,14 +305,14 @@ describe('Create', () => {
301305
<li><span class="name">Imma</span></li><li><span class="name">Hasse</span></li>
302306
<li><span class="name">Robert</span></li><li><span class="name">Mona</span></li>
303307
</ul>
304-
</div>
305-
`)
306-
$(document.body).append(listEl)
308+
`
309+
document.body.appendChild(listEl)
310+
307311
new List('list', {
308312
valueNames: ['name'],
309313
indexAsync: true,
310314
parseComplete: function () {
311-
expect(listEl.find('li').length).toEqual(162)
315+
expect(listEl.querySelectorAll('li').length).toEqual(162)
312316
listEl.remove()
313317
resolve()
314318
},

‎__test__/integration/defaults.test.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { describe, it, expect } from 'vitest'
2-
import $ from 'jquery'
32
import fixture from './fixtures'
43

54
describe('Defaults', function () {
@@ -36,8 +35,8 @@ describe('Defaults', function () {
3635
})
3736

3837
it('should have the right elements', function () {
39-
expect(list.list).toEqual($('.list')[0])
40-
expect(list.listContainer).toEqual($('#list')[0])
38+
expect(list.list).toEqual(document.querySelector('.list'))
39+
expect(list.listContainer).toEqual(document.getElementById('list'))
4140
})
4241

4342
it('should have all default methods', function () {

‎__test__/integration/fixtures-fuzzysearch.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
1-
import $ from 'jquery'
2-
31
var fixtureFuzzysearch = {
42
list: function (valueNames) {
5-
var listHtml = $('<div id="list-fuzzy-search"><input class="fuzzy-search" /><ul class="list"></ul></div>'),
6-
item = ''
3+
var listHtml = document.createElement('div')
4+
listHtml.id = 'list-fuzzy-search'
5+
listHtml.innerHTML = '<input class="fuzzy-search" /><ul class="list"></ul>'
6+
var item = ''
77

88
item = '<li>'
99
for (var i = 0; i < valueNames.length; i++) {
1010
item += '<span class="' + valueNames[i] + '"</span>'
1111
}
1212
item += '</li>'
1313

14-
$(document.body).append(listHtml)
14+
document.body.appendChild(listHtml)
1515

1616
return item
1717
},
1818
removeList: function () {
19-
$('#list-fuzzy-search').remove()
19+
const listElement = document.getElementById('list-fuzzy-search')
20+
if (listElement) {
21+
listElement.remove()
22+
}
2023
},
2124
i1: { name: 'Guybrush Threepwood' },
2225
i2: { name: 'Manny Calavera' },

‎__test__/integration/fixtures-pagination.js

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
1-
import $ from 'jquery'
2-
31
var fixturePagination = {
42
list: function (valueNames) {
5-
var listHtml = $('<div id="list-pagination"><ul class="list"></ul><ul class="pagination"></ul></div>'),
6-
item = ''
3+
var listHtml = document.createElement('div')
4+
listHtml.id = 'list-pagination'
5+
listHtml.innerHTML = '<ul class="list"></ul><ul class="pagination"></ul>'
6+
var item = ''
77

88
item = '<li>'
99
for (var i = 0; i < valueNames.length; i++) {
1010
item += '<span class="' + valueNames[i] + '"</span>'
1111
}
1212
item += '</li>'
1313

14-
$(document.body).append(listHtml)
14+
document.body.appendChild(listHtml)
1515

1616
return item
1717
},
1818
removeList: function () {
19-
$('#list-pagination').remove()
19+
const listElement = document.getElementById('list-pagination')
20+
if (listElement) {
21+
listElement.remove()
22+
}
2023
},
2124
jonny: {
2225
name: 'Jonny Strömberg',

0 commit comments

Comments
 (0)