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

Convert some tests to svelte-inline-compile

Browse Source
This commit is contained in:
Ryan Gossiaux
2022-03-18 12:31:33 -07:00
parent 8bc5fabdd9
commit 35bfb4d11e
5 changed files with 250 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
src/lib/components/dialog/dialog.test.ts vendored
View File

@@ -5,11 +5,6 @@ import NestedTestComponent from "./_NestedTestComponent.svelte";
import { suppressConsoleLogs } from "$lib/test-utils/suppress-console-logs";
import { render } from "@testing-library/svelte";
import TestRenderer from "$lib/test-utils/TestRenderer.svelte";
import Button from "$lib/internal/elements/Button.svelte";
import Div from "$lib/internal/elements/Div.svelte";
import Form from "$lib/internal/elements/Form.svelte";
import P from "$lib/internal/elements/P.svelte";
import Input from "$lib/internal/elements/Input.svelte";
import {
assertActiveElement,
assertDialog,
@@ -62,19 +57,15 @@ describe("Safe guards", () => {
it(
"should be possible to render a Dialog without crashing",
suppressConsoleLogs(async () => {
render(TestRenderer, {
allProps: [
Dialog,
{ open: false, onClose: console.log },
[
[Button, {}, "Trigger"],
[DialogOverlay],
[DialogTitle],
[P, {}, "Contents"],
[DialogDescription],
],
],
});
render(svelte`
<Dialog open={false} on:close={console.log}>
<button>Trigger</button>
<DialogOverlay />
<DialogTitle />
<p>Contents</p>
<DialogDescription />
</Dialog>
`)
assertDialog({ state: DialogState.InvisibleUnmounted });
})
@@ -221,16 +212,13 @@ describe("Rendering", () => {
it('should be possible to always render the Dialog if we provide it a `static` prop (and disable focus trapping based on `open`)', () => {
let focusCounter = jest.fn()
render(
TestRenderer, {
allProps: [
[Button, {}, "Trigger"],
[Dialog, { open: false, onClose: console.log, static: true }, [
[P, {}, "Contents"],
[TestTabSentinel, { onFocus: focusCounter }]
]],
]
})
render(svelte`
<button>Trigger</button>
<Dialog open={false} on:close={console.log} static>
<p>Contents</p>
<TestTabSentinel onFocus={focusCounter} />
</Dialog>
`)
// Let's verify that the Dialog is already there
@@ -240,14 +228,11 @@ describe("Rendering", () => {
it('should be possible to use a different render strategy for the Dialog', async () => {
let focusCounter = jest.fn()
render(
TestRenderer, {
allProps: [
[ManagedDialog, { unmount: false, buttonText: "Trigger", buttonProps: { id: "trigger" } }, [
[Input, { onFocus: focusCounter }],
]],
]
})
render(svelte`
<ManagedDialog unmount={false} buttonText="Trigger" buttonProps={{ id: "trigger" }}>
<input on:focus={focusCounter}>
</ManagedDialog>
`)
assertDialog({ state: DialogState.InvisibleHidden })
expect(focusCounter).toHaveBeenCalledTimes(0)
@@ -268,17 +253,13 @@ describe("Rendering", () => {
it(
'should add a scroll lock to the html tag',
suppressConsoleLogs(async () => {
render(
TestRenderer, {
allProps: [
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [
[Input, { id: "a", type: "text" }],
[Input, { id: "b", type: "text" }],
[Input, { id: "c", type: "text" }],
]],
]
})
render(svelte`
<ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
<input id="a" type="text">
<input id="b" type="text">
<input id="c" type="text">
</ManagedDialog>
`)
// No overflow yet
expect(document.documentElement.style.overflow).toBe('')
@@ -455,16 +436,13 @@ describe('Keyboard interactions', () => {
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],
]],
]
})
render(svelte`
<ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
Contents
<input id="name">
<TestTabSentinel />
</ManagedDialog>
`)
assertDialog({ state: DialogState.InvisibleUnmounted })
@@ -488,16 +466,13 @@ describe('Keyboard interactions', () => {
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],
]],
]
})
render(svelte`
<ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
Contents
<input id="name" on:keydown={(e) => { e.preventDefault(); e.stopPropagation(); } }>
<TestTabSentinel />
</ManagedDialog>
`)
assertDialog({ state: DialogState.InvisibleUnmounted })
@@ -551,18 +526,15 @@ describe('Mouse interactions', () => {
it(
'should not close the Dialog when clicking on contents of the DialogOverlay',
suppressConsoleLogs(async () => {
render(
TestRenderer, {
allProps: [
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [
[DialogOverlay, {}, [
[Button, {}, "hi"]
]],
"Contents",
[TestTabSentinel],
]],
]
})
render(svelte`
<ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
<DialogOverlay>
<button>hi</button>
</DialogOverlay>
Contents
<TestTabSentinel />
</ManagedDialog>
`)
// Open dialog
await click(document.getElementById('trigger'))
@@ -611,16 +583,13 @@ describe('Mouse interactions', () => {
it(
'should be possible to close the dialog, and keep focus on the focusable element',
suppressConsoleLogs(async () => {
render(
TestRenderer, {
allProps: [
[Button, {}, "Hello"],
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [
"Contents",
[TestTabSentinel],
]],
]
})
render(svelte`
<button>Hello</button>
<ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
Contents
<TestTabSentinel />
</ManagedDialog>
`)
// Open dialog
await click(getByText('Trigger'))
@@ -643,18 +612,15 @@ describe('Mouse interactions', () => {
'should stop propagating click events when clicking on the DialogOverlay',
suppressConsoleLogs(async () => {
let wrapperFn = jest.fn()
render(
TestRenderer, {
allProps: [
[Div, { onClick: wrapperFn }, [
[ManagedDialog, { initialOpen: true }, [
"Contents",
[DialogOverlay],
[TestTabSentinel],
]],
]]
]
})
render(svelte`
<div on:click={wrapperFn}>
<ManagedDialog initialOpen={true}>
Contents
<DialogOverlay />
<TestTabSentinel />
</ManagedDialog>
</div>
`)
// Verify it is open
assertDialog({ state: DialogState.Visible })
@@ -677,18 +643,15 @@ describe('Mouse interactions', () => {
'should be possible to submit a form inside a Dialog',
suppressConsoleLogs(async () => {
let submitFn = jest.fn()
render(
TestRenderer, {
allProps: [
[ManagedDialog, { initialOpen: true }, [
[Form, { onSubmit: submitFn }, [
[Input, { type: "hidden", value: "abc" }],
[Button, { type: "submit" }, "Submit"]
]],
[TestTabSentinel],
]],
]
})
render(svelte`
<ManagedDialog initialOpen={true}>
<form on:submit={submitFn}>
<input type="hidden" value="abc">
<button type="submit">Submit</button>
</form>
<TestTabSentinel />
</ManagedDialog>
`)
// Verify it is open
assertDialog({ state: DialogState.Visible })
@@ -705,17 +668,14 @@ describe('Mouse interactions', () => {
'should stop propagating click events when clicking on an element inside the Dialog',
suppressConsoleLogs(async () => {
let wrapperFn = jest.fn()
render(
TestRenderer, {
allProps: [
[Div, { onClick: wrapperFn }, [
[ManagedDialog, { initialOpen: true, buttonInside: true, buttonText: "Inside" }, [
"Contents",
[TestTabSentinel],
]],
]]
]
})
render(svelte`
<div on:click={wrapperFn}>
<ManagedDialog initialOpen={true} buttonInside={true} buttonText="Inside">
Contents
<TestTabSentinel />
</ManagedDialog>
</div>
`)
// Verify it is open
assertDialog({ state: DialogState.Visible })

79
src/lib/components/listbox/listbox.test.ts vendored
View File

@@ -44,9 +44,6 @@ import {
import { Transition } from "../transitions";
import TransitionDebug from "$lib/components/disclosure/_TransitionDebug.svelte";
import ManagedListbox from "./_ManagedListbox.svelte";
import Button from "$lib/internal/elements/Button.svelte";
import Div from "$lib/internal/elements/Div.svelte";
import Span from "$lib/internal/elements/Span.svelte";
import svelte from "svelte-inline-compile";
import { writable } from "svelte/store";
@@ -3476,29 +3473,26 @@ describe('Mouse interactions', () => {
it(
'should be possible to click outside of the listbox on another listbox button which should close the current listbox and open the new listbox',
suppressConsoleLogs(async () => {
render(
TestRenderer, {
allProps: [
[Div, {}, [
[Listbox, { value: undefined, onChange: console.log }, [
[ListboxButton, {}, "Trigger"],
[ListboxOptions, {}, [
[ListboxOption, { value: "a" }, "Option A"],
[ListboxOption, { value: "b" }, "Option B"],
[ListboxOption, { value: "c" }, "Option C"],
]]
]],
[Listbox, { value: undefined, onChange: console.log }, [
[ListboxButton, {}, "Trigger"],
[ListboxOptions, {}, [
[ListboxOption, { value: "a" }, "Option A"],
[ListboxOption, { value: "b" }, "Option B"],
[ListboxOption, { value: "c" }, "Option C"],
]]
]],
]]
]
})
render(svelte`
<div>
<Listbox value={undefined} on:change={console.log}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
<ListboxOption value="b">Option B</ListboxOption>
<ListboxOption value="c">Option C</ListboxOption>
</ListboxOptions>
</Listbox>
<Listbox value={undefined} on:change={console.log}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
<ListboxOption value="b">Option B</ListboxOption>
<ListboxOption value="c">Option C</ListboxOption>
</ListboxOptions>
</Listbox>
</div>
`)
let [button1, button2] = getListboxButtons()
@@ -3557,24 +3551,21 @@ describe('Mouse interactions', () => {
'should be possible to click outside of the listbox, on an element which is within a focusable element, which closes the listbox',
suppressConsoleLogs(async () => {
let focusFn = jest.fn()
render(
TestRenderer, {
allProps: [
[Div, {}, [
[Listbox, { value: undefined, onChange: console.log }, [
[ListboxButton, { onFocus: focusFn }, "Trigger"],
[ListboxOptions, {}, [
[ListboxOption, { value: "a" }, "Option A"],
[ListboxOption, { value: "b" }, "Option B"],
[ListboxOption, { value: "c" }, "Option C"],
]]
]],
[Button, { id: "btn" }, [
[Span, {}, "Next"]
]],
]]
]
})
render(svelte`
<div>
<Listbox value={undefined} on:change={console.log}>
<ListboxButton on:focus={focusFn}>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
<ListboxOption value="b">Option B</ListboxOption>
<ListboxOption value="c">Option C</ListboxOption>
</ListboxOptions>
</Listbox>
<button id="btn">
<span>Next</span>
</button>
</div>
`)
// Click the listbox button
await click(getListboxButton())

163
src/lib/components/menu/menu.test.ts vendored
View File

@@ -6,10 +6,6 @@ import TestRenderer from "$lib/test-utils/TestRenderer.svelte";
import { click, focus, Keys, MouseButton, mouseLeave, mouseMove, press, shift, type, word } from "$lib/test-utils/interactions";
import { Transition, TransitionChild } from "../transitions";
import TransitionDebug from "$lib/components/disclosure/_TransitionDebug.svelte";
import Button from "$lib/internal/elements/Button.svelte";
import Div from "$lib/internal/elements/Div.svelte";
import Form from "$lib/internal/elements/Form.svelte";
import Span from "$lib/internal/elements/Span.svelte";
import svelte from "svelte-inline-compile";
import { writable } from "svelte/store";
@@ -489,36 +485,32 @@ describe('Rendering composition', () => {
it(
'should mark all the elements between MenuItems and MenuItem with role none',
suppressConsoleLogs(async () => {
render
render(
TestRenderer, {
allProps: [
[Menu, {}, [
[MenuButton, {}, "Trigger"],
[Div, { class: "outer" }, [
[MenuItems, {}, [
[Div, { class: "py-1 inner" }, [
[MenuItem, { as: "button" }, "Item A"],
[MenuItem, { as: "button" }, "Item B"],
]],
[Div, { class: "py-1 inner" }, [
[MenuItem, { as: "button" }, "Item C"],
[MenuItem, {}, [
[Div, {}, [
[Div, { class: "outer" }, "Item D"]
]]
]]
]],
[Div, { class: "py-1 inner" }, [
[Form, { class: "inner" }, [
[MenuItem, { as: "button" }, "Item E"]
]]
]]
]]
]]
]],
]
})
render(svelte`
<Menu>
<MenuButton>Trigger</MenuButton>
<div class="outer">
<MenuItems>
<div class="py-1 inner">
<MenuItem as="button">Item A</MenuItem>
<MenuItem as="button">Item B</MenuItem>
</div>
<div class="py-1 inner">
<MenuItem as="button">Item C</MenuItem>
<MenuItem>
<div>
<div class="outer">Item D</div>
</div>
</MenuItem>
</div>
<div class="py-1 inner">
<form class="inner">
<MenuItem as="button">Item E</MenuItem>
</form>
</div>
</MenuItems>
</div>
</Menu>
`)
// Open menu
await click(getMenuButton())
@@ -2960,29 +2952,26 @@ describe('Mouse interactions', () => {
it(
'should be possible to click outside of the menu on another menu button which should close the current menu and open the new menu',
suppressConsoleLogs(async () => {
render(
TestRenderer, {
allProps: [
[Div, {}, [
[Menu, {}, [
[MenuButton, {}, "Trigger"],
[MenuItems, {}, [
[MenuItem, { as: "a" }, "Item A"],
[MenuItem, { as: "a" }, "Item B"],
[MenuItem, { as: "a" }, "Item C"],
]]
]],
[Menu, {}, [
[MenuButton, {}, "Trigger"],
[MenuItems, {}, [
[MenuItem, { as: "a" }, "Item A"],
[MenuItem, { as: "a" }, "Item B"],
[MenuItem, { as: "a" }, "Item C"],
]]
]],
]]
]
})
render(svelte`
<div>
<Menu>
<MenuButton>Trigger</MenuButton>
<MenuItems>
<MenuItem as="a">Item A</MenuItem>
<MenuItem as="a">Item B</MenuItem>
<MenuItem as="a">Item C</MenuItem>
</MenuItems>
</Menu>
<Menu>
<MenuButton>Trigger</MenuButton>
<MenuItems>
<MenuItem as="a">Item A</MenuItem>
<MenuItem as="a">Item B</MenuItem>
<MenuItem as="a">Item C</MenuItem>
</MenuItems>
</Menu>
</div>
`)
let [button1, button2] = getMenuButtons()
@@ -3008,24 +2997,21 @@ describe('Mouse interactions', () => {
'should be possible to click outside of the menu, on an element which is within a focusable element, which closes the menu',
suppressConsoleLogs(async () => {
let focusFn = jest.fn()
render(
TestRenderer, {
allProps: [
[Div, {}, [
[Menu, {}, [
[MenuButton, { onFocus: focusFn }, "Trigger"],
[MenuItems, {}, [
[MenuItem, { as: "a" }, "Item A"],
[MenuItem, { as: "a" }, "Item B"],
[MenuItem, { as: "a" }, "Item C"],
]]
]],
[Button, { id: "btn" }, [
[Span, {}, "Next"]
]]
]]
]
})
render(svelte`
<div>
<Menu>
<MenuButton on:focus={focusFn}>Trigger</MenuButton>
<MenuItems>
<MenuItem as="a">Item A</MenuItem>
<MenuItem as="a">Item B</MenuItem>
<MenuItem as="a">Item C</MenuItem>
</MenuItems>
</Menu>
<button id="btn">
<span>Next</span>
</button>
</div>
`)
// Click the menu button
await click(getMenuButton())
@@ -3433,21 +3419,18 @@ describe('Mouse interactions', () => {
suppressConsoleLogs(async () => {
let clickHandler = jest.fn()
render(
TestRenderer, {
allProps: [
[Menu, {}, [
[MenuButton, {}, "Trigger"],
[MenuItems, {}, [
[MenuItem, { as: "a", onClick: clickHandler }, "Item A"],
[MenuItem, { as: "a", onClick: clickHandler, disabled: true }, "Item B"],
[MenuItem, { disabled: true }, [
[Button, { onClick: clickHandler }, "Item C"],
]]
]]
]],
]
})
render(svelte`
<Menu>
<MenuButton>Trigger</MenuButton>
<MenuItems>
<MenuItem as="a" on:click={clickHandler}>Item A</MenuItem>
<MenuItem as="a" on:click={clickHandler} disabled>Item B</MenuItem>
<MenuItem disabled>
<button on:click={clickHandler}>Item C</button>
</MenuItem>
</MenuItems>
</Menu>
`)
// Open menu
await click(getMenuButton())

114
src/lib/components/popover/popover.test.ts vendored
View File

@@ -5,8 +5,6 @@ import TestRenderer from "$lib/test-utils/TestRenderer.svelte";
import { Popover, PopoverButton, PopoverGroup, PopoverOverlay, PopoverPanel } from ".";
import { click, Keys, MouseButton, press, shift } from "$lib/test-utils/interactions";
import A from "$lib/internal/elements/A.svelte";
import Button from "$lib/internal/elements/Button.svelte";
import Span from "$lib/internal/elements/Span.svelte";
import { Transition, TransitionChild } from "$lib/components/transitions";
import TransitionDebug from "$lib/components/disclosure/_TransitionDebug.svelte";
import Portal from "$lib/components/portal/Portal.svelte";
@@ -1972,16 +1970,13 @@ describe('Mouse interactions', () => {
it(
'should be possible to close the popover, and re-focus the button when we click outside on a non-focusable element',
suppressConsoleLogs(async () => {
render(
TestRenderer, {
allProps: [
[Popover, {}, [
[PopoverButton, {}, "Trigger"],
[PopoverPanel, {}, "Contents"]
]],
[Span, {}, "I am just text"],
]
})
render(svelte`
<Popover>
<PopoverButton>Trigger</PopoverButton>
<PopoverPanel>Contents</PopoverPanel>
</Popover>
<span>I am just text</span>
`)
// Open popover
await click(getPopoverButton())
@@ -2003,16 +1998,13 @@ describe('Mouse interactions', () => {
it(
'should be possible to close the popover, by clicking outside the popover on another focusable element',
suppressConsoleLogs(async () => {
render(
TestRenderer, {
allProps: [
[Popover, {}, [
[PopoverButton, {}, "Trigger"],
[PopoverPanel, {}, "Contents"]
]],
[Button, {}, "Different button"],
]
})
render(svelte`
<Popover>
<PopoverButton>Trigger</PopoverButton>
<PopoverPanel>Contents</PopoverPanel>
</Popover>
<button>Different button</button>
`)
// Open popover
await click(getPopoverButton())
@@ -2035,18 +2027,15 @@ describe('Mouse interactions', () => {
'should be possible to close the popover, by clicking outside the popover on another element inside a focusable element',
suppressConsoleLogs(async () => {
let focusFn = jest.fn()
render(
TestRenderer, {
allProps: [
[Popover, {}, [
[PopoverButton, { onFocus: focusFn }, "Trigger"],
[PopoverPanel, {}, "Contents"]
]],
[Button, { id: "btn" }, [
[Span, {}, "Different button"],
]]
]
})
render(svelte`
<Popover>
<PopoverButton on:focus={focusFn}>Trigger</PopoverButton>
<PopoverPanel>Contents</PopoverPanel>
</Popover>
<button id="btn">
<span>Different button</span>
</button>
`)
// Open popover
await click(getPopoverButton())
@@ -2108,17 +2097,14 @@ describe('Mouse interactions', () => {
suppressConsoleLogs(async () => {
let clickFn = jest.fn()
render(
TestRenderer, {
allProps: [
[Popover, {}, [
[PopoverButton, {}, "Open"],
[PopoverPanel, { static: true }, [
[Button, { onClick: clickFn }, "btn"],
]],
]],
]
})
render(svelte`
<Popover>
<PopoverButton>Open</PopoverButton>
<PopoverPanel static>
<button on:click={clickFn}>btn</button>
</PopoverPanel>
</Popover>
`)
// Open the popover
await click(getPopoverButton())
@@ -2137,17 +2123,14 @@ describe('Mouse interactions', () => {
it(
'should not close the Popover when clicking on a non-focusable element inside a static PopoverPanel',
suppressConsoleLogs(async () => {
render(
TestRenderer, {
allProps: [
[Popover, {}, [
[PopoverButton, {}, "Open"],
[PopoverPanel, { static: true }, [
[Span, {}, "element"],
]],
]],
]
})
render(svelte`
<Popover>
<PopoverButton>Open</PopoverButton>
<PopoverPanel static>
<span>element</span>
</PopoverPanel>
</Popover>
`)
// Open the popover
await click(getPopoverButton())
@@ -2163,17 +2146,14 @@ describe('Mouse interactions', () => {
it(
'should close the Popover when clicking outside of a static PopoverPanel',
suppressConsoleLogs(async () => {
render(
TestRenderer, {
allProps: [
[Popover, {}, [
[PopoverButton, {}, "Open"],
[PopoverPanel, { static: true }, [
[Span, {}, "element"],
]],
]],
]
})
render(svelte`
<Popover>
<PopoverButton>Open</PopoverButton>
<PopoverPanel static>
<span>element</span>
</PopoverPanel>
</Popover>
`)
// Open the popover
await click(getPopoverButton())

31
src/lib/components/switch/switch.test.ts vendored
View File

@@ -8,9 +8,6 @@ import {
getSwitchLabel,
SwitchState,
} from "$lib/test-utils/accessibility-assertions";
import Button from "$lib/internal/elements/Button.svelte";
import Div from "$lib/internal/elements/Div.svelte";
import Span from "$lib/internal/elements/Span.svelte";
import ManagedSwitch from "./_ManagedSwitch.svelte";
import { click, Keys, press } from "$lib/test-utils/interactions";
import svelte from "svelte-inline-compile";
@@ -60,13 +57,11 @@ describe("Rendering", () => {
});
it("should be possible to use the switch contents as the label", () => {
render(TestRenderer, {
allProps: [
Switch,
{ checked: false, onChange: console.log },
[Span, {}, "Enable notifications"],
],
});
render(svelte`
<Switch checked={false} on:change={console.log}>
<span>Enable notifications</span>
</Switch>
`)
assertSwitch({ state: SwitchState.Off, label: "Enable notifications" });
});
@@ -269,16 +264,12 @@ describe("Keyboard interactions", () => {
describe("`Tab` key", () => {
it("should be possible to tab away from the Switch", async () => {
render(TestRenderer, {
allProps: [
Div,
{},
[
[Switch, { checked: false, onChange: console.log }],
[Button, { id: "btn" }, "Other element"],
],
],
});
render(svelte`
<div>
<Switch checked={false} on:change={console.log} />
<button id="btn">Other element</button>
</div>
`)
// Ensure checkbox is off
assertSwitch({ state: SwitchState.Off });