Skip to content

Commit 35bfb4d

Browse files
rgossiauxrgossiaux
committed
Convert some tests to svelte-inline-compile
1 parent 8bc5fab commit 35bfb4d

File tree

5 files changed

+250
-345
lines changed

5 files changed

+250
-345
lines changed

‎src/lib/components/dialog/dialog.test.ts‎

Lines changed: 84 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,6 @@ import NestedTestComponent from "./_NestedTestComponent.svelte";
55
import { suppressConsoleLogs } from "$lib/test-utils/suppress-console-logs";
66
import { render } from "@testing-library/svelte";
77
import TestRenderer from "$lib/test-utils/TestRenderer.svelte";
8-
import Button from "$lib/internal/elements/Button.svelte";
9-
import Div from "$lib/internal/elements/Div.svelte";
10-
import Form from "$lib/internal/elements/Form.svelte";
11-
import P from "$lib/internal/elements/P.svelte";
12-
import Input from "$lib/internal/elements/Input.svelte";
138
import {
149
assertActiveElement,
1510
assertDialog,
@@ -62,19 +57,15 @@ describe("Safe guards", () => {
6257
it(
6358
"should be possible to render a Dialog without crashing",
6459
suppressConsoleLogs(async () => {
65-
render(TestRenderer, {
66-
allProps: [
67-
Dialog,
68-
{ open: false, onClose: console.log },
69-
[
70-
[Button, {}, "Trigger"],
71-
[DialogOverlay],
72-
[DialogTitle],
73-
[P, {}, "Contents"],
74-
[DialogDescription],
75-
],
76-
],
77-
});
60+
render(svelte`
61+
<Dialog open={false} on:close={console.log}>
62+
<button>Trigger</button>
63+
<DialogOverlay />
64+
<DialogTitle />
65+
<p>Contents</p>
66+
<DialogDescription />
67+
</Dialog>
68+
`)
7869

7970
assertDialog({ state: DialogState.InvisibleUnmounted });
8071
})
@@ -221,16 +212,13 @@ describe("Rendering", () => {
221212

222213
it('should be possible to always render the Dialog if we provide it a `static` prop (and disable focus trapping based on `open`)', () => {
223214
let focusCounter = jest.fn()
224-
render(
225-
TestRenderer, {
226-
allProps: [
227-
[Button, {}, "Trigger"],
228-
[Dialog, { open: false, onClose: console.log, static: true }, [
229-
[P, {}, "Contents"],
230-
[TestTabSentinel, { onFocus: focusCounter }]
231-
]],
232-
]
233-
})
215+
render(svelte`
216+
<button>Trigger</button>
217+
<Dialog open={false} on:close={console.log} static>
218+
<p>Contents</p>
219+
<TestTabSentinel onFocus={focusCounter} />
220+
</Dialog>
221+
`)
234222

235223

236224
// Let's verify that the Dialog is already there
@@ -240,14 +228,11 @@ describe("Rendering", () => {
240228

241229
it('should be possible to use a different render strategy for the Dialog', async () => {
242230
let focusCounter = jest.fn()
243-
render(
244-
TestRenderer, {
245-
allProps: [
246-
[ManagedDialog, { unmount: false, buttonText: "Trigger", buttonProps: { id: "trigger" } }, [
247-
[Input, { onFocus: focusCounter }],
248-
]],
249-
]
250-
})
231+
render(svelte`
232+
<ManagedDialog unmount={false} buttonText="Trigger" buttonProps={{ id: "trigger" }}>
233+
<input on:focus={focusCounter}>
234+
</ManagedDialog>
235+
`)
251236

252237
assertDialog({ state: DialogState.InvisibleHidden })
253238
expect(focusCounter).toHaveBeenCalledTimes(0)
@@ -268,17 +253,13 @@ describe("Rendering", () => {
268253
it(
269254
'should add a scroll lock to the html tag',
270255
suppressConsoleLogs(async () => {
271-
render(
272-
TestRenderer, {
273-
allProps: [
274-
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [
275-
[Input, { id: "a", type: "text" }],
276-
[Input, { id: "b", type: "text" }],
277-
[Input, { id: "c", type: "text" }],
278-
]],
279-
]
280-
})
281-
256+
render(svelte`
257+
<ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
258+
<input id="a" type="text">
259+
<input id="b" type="text">
260+
<input id="c" type="text">
261+
</ManagedDialog>
262+
`)
282263

283264
// No overflow yet
284265
expect(document.documentElement.style.overflow).toBe('')
@@ -455,16 +436,13 @@ describe('Keyboard interactions', () => {
455436
it(
456437
'should be possible to close the dialog with Escape, when a field is focused',
457438
suppressConsoleLogs(async () => {
458-
render(
459-
TestRenderer, {
460-
allProps: [
461-
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [
462-
"Contents",
463-
[Input, { id: "name" }],
464-
[TestTabSentinel],
465-
]],
466-
]
467-
})
439+
render(svelte`
440+
<ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
441+
Contents
442+
<input id="name">
443+
<TestTabSentinel />
444+
</ManagedDialog>
445+
`)
468446

469447
assertDialog({ state: DialogState.InvisibleUnmounted })
470448

@@ -488,16 +466,13 @@ describe('Keyboard interactions', () => {
488466
it(
489467
'should not be possible to close the dialog with Escape, when a field is focused but cancels the event',
490468
async () => {
491-
render(
492-
TestRenderer, {
493-
allProps: [
494-
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [
495-
"Contents",
496-
[Input, { id: "name", onKeydown: (e: CustomEvent) => { e.preventDefault(); e.stopPropagation(); } }],
497-
[TestTabSentinel],
498-
]],
499-
]
500-
})
469+
render(svelte`
470+
<ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
471+
Contents
472+
<input id="name" on:keydown={(e) => { e.preventDefault(); e.stopPropagation(); } }>
473+
<TestTabSentinel />
474+
</ManagedDialog>
475+
`)
501476

502477
assertDialog({ state: DialogState.InvisibleUnmounted })
503478

@@ -551,18 +526,15 @@ describe('Mouse interactions', () => {
551526
it(
552527
'should not close the Dialog when clicking on contents of the DialogOverlay',
553528
suppressConsoleLogs(async () => {
554-
render(
555-
TestRenderer, {
556-
allProps: [
557-
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [
558-
[DialogOverlay, {}, [
559-
[Button, {}, "hi"]
560-
]],
561-
"Contents",
562-
[TestTabSentinel],
563-
]],
564-
]
565-
})
529+
render(svelte`
530+
<ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
531+
<DialogOverlay>
532+
<button>hi</button>
533+
</DialogOverlay>
534+
Contents
535+
<TestTabSentinel />
536+
</ManagedDialog>
537+
`)
566538

567539
// Open dialog
568540
await click(document.getElementById('trigger'))
@@ -611,16 +583,13 @@ describe('Mouse interactions', () => {
611583
it(
612584
'should be possible to close the dialog, and keep focus on the focusable element',
613585
suppressConsoleLogs(async () => {
614-
render(
615-
TestRenderer, {
616-
allProps: [
617-
[Button, {}, "Hello"],
618-
[ManagedDialog, { buttonText: "Trigger", buttonProps: { id: "trigger" } }, [
619-
"Contents",
620-
[TestTabSentinel],
621-
]],
622-
]
623-
})
586+
render(svelte`
587+
<button>Hello</button>
588+
<ManagedDialog buttonText="Trigger" buttonProps={{ id: "trigger" }}>
589+
Contents
590+
<TestTabSentinel />
591+
</ManagedDialog>
592+
`)
624593

625594
// Open dialog
626595
await click(getByText('Trigger'))
@@ -643,18 +612,15 @@ describe('Mouse interactions', () => {
643612
'should stop propagating click events when clicking on the DialogOverlay',
644613
suppressConsoleLogs(async () => {
645614
let wrapperFn = jest.fn()
646-
render(
647-
TestRenderer, {
648-
allProps: [
649-
[Div, { onClick: wrapperFn }, [
650-
[ManagedDialog, { initialOpen: true }, [
651-
"Contents",
652-
[DialogOverlay],
653-
[TestTabSentinel],
654-
]],
655-
]]
656-
]
657-
})
615+
render(svelte`
616+
<div on:click={wrapperFn}>
617+
<ManagedDialog initialOpen={true}>
618+
Contents
619+
<DialogOverlay />
620+
<TestTabSentinel />
621+
</ManagedDialog>
622+
</div>
623+
`)
658624

659625
// Verify it is open
660626
assertDialog({ state: DialogState.Visible })
@@ -677,18 +643,15 @@ describe('Mouse interactions', () => {
677643
'should be possible to submit a form inside a Dialog',
678644
suppressConsoleLogs(async () => {
679645
let submitFn = jest.fn()
680-
render(
681-
TestRenderer, {
682-
allProps: [
683-
[ManagedDialog, { initialOpen: true }, [
684-
[Form, { onSubmit: submitFn }, [
685-
[Input, { type: "hidden", value: "abc" }],
686-
[Button, { type: "submit" }, "Submit"]
687-
]],
688-
[TestTabSentinel],
689-
]],
690-
]
691-
})
646+
render(svelte`
647+
<ManagedDialog initialOpen={true}>
648+
<form on:submit={submitFn}>
649+
<input type="hidden" value="abc">
650+
<button type="submit">Submit</button>
651+
</form>
652+
<TestTabSentinel />
653+
</ManagedDialog>
654+
`)
692655

693656
// Verify it is open
694657
assertDialog({ state: DialogState.Visible })
@@ -705,17 +668,14 @@ describe('Mouse interactions', () => {
705668
'should stop propagating click events when clicking on an element inside the Dialog',
706669
suppressConsoleLogs(async () => {
707670
let wrapperFn = jest.fn()
708-
render(
709-
TestRenderer, {
710-
allProps: [
711-
[Div, { onClick: wrapperFn }, [
712-
[ManagedDialog, { initialOpen: true, buttonInside: true, buttonText: "Inside" }, [
713-
"Contents",
714-
[TestTabSentinel],
715-
]],
716-
]]
717-
]
718-
})
671+
render(svelte`
672+
<div on:click={wrapperFn}>
673+
<ManagedDialog initialOpen={true} buttonInside={true} buttonText="Inside">
674+
Contents
675+
<TestTabSentinel />
676+
</ManagedDialog>
677+
</div>
678+
`)
719679

720680
// Verify it is open
721681
assertDialog({ state: DialogState.Visible })

‎src/lib/components/listbox/listbox.test.ts‎

Lines changed: 35 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,6 @@ import {
4444
import { Transition } from "../transitions";
4545
import TransitionDebug from "$lib/components/disclosure/_TransitionDebug.svelte";
4646
import ManagedListbox from "./_ManagedListbox.svelte";
47-
import Button from "$lib/internal/elements/Button.svelte";
48-
import Div from "$lib/internal/elements/Div.svelte";
49-
import Span from "$lib/internal/elements/Span.svelte";
5047
import svelte from "svelte-inline-compile";
5148
import { writable } from "svelte/store";
5249

@@ -3476,29 +3473,26 @@ describe('Mouse interactions', () => {
34763473
it(
34773474
'should be possible to click outside of the listbox on another listbox button which should close the current listbox and open the new listbox',
34783475
suppressConsoleLogs(async () => {
3479-
render(
3480-
TestRenderer, {
3481-
allProps: [
3482-
[Div, {}, [
3483-
[Listbox, { value: undefined, onChange: console.log }, [
3484-
[ListboxButton, {}, "Trigger"],
3485-
[ListboxOptions, {}, [
3486-
[ListboxOption, { value: "a" }, "Option A"],
3487-
[ListboxOption, { value: "b" }, "Option B"],
3488-
[ListboxOption, { value: "c" }, "Option C"],
3489-
]]
3490-
]],
3491-
[Listbox, { value: undefined, onChange: console.log }, [
3492-
[ListboxButton, {}, "Trigger"],
3493-
[ListboxOptions, {}, [
3494-
[ListboxOption, { value: "a" }, "Option A"],
3495-
[ListboxOption, { value: "b" }, "Option B"],
3496-
[ListboxOption, { value: "c" }, "Option C"],
3497-
]]
3498-
]],
3499-
]]
3500-
]
3501-
})
3476+
render(svelte`
3477+
<div>
3478+
<Listbox value={undefined} on:change={console.log}>
3479+
<ListboxButton>Trigger</ListboxButton>
3480+
<ListboxOptions>
3481+
<ListboxOption value="a">Option A</ListboxOption>
3482+
<ListboxOption value="b">Option B</ListboxOption>
3483+
<ListboxOption value="c">Option C</ListboxOption>
3484+
</ListboxOptions>
3485+
</Listbox>
3486+
<Listbox value={undefined} on:change={console.log}>
3487+
<ListboxButton>Trigger</ListboxButton>
3488+
<ListboxOptions>
3489+
<ListboxOption value="a">Option A</ListboxOption>
3490+
<ListboxOption value="b">Option B</ListboxOption>
3491+
<ListboxOption value="c">Option C</ListboxOption>
3492+
</ListboxOptions>
3493+
</Listbox>
3494+
</div>
3495+
`)
35023496

35033497
let [button1, button2] = getListboxButtons()
35043498

@@ -3557,24 +3551,21 @@ describe('Mouse interactions', () => {
35573551
'should be possible to click outside of the listbox, on an element which is within a focusable element, which closes the listbox',
35583552
suppressConsoleLogs(async () => {
35593553
let focusFn = jest.fn()
3560-
render(
3561-
TestRenderer, {
3562-
allProps: [
3563-
[Div, {}, [
3564-
[Listbox, { value: undefined, onChange: console.log }, [
3565-
[ListboxButton, { onFocus: focusFn }, "Trigger"],
3566-
[ListboxOptions, {}, [
3567-
[ListboxOption, { value: "a" }, "Option A"],
3568-
[ListboxOption, { value: "b" }, "Option B"],
3569-
[ListboxOption, { value: "c" }, "Option C"],
3570-
]]
3571-
]],
3572-
[Button, { id: "btn" }, [
3573-
[Span, {}, "Next"]
3574-
]],
3575-
]]
3576-
]
3577-
})
3554+
render(svelte`
3555+
<div>
3556+
<Listbox value={undefined} on:change={console.log}>
3557+
<ListboxButton on:focus={focusFn}>Trigger</ListboxButton>
3558+
<ListboxOptions>
3559+
<ListboxOption value="a">Option A</ListboxOption>
3560+
<ListboxOption value="b">Option B</ListboxOption>
3561+
<ListboxOption value="c">Option C</ListboxOption>
3562+
</ListboxOptions>
3563+
</Listbox>
3564+
<button id="btn">
3565+
<span>Next</span>
3566+
</button>
3567+
</div>
3568+
`)
35783569

35793570
// Click the listbox button
35803571
await click(getListboxButton())

0 commit comments

Comments
 (0)