FormSwitch test

packages/simple-form-joy/src/form-components/form-switch/tests/form-switch-test-component.tsx

@@ -0,0 +1,25 @@
+import { DeepPartial, OmitSafe } from "@ilbrando/utils";
+
+import { FormSwitch, FormSwitchProps } from "../form-switch";
+import { TestFormFields, useTestForm, UseTestFormOptions } from "../../../test-components/form-utils";
+import { TestWrapper } from "../../../test-components/test-wrapper";
+
+type FormSwitchTestComponentProps = Partial<Pick<ReturnType<typeof useTestForm>["fm"], "onChange">> & {
+  formOptions?: DeepPartial<UseTestFormOptions>;
+  isSubmitting?: boolean;
+  formCheckboxProps?: OmitSafe<FormSwitchProps<TestFormFields, "booleanField">, "formManager" | "fieldName">;
+};
+
+export const FormSwitchTestComponent = (props: FormSwitchTestComponentProps) => {
+  const { onChange, formOptions, isSubmitting, formCheckboxProps } = props;
+
+  const { fm } = useTestForm(formOptions, isSubmitting);
+
+  Object.assign(fm.onChange, onChange);
+
+  return (
+    <TestWrapper>
+      <FormSwitch formManager={fm} fieldName="booleanField" {...formCheckboxProps} />
+    </TestWrapper>
+  );
+};

packages/simple-form-joy/src/form-components/form-switch/tests/form-switch.spec.tsx

@@ -0,0 +1,52 @@
+import { expect, test } from "@playwright/experimental-ct-react";
+
+import { alwaysErrorValidatorMessage } from "src/test-components/form-utils";
+
+import { FormSwitchTestComponent } from "./form-switch-test-component";
+
+test("updates form state when receiving input", async ({ mount }) => {
+  // Arrange
+  let booleanValue: boolean | null = null;
+  const expected = true;
+
+  // Act
+  const component = await mount(
+    <FormSwitchTestComponent
+      onChange={{
+        booleanField: v => {
+          booleanValue = v;
+        }
+      }}
+    />
+  );
+
+  const switchControl = component.getByRole("switch");
+  await switchControl.click();
+
+  // Assert
+  expect(booleanValue).toBe(expected);
+});
+
+test("renders label", async ({ mount }) => {
+  // Arrange
+  const expected = "Label here";
+
+  // Act
+  const component = await mount(<FormSwitchTestComponent formCheckboxProps={{ label: expected }} />);
+
+  // Assert
+  await expect(component).toContainText(expected);
+});
+
+test("renders error message", async ({ mount }) => {
+  // Act
+  const component = await mount(<FormSwitchTestComponent formOptions={{ booleanField: { useAlwaysErrorValidator: true } }} />);
+
+  // touch switch
+  const switchControl = component.getByRole("switch");
+  await switchControl.click();
+  await switchControl.click();
+
+  // Assert
+  await expect(component).toContainText(alwaysErrorValidatorMessage);
+});