renderWithZod using AutoForm, fix some tests ListAddDelField, RadioField

vazco · Jun 6, 2024 · 2b839fe · 2b839fe
1 parent 5f87cf5
commit 2b839fe
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 50 deletions.
diff --git a/packages/uniforms-antd/__tests__/index.ts b/packages/uniforms-antd/__tests__/index.ts
@@ -30,7 +30,7 @@ it('exports everything', () => {
   });
 });
 
-describe('@RTL', () => {
+describe('@RTL AntD', () => {
   suites.testAutoField(theme.AutoField, {
     getDateField: screen => screen.getByRole('textbox'),
     getSelectField: screen => screen.getByRole('combobox'),

diff --git a/packages/uniforms-bootstrap4/__tests__/index.ts b/packages/uniforms-bootstrap4/__tests__/index.ts
@@ -31,7 +31,7 @@ it('exports everything', () => {
   });
 });
 
-describe('@RTL', () => {
+describe('@RTL Bootstrap4', () => {
   suites.testAutoField(theme.AutoField, {
     getDateField: screen => screen.getByLabelText('X'),
     getSelectField: screen => screen.getByRole('combobox'),

diff --git a/packages/uniforms-bootstrap5/__tests__/index.ts b/packages/uniforms-bootstrap5/__tests__/index.ts
@@ -31,7 +31,7 @@ it('exports everything', () => {
   });
 });
 
-describe('@RTL', () => {
+describe('@RTL Bootstrap5', () => {
   suites.testAutoField(theme.AutoField, {
     getDateField: screen => screen.getByLabelText('X'),
     getSelectField: screen => screen.getByRole('combobox'),

diff --git a/packages/uniforms-mui/__tests__/index.ts b/packages/uniforms-mui/__tests__/index.ts
@@ -30,7 +30,7 @@ it('exports everything', () => {
   });
 });
 
-describe('@RTL', () => {
+describe('@RTL MUI', () => {
   suites.testAutoField(theme.AutoField, {
     getDateField: screen => screen.getByLabelText('X *'),
     getSelectField: screen => screen.getByRole('button'),

diff --git a/packages/uniforms-semantic/__tests__/index.ts b/packages/uniforms-semantic/__tests__/index.ts
@@ -29,7 +29,7 @@ it('exports everything', () => {
   });
 });
 
-describe('@RTL', () => {
+describe('@RTL Semantic', () => {
   suites.testAutoField(theme.AutoField, {
     getDateField: screen => screen.getByLabelText('X'),
     getSelectField: screen => screen.getByRole('combobox'),

diff --git a/packages/uniforms-unstyled/__tests__/index.ts b/packages/uniforms-unstyled/__tests__/index.ts
@@ -29,7 +29,7 @@ it('exports everything', () => {
   });
 });
 
-describe('@RTL', () => {
+describe('@RTL unstyled', () => {
   suites.testAutoField(theme.AutoField, {
     getDateField: screen => screen.getByLabelText('X'),
     getSelectField: screen => screen.getByRole('combobox'),

diff --git a/packages/uniforms/__suites__/ListAddField.tsx b/packages/uniforms/__suites__/ListAddField.tsx
@@ -11,7 +11,7 @@ export function testListAddField(ListAddField: ComponentType<any>) {
   test('<ListAddField> - correctly reacts on click', async () => {
     const onChange = jest.fn();
     renderWithZod({
-      element: <ListAddField name="x.1" data-testid="x" value="d" />,
+      element: <ListAddField name="x.$" data-testid="x" value="d" />,
       model: { x: ['a', 'b', 'c'] },
       onChange,
       schema: z.object({ x: z.array(z.string()) }),
@@ -25,19 +25,21 @@ export function testListAddField(ListAddField: ComponentType<any>) {
   test('<ListAddField> - correctly reacts on enter', async () => {
     const onChange = jest.fn();
     renderWithZod({
-      element: <ListAddField name="x.1" data-testid="x" value="d" />,
+      element: <ListAddField name="x.$" data-testid="x" value="d" />,
       model: { x: ['a', 'b', 'c'] },
       onChange,
       schema: z.object({ x: z.array(z.string()) }),
     });
-    await userEvent.type(screen.getByTestId('x'), '{Enter}');
+    // we can't use `userEvent.type(...)` because it does 'click + type' so we "select the button"  using `userEvent.tab()`
+    await userEvent.tab();
+    await userEvent.keyboard('{Enter}');
     expect(onChange).toHaveBeenLastCalledWith('x', ['a', 'b', 'c', 'd']);
   });
 
   test('<ListAddField> - prevents onClick when disabled', async () => {
     const onChange = jest.fn();
     renderWithZod({
-      element: <ListAddField name="x.1" data-testid="x" disabled />,
+      element: <ListAddField name="x.$" data-testid="x" disabled />,
       model: { x: ['a', 'b', 'c'] },
       schema: z.object({ x: z.array(z.string()) }),
     });
@@ -51,7 +53,7 @@ export function testListAddField(ListAddField: ComponentType<any>) {
   test('<ListAddField> - prevents onClick when readOnly', async () => {
     const onChange = jest.fn();
     renderWithZod({
-      element: <ListAddField name="x.1" data-testid="x" readOnly />,
+      element: <ListAddField name="x.$" data-testid="x" readOnly />,
       model: { x: ['a', 'b', 'c'] },
       onChange,
       schema: z.object({ x: z.array(z.string()) }),
@@ -65,7 +67,7 @@ export function testListAddField(ListAddField: ComponentType<any>) {
   test('<ListAddField> - prevents onClick when limit reached', async () => {
     const onChange = jest.fn();
     renderWithZod({
-      element: <ListAddField name="x.1" data-testid="x" readOnly />,
+      element: <ListAddField name="x.$" data-testid="x" readOnly />,
       model: { x: ['a', 'b', 'c'] },
       onChange,
       schema: z.object({ x: z.array(z.string()).min(3) }),

diff --git a/packages/uniforms/__suites__/ListDelField.tsx b/packages/uniforms/__suites__/ListDelField.tsx
@@ -28,7 +28,9 @@ export function testListDelField(ListDelField: ComponentType<any>) {
       onChange,
       schema: z.object({ x: z.array(z.string()) }),
     });
-    await userEvent.type(screen.getByTestId('x'), '{Enter}');
+    // we can't use `userEvent.type(...)` because it does 'click + type' so we "select the button"  using `userEvent.tab()`
+    await userEvent.tab();
+    await userEvent.keyboard('{Enter}');
     expect(onChange).toHaveBeenLastCalledWith('x', ['a', 'c']);
   });
 

diff --git a/packages/uniforms/__suites__/RadioField.tsx b/packages/uniforms/__suites__/RadioField.tsx
@@ -36,10 +36,10 @@ export function testRadioField(
       schema: z.object({ x: z.enum(['a', 'b']) }),
       onChange,
     });
-    await userEvent.click(screen.getByLabelText('a'));
-    await userEvent.click(screen.getByLabelText('b'));
+    await userEvent.click(screen.getByRole('radio', { name: 'a' }));
+    await userEvent.click(screen.getByRole('radio', { name: 'b' }));
 
-    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledTimes(0);
   });
 
   skipTestIf(skipHtmlAttributesTest)(
@@ -160,9 +160,9 @@ export function testRadioField(
       schema: z.object({ x: z.enum(['a', 'b']) }),
       onChange,
     });
-    await userEvent.click(screen.getByLabelText('a'));
+    await userEvent.click(screen.getByRole('radio', { name: 'a' }));
 
-    expect(onChange).toHaveBeenLastCalledWith('x', 'a');
+    expect(onChange).not.toHaveBeenCalled();
   });
 
   test('<RadioField> - renders a label', () => {

diff --git a/packages/uniforms/__suites__/render-zod.tsx b/packages/uniforms/__suites__/render-zod.tsx
@@ -1,45 +1,23 @@
 import { render as renderOnScreen } from '@testing-library/react';
-import React, { ReactElement } from 'react';
-import { BaseForm, Context, context, randomIds } from 'uniforms';
+import React, { ComponentProps, ReactElement } from 'react';
 import { ZodBridge } from 'uniforms-bridge-zod';
-import { TypeOf, ZodObject, ZodRawShape } from 'zod';
+import { AutoForm } from 'uniforms-unstyled';
+import { ZodObject, ZodRawShape } from 'zod';
 
 export function renderWithZod<Props, Schema extends ZodObject<ZodRawShape>>({
   element,
   schema,
-  ...contextValueOverride
+  ...autoFormProps
 }: {
   element: ReactElement<Props>;
   schema: Schema;
-} & Omit<Partial<Context<TypeOf<Schema>>>, 'schema'>) {
+} & Partial<Omit<ComponentProps<typeof AutoForm>, 'schema'>>) {
   return renderOnScreen(element, {
     wrapper({ children }) {
-      const value = {
-        changed: false,
-        changedMap: Object.create(null),
-        error: null,
-        formRef: null as unknown as BaseForm<TypeOf<Schema>>,
-        model: Object.create(null),
-        name: [],
-        onChange() {},
-        onSubmit() {},
-        randomId: randomIds(),
-        submitted: false,
-        submitting: false,
-        validating: false,
-        ...contextValueOverride,
-        schema: new ZodBridge({
-          schema,
-        }),
-        state: {
-          disabled: false,
-          readOnly: false,
-          showInlineError: false,
-          ...contextValueOverride?.state,
-        },
-      };
-
-      return <context.Provider children={children} value={value} />;
+      const bridge = new ZodBridge({ schema });
+      return (
+        <AutoForm {...autoFormProps} schema={bridge} children={children} />
+      );
     },
   });
 }
diff --git a/packages/uniforms/__tests__/connectField.tsx b/packages/uniforms/__tests__/connectField.tsx
@@ -109,7 +109,6 @@ describe('connectField', () => {
 
       render(<Field name="fieldWithDefaultValue" />, schema, reactContext);
 
-      screen.logTestingPlaygroundURL();
       expect(onChange).not.toBeCalled();
       expect(await screen.findByDisplayValue('John')).toBeInTheDocument();
     });