diff --git a/packages/uniforms-antd/__tests__/NumField.tsx b/packages/uniforms-antd/__tests__/NumField.tsx deleted file mode 100644 index b6f279309..000000000 --- a/packages/uniforms-antd/__tests__/NumField.tsx +++ /dev/null @@ -1,241 +0,0 @@ -import InputNumber from 'antd/lib/input-number'; -import React from 'react'; -import { NumField } from 'uniforms-antd'; - -import createContext from './_createContext'; -import mount from './_mount'; - -test(' - renders an InputNumber', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber)).toHaveLength(1); -}); - -test(' - renders an InputNumber with correct disabled state', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber)).toHaveLength(1); - expect(wrapper.find(InputNumber).prop('disabled')).toBe(true); -}); - -test(' - renders an InputNumber with correct readOnly state', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber)).toHaveLength(1); - expect(wrapper.find(InputNumber).prop('readOnly')).toBe(true); -}); - -test(' - renders an InputNumber with correct id (inherited)', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber)).toHaveLength(1); - expect(wrapper.find(InputNumber).prop('id')).toBeTruthy(); -}); - -test(' - renders an InputNumber with correct id (specified)', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber)).toHaveLength(1); - expect(wrapper.find(InputNumber).prop('id')).toBe('y'); -}); - -test(' - renders an InputNumber with correct max', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber)).toHaveLength(1); - expect(wrapper.find(InputNumber).prop('max')).toBe(10); -}); - -test(' - renders an InputNumber with correct min', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber)).toHaveLength(1); - expect(wrapper.find(InputNumber).prop('min')).toBe(10); -}); - -test(' - renders an InputNumber with correct name', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber)).toHaveLength(1); - expect(wrapper.find(InputNumber).prop('name')).toBe('x'); -}); - -test(' - renders an InputNumber with correct placeholder', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber)).toHaveLength(1); - expect(wrapper.find(InputNumber).prop('placeholder')).toBe('y'); -}); - -test(' - renders an InputNumber with correct step (decimal)', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber)).toHaveLength(1); - expect(wrapper.find(InputNumber).prop('step')).toBe(0.01); -}); - -test(' - renders an InputNumber with correct step (integer)', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber)).toHaveLength(1); - expect(wrapper.find(InputNumber).prop('step')).toBe(1); -}); - -test(' - renders an InputNumber with correct step (set)', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber)).toHaveLength(1); - expect(wrapper.find(InputNumber).prop('step')).toBe(3); -}); - -test(' - renders an InputNumber with correct value (default)', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber)).toHaveLength(1); - expect(wrapper.find(InputNumber).prop('value')).toBe(undefined); -}); - -test(' - renders an InputNumber with correct value (model)', () => { - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: Number } }, { model: { x: 1 } }), - ); - - expect(wrapper.find(InputNumber)).toHaveLength(1); - expect(wrapper.find(InputNumber).prop('value')).toBe(1); -}); - -test(' - renders an InputNumber with correct value (specified)', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber)).toHaveLength(1); - expect(wrapper.find(InputNumber).prop('value')).toBe(2); -}); - -test(' - renders an InputNumber which correctly reacts on change', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: Number } }, { onChange }), - ); - - expect(wrapper.find('input')).toHaveLength(1); - expect( - wrapper.find('input').simulate('change', { target: { value: '1' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 1); -}); - -test(' - renders an InputNumber which correctly reacts on change (decimal on decimal)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: Number } }, { onChange }), - ); - - expect(wrapper.find('input')).toHaveLength(1); - expect( - wrapper.find('input').simulate('change', { target: { value: '2.5' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 2.5); -}); - -test(' - renders an InputNumber which correctly reacts on change (decimal on integer)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: Number } }, { onChange }), - ); - - expect(wrapper.find('input')).toHaveLength(1); - expect( - wrapper.find('input').simulate('change', { target: { value: '2.5' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 2); -}); - -test(' - renders an InputNumber which correctly reacts on change (empty)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: Number } }, { onChange }), - ); - - expect(wrapper.find('input')).toHaveLength(1); - expect( - wrapper.find('input').simulate('change', { target: { value: '' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', undefined); -}); - -test(' - renders an InputNumber which correctly reacts on change (same value)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: Number } }, { model: { x: 1 }, onChange }), - ); - - expect(wrapper.find('input')).toHaveLength(1); - expect( - wrapper.find('input').simulate('change', { target: { value: '1' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 1); -}); - -test(' - renders an InputNumber which correctly reacts on change (zero)', () => { - const onChange = jest.fn(); - - const element = ; - const wrapper = mount( - element, - createContext({ x: { type: Number } }, { onChange }), - ); - - expect(wrapper.find('input')).toHaveLength(1); - expect( - wrapper.find('input').simulate('change', { target: { value: '0' } }), - ).toBeTruthy(); - expect(onChange).toHaveBeenLastCalledWith('x', 0); -}); - -test(' - renders a label', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find('label')).toHaveLength(1); - expect(wrapper.find('label').text()).toBe('y'); -}); - -test(' - renders a wrapper with unknown props', () => { - const element = ; - const wrapper = mount(element, createContext({ x: { type: Number } })); - - expect(wrapper.find(InputNumber).prop('data-x')).toBe('x'); - expect(wrapper.find(InputNumber).prop('data-y')).toBe('y'); - expect(wrapper.find(InputNumber).prop('data-z')).toBe('z'); -}); diff --git a/packages/uniforms-antd/__tests__/index.ts b/packages/uniforms-antd/__tests__/index.ts index f81a686bb..a4d8a7312 100644 --- 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'), @@ -52,8 +52,7 @@ describe('@RTL', () => { }); 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 index 0b2dd9092..99f3468cc 100644 --- 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-bootstrap4/__tests__/index.ts b/packages/uniforms-bootstrap4/__tests__/index.ts index 7a40863f3..015452b45 100644 --- 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 index 656683d20..6a188deb9 100644 --- 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 index 6827b839e..cfcb5c366 100644 --- 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 index 87c1de6f0..a9bfe2b9b 100644 --- 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 index 097876b9d..075091310 100644 --- 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__/NumField.tsx b/packages/uniforms/__suites__/NumField.tsx index d4340be54..75a9816eb 100644 --- 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) { + test(' - renders an InputNumber', () => { + renderWithZod({ + element: , + schema: z.object({ x: z.number() }), + }); + + expect(screen.getByRole('spinbutton')).toBeInTheDocument(); + }); + test(' - renders an InputNumber with correct disabled state', () => { renderWithZod({ element: , @@ -194,4 +203,16 @@ export function testNumField(NumField: ComponentType) { }); expect(screen.getByLabelText(/^Y/)).toBeInTheDocument(); }); + + test(' - renders a wrapper with unknown props', () => { + const { container } = renderWithZod({ + element: , + 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'); + }); }