Skip to content

Commit

Permalink
ease setting up tests
Browse files Browse the repository at this point in the history
  • Loading branch information
ph-fritsche committed Aug 18, 2022
1 parent e05e521 commit 0e07093
Show file tree
Hide file tree
Showing 8 changed files with 37 additions and 28 deletions.
21 changes: 21 additions & 0 deletions tests/_helpers/elements/index.ts
Original file line number Diff line number Diff line change
@@ -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)
}
})
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ template.innerHTML = `
<input>
`

class ShadowInput extends HTMLElement {
export class ShadowInput extends HTMLElement {
private $input?: HTMLInputElement

static getObservedAttributes() {
Expand Down Expand Up @@ -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)
}
}
6 changes: 6 additions & 0 deletions tests/_helpers/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import {CustomElements, registerCustomElements} from './elements'

// this is pretty helpful:
// https://codesandbox.io/s/quizzical-worker-eo909

Expand All @@ -11,5 +13,9 @@ expect.addSnapshotSerializer({
print: val => String((<null | {snapshot?: string}>val)?.snapshot),
})

registerCustomElements()

export type {CustomElements}

export {render, setup} from './setup'
export {addEventListener, addListeners} from './listeners'
2 changes: 0 additions & 2 deletions tests/clipboard/copy.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import {defineShadowInputCustomElementIfNotDefined} from '../_helpers/shadow-input'
import userEvent from '#src'
import {render, setup} from '#testHelpers'

Expand Down Expand Up @@ -102,7 +101,6 @@ describe('without Clipboard API', () => {

describe('on shadow DOM', () => {
test('copy in an input element', async () => {
defineShadowInputCustomElementIfNotDefined()
const {user} = setup('<shadow-input value="test"></shadow-input>', {
selection: {anchorOffset: 0, focusOffset: 4},
})
Expand Down
4 changes: 1 addition & 3 deletions tests/clipboard/cut.ts
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -110,7 +109,6 @@ describe('without Clipboard API', () => {
})
describe('on shadow DOM', () => {
test('cut in an input element', async () => {
defineShadowInputCustomElementIfNotDefined()
const {element, user} = setup<ShadowInput>(
'<shadow-input value="test"></shadow-input>',
{
Expand Down
9 changes: 4 additions & 5 deletions tests/clipboard/paste.ts
Original file line number Diff line number Diff line change
@@ -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 () => {
Expand Down Expand Up @@ -154,8 +152,9 @@ describe('without Clipboard API', () => {

describe('on shadow DOM', () => {
test('paste into an input element', async () => {
defineShadowInputCustomElementIfNotDefined()
const {element, user} = setup<ShadowInput>('<shadow-input></shadow-input>')
const {element, user} = setup<CustomElements['shadow-input']>(
'<shadow-input></shadow-input>',
)

await user.paste('test')

Expand Down
11 changes: 4 additions & 7 deletions tests/keyboard/index.ts
Original file line number Diff line number Diff line change
@@ -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('<input/>', {focus: false})
Expand Down Expand Up @@ -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<ShadowInput>('<shadow-input></shadow-input>')
const {element, user} = setup<CustomElements['shadow-input']>(
'<shadow-input></shadow-input>',
)

await user.keyboard('test')

Expand Down
2 changes: 0 additions & 2 deletions tests/utils/focus/getActiveElement.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import {defineShadowInputCustomElementIfNotDefined} from '../../_helpers/shadow-input'
import {setup} from '#testHelpers'
import {getActiveElementOrBody} from '#src/utils'

Expand All @@ -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('<shadow-input></shadow-input>')

expect(getActiveElementOrBody(document)).toBe(
Expand Down

0 comments on commit 0e07093

Please sign in to comment.