Initialize model with default values (#1343)

vazco · Jun 14, 2024 · c047291 · c047291
1 parent a8f4ced
commit c047291
Show file tree

Hide file tree

Showing 20 changed files with 195 additions and 132 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -7,7 +7,7 @@ module.exports = {
     '^uniforms([^/]*)(.*)$': '<rootDir>/packages/uniforms$1/src$2',
   },
   preset: 'ts-jest',
-  setupFiles: ['./scripts/setupEnzyme.ts'],
+  setupFiles: ['./scripts/setupEnzyme.ts', './scripts/setupFilterWarnings.ts'],
   setupFilesAfterEnv: ['./scripts/setupMatchers.ts'],
   testEnvironment: 'jsdom',
   testPathIgnorePatterns: ['/node_modules/', '/_[^/]*$', '\\.d\\.ts$'],

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'),
@@ -44,7 +44,7 @@ describe('@RTL', () => {
   suites.testListAddField(theme.ListAddField);
   suites.testListDelField(theme.ListDelField);
   suites.testListField(theme.ListField, {
-    getListAddField: screen => screen.getByRole('button'),
+    getListAddField: screen => screen.getByRole('button', { name: '+' }),
     testError: false,
   });
   suites.testListItemField(theme.ListItemField);

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__/ListField.tsx b/packages/uniforms/__suites__/ListField.tsx
@@ -179,13 +179,17 @@ export function testListField(
     const onChange = jest.fn();
     render(
       <ListField name="x" label="ListFieldLabel" />,
-      { x: { type: Array, optional: true }, 'x.$': String },
+      {
+        x: { type: Array, optional: true },
+        'x.$': { type: Object },
+        'x.$.name': { type: String, defaultValue: 'someValue' },
+      },
       { onChange },
     );
 
     await userEvent.click(getListAddField(screen));
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenLastCalledWith('x', [undefined]);
+    expect(await screen.findAllByDisplayValue('someValue')).toHaveLength(1);
+    expect(onChange).toHaveBeenLastCalledWith('x.0', { name: 'someValue' });
   });
 
   if (testError) {

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/__suites__/render.tsx b/packages/uniforms/__suites__/render.tsx
@@ -1,43 +1,30 @@
 import { render as renderOnScreen, RenderResult } from '@testing-library/react';
 import React, { ReactElement, cloneElement } from 'react';
 import SimpleSchema, { SimpleSchemaDefinition } from 'simpl-schema';
-import { BaseForm, Context, UnknownObject, context, randomIds } from 'uniforms';
+import { Context, UnknownObject } from 'uniforms';
 import { SimpleSchema2Bridge } from 'uniforms-bridge-simple-schema-2';
+import { AutoForm } from 'uniforms-unstyled';
 
-const randomId = randomIds();
 export function render<P, Model extends UnknownObject>(
   element: ReactElement<P>,
   schema?: SimpleSchemaDefinition,
-  contextValueExtension?: Partial<Context<Model>>,
+  contextValueExtension?: Pick<Partial<Context<Model>>, 'onChange'>,
   model = {} as Model,
 ): RenderResult & { rerenderWithProps: (props: P) => void } {
   const renderResult = renderOnScreen(element, {
     wrapper({ children }) {
       if (schema) {
-        const contextValue = {
-          changed: false,
-          changedMap: {},
-          error: null,
-          model,
-          name: [],
-          onChange() {},
-          onSubmit() {},
-          randomId,
-          submitted: false,
-          submitting: false,
-          validating: false,
-          ...contextValueExtension,
-          schema: new SimpleSchema2Bridge({ schema: new SimpleSchema(schema) }),
-          state: {
-            disabled: false,
-            readOnly: false,
-            showInlineError: false,
-            ...contextValueExtension?.state,
-          },
-          formRef: {} as BaseForm<UnknownObject>,
-        };
+        const bridge = new SimpleSchema2Bridge({
+          schema: new SimpleSchema(schema),
+        });
         return (
-          <context.Provider value={contextValue}>{children}</context.Provider>
+          <AutoForm
+            onChange={contextValueExtension?.onChange}
+            model={model}
+            schema={bridge}
+          >
+            {children}
+          </AutoForm>
         );
       }
       return <>{children}</>;