From 0e07093dc5f4ad6eda05703da3fc087c46cff5b4 Mon Sep 17 00:00:00 2001 From: Philipp Fritsche Date: Thu, 18 Aug 2022 09:59:27 +0000 Subject: [PATCH] ease setting up tests --- tests/_helpers/elements/index.ts | 21 +++++++++++++++++++ tests/_helpers/{ => elements}/shadow-input.ts | 10 +-------- tests/_helpers/index.ts | 6 ++++++ tests/clipboard/copy.ts | 2 -- tests/clipboard/cut.ts | 4 +--- tests/clipboard/paste.ts | 9 ++++---- tests/keyboard/index.ts | 11 ++++------ tests/utils/focus/getActiveElement.ts | 2 -- 8 files changed, 37 insertions(+), 28 deletions(-) create mode 100644 tests/_helpers/elements/index.ts rename tests/_helpers/{ => elements}/shadow-input.ts (78%) diff --git a/tests/_helpers/elements/index.ts b/tests/_helpers/elements/index.ts new file mode 100644 index 00000000..20015454 --- /dev/null +++ b/tests/_helpers/elements/index.ts @@ -0,0 +1,21 @@ +import {ShadowInput} from './shadow-input' + +const customElements = { + 'shadow-input': ShadowInput, +} + +export type CustomElements = { + [k in keyof typeof customElements]: typeof customElements[k] extends { + new (): infer T + } + ? T + : never +} + +export function registerCustomElements() { + Object.entries(customElements).forEach(([name, constructor]) => { + if (!globalThis.customElements.get(name)) { + globalThis.customElements.define(name, constructor) + } + }) +} diff --git a/tests/_helpers/shadow-input.ts b/tests/_helpers/elements/shadow-input.ts similarity index 78% rename from tests/_helpers/shadow-input.ts rename to tests/_helpers/elements/shadow-input.ts index 404103ba..1e454c6e 100644 --- a/tests/_helpers/shadow-input.ts +++ b/tests/_helpers/elements/shadow-input.ts @@ -5,7 +5,7 @@ template.innerHTML = ` ` -class ShadowInput extends HTMLElement { +export class ShadowInput extends HTMLElement { private $input?: HTMLInputElement static getObservedAttributes() { @@ -40,11 +40,3 @@ class ShadowInput extends HTMLElement { return this.$input?.value ?? '' } } - -export type {ShadowInput} - -export function defineShadowInputCustomElementIfNotDefined() { - if (window.customElements.get('shadow-input') === undefined) { - window.customElements.define('shadow-input', ShadowInput) - } -} diff --git a/tests/_helpers/index.ts b/tests/_helpers/index.ts index a4c933c1..13d293be 100644 --- a/tests/_helpers/index.ts +++ b/tests/_helpers/index.ts @@ -1,3 +1,5 @@ +import {CustomElements, registerCustomElements} from './elements' + // this is pretty helpful: // https://codesandbox.io/s/quizzical-worker-eo909 @@ -11,5 +13,9 @@ expect.addSnapshotSerializer({ print: val => String((val)?.snapshot), }) +registerCustomElements() + +export type {CustomElements} + export {render, setup} from './setup' export {addEventListener, addListeners} from './listeners' diff --git a/tests/clipboard/copy.ts b/tests/clipboard/copy.ts index 74f24726..7d3822c1 100644 --- a/tests/clipboard/copy.ts +++ b/tests/clipboard/copy.ts @@ -1,4 +1,3 @@ -import {defineShadowInputCustomElementIfNotDefined} from '../_helpers/shadow-input' import userEvent from '#src' import {render, setup} from '#testHelpers' @@ -102,7 +101,6 @@ describe('without Clipboard API', () => { describe('on shadow DOM', () => { test('copy in an input element', async () => { - defineShadowInputCustomElementIfNotDefined() const {user} = setup('', { selection: {anchorOffset: 0, focusOffset: 4}, }) diff --git a/tests/clipboard/cut.ts b/tests/clipboard/cut.ts index a3a669d5..422747e3 100644 --- a/tests/clipboard/cut.ts +++ b/tests/clipboard/cut.ts @@ -1,5 +1,4 @@ -import type {ShadowInput} from '../_helpers/shadow-input' -import {defineShadowInputCustomElementIfNotDefined} from '../_helpers/shadow-input' +import type {ShadowInput} from '../_helpers/elements/shadow-input' import userEvent from '#src' import {render, setup} from '#testHelpers' @@ -110,7 +109,6 @@ describe('without Clipboard API', () => { }) describe('on shadow DOM', () => { test('cut in an input element', async () => { - defineShadowInputCustomElementIfNotDefined() const {element, user} = setup( '', { diff --git a/tests/clipboard/paste.ts b/tests/clipboard/paste.ts index e5fd0370..712b1131 100644 --- a/tests/clipboard/paste.ts +++ b/tests/clipboard/paste.ts @@ -1,7 +1,5 @@ -import type {ShadowInput} from '../_helpers/shadow-input' -import {defineShadowInputCustomElementIfNotDefined} from '../_helpers/shadow-input' import userEvent from '#src' -import {render, setup} from '#testHelpers' +import {CustomElements, render, setup} from '#testHelpers' import {createDataTransfer} from '#src/utils' test('paste with empty clipboard', async () => { @@ -154,8 +152,9 @@ describe('without Clipboard API', () => { describe('on shadow DOM', () => { test('paste into an input element', async () => { - defineShadowInputCustomElementIfNotDefined() - const {element, user} = setup('') + const {element, user} = setup( + '', + ) await user.paste('test') diff --git a/tests/keyboard/index.ts b/tests/keyboard/index.ts index 26196780..e5bb9502 100644 --- a/tests/keyboard/index.ts +++ b/tests/keyboard/index.ts @@ -1,9 +1,5 @@ import userEvent from '#src' -import {addListeners, render, setup} from '#testHelpers' -import { - defineShadowInputCustomElementIfNotDefined, - ShadowInput, -} from '../_helpers/shadow-input' +import {addListeners, CustomElements, render, setup} from '#testHelpers' it('type without focus', async () => { const {element, user} = setup('', {focus: false}) @@ -170,8 +166,9 @@ test('disabling activeElement moves action to HTMLBodyElement', async () => { describe('on shadow DOM', () => { test('type into an input element', async () => { - defineShadowInputCustomElementIfNotDefined() - const {element, user} = setup('') + const {element, user} = setup( + '', + ) await user.keyboard('test') diff --git a/tests/utils/focus/getActiveElement.ts b/tests/utils/focus/getActiveElement.ts index c303f476..13d630ad 100644 --- a/tests/utils/focus/getActiveElement.ts +++ b/tests/utils/focus/getActiveElement.ts @@ -1,4 +1,3 @@ -import {defineShadowInputCustomElementIfNotDefined} from '../../_helpers/shadow-input' import {setup} from '#testHelpers' import {getActiveElementOrBody} from '#src/utils' @@ -16,7 +15,6 @@ test('default to body as active element', async () => { describe('on shadow DOM', () => { test('get focused element inside shadow tree', async () => { - defineShadowInputCustomElementIfNotDefined() const {element} = setup('') expect(getActiveElementOrBody(document)).toBe(