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 { suppressConsoleLogs } from "$lib/test-utils/suppress-console-logs";
import { render } from "@testing-library/svelte"; import { render } from "@testing-library/svelte";
import TestRenderer from "$lib/test-utils/TestRenderer.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 { import {
assertActiveElement, assertActiveElement,
assertDialog, assertDialog,
@@ -62,19 +57,15 @@ describe("Safe guards", () => {
it( it(
"should be possible to render a Dialog without crashing", "should be possible to render a Dialog without crashing",
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render(TestRenderer, { render(svelte`
allProps: [ <Dialog open={false} on:close={console.log}>
Dialog, <button>Trigger</button>
{ open: false, onClose: console.log }, <DialogOverlay />
[ <DialogTitle />
[Button, {}, "Trigger"], <p>Contents</p>
[DialogOverlay], <DialogDescription />
[DialogTitle], </Dialog>
[P, {}, "Contents"], `)
[DialogDescription],
],
],
});
assertDialog({ state: DialogState.InvisibleUnmounted }); 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`)', () => { 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() let focusCounter = jest.fn()
render( render(svelte`
TestRenderer, { <button>Trigger</button>
allProps: [ <Dialog open={false} on:close={console.log} static>
[Button, {}, "Trigger"], <p>Contents</p>
[Dialog, { open: false, onClose: console.log, static: true }, [ <TestTabSentinel onFocus={focusCounter} />
[P, {}, "Contents"], </Dialog>
[TestTabSentinel, { onFocus: focusCounter }] `)
]],
]
})
// Let's verify that the Dialog is already there // 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 () => { it('should be possible to use a different render strategy for the Dialog', async () => {
let focusCounter = jest.fn() let focusCounter = jest.fn()
render( render(svelte`
TestRenderer, { <ManagedDialog unmount={false} buttonText="Trigger" buttonProps={{ id: "trigger" }}>
allProps: [ <input on:focus={focusCounter}>
[ManagedDialog, { unmount: false, buttonText: "Trigger", buttonProps: { id: "trigger" } }, [ </ManagedDialog>
[Input, { onFocus: focusCounter }], `)
]],
]
})
assertDialog({ state: DialogState.InvisibleHidden }) assertDialog({ state: DialogState.InvisibleHidden })
expect(focusCounter).toHaveBeenCalledTimes(0) expect(focusCounter).toHaveBeenCalledTimes(0)
@@ -268,17 +253,13 @@ describe("Rendering", () => {
it( it(
'should add a scroll lock to the html tag', 'should add a scroll lock to the html tag',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
allProps: [ <input id="a" type="text">
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [ <input id="b" type="text">
[Input, { id: "a", type: "text" }], <input id="c" type="text">
[Input, { id: "b", type: "text" }], </ManagedDialog>
[Input, { id: "c", type: "text" }], `)
]],
]
})
// No overflow yet // No overflow yet
expect(document.documentElement.style.overflow).toBe('') expect(document.documentElement.style.overflow).toBe('')
@@ -455,16 +436,13 @@ describe('Keyboard interactions', () => {
it( it(
'should be possible to close the dialog with Escape, when a field is focused', 'should be possible to close the dialog with Escape, when a field is focused',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
allProps: [ Contents
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [ <input id="name">
"Contents", <TestTabSentinel />
[Input, { id: "name" }], </ManagedDialog>
[TestTabSentinel], `)
]],
]
})
assertDialog({ state: DialogState.InvisibleUnmounted }) assertDialog({ state: DialogState.InvisibleUnmounted })
@@ -488,16 +466,13 @@ describe('Keyboard interactions', () => {
it( it(
'should not be possible to close the dialog with Escape, when a field is focused but cancels the event', 'should not be possible to close the dialog with Escape, when a field is focused but cancels the event',
async () => { async () => {
render( render(svelte`
TestRenderer, { <ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
allProps: [ Contents
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [ <input id="name" on:keydown={(e) => { e.preventDefault(); e.stopPropagation(); } }>
"Contents", <TestTabSentinel />
[Input, { id: "name", onKeydown: (e: CustomEvent) => { e.preventDefault(); e.stopPropagation(); } }], </ManagedDialog>
[TestTabSentinel], `)
]],
]
})
assertDialog({ state: DialogState.InvisibleUnmounted }) assertDialog({ state: DialogState.InvisibleUnmounted })
@@ -551,18 +526,15 @@ describe('Mouse interactions', () => {
it( it(
'should not close the Dialog when clicking on contents of the DialogOverlay', 'should not close the Dialog when clicking on contents of the DialogOverlay',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
allProps: [ <DialogOverlay>
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [ <button>hi</button>
[DialogOverlay, {}, [ </DialogOverlay>
[Button, {}, "hi"] Contents
]], <TestTabSentinel />
"Contents", </ManagedDialog>
[TestTabSentinel], `)
]],
]
})
// Open dialog // Open dialog
await click(document.getElementById('trigger')) await click(document.getElementById('trigger'))
@@ -611,16 +583,13 @@ describe('Mouse interactions', () => {
it( it(
'should be possible to close the dialog, and keep focus on the focusable element', 'should be possible to close the dialog, and keep focus on the focusable element',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <button>Hello</button>
allProps: [ <ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
[Button, {}, "Hello"], Contents
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [ <TestTabSentinel />
"Contents", </ManagedDialog>
[TestTabSentinel], `)
]],
]
})
// Open dialog // Open dialog
await click(getByText('Trigger')) await click(getByText('Trigger'))
@@ -643,18 +612,15 @@ describe('Mouse interactions', () => {
'should stop propagating click events when clicking on the DialogOverlay', 'should stop propagating click events when clicking on the DialogOverlay',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
let wrapperFn = jest.fn() let wrapperFn = jest.fn()
render( render(svelte`
TestRenderer, { <div on:click={wrapperFn}>
allProps: [ <ManagedDialog initialOpen={true}>
[Div, { onClick: wrapperFn }, [ Contents
[ManagedDialog, { initialOpen: true }, [ <DialogOverlay />
"Contents", <TestTabSentinel />
[DialogOverlay], </ManagedDialog>
[TestTabSentinel], </div>
]], `)
]]
]
})
// Verify it is open // Verify it is open
assertDialog({ state: DialogState.Visible }) assertDialog({ state: DialogState.Visible })
@@ -677,18 +643,15 @@ describe('Mouse interactions', () => {
'should be possible to submit a form inside a Dialog', 'should be possible to submit a form inside a Dialog',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
let submitFn = jest.fn() let submitFn = jest.fn()
render( render(svelte`
TestRenderer, { <ManagedDialog initialOpen={true}>
allProps: [ <form on:submit={submitFn}>
[ManagedDialog, { initialOpen: true }, [ <input type="hidden" value="abc">
[Form, { onSubmit: submitFn }, [ <button type="submit">Submit</button>
[Input, { type: "hidden", value: "abc" }], </form>
[Button, { type: "submit" }, "Submit"] <TestTabSentinel />
]], </ManagedDialog>
[TestTabSentinel], `)
]],
]
})
// Verify it is open // Verify it is open
assertDialog({ state: DialogState.Visible }) assertDialog({ state: DialogState.Visible })
@@ -705,17 +668,14 @@ describe('Mouse interactions', () => {
'should stop propagating click events when clicking on an element inside the Dialog', 'should stop propagating click events when clicking on an element inside the Dialog',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
let wrapperFn = jest.fn() let wrapperFn = jest.fn()
render( render(svelte`
TestRenderer, { <div on:click={wrapperFn}>
allProps: [ <ManagedDialog initialOpen={true} buttonInside={true} buttonText="Inside">
[Div, { onClick: wrapperFn }, [ Contents
[ManagedDialog, { initialOpen: true, buttonInside: true, buttonText: "Inside" }, [ <TestTabSentinel />
"Contents", </ManagedDialog>
[TestTabSentinel], </div>
]], `)
]]
]
})
// Verify it is open // Verify it is open
assertDialog({ state: DialogState.Visible }) 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 { Transition } from "../transitions";
import TransitionDebug from "$lib/components/disclosure/_TransitionDebug.svelte"; import TransitionDebug from "$lib/components/disclosure/_TransitionDebug.svelte";
import ManagedListbox from "./_ManagedListbox.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 svelte from "svelte-inline-compile";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
@@ -3476,29 +3473,26 @@ describe('Mouse interactions', () => {
it( 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', '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 () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <div>
allProps: [ <Listbox value={undefined} on:change={console.log}>
[Div, {}, [ <ListboxButton>Trigger</ListboxButton>
[Listbox, { value: undefined, onChange: console.log }, [ <ListboxOptions>
[ListboxButton, {}, "Trigger"], <ListboxOption value="a">Option A</ListboxOption>
[ListboxOptions, {}, [ <ListboxOption value="b">Option B</ListboxOption>
[ListboxOption, { value: "a" }, "Option A"], <ListboxOption value="c">Option C</ListboxOption>
[ListboxOption, { value: "b" }, "Option B"], </ListboxOptions>
[ListboxOption, { value: "c" }, "Option C"], </Listbox>
]] <Listbox value={undefined} on:change={console.log}>
]], <ListboxButton>Trigger</ListboxButton>
[Listbox, { value: undefined, onChange: console.log }, [ <ListboxOptions>
[ListboxButton, {}, "Trigger"], <ListboxOption value="a">Option A</ListboxOption>
[ListboxOptions, {}, [ <ListboxOption value="b">Option B</ListboxOption>
[ListboxOption, { value: "a" }, "Option A"], <ListboxOption value="c">Option C</ListboxOption>
[ListboxOption, { value: "b" }, "Option B"], </ListboxOptions>
[ListboxOption, { value: "c" }, "Option C"], </Listbox>
]] </div>
]], `)
]]
]
})
let [button1, button2] = getListboxButtons() 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', 'should be possible to click outside of the listbox, on an element which is within a focusable element, which closes the listbox',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
let focusFn = jest.fn() let focusFn = jest.fn()
render( render(svelte`
TestRenderer, { <div>
allProps: [ <Listbox value={undefined} on:change={console.log}>
[Div, {}, [ <ListboxButton on:focus={focusFn}>Trigger</ListboxButton>
[Listbox, { value: undefined, onChange: console.log }, [ <ListboxOptions>
[ListboxButton, { onFocus: focusFn }, "Trigger"], <ListboxOption value="a">Option A</ListboxOption>
[ListboxOptions, {}, [ <ListboxOption value="b">Option B</ListboxOption>
[ListboxOption, { value: "a" }, "Option A"], <ListboxOption value="c">Option C</ListboxOption>
[ListboxOption, { value: "b" }, "Option B"], </ListboxOptions>
[ListboxOption, { value: "c" }, "Option C"], </Listbox>
]] <button id="btn">
]], <span>Next</span>
[Button, { id: "btn" }, [ </button>
[Span, {}, "Next"] </div>
]], `)
]]
]
})
// Click the listbox button // Click the listbox button
await click(getListboxButton()) 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 { click, focus, Keys, MouseButton, mouseLeave, mouseMove, press, shift, type, word } from "$lib/test-utils/interactions";
import { Transition, TransitionChild } from "../transitions"; import { Transition, TransitionChild } from "../transitions";
import TransitionDebug from "$lib/components/disclosure/_TransitionDebug.svelte"; 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 svelte from "svelte-inline-compile";
import { writable } from "svelte/store"; import { writable } from "svelte/store";
@@ -489,36 +485,32 @@ describe('Rendering composition', () => {
it( it(
'should mark all the elements between MenuItems and MenuItem with role none', 'should mark all the elements between MenuItems and MenuItem with role none',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render render(svelte`
render( <Menu>
TestRenderer, { <MenuButton>Trigger</MenuButton>
allProps: [ <div class="outer">
[Menu, {}, [ <MenuItems>
[MenuButton, {}, "Trigger"], <div class="py-1 inner">
[Div, { class: "outer" }, [ <MenuItem as="button">Item A</MenuItem>
[MenuItems, {}, [ <MenuItem as="button">Item B</MenuItem>
[Div, { class: "py-1 inner" }, [ </div>
[MenuItem, { as: "button" }, "Item A"], <div class="py-1 inner">
[MenuItem, { as: "button" }, "Item B"], <MenuItem as="button">Item C</MenuItem>
]], <MenuItem>
[Div, { class: "py-1 inner" }, [ <div>
[MenuItem, { as: "button" }, "Item C"], <div class="outer">Item D</div>
[MenuItem, {}, [ </div>
[Div, {}, [ </MenuItem>
[Div, { class: "outer" }, "Item D"] </div>
]] <div class="py-1 inner">
]] <form class="inner">
]], <MenuItem as="button">Item E</MenuItem>
[Div, { class: "py-1 inner" }, [ </form>
[Form, { class: "inner" }, [ </div>
[MenuItem, { as: "button" }, "Item E"] </MenuItems>
]] </div>
]] </Menu>
]] `)
]]
]],
]
})
// Open menu // Open menu
await click(getMenuButton()) await click(getMenuButton())
@@ -2960,29 +2952,26 @@ describe('Mouse interactions', () => {
it( 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', '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 () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <div>
allProps: [ <Menu>
[Div, {}, [ <MenuButton>Trigger</MenuButton>
[Menu, {}, [ <MenuItems>
[MenuButton, {}, "Trigger"], <MenuItem as="a">Item A</MenuItem>
[MenuItems, {}, [ <MenuItem as="a">Item B</MenuItem>
[MenuItem, { as: "a" }, "Item A"], <MenuItem as="a">Item C</MenuItem>
[MenuItem, { as: "a" }, "Item B"], </MenuItems>
[MenuItem, { as: "a" }, "Item C"], </Menu>
]] <Menu>
]], <MenuButton>Trigger</MenuButton>
[Menu, {}, [ <MenuItems>
[MenuButton, {}, "Trigger"], <MenuItem as="a">Item A</MenuItem>
[MenuItems, {}, [ <MenuItem as="a">Item B</MenuItem>
[MenuItem, { as: "a" }, "Item A"], <MenuItem as="a">Item C</MenuItem>
[MenuItem, { as: "a" }, "Item B"], </MenuItems>
[MenuItem, { as: "a" }, "Item C"], </Menu>
]] </div>
]], `)
]]
]
})
let [button1, button2] = getMenuButtons() 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', 'should be possible to click outside of the menu, on an element which is within a focusable element, which closes the menu',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
let focusFn = jest.fn() let focusFn = jest.fn()
render( render(svelte`
TestRenderer, { <div>
allProps: [ <Menu>
[Div, {}, [ <MenuButton on:focus={focusFn}>Trigger</MenuButton>
[Menu, {}, [ <MenuItems>
[MenuButton, { onFocus: focusFn }, "Trigger"], <MenuItem as="a">Item A</MenuItem>
[MenuItems, {}, [ <MenuItem as="a">Item B</MenuItem>
[MenuItem, { as: "a" }, "Item A"], <MenuItem as="a">Item C</MenuItem>
[MenuItem, { as: "a" }, "Item B"], </MenuItems>
[MenuItem, { as: "a" }, "Item C"], </Menu>
]] <button id="btn">
]], <span>Next</span>
[Button, { id: "btn" }, [ </button>
[Span, {}, "Next"] </div>
]] `)
]]
]
})
// Click the menu button // Click the menu button
await click(getMenuButton()) await click(getMenuButton())
@@ -3433,21 +3419,18 @@ describe('Mouse interactions', () => {
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
let clickHandler = jest.fn() let clickHandler = jest.fn()
render( render(svelte`
TestRenderer, { <Menu>
allProps: [ <MenuButton>Trigger</MenuButton>
[Menu, {}, [ <MenuItems>
[MenuButton, {}, "Trigger"], <MenuItem as="a" on:click={clickHandler}>Item A</MenuItem>
[MenuItems, {}, [ <MenuItem as="a" on:click={clickHandler} disabled>Item B</MenuItem>
[MenuItem, { as: "a", onClick: clickHandler }, "Item A"], <MenuItem disabled>
[MenuItem, { as: "a", onClick: clickHandler, disabled: true }, "Item B"], <button on:click={clickHandler}>Item C</button>
[MenuItem, { disabled: true }, [ </MenuItem>
[Button, { onClick: clickHandler }, "Item C"], </MenuItems>
]] </Menu>
]] `)
]],
]
})
// Open menu // Open menu
await click(getMenuButton()) 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 { Popover, PopoverButton, PopoverGroup, PopoverOverlay, PopoverPanel } from ".";
import { click, Keys, MouseButton, press, shift } from "$lib/test-utils/interactions"; import { click, Keys, MouseButton, press, shift } from "$lib/test-utils/interactions";
import A from "$lib/internal/elements/A.svelte"; 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 { Transition, TransitionChild } from "$lib/components/transitions";
import TransitionDebug from "$lib/components/disclosure/_TransitionDebug.svelte"; import TransitionDebug from "$lib/components/disclosure/_TransitionDebug.svelte";
import Portal from "$lib/components/portal/Portal.svelte"; import Portal from "$lib/components/portal/Portal.svelte";
@@ -1972,16 +1970,13 @@ describe('Mouse interactions', () => {
it( it(
'should be possible to close the popover, and re-focus the button when we click outside on a non-focusable element', 'should be possible to close the popover, and re-focus the button when we click outside on a non-focusable element',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Popover>
allProps: [ <PopoverButton>Trigger</PopoverButton>
[Popover, {}, [ <PopoverPanel>Contents</PopoverPanel>
[PopoverButton, {}, "Trigger"], </Popover>
[PopoverPanel, {}, "Contents"] <span>I am just text</span>
]], `)
[Span, {}, "I am just text"],
]
})
// Open popover // Open popover
await click(getPopoverButton()) await click(getPopoverButton())
@@ -2003,16 +1998,13 @@ describe('Mouse interactions', () => {
it( it(
'should be possible to close the popover, by clicking outside the popover on another focusable element', 'should be possible to close the popover, by clicking outside the popover on another focusable element',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Popover>
allProps: [ <PopoverButton>Trigger</PopoverButton>
[Popover, {}, [ <PopoverPanel>Contents</PopoverPanel>
[PopoverButton, {}, "Trigger"], </Popover>
[PopoverPanel, {}, "Contents"] <button>Different button</button>
]], `)
[Button, {}, "Different button"],
]
})
// Open popover // Open popover
await click(getPopoverButton()) 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', 'should be possible to close the popover, by clicking outside the popover on another element inside a focusable element',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
let focusFn = jest.fn() let focusFn = jest.fn()
render( render(svelte`
TestRenderer, { <Popover>
allProps: [ <PopoverButton on:focus={focusFn}>Trigger</PopoverButton>
[Popover, {}, [ <PopoverPanel>Contents</PopoverPanel>
[PopoverButton, { onFocus: focusFn }, "Trigger"], </Popover>
[PopoverPanel, {}, "Contents"] <button id="btn">
]], <span>Different button</span>
[Button, { id: "btn" }, [ </button>
[Span, {}, "Different button"], `)
]]
]
})
// Open popover // Open popover
await click(getPopoverButton()) await click(getPopoverButton())
@@ -2108,17 +2097,14 @@ describe('Mouse interactions', () => {
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
let clickFn = jest.fn() let clickFn = jest.fn()
render( render(svelte`
TestRenderer, { <Popover>
allProps: [ <PopoverButton>Open</PopoverButton>
[Popover, {}, [ <PopoverPanel static>
[PopoverButton, {}, "Open"], <button on:click={clickFn}>btn</button>
[PopoverPanel, { static: true }, [ </PopoverPanel>
[Button, { onClick: clickFn }, "btn"], </Popover>
]], `)
]],
]
})
// Open the popover // Open the popover
await click(getPopoverButton()) await click(getPopoverButton())
@@ -2137,17 +2123,14 @@ describe('Mouse interactions', () => {
it( it(
'should not close the Popover when clicking on a non-focusable element inside a static PopoverPanel', 'should not close the Popover when clicking on a non-focusable element inside a static PopoverPanel',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Popover>
allProps: [ <PopoverButton>Open</PopoverButton>
[Popover, {}, [ <PopoverPanel static>
[PopoverButton, {}, "Open"], <span>element</span>
[PopoverPanel, { static: true }, [ </PopoverPanel>
[Span, {}, "element"], </Popover>
]], `)
]],
]
})
// Open the popover // Open the popover
await click(getPopoverButton()) await click(getPopoverButton())
@@ -2163,17 +2146,14 @@ describe('Mouse interactions', () => {
it( it(
'should close the Popover when clicking outside of a static PopoverPanel', 'should close the Popover when clicking outside of a static PopoverPanel',
suppressConsoleLogs(async () => { suppressConsoleLogs(async () => {
render( render(svelte`
TestRenderer, { <Popover>
allProps: [ <PopoverButton>Open</PopoverButton>
[Popover, {}, [ <PopoverPanel static>
[PopoverButton, {}, "Open"], <span>element</span>
[PopoverPanel, { static: true }, [ </PopoverPanel>
[Span, {}, "element"], </Popover>
]], `)
]],
]
})
// Open the popover // Open the popover
await click(getPopoverButton()) await click(getPopoverButton())

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

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