Skip to content

Commit 605bd93

Browse files
SimenBSimenB
authored
chore: use modern DOM APIs (#14797)
1 parent 14cfdae commit 605bd93

File tree

10 files changed

+57
-61
lines changed

10 files changed

+57
-61
lines changed

‎.eslintrc.cjs‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -688,16 +688,12 @@ module.exports = {
688688
'unicorn/no-useless-promise-resolve-reject': 'off',
689689
'unicorn/no-useless-undefined': 'off',
690690
'unicorn/number-literal-case': 'off',
691-
'unicorn/prefer-add-event-listener': 'off',
692691
'unicorn/prefer-array-flat': 'off',
693692
'unicorn/prefer-array-flat-map': 'off',
694693
'unicorn/prefer-array-index-of': 'off',
695694
'unicorn/prefer-array-some': 'off',
696695
'unicorn/prefer-at': 'off',
697696
'unicorn/prefer-date-now': 'off',
698-
'unicorn/prefer-dom-node-append': 'off',
699-
'unicorn/prefer-dom-node-remove': 'off',
700-
'unicorn/prefer-dom-node-text-content': 'off',
701697
'unicorn/prefer-export-from': 'off',
702698
'unicorn/prefer-logical-operator-over-ternary': 'off',
703699
'unicorn/prefer-math-trunc': 'off',
@@ -707,7 +703,6 @@ module.exports = {
707703
'unicorn/prefer-object-from-entries': 'off',
708704
'unicorn/prefer-optional-catch-binding': 'off',
709705
'unicorn/prefer-prototype-methods': 'off',
710-
'unicorn/prefer-query-selector': 'off',
711706
'unicorn/prefer-regexp-test': 'off',
712707
'unicorn/prefer-set-has': 'off',
713708
'unicorn/prefer-spread': 'off',

‎e2e/browser-resolver/fake-pkg/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@
1111

1212
const div = document.createElement('div');
1313

14-
div.innerText = 'Hello!';
14+
div.textContent = 'Hello!';
1515

1616
module.exports = div;

‎e2e/custom-jsdom-html/__tests__/test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@
77

88
test('jsdom custom html', () => {
99
/* eslint-disable-next-line no-undef */
10-
expect(document.getElementById('root')).toBeTruthy();
10+
expect(document.querySelector('#root')).toBeTruthy();
1111
});

‎packages/expect-utils/src/__tests__/isError.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ describe('isError', () => {
1919
createError: (win: Window | typeof globalThis) => Error | null,
2020
) {
2121
const iframe = document.createElement('iframe');
22-
document.body.appendChild(iframe);
22+
document.body.append(iframe);
2323
try {
2424
const contentWindow = iframe.contentWindow;
2525

@@ -32,7 +32,7 @@ describe('isError', () => {
3232
const error = createError(contentWindow);
3333
expect(isError(error)).toBe(true);
3434
} finally {
35-
iframe.parentElement!.removeChild(iframe);
35+
iframe.remove();
3636
}
3737
}
3838

‎packages/expect/src/__tests__/toEqual-dom.test.ts‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,8 @@ describe('toEqual', () => {
144144

145145
const a = document.createElement(name);
146146
const b = document.createElement(name);
147-
a.appendChild(document.createTextNode(data));
148-
b.appendChild(document.createTextNode(data));
147+
a.append(document.createTextNode(data));
148+
b.append(document.createTextNode(data));
149149

150150
expect(a).toEqual(b);
151151
expect(b).toEqual(a);
@@ -156,8 +156,8 @@ describe('toEqual', () => {
156156

157157
const a = document.createElement('strong');
158158
const b = document.createElement('span');
159-
a.appendChild(document.createTextNode(data));
160-
b.appendChild(document.createTextNode(data));
159+
a.append(document.createTextNode(data));
160+
b.append(document.createTextNode(data));
161161

162162
expect(a).not.toEqual(b);
163163
expect(b).not.toEqual(a);
@@ -173,20 +173,20 @@ describe('toEqual', () => {
173173

174174
const aSpan1 = document.createElement(name1);
175175
const bSpan1 = document.createElement(name1);
176-
aSpan1.appendChild(document.createTextNode(data1));
177-
bSpan1.appendChild(document.createTextNode(data1));
176+
aSpan1.append(document.createTextNode(data1));
177+
bSpan1.append(document.createTextNode(data1));
178178

179179
const aSpan2 = document.createElement(name2);
180180
const bSpan2 = document.createElement(name2);
181-
aSpan2.appendChild(document.createTextNode(data2));
182-
bSpan2.appendChild(document.createTextNode(data2));
181+
aSpan2.append(document.createTextNode(data2));
182+
bSpan2.append(document.createTextNode(data2));
183183

184184
const a = document.createDocumentFragment();
185185
const b = document.createDocumentFragment();
186-
a.appendChild(aSpan1);
187-
a.appendChild(aSpan2);
188-
b.appendChild(bSpan1);
189-
b.appendChild(bSpan2);
186+
a.append(aSpan1);
187+
a.append(aSpan2);
188+
b.append(bSpan1);
189+
b.append(bSpan2);
190190

191191
expect(a).toEqual(b);
192192
expect(b).toEqual(a);
@@ -199,20 +199,20 @@ describe('toEqual', () => {
199199

200200
const aSpan1 = document.createElement('strong');
201201
const bSpan1 = document.createElement(name);
202-
aSpan1.appendChild(document.createTextNode(data1));
203-
bSpan1.appendChild(document.createTextNode(data1));
202+
aSpan1.append(document.createTextNode(data1));
203+
bSpan1.append(document.createTextNode(data1));
204204

205205
const aSpan2 = document.createElement(name);
206206
const bSpan2 = document.createElement(name);
207-
aSpan2.appendChild(document.createTextNode(data2));
208-
bSpan2.appendChild(document.createTextNode(data2));
207+
aSpan2.append(document.createTextNode(data2));
208+
bSpan2.append(document.createTextNode(data2));
209209

210210
const a = document.createDocumentFragment();
211211
const b = document.createDocumentFragment();
212-
a.appendChild(aSpan1);
213-
a.appendChild(aSpan2);
214-
b.appendChild(bSpan1);
215-
b.appendChild(bSpan2);
212+
a.append(aSpan1);
213+
a.append(aSpan2);
214+
b.append(bSpan1);
215+
b.append(bSpan2);
216216

217217
expect(a).not.toEqual(b);
218218
expect(b).not.toEqual(a);

‎packages/jest-environment-jsdom/src/__tests__/jsdom_environment.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ describe('JSDomEnvironment', () => {
118118
// append an instance of the custom element
119119
env.global.customElements.define('my-custom-element', MyCustomElement);
120120
const instance = env.global.document.createElement('my-custom-element');
121-
env.global.document.body.appendChild(instance);
121+
env.global.document.body.append(instance);
122122

123123
// teardown will disconnect the custom elements
124124
env.teardown();

‎packages/jest-matcher-utils/src/__tests__/deepCyclicCopyReplaceableDom.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ test('should copy complex element', () => {
2424
const div = document.createElement('div');
2525
const span = document.createElement('span');
2626
div.setAttribute('id', 'div');
27-
div.innerText = 'this is div';
28-
div.appendChild(span);
27+
div.textContent = 'this is div';
28+
div.append(span);
2929
const copied = deepCyclicCopyReplaceable(div);
3030
expect(copied).toEqual(div);
3131
expect(div === copied).toBe(false); //assert reference is not the same

‎packages/pretty-format/src/__tests__/DOMCollection.test.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ describe('DOMCollection plugin for list items', () => {
5454
].join('');
5555

5656
const form = document.createElement('form');
57-
form.appendChild(select);
57+
form.append(select);
5858

5959
const expectedOption1 = [
6060
' <option',
@@ -87,6 +87,7 @@ describe('DOMCollection plugin for list items', () => {
8787
].join('\n');
8888

8989
it('supports HTMLCollection for getElementsByTagName', () => {
90+
// eslint-disable-next-line unicorn/prefer-query-selector
9091
const options = form.getElementsByTagName('option');
9192
expect(options).toPrettyPrintTo(expectedHTMLCollection);
9293
});

‎packages/pretty-format/src/__tests__/DOMElement.test.ts‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ describe('DOMElement Plugin', () => {
7171
const parent = document.createElement('div');
7272
parent.setAttribute('style', 'color: #99424F');
7373
const text = document.createTextNode('Jest');
74-
parent.appendChild(text);
74+
parent.append(text);
7575

7676
expect(parent).toPrettyPrintTo(
7777
'<div\n style="color: #99424F"\n>\n Jest\n</div>',
@@ -81,22 +81,22 @@ describe('DOMElement Plugin', () => {
8181
it('supports an element with text content', () => {
8282
const parent = document.createElement('div');
8383
const child = document.createTextNode('texty texty');
84-
parent.appendChild(child);
84+
parent.append(child);
8585

8686
expect(parent).toPrettyPrintTo('<div>\n texty texty\n</div>');
8787
});
8888

8989
it('supports nested elements', () => {
9090
const parent = document.createElement('div');
9191
const child = document.createElement('span');
92-
parent.appendChild(child);
92+
parent.append(child);
9393
expect(parent).toPrettyPrintTo('<div>\n <span />\n</div>');
9494
});
9595

9696
it('supports nested elements with attributes', () => {
9797
const parent = document.createElement('div');
9898
const child = document.createElement('span');
99-
parent.appendChild(child);
99+
parent.append(child);
100100

101101
// set attributes in sorted order by name
102102
child.setAttribute('class', 'classy');
@@ -110,11 +110,11 @@ describe('DOMElement Plugin', () => {
110110
it('supports nested elements with attribute and text content', () => {
111111
const parent = document.createElement('div');
112112
const child = document.createElement('span');
113-
parent.appendChild(child);
113+
parent.append(child);
114114

115115
child.setAttribute('style', 'color: #99424F');
116116
const text = document.createTextNode('Jest');
117-
child.appendChild(text);
117+
child.append(text);
118118

119119
expect(parent).toPrettyPrintTo(
120120
'<div>\n <span\n style="color: #99424F"\n >\n Jest\n </span>\n</div>',
@@ -124,7 +124,7 @@ describe('DOMElement Plugin', () => {
124124
it('supports nested elements with text content', () => {
125125
const parent = document.createElement('div');
126126
const child = document.createElement('span');
127-
parent.appendChild(child);
127+
parent.append(child);
128128
child.textContent = 'texty texty';
129129

130130
expect(parent).toPrettyPrintTo(
@@ -228,11 +228,11 @@ Testing.`;
228228
// React 16 does not render text in comments (see below)
229229
const parent = document.createElement('span');
230230
const text = document.createTextNode('');
231-
parent.appendChild(text);
231+
parent.append(text);
232232
const abbr = document.createElement('abbr');
233233
abbr.setAttribute('title', 'meter');
234234
abbr.innerHTML = 'm';
235-
parent.appendChild(abbr);
235+
parent.append(abbr);
236236

237237
expect(parent).toPrettyPrintTo(
238238
[
@@ -321,7 +321,7 @@ Testing.`;
321321
for (const browser of browsers) {
322322
const li = document.createElement('li');
323323
li.textContent = browser;
324-
fragment.appendChild(li);
324+
fragment.append(li);
325325
}
326326

327327
expect(fragment).toPrettyPrintTo(
@@ -458,7 +458,7 @@ Testing.`;
458458
const namespace = 'http://www.w3.org/2000/svg';
459459

460460
const title = document.createElementNS(namespace, 'title');
461-
title.appendChild(document.createTextNode('JS community logo'));
461+
title.append(document.createTextNode('JS community logo'));
462462

463463
const rect = document.createElementNS(namespace, 'rect');
464464
// printProps sorts attributes in order by name
@@ -475,18 +475,18 @@ Testing.`;
475475
g.setAttribute('fill', 'none');
476476
g.setAttribute('stroke', '#000000');
477477
g.setAttribute('stroke-width', '0.095');
478-
g.appendChild(polyline);
479-
g.appendChild(comment);
478+
g.append(polyline);
479+
g.append(comment);
480480

481481
const svg = document.createElementNS(namespace, 'svg');
482482
svg.setAttribute('viewBox', '0 0 1 1');
483-
svg.appendChild(title);
484-
svg.appendChild(rect);
485-
svg.appendChild(g);
483+
svg.append(title);
484+
svg.append(rect);
485+
svg.append(g);
486486

487487
const parent = document.createElement('div');
488488
parent.setAttribute('id', 'JS');
489-
parent.appendChild(svg);
489+
parent.append(svg);
490490

491491
expect(parent).toPrettyPrintTo(
492492
[
@@ -558,9 +558,9 @@ Testing.`;
558558
dd2.setAttribute('style', 'color: #99424F');
559559

560560
const dl = document.createElement('dl');
561-
dl.appendChild(dt);
562-
dl.appendChild(dd1);
563-
dl.appendChild(dd2);
561+
dl.append(dt);
562+
dl.append(dd1);
563+
dl.append(dd2);
564564

565565
expect(dl).toPrettyPrintTo(
566566
[

‎website/src/pages/animations/_landingAnimation.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -153,26 +153,26 @@ export function setupLandingAnimation() {
153153
},
154154
];
155155

156-
screenshotImg.onload = () => {
156+
screenshotImg.addEventListener('load', () => {
157157
screenshotImg.style.opacity = 1;
158-
};
158+
});
159159

160160
for (const button of buttons) {
161161
const clickButton = document.createElement('a');
162162
clickButton.text = button.title;
163163
clickButton.className = 'button button--primary button--outline landing';
164-
clickButton.onclick = () => {
164+
clickButton.addEventListener('click', () => {
165165
for (const b of document.querySelectorAll('.matchers .button.landing'))
166166
b.className = 'button button--primary button--outline landing';
167167
clickButton.className =
168168
'button button--primary button--outline landing button--active';
169169
screenshotImg.style.opacity = 0.5;
170170
screenshotImg.src = button.url;
171-
};
172-
buttonWrapper.appendChild(clickButton);
171+
});
172+
buttonWrapper.append(clickButton);
173173
}
174174

175-
matcherSection.appendChild(buttonWrapper);
175+
matcherSection.append(buttonWrapper);
176176

177177
const firstButton = document.querySelector(
178178
'.matchers .blockContent .button'
@@ -186,9 +186,9 @@ export function setupLandingAnimation() {
186186
function makeScreenshotsClickable() {
187187
for (const img of document.querySelectorAll('.blockImage img')) {
188188
img.style.cursor = 'pointer';
189-
img.onclick = () => {
189+
img.addEventListener('click', () => {
190190
document.location = img.src;
191-
};
191+
});
192192
}
193193
}
194194

0 commit comments

Comments
 (0)