public/svelte-headlessui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Add more Dialog tests

Browse Source 
This caught an issue with <FocusTrap> already.
This commit is contained in:
Ryan Gossiaux
2021-12-26 16:53:44 -08:00
parent a2745e1770
commit 77dd80caa2
3 changed files with 155 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/lib/components/dialog/dialog.test.ts
View File

@@ -12,7 +12,12 @@ import { click, Keys, press } from "$lib/test-utils/interactions";
import Transition from "$lib/components/transitions/TransitionRoot.svelte";
import { tick } from "svelte";
jest.mock('../../hooks/use-id')
let id = 0;
jest.mock('../../hooks/use-id', () => {
return {
useId: jest.fn(() => ++id),
}
})
// @ts-expect-error
global.IntersectionObserver = class FakeIntersectionObserver {
@@ -20,6 +25,7 @@ global.IntersectionObserver = class FakeIntersectionObserver {
disconnect() { }
}
beforeEach(() => id = 0)
afterAll(() => jest.restoreAllMocks())
describe('Safe guards', () => {
@@ -56,10 +62,7 @@ describe('Safe guards', () => {
]
})
assertDialog({
state: DialogState.InvisibleUnmounted,
attributes: { id: 'headlessui-dialog-1' },
})
assertDialog({ state: DialogState.InvisibleUnmounted })
})
)
})
@@ -355,4 +358,103 @@ describe('Composition', () => {
)
})
describe('Keyboard interactions', () => {
describe('`Escape` key', () => {
it(
'should be possible to close the dialog with Escape',
async () => {
render(
TestRenderer, {
allProps: [
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [
"Contents",
[TestTabSentinel],
]],
]
})
assertDialog({ state: DialogState.InvisibleUnmounted })
// Open dialog
await click(document.getElementById("trigger"))
// Verify it is open
assertDialog({
state: DialogState.Visible,
attributes: { id: 'headlessui-dialog-1' },
})
// Close dialog
await press(Keys.Escape)
// Verify it is close
assertDialog({ state: DialogState.InvisibleUnmounted })
}
)
it(
'should be possible to close the dialog with Escape, when a field is focused',
suppressConsoleLogs(async () => {
render(
TestRenderer, {
allProps: [
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [
["Contents"],
[Input, { id: "name" }],
[TestTabSentinel],
]],
]
})
assertDialog({ state: DialogState.InvisibleUnmounted })
// Open dialog
await click(document.getElementById('trigger'))
// Verify it is open
assertDialog({
state: DialogState.Visible,
attributes: { id: 'headlessui-dialog-1' },
})
// Close dialog
await press(Keys.Escape)
// Verify it is close
assertDialog({ state: DialogState.InvisibleUnmounted })
})
)
it(
'should not be possible to close the dialog with Escape, when a field is focused but cancels the event',
async () => {
render(
TestRenderer, {
allProps: [
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [
["Contents"],
[Input, { id: "name", onKeydown: (e: CustomEvent) => { e.preventDefault(); e.stopPropagation(); } }],
[TestTabSentinel],
]],
]
})
assertDialog({ state: DialogState.InvisibleUnmounted })
// Open dialog
await click(document.getElementById('trigger'))
// Verify it is open
assertDialog({
state: DialogState.Visible,
attributes: { id: 'headlessui-dialog-1' },
})
// Try to close the dialog
await press(Keys.Escape)
// Verify it is still open
assertDialog({ state: DialogState.Visible })
})
})
})

46
src/lib/test-utils/TestRenderer.svelte
View File

@@ -4,18 +4,25 @@
onChange?: HandlerType;
onClose?: HandlerType;
onFocus?: HandlerType;
onKeydown?: HandlerType;
}
type SingleComponent = [SvelteComponent, ComponentProps, TestRendererProps];
type SingleComponent =
| string
| [SvelteComponent, ComponentProps, TestRendererProps];
export type TestRendererProps =
| undefined
| string
| SingleComponent
| SingleComponent[];
function isSingleComponent(
props: SingleComponent | SingleComponent[]
): props is SingleComponent {
return Array.isArray(props) && !Array.isArray(props[0]);
return (
typeof props === "string" ||
(Array.isArray(props) &&
!Array.isArray(props[0]) &&
typeof props[0] !== "string")
);
}
</script>
@@ -28,32 +35,37 @@
let onChange: HandlerType = () => {};
let onClose: HandlerType = () => {};
let onFocus: HandlerType = () => {};
let onKeydown: HandlerType = () => {};
if (allProps && typeof allProps !== "string" && isSingleComponent(allProps)) {
({
onChange = onChange,
onClose = onClose,
onFocus = onFocus,
onKeydown = onKeydown,
...spreadProps
} = allProps[1] || {});
}
</script>
{#if typeof allProps === "string"}
{allProps}
{:else if Array.isArray(allProps)}
{#if Array.isArray(allProps[0])}
{#if allProps}
{#if isSingleComponent(allProps)}
{#if typeof allProps === "string"}
{allProps}
{:else}
<svelte:component
this={allProps[0]}
{...spreadProps}
on:change={onChange}
on:close={onClose}
on:focus={onFocus}
on:keydown={onKeydown}
>
<svelte:self allProps={allProps[2]} />
</svelte:component>
{/if}
{:else}
{#each allProps as childProps}
<svelte:self allProps={childProps} />
{/each}
{:else}
<svelte:component
this={allProps[0]}
{...spreadProps}
on:change={onChange}
on:close={onClose}
on:focus={onFocus}
>
<svelte:self allProps={allProps[2]} />
</svelte:component>
{/if}
{/if}

39
src/lib/test-utils/interactions.ts
View File

@@ -181,9 +181,9 @@ export async function click(
if (button === MouseButton.Left) {
// Cancel in pointerDown cancels mouseDown, mouseUp
let cancelled = !fireEvent.pointerDown(element, options)
let cancelled = !(await fireEvent.pointerDown(element, options))
if (!cancelled) {
fireEvent.mouseDown(element, options)
await fireEvent.mouseDown(element, options)
}
// Ensure to trigger a `focus` event if the element is focusable, or within a focusable element
@@ -196,26 +196,25 @@ export async function click(
next = next.parentElement
}
fireEvent.pointerUp(element, options)
await fireEvent.pointerUp(element, options)
if (!cancelled) {
fireEvent.mouseUp(element, options)
await fireEvent.mouseUp(element, options)
}
fireEvent.click(element, options)
await fireEvent.click(element, options)
} else if (button === MouseButton.Right) {
// Cancel in pointerDown cancels mouseDown, mouseUp
let cancelled = !fireEvent.pointerDown(element, options)
let cancelled = !(await fireEvent.pointerDown(element, options))
if (!cancelled) {
fireEvent.mouseDown(element, options)
await fireEvent.mouseDown(element, options)
}
// Only in Firefox:
fireEvent.pointerUp(element, options)
await fireEvent.pointerUp(element, options)
if (!cancelled) {
fireEvent.mouseUp(element, options)
await fireEvent.mouseUp(element, options)
}
}
await tick()
} catch (err: any) {
Error.captureStackTrace(err, click)
throw err
@@ -226,7 +225,7 @@ export async function focus(element: Document | Element | Window | null) {
try {
if (element === null) return expect(element).not.toBe(null)
fireEvent.focus(element)
await fireEvent.focus(element)
await tick()
} catch (err: any) {
@@ -238,9 +237,9 @@ export async function mouseEnter(element: Document | Element | Window | null) {
try {
if (element === null) return expect(element).not.toBe(null)
fireEvent.pointerOver(element)
fireEvent.pointerEnter(element)
fireEvent.mouseOver(element)
await fireEvent.pointerOver(element)
await fireEvent.pointerEnter(element)
await fireEvent.mouseOver(element)
await tick()
} catch (err: any) {
@@ -253,8 +252,8 @@ export async function mouseMove(element: Document | Element | Window | null) {
try {
if (element === null) return expect(element).not.toBe(null)
fireEvent.pointerMove(element)
fireEvent.mouseMove(element)
await fireEvent.pointerMove(element)
await fireEvent.mouseMove(element)
await tick()
} catch (err: any) {
@@ -267,10 +266,10 @@ export async function mouseLeave(element: Document | Element | Window | null) {
try {
if (element === null) return expect(element).not.toBe(null)
fireEvent.pointerOut(element)
fireEvent.pointerLeave(element)
fireEvent.mouseOut(element)
fireEvent.mouseLeave(element)
await fireEvent.pointerOut(element)
await fireEvent.pointerLeave(element)
await fireEvent.mouseOut(element)
await fireEvent.mouseLeave(element)
await tick()
} catch (err: any) {