From 1f2fff8709728a564530387e12256c34984239db Mon Sep 17 00:00:00 2001 From: sj Date: Mon, 9 Dec 2024 23:48:17 -0500 Subject: [PATCH] Ported over remainder of scenarios --- src/lib/checkbox/checkbox.dom.test.ts | 17 +- src/lib/input/input.dom.test.ts | 16 +- src/lib/textarea/textarea.dom.test.ts | 15 +- src/test-utils/scenarios.dom.ts | 243 +++++++++++++------------- 4 files changed, 165 insertions(+), 126 deletions(-) diff --git a/src/lib/checkbox/checkbox.dom.test.ts b/src/lib/checkbox/checkbox.dom.test.ts index d3b37b9..031f511 100644 --- a/src/lib/checkbox/checkbox.dom.test.ts +++ b/src/lib/checkbox/checkbox.dom.test.ts @@ -1,8 +1,13 @@ -import { render, screen } from "@testing-library/svelte"; +import Checkbox from "./Checkbox.svelte"; import { getCheckbox } from "../../test-utils/accessibility-assertions"; +import { click } from "../../test-utils/interactions"; +import { + commonControlScenarios, + commonFormScenarios, + commonRenderingScenarios, +} from "../../test-utils/scenarios.dom"; +import { render, screen } from "@testing-library/svelte"; import type { SvelteComponent } from "svelte"; -import { commonControlScenarios, commonRenderingScenarios } from "../../test-utils/scenarios.dom"; -import Checkbox from "./Checkbox.svelte"; function sveltify(input: string): Promise { throw new Error("TODO"); @@ -10,7 +15,11 @@ function sveltify(input: string): Promise { commonRenderingScenarios(Checkbox, { getElement: getCheckbox }); commonControlScenarios(Checkbox); -describe.skip("commonFormScenarios", () => {}); +commonFormScenarios(Checkbox, { + async performUserInteraction(control) { + await click(control); + }, +}); // describe.each([ // [ diff --git a/src/lib/input/input.dom.test.ts b/src/lib/input/input.dom.test.ts index bf556fd..e9a07f1 100644 --- a/src/lib/input/input.dom.test.ts +++ b/src/lib/input/input.dom.test.ts @@ -1,7 +1,17 @@ -import { getInput } from "../../test-utils/accessibility-assertions"; import Input from "./Input.svelte"; -import { commonControlScenarios, commonRenderingScenarios } from "../../test-utils/scenarios.dom"; +import { getInput } from "../../test-utils/accessibility-assertions"; +import { focus, type, word } from "../../test-utils/interactions"; +import { + commonControlScenarios, + commonFormScenarios, + commonRenderingScenarios, +} from "../../test-utils/scenarios.dom"; commonRenderingScenarios(Input, { getElement: getInput }); commonControlScenarios(Input); -describe.skip("commonFormScenarios", () => {}); +commonFormScenarios(Input, { + async performUserInteraction(input) { + await focus(input); + await type(word("alice")); + }, +}); diff --git a/src/lib/textarea/textarea.dom.test.ts b/src/lib/textarea/textarea.dom.test.ts index 59542bd..70f9c9f 100644 --- a/src/lib/textarea/textarea.dom.test.ts +++ b/src/lib/textarea/textarea.dom.test.ts @@ -1,6 +1,17 @@ -import { getTextarea } from "../../test-utils/accessibility-assertions"; -import { commonControlScenarios, commonRenderingScenarios } from "../../test-utils/scenarios.dom"; import Textarea from "./Textarea.svelte"; +import { getTextarea } from "../../test-utils/accessibility-assertions"; +import { focus, type, word } from "../../test-utils/interactions"; +import { + commonControlScenarios, + commonFormScenarios, + commonRenderingScenarios, +} from "../../test-utils/scenarios.dom"; commonRenderingScenarios(Textarea, { getElement: getTextarea }); commonControlScenarios(Textarea); +commonFormScenarios(Textarea, { + async performUserInteraction(control) { + await focus(control); + await type(word("alice")); + }, +}); diff --git a/src/test-utils/scenarios.dom.ts b/src/test-utils/scenarios.dom.ts index 0c801d7..79241fd 100644 --- a/src/test-utils/scenarios.dom.ts +++ b/src/test-utils/scenarios.dom.ts @@ -275,123 +275,132 @@ export function commonControlScenarios(Control: Component) { }); } -// export function commonFormScenarios( -// Control: React.ComponentType, -// { -// performUserInteraction, -// }: { performUserInteraction: (control: HTMLElement | null) => PromiseLike } -// ) { -// describe('Form compatibility', () => { -// it('should render native (hidden) form elements for the control', () => { -// render( -//
-// -// -// ) - -// expect(document.querySelector('[name=foo]')).toBeInTheDocument() -// }) - -// it('should submit the form with all the data', async () => { -// let formDataMock = jest.fn() - -// render( -//
{ -// e.preventDefault() -// formDataMock(new FormData(e.target as HTMLFormElement)) -// }} -// > -// -// -// -// ) - -// // Submit form -// await click(screen.getByText('Submit')) - -// // Ensure the form was submitted with the `foo` input present -// expect(formDataMock.mock.calls[0][0].has('foo')).toBe(true) -// }) - -// it('should not submit the data if the control is disabled', async () => { -// let submits = jest.fn() - -// function Example() { -// return ( -//
{ -// event.preventDefault() -// submits([...new FormData(event.currentTarget).entries()]) -// }} -// > -// -// -// -// -// ) -// } - -// render() - -// // Submit the form -// await click(screen.getByText('Submit')) - -// // Verify that the form has been submitted -// expect(submits).toHaveBeenLastCalledWith([ -// ['foo', 'bar'], // The only available field -// ]) -// }) - -// it( -// 'should reset the control when the form is reset', -// suppressConsoleLogs(async () => { -// let formDataMock = jest.fn() - -// render( -//
{ -// e.preventDefault() -// formDataMock(new FormData(e.target as HTMLFormElement)) -// }} -// > -// -// -// -// - -// -// -//
-// ) - -// // Submit the form to get the initial state of the form -// await click(screen.getByText('Submit')) -// let formState = Object.fromEntries(formDataMock.mock.calls[0][0]) - -// // Make changes to the control -// await performUserInteraction(getControl()) - -// // Submit form -// await click(screen.getByText('Submit')) - -// // Ensure the form was, and the values are different -// let newFormState = Object.fromEntries(formDataMock.mock.calls[1][0]) -// expect(newFormState).not.toEqual(formState) - -// // Reset the form -// await click(screen.getByText('Reset')) - -// // Ensure the form was reset -// await click(screen.getByText('Submit')) - -// // Ensure the form state looks like the initial state -// let resetFormState = Object.fromEntries(formDataMock.mock.calls[2][0]) -// expect(resetFormState).toEqual(formState) -// }) -// ) -// }) -// } +export function commonFormScenarios( + Control: Component, + { + performUserInteraction, + }: { performUserInteraction: (control: HTMLElement | null) => PromiseLike }, +) { + describe("Form compatibility", () => { + it("should render native (hidden) form elements for the control", async () => { + const component = await sveltify(` + +
+ + + `); + render(component, { Control }); + + expect(document.querySelector("[name=foo]")).toBeInTheDocument(); + }); + + it.skip("should submit the form with all the data", async () => { + let formDataMock = vi.fn(); + + const component = await sveltify(` + +
{ + e.preventDefault() + formDataMock(new FormData(e.target as HTMLFormElement)) + }} + > + + + + `); + render(component, { Control }); + + // Submit form + await click(screen.getByText("Submit")); + + // Ensure the form was submitted with the `foo` input present + expect(formDataMock.mock.calls[0][0].has("foo")).toBe(true); + }); + + it.skip("should not submit the data if the control is disabled", async () => { + let submits = vi.fn(); + + const component = await sveltify(` + +
{ + event.preventDefault() + submits([...new FormData(event.currentTarget).entries()]) + }} + > + + + + + `); + render(component, { Control }); + + // Submit the form + await click(screen.getByText("Submit")); + + // Verify that the form has been submitted + expect(submits).toHaveBeenLastCalledWith([ + ["foo", "bar"], // The only available field + ]); + }); + + it.skip("should reset the control when the form is reset", async () => { + let formDataMock = vi.fn(); + + const component = await sveltify(` + +
{ + e.preventDefault() + formDataMock(new FormData(e.target as HTMLFormElement)) + }} + > + + + + + + + +
+ `); + render(component, { Control }); + + // Submit the form to get the initial state of the form + await click(screen.getByText("Submit")); + let formState = Object.fromEntries(formDataMock.mock.calls[0][0]); + + // Make changes to the control + await performUserInteraction(getControl()); + + // Submit form + await click(screen.getByText("Submit")); + + // Ensure the form was, and the values are different + let newFormState = Object.fromEntries(formDataMock.mock.calls[1][0]); + expect(newFormState).not.toEqual(formState); + + // Reset the form + await click(screen.getByText("Reset")); + + // Ensure the form was reset + await click(screen.getByText("Submit")); + + // Ensure the form state looks like the initial state + let resetFormState = Object.fromEntries(formDataMock.mock.calls[2][0]); + expect(resetFormState).toEqual(formState); + }); + }); +} export function commonRenderingScenarios( Control: Component,