diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 41057dd8d4..b2c07031c2 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -688,16 +688,12 @@ module.exports = { 'unicorn/no-useless-promise-resolve-reject': 'off', 'unicorn/no-useless-undefined': 'off', 'unicorn/number-literal-case': 'off', - 'unicorn/prefer-add-event-listener': 'off', 'unicorn/prefer-array-flat': 'off', 'unicorn/prefer-array-flat-map': 'off', 'unicorn/prefer-array-index-of': 'off', 'unicorn/prefer-array-some': 'off', 'unicorn/prefer-at': 'off', 'unicorn/prefer-date-now': 'off', - 'unicorn/prefer-dom-node-append': 'off', - 'unicorn/prefer-dom-node-remove': 'off', - 'unicorn/prefer-dom-node-text-content': 'off', 'unicorn/prefer-export-from': 'off', 'unicorn/prefer-logical-operator-over-ternary': 'off', 'unicorn/prefer-math-trunc': 'off', @@ -707,7 +703,6 @@ module.exports = { 'unicorn/prefer-object-from-entries': 'off', 'unicorn/prefer-optional-catch-binding': 'off', 'unicorn/prefer-prototype-methods': 'off', - 'unicorn/prefer-query-selector': 'off', 'unicorn/prefer-regexp-test': 'off', 'unicorn/prefer-set-has': 'off', 'unicorn/prefer-spread': 'off', diff --git a/e2e/browser-resolver/fake-pkg/main.js b/e2e/browser-resolver/fake-pkg/main.js index 8848a98699..adf4db27d9 100644 --- a/e2e/browser-resolver/fake-pkg/main.js +++ b/e2e/browser-resolver/fake-pkg/main.js @@ -11,6 +11,6 @@ const div = document.createElement('div'); -div.innerText = 'Hello!'; +div.textContent = 'Hello!'; module.exports = div; diff --git a/e2e/custom-jsdom-html/__tests__/test.js b/e2e/custom-jsdom-html/__tests__/test.js index ae597da9b6..3dce913a7e 100644 --- a/e2e/custom-jsdom-html/__tests__/test.js +++ b/e2e/custom-jsdom-html/__tests__/test.js @@ -7,5 +7,5 @@ test('jsdom custom html', () => { /* eslint-disable-next-line no-undef */ - expect(document.getElementById('root')).toBeTruthy(); + expect(document.querySelector('#root')).toBeTruthy(); }); diff --git a/packages/expect-utils/src/__tests__/isError.test.ts b/packages/expect-utils/src/__tests__/isError.test.ts index 8bdc624b4f..df6dfdf134 100644 --- a/packages/expect-utils/src/__tests__/isError.test.ts +++ b/packages/expect-utils/src/__tests__/isError.test.ts @@ -19,7 +19,7 @@ describe('isError', () => { createError: (win: Window | typeof globalThis) => Error | null, ) { const iframe = document.createElement('iframe'); - document.body.appendChild(iframe); + document.body.append(iframe); try { const contentWindow = iframe.contentWindow; @@ -32,7 +32,7 @@ describe('isError', () => { const error = createError(contentWindow); expect(isError(error)).toBe(true); } finally { - iframe.parentElement!.removeChild(iframe); + iframe.remove(); } } diff --git a/packages/expect/src/__tests__/toEqual-dom.test.ts b/packages/expect/src/__tests__/toEqual-dom.test.ts index 09270754f5..58195d5014 100644 --- a/packages/expect/src/__tests__/toEqual-dom.test.ts +++ b/packages/expect/src/__tests__/toEqual-dom.test.ts @@ -144,8 +144,8 @@ describe('toEqual', () => { const a = document.createElement(name); const b = document.createElement(name); - a.appendChild(document.createTextNode(data)); - b.appendChild(document.createTextNode(data)); + a.append(document.createTextNode(data)); + b.append(document.createTextNode(data)); expect(a).toEqual(b); expect(b).toEqual(a); @@ -156,8 +156,8 @@ describe('toEqual', () => { const a = document.createElement('strong'); const b = document.createElement('span'); - a.appendChild(document.createTextNode(data)); - b.appendChild(document.createTextNode(data)); + a.append(document.createTextNode(data)); + b.append(document.createTextNode(data)); expect(a).not.toEqual(b); expect(b).not.toEqual(a); @@ -173,20 +173,20 @@ describe('toEqual', () => { const aSpan1 = document.createElement(name1); const bSpan1 = document.createElement(name1); - aSpan1.appendChild(document.createTextNode(data1)); - bSpan1.appendChild(document.createTextNode(data1)); + aSpan1.append(document.createTextNode(data1)); + bSpan1.append(document.createTextNode(data1)); const aSpan2 = document.createElement(name2); const bSpan2 = document.createElement(name2); - aSpan2.appendChild(document.createTextNode(data2)); - bSpan2.appendChild(document.createTextNode(data2)); + aSpan2.append(document.createTextNode(data2)); + bSpan2.append(document.createTextNode(data2)); const a = document.createDocumentFragment(); const b = document.createDocumentFragment(); - a.appendChild(aSpan1); - a.appendChild(aSpan2); - b.appendChild(bSpan1); - b.appendChild(bSpan2); + a.append(aSpan1); + a.append(aSpan2); + b.append(bSpan1); + b.append(bSpan2); expect(a).toEqual(b); expect(b).toEqual(a); @@ -199,20 +199,20 @@ describe('toEqual', () => { const aSpan1 = document.createElement('strong'); const bSpan1 = document.createElement(name); - aSpan1.appendChild(document.createTextNode(data1)); - bSpan1.appendChild(document.createTextNode(data1)); + aSpan1.append(document.createTextNode(data1)); + bSpan1.append(document.createTextNode(data1)); const aSpan2 = document.createElement(name); const bSpan2 = document.createElement(name); - aSpan2.appendChild(document.createTextNode(data2)); - bSpan2.appendChild(document.createTextNode(data2)); + aSpan2.append(document.createTextNode(data2)); + bSpan2.append(document.createTextNode(data2)); const a = document.createDocumentFragment(); const b = document.createDocumentFragment(); - a.appendChild(aSpan1); - a.appendChild(aSpan2); - b.appendChild(bSpan1); - b.appendChild(bSpan2); + a.append(aSpan1); + a.append(aSpan2); + b.append(bSpan1); + b.append(bSpan2); expect(a).not.toEqual(b); expect(b).not.toEqual(a); diff --git a/packages/jest-environment-jsdom/src/__tests__/jsdom_environment.test.ts b/packages/jest-environment-jsdom/src/__tests__/jsdom_environment.test.ts index 3b4d95f95b..0ee4b5f382 100644 --- a/packages/jest-environment-jsdom/src/__tests__/jsdom_environment.test.ts +++ b/packages/jest-environment-jsdom/src/__tests__/jsdom_environment.test.ts @@ -118,7 +118,7 @@ describe('JSDomEnvironment', () => { // append an instance of the custom element env.global.customElements.define('my-custom-element', MyCustomElement); const instance = env.global.document.createElement('my-custom-element'); - env.global.document.body.appendChild(instance); + env.global.document.body.append(instance); // teardown will disconnect the custom elements env.teardown(); diff --git a/packages/jest-matcher-utils/src/__tests__/deepCyclicCopyReplaceableDom.test.ts b/packages/jest-matcher-utils/src/__tests__/deepCyclicCopyReplaceableDom.test.ts index 271057c2f0..fc0906f91e 100644 --- a/packages/jest-matcher-utils/src/__tests__/deepCyclicCopyReplaceableDom.test.ts +++ b/packages/jest-matcher-utils/src/__tests__/deepCyclicCopyReplaceableDom.test.ts @@ -24,8 +24,8 @@ test('should copy complex element', () => { const div = document.createElement('div'); const span = document.createElement('span'); div.setAttribute('id', 'div'); - div.innerText = 'this is div'; - div.appendChild(span); + div.textContent = 'this is div'; + div.append(span); const copied = deepCyclicCopyReplaceable(div); expect(copied).toEqual(div); expect(div === copied).toBe(false); //assert reference is not the same diff --git a/packages/pretty-format/src/__tests__/DOMCollection.test.ts b/packages/pretty-format/src/__tests__/DOMCollection.test.ts index 90051bae70..6d501dca28 100644 --- a/packages/pretty-format/src/__tests__/DOMCollection.test.ts +++ b/packages/pretty-format/src/__tests__/DOMCollection.test.ts @@ -54,7 +54,7 @@ describe('DOMCollection plugin for list items', () => { ].join(''); const form = document.createElement('form'); - form.appendChild(select); + form.append(select); const expectedOption1 = [ ' { ].join('\n'); it('supports HTMLCollection for getElementsByTagName', () => { + // eslint-disable-next-line unicorn/prefer-query-selector const options = form.getElementsByTagName('option'); expect(options).toPrettyPrintTo(expectedHTMLCollection); }); diff --git a/packages/pretty-format/src/__tests__/DOMElement.test.ts b/packages/pretty-format/src/__tests__/DOMElement.test.ts index 7f05d4761a..0c961093ec 100644 --- a/packages/pretty-format/src/__tests__/DOMElement.test.ts +++ b/packages/pretty-format/src/__tests__/DOMElement.test.ts @@ -71,7 +71,7 @@ describe('DOMElement Plugin', () => { const parent = document.createElement('div'); parent.setAttribute('style', 'color: #99424F'); const text = document.createTextNode('Jest'); - parent.appendChild(text); + parent.append(text); expect(parent).toPrettyPrintTo( '\n Jest\n', @@ -81,7 +81,7 @@ describe('DOMElement Plugin', () => { it('supports an element with text content', () => { const parent = document.createElement('div'); const child = document.createTextNode('texty texty'); - parent.appendChild(child); + parent.append(child); expect(parent).toPrettyPrintTo('
\n texty texty\n
'); }); @@ -89,14 +89,14 @@ describe('DOMElement Plugin', () => { it('supports nested elements', () => { const parent = document.createElement('div'); const child = document.createElement('span'); - parent.appendChild(child); + parent.append(child); expect(parent).toPrettyPrintTo('
\n \n
'); }); it('supports nested elements with attributes', () => { const parent = document.createElement('div'); const child = document.createElement('span'); - parent.appendChild(child); + parent.append(child); // set attributes in sorted order by name child.setAttribute('class', 'classy'); @@ -110,11 +110,11 @@ describe('DOMElement Plugin', () => { it('supports nested elements with attribute and text content', () => { const parent = document.createElement('div'); const child = document.createElement('span'); - parent.appendChild(child); + parent.append(child); child.setAttribute('style', 'color: #99424F'); const text = document.createTextNode('Jest'); - child.appendChild(text); + child.append(text); expect(parent).toPrettyPrintTo( '
\n \n Jest\n \n
', @@ -124,7 +124,7 @@ describe('DOMElement Plugin', () => { it('supports nested elements with text content', () => { const parent = document.createElement('div'); const child = document.createElement('span'); - parent.appendChild(child); + parent.append(child); child.textContent = 'texty texty'; expect(parent).toPrettyPrintTo( @@ -228,11 +228,11 @@ Testing.`; // React 16 does not render text in comments (see below) const parent = document.createElement('span'); const text = document.createTextNode(''); - parent.appendChild(text); + parent.append(text); const abbr = document.createElement('abbr'); abbr.setAttribute('title', 'meter'); abbr.innerHTML = 'm'; - parent.appendChild(abbr); + parent.append(abbr); expect(parent).toPrettyPrintTo( [ @@ -321,7 +321,7 @@ Testing.`; for (const browser of browsers) { const li = document.createElement('li'); li.textContent = browser; - fragment.appendChild(li); + fragment.append(li); } expect(fragment).toPrettyPrintTo( @@ -458,7 +458,7 @@ Testing.`; const namespace = 'http://www.w3.org/2000/svg'; const title = document.createElementNS(namespace, 'title'); - title.appendChild(document.createTextNode('JS community logo')); + title.append(document.createTextNode('JS community logo')); const rect = document.createElementNS(namespace, 'rect'); // printProps sorts attributes in order by name @@ -475,18 +475,18 @@ Testing.`; g.setAttribute('fill', 'none'); g.setAttribute('stroke', '#000000'); g.setAttribute('stroke-width', '0.095'); - g.appendChild(polyline); - g.appendChild(comment); + g.append(polyline); + g.append(comment); const svg = document.createElementNS(namespace, 'svg'); svg.setAttribute('viewBox', '0 0 1 1'); - svg.appendChild(title); - svg.appendChild(rect); - svg.appendChild(g); + svg.append(title); + svg.append(rect); + svg.append(g); const parent = document.createElement('div'); parent.setAttribute('id', 'JS'); - parent.appendChild(svg); + parent.append(svg); expect(parent).toPrettyPrintTo( [ @@ -558,9 +558,9 @@ Testing.`; dd2.setAttribute('style', 'color: #99424F'); const dl = document.createElement('dl'); - dl.appendChild(dt); - dl.appendChild(dd1); - dl.appendChild(dd2); + dl.append(dt); + dl.append(dd1); + dl.append(dd2); expect(dl).toPrettyPrintTo( [ diff --git a/website/src/pages/animations/_landingAnimation.js b/website/src/pages/animations/_landingAnimation.js index 4a0d0fe52e..f3e910a28c 100644 --- a/website/src/pages/animations/_landingAnimation.js +++ b/website/src/pages/animations/_landingAnimation.js @@ -153,26 +153,26 @@ export function setupLandingAnimation() { }, ]; - screenshotImg.onload = () => { + screenshotImg.addEventListener('load', () => { screenshotImg.style.opacity = 1; - }; + }); for (const button of buttons) { const clickButton = document.createElement('a'); clickButton.text = button.title; clickButton.className = 'button button--primary button--outline landing'; - clickButton.onclick = () => { + clickButton.addEventListener('click', () => { for (const b of document.querySelectorAll('.matchers .button.landing')) b.className = 'button button--primary button--outline landing'; clickButton.className = 'button button--primary button--outline landing button--active'; screenshotImg.style.opacity = 0.5; screenshotImg.src = button.url; - }; - buttonWrapper.appendChild(clickButton); + }); + buttonWrapper.append(clickButton); } - matcherSection.appendChild(buttonWrapper); + matcherSection.append(buttonWrapper); const firstButton = document.querySelector( '.matchers .blockContent .button' @@ -186,9 +186,9 @@ export function setupLandingAnimation() { function makeScreenshotsClickable() { for (const img of document.querySelectorAll('.blockImage img')) { img.style.cursor = 'pointer'; - img.onclick = () => { + img.addEventListener('click', () => { document.location = img.src; - }; + }); } }