Ported over remainder of scenarios

src/lib/checkbox/checkbox.dom.test.ts

@@ -1,16 +1,25 @@
-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<typeof SvelteComponent> {
   throw new Error("TODO");
 }
 
 commonRenderingScenarios(Checkbox, { getElement: getCheckbox });
 commonControlScenarios(Checkbox);
-describe.skip("commonFormScenarios", () => {});
+commonFormScenarios(Checkbox, {
+  async performUserInteraction(control) {
+    await click(control);
+  },
+});
 
 // describe.each([
 //   [

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"));
+  },
+});

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"));
+  },
+});

src/test-utils/scenarios.dom.ts

@@ -275,123 +275,132 @@ export function commonControlScenarios(Control: Component) {
   });
 }
 
-// export function commonFormScenarios(
-//   Control: React.ComponentType<any>,
-//   {
-//     performUserInteraction,
-//   }: { performUserInteraction: (control: HTMLElement | null) => PromiseLike<void> }
-// ) {
-//   describe('Form compatibility', () => {
-//     it('should render native (hidden) form elements for the control', () => {
-//       render(
-//         <form>
-//           <Control name="foo" />
-//         </form>
-//       )
-
-//       expect(document.querySelector('[name=foo]')).toBeInTheDocument()
-//     })
-
-//     it('should submit the form with all the data', async () => {
-//       let formDataMock = jest.fn()
-
-//       render(
-//         <form
-//           onSubmit={(e) => {
-//             e.preventDefault()
-//             formDataMock(new FormData(e.target as HTMLFormElement))
-//           }}
-//         >
-//           <Control name="foo" />
-//           <button>Submit</button>
-//         </form>
-//       )
-
-//       // 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 (
-//           <form
-//             onSubmit={(event) => {
-//               event.preventDefault()
-//               submits([...new FormData(event.currentTarget).entries()])
-//             }}
-//           >
-//             <input type="hidden" name="foo" value="bar" />
-//             <Control name="bar" disabled />
-//             <button>Submit</button>
-//           </form>
-//         )
-//       }
-
-//       render(<Example />)
-
-//       // 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(
-//           <form
-//             onSubmit={(e) => {
-//               e.preventDefault()
-//               formDataMock(new FormData(e.target as HTMLFormElement))
-//             }}
-//           >
-//             <Field>
-//               <Label>The Label</Label>
-//               <Control name="foo" />
-//             </Field>
-
-//             <button>Submit</button>
-//             <button type="reset">Reset</button>
-//           </form>
-//         )
-
-//         // 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<void> },
+) {
+  describe("Form compatibility", () => {
+    it("should render native (hidden) form elements for the control", async () => {
+      const component = await sveltify(`
+        <script>
+          let { Control } = $props()
+        </script>
+        <form>
+          <Control name="foo" />
+        </form>
+      `);
+      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(`
+        <script>
+          let { Control } = $props()
+        </script>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            formDataMock(new FormData(e.target as HTMLFormElement))
+          }}
+        >
+          <Control name="foo" />
+          <button>Submit</button>
+        </form>
+      `);
+      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(`
+        <script>
+          let { Control } = $props()
+        </script>
+        <form
+          onSubmit={(event) => {
+            event.preventDefault()
+            submits([...new FormData(event.currentTarget).entries()])
+          }}
+        >
+          <input type="hidden" name="foo" value="bar" />
+          <Control name="bar" disabled />
+          <button>Submit</button>
+        </form>
+      `);
+      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(`
+          <script>
+            let { Control } = $props()
+          </script>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              formDataMock(new FormData(e.target as HTMLFormElement))
+            }}
+          >
+            <Field>
+              <Label>The Label</Label>
+              <Control name="foo" />
+            </Field>
+
+            <button>Submit</button>
+            <button type="reset">Reset</button>
+          </form>
+        `);
+      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,