FormText test for render error message (playwright fails)

ilbrando · Nov 24, 2024 · 540d64b · 540d64b
1 parent 0d2b5f0
commit 540d64b
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 74 deletions.
diff --git a/packages/simple-form-joy/src/form-components/form-text/tests/form-text-test-component.tsx b/packages/simple-form-joy/src/form-components/form-text/tests/form-text-test-component.tsx
@@ -1,18 +1,19 @@
 import { OmitSafe } from "@ilbrando/utils";
 
 import { FormText, FormTextProps } from "../form-text";
-import { TestForm, useTestForm, UseTestFormOptions } from "../../../test-components/form-utils";
+import { TestFormFields, useTestForm, UseTestFormOptions } from "../../../test-components/form-utils";
 import { TestWrapper } from "../../../test-components/test-wrapper";
 
-type TestComponentProps = Partial<Pick<ReturnType<typeof useTestForm>["fm"], "onChange">> & {
-  formOptions?: Partial<UseTestFormOptions>;
-  formTextProps?: OmitSafe<FormTextProps<TestForm, "name">, "formManager" | "fieldName">;
+type FormTextTestComponentProps = Partial<Pick<ReturnType<typeof useTestForm>["fm"], "onChange">> & {
+  formOptions?: UseTestFormOptions;
+  isSubmitting?: boolean;
+  formTextProps?: OmitSafe<FormTextProps<TestFormFields, "name">, "formManager" | "fieldName">;
 };
 
-export const FormTextTestComponent = (props: TestComponentProps) => {
-  const { onChange, formOptions, formTextProps } = props;
+export const FormTextTestComponent = (props: FormTextTestComponentProps) => {
+  const { onChange, formOptions, isSubmitting, formTextProps } = props;
 
-  const { fm } = useTestForm(formOptions);
+  const { fm } = useTestForm(formOptions, isSubmitting);
 
   Object.assign(fm.onChange, onChange);
 

diff --git a/packages/simple-form-joy/src/form-components/form-text/tests/form-text.spec.tsx b/packages/simple-form-joy/src/form-components/form-text/tests/form-text.spec.tsx
@@ -50,54 +50,54 @@ test("performs text transform lower case", async ({ mount }) => {
   expect(nameValue).toBe(expected);
 });
 
-// test("performs text transform upper case", async ({ mount }) => {
-//   // Arrange
-//   let nameValue: string | null = null;
-//   const entered = "aBc";
-//   const expected = entered.toUpperCase();
-
-//   // Act
-//   const component = await mount(
-//     <TestComponent
-//       onChange={{
-//         name: v => {
-//           nameValue = v;
-//         }
-//       }}
-//     >
-//       {fm => <FormText formManager={fm} fieldName="name" textTransform="upper-case" />}
-//     </TestComponent>
-//   );
-
-//   const textBox = component.getByRole("textbox");
-//   await textBox.fill(entered);
-
-//   // Assert
-//   expect(nameValue).toBe(expected);
-// });
-
-// test("renders label", async ({ mount }) => {
-//   // Arrange
-//   const expected = "Label here";
-
-//   // Act
-//   const component = await mount(<TestComponent>{fm => <FormText formManager={fm} fieldName="name" label={expected} />}</TestComponent>);
-
-//   // Assert
-//   await expect(component).toContainText(expected);
-// });
-
-// test("renders error message", async ({ mount }) => {
-//   // Arrange
-//   const expected = "Error message";
-
-//   // Act
-//   const component = await mount(<TestComponent formOptions={{ fields: { name: { validators: [() => expected] }, age: {}, jobTitle: {} } }}>{fm => <FormText formManager={fm} fieldName="name" />}</TestComponent>);
-
-//   // touch text box
-//   const textBox = component.getByRole("textbox");
-//   await textBox.fill("not expected");
-
-//   // Assert
-//   await expect(component).toContainText(expected);
-// });
+test("performs text transform upper case", async ({ mount }) => {
+  // Arrange
+  let nameValue: string | null = null;
+  const entered = "aBc";
+  const expected = entered.toUpperCase();
+
+  // Act
+  const component = await mount(
+    <FormTextTestComponent
+      onChange={{
+        name: v => {
+          nameValue = v;
+        }
+      }}
+      formTextProps={{ textTransform: "upper-case" }}
+    />
+  );
+
+  const textBox = component.getByRole("textbox");
+  await textBox.fill(entered);
+
+  // Assert
+  expect(nameValue).toBe(expected);
+});
+
+test("renders label", async ({ mount }) => {
+  // Arrange
+  const expected = "Label here";
+
+  // Act
+  const component = await mount(<FormTextTestComponent formTextProps={{ label: expected }} />);
+
+  // Assert
+  await expect(component).toContainText(expected);
+});
+
+test("renders error message", async ({ mount }) => {
+  // Arrange
+  const expected = "Error message";
+  const alwaysErrorValidator = () => expected;
+
+  // Act
+  const component = await mount(<FormTextTestComponent formOptions={{ fields: { name: { validators: [alwaysErrorValidator] }, age: {} } }} />);
+
+  // touch text box
+  const textBox = component.getByRole("textbox");
+  await textBox.fill("not expected");
+
+  // Assert
+  await expect(component).toContainText(expected);
+});
diff --git a/packages/simple-form-joy/src/test-components/form-utils.ts b/packages/simple-form-joy/src/test-components/form-utils.ts
@@ -1,30 +1,21 @@
 import { getFormManager, useFormDefinition } from "@ilbrando/simple-form";
 
-export type TestForm = {
+export type TestFormFields = {
   name: string;
   age: number;
-  jobTitle: string;
 };
 
-export type UseTestFormOptions = Parameters<typeof useFormDefinition<TestForm>>[0] & {
-  isSubmitting: boolean;
-};
+export type UseTestFormOptions = Parameters<typeof useFormDefinition<TestFormFields>>[0];
 
-export const useTestForm = (options?: Partial<UseTestFormOptions>) => {
-  const effectiveOptions: UseTestFormOptions = {
+export const useTestForm = (options?: UseTestFormOptions, isSubmitting: boolean = false) => {
+  const effectiveOptions: UseTestFormOptions = options ?? {
     fields: {
       name: {},
-      age: {},
-      jobTitle: {}
-    },
-    isSubmitting: false
+      age: {}
+    }
   };
 
-  Object.assign(effectiveOptions, options);
-
-  const { isSubmitting, ...rest } = effectiveOptions;
-
-  const fd = useFormDefinition<TestForm>(rest);
+  const fd = useFormDefinition<TestFormFields>(effectiveOptions);
 
   const fm = getFormManager(fd, isSubmitting);