Migrated Numfield AntD tests to @testing-library/react (#1348)

vazco · Jun 21, 2024 · e1c4707 · e1c4707
1 parent 6d65e02
commit e1c4707
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 243 deletions.
diff --git a/packages/uniforms-antd/__tests__/NumField.tsx b/packages/uniforms-antd/__tests__/NumField.tsx
diff --git a/packages/uniforms-antd/__tests__/index.ts b/packages/uniforms-antd/__tests__/index.ts
@@ -52,8 +52,7 @@ describe('@RTL AntD', () => {
   });
   suites.testListItemField(theme.ListItemField);
   suites.testLongTextField(theme.LongTextField);
-  // FIXME: AntD number input doesn't work with new RTL test implementation
-  // suites.testNumField(antd.NumField);
+  suites.testNumField(theme.NumField);
   suites.testNestField(theme.NestField);
   suites.testQuickForm(theme.QuickForm);
   // FIXME: AntD radio.group does not support HTML attributes https://github.com/ant-design/ant-design/issues/8561, added a flag to skip attributes tests.

diff --git a/packages/uniforms-antd/src/NumField.tsx b/packages/uniforms-antd/src/NumField.tsx
@@ -30,6 +30,7 @@ function Num(props: NumFieldProps) {
       ref={props.inputRef}
       step={props.step || (props.decimal ? 0.01 : 1)}
       style={{ width: '100%' }}
+      type="number"
       value={props.value}
       {...filterDOMProps(props)}
     />,

diff --git a/packages/uniforms/__suites__/NumField.tsx b/packages/uniforms/__suites__/NumField.tsx
@@ -6,6 +6,15 @@ import z from 'zod';
 import { renderWithZod } from './render-zod';
 
 export function testNumField(NumField: ComponentType<any>) {
+  test('<NumField> - renders an InputNumber', () => {
+    renderWithZod({
+      element: <NumField name="x" />,
+      schema: z.object({ x: z.number() }),
+    });
+
+    expect(screen.getByRole('spinbutton')).toBeInTheDocument();
+  });
+
   test('<NumField> - renders an InputNumber with correct disabled state', () => {
     renderWithZod({
       element: <NumField name="x" disabled />,
@@ -194,4 +203,16 @@ export function testNumField(NumField: ComponentType<any>) {
     });
     expect(screen.getByLabelText(/^Y/)).toBeInTheDocument();
   });
+
+  test('<NumField> - renders a wrapper with unknown props', () => {
+    const { container } = renderWithZod({
+      element: <NumField name="x" data-x="x" data-y="y" data-z="z" />,
+      schema: z.object({ x: z.number() }),
+    });
+
+    const wrapperElement = container.querySelector('[data-x="x"]');
+    expect(wrapperElement).toHaveAttribute('data-x', 'x');
+    expect(wrapperElement).toHaveAttribute('data-y', 'y');
+    expect(wrapperElement).toHaveAttribute('data-z', 'z');
+  });
 }