diff --git a/packages/uniforms-antd/__tests__/index.ts b/packages/uniforms-antd/__tests__/index.ts index f65bc471c..f46039ee2 100644 --- a/packages/uniforms-antd/__tests__/index.ts +++ b/packages/uniforms-antd/__tests__/index.ts @@ -65,4 +65,7 @@ describe('@RTL', () => { suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); suites.testValidatedQuickForm(theme.ValidatedQuickForm); + suites.testWrapField(theme.wrapField, { + skipForAntD: true, + }); }); diff --git a/packages/uniforms-antd/__tests__/wrapField.tsx b/packages/uniforms-antd/__tests__/wrapField.tsx deleted file mode 100644 index 4039b8930..000000000 --- a/packages/uniforms-antd/__tests__/wrapField.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import Form from 'antd/lib/form'; -import Tooltip from 'antd/lib/tooltip'; -import React from 'react'; -import { wrapField } from 'uniforms-antd'; - -import mount from './_mount'; - -test(' - renders wrapper with label', () => { - const element = wrapField({ label: 'Label' },
); - const wrapper = mount(element); - - // @ts-expect-error Correct label type. - expect(wrapper.find(Form.Item).prop('label').props.children[0]).toBe('Label'); -}); - -test(' - renders wrapper with label and info', () => { - const element = wrapField({ label: 'Label', info: 'Info' },
); - const wrapper = mount(element); - - expect(wrapper.find(Tooltip).prop('title')).toBe('Info'); -}); - -test(' - renders wrapper with an error message', () => { - const error = new Error(); - const element = wrapField( - { error, showInlineError: true, errorMessage: 'Error' }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find(Form.Item).prop('help')).toBe('Error'); -}); - -test(' - renders wrapper with an error status', () => { - const element = wrapField({},
); - const wrapper = mount(element); - - expect(wrapper.find(Form.Item).prop('validateStatus')).toBe(undefined); -}); - -test(' - renders wrapper with an error status (error)', () => { - const error = new Error(); - const element = wrapField({ error },
); - const wrapper = mount(element); - - expect(wrapper.find(Form.Item).prop('validateStatus')).toBe('error'); -}); - -test(' - renders wrapper with help text', () => { - const element = wrapField({ help: 'Help' },
); - const wrapper = mount(element); - - expect(wrapper.find(Form.Item).prop('help')).toBe('Help'); -}); - -test(' - renders wrapper with extra text', () => { - const element = wrapField({ extra: 'Extra' },
); - const wrapper = mount(element); - - expect(wrapper.find(Form.Item).prop('extra')).toBe('Extra'); -}); - -test(' - renders wrapper with extra style', () => { - const element = wrapField({ wrapperStyle: {} },
); - const wrapper = mount(element); - - expect(wrapper.find(Form.Item).prop('style')).toEqual({}); -}); - -test(' - renders wrapper with a custom validateStatus', () => { - const element = wrapField({ validateStatus: 'success' },
); - const wrapper = mount(element); - - expect(wrapper.find(Form.Item).prop('validateStatus')).toBe('success'); -}); diff --git a/packages/uniforms-bootstrap3/__tests__/index.ts b/packages/uniforms-bootstrap3/__tests__/index.ts index a815e2fb7..8c4e72d34 100644 --- a/packages/uniforms-bootstrap3/__tests__/index.ts +++ b/packages/uniforms-bootstrap3/__tests__/index.ts @@ -63,5 +63,5 @@ describe('@RTL', () => { suites.testTextField(theme.TextField, { testWrapClassName: true }); suites.testValidatedForm(theme.ValidatedForm); suites.testValidatedQuickForm(theme.ValidatedQuickForm); - suites.testWrapField(theme.wrapField, { feedbackable: true }); + suites.testWrapField(theme.wrapField, { onlyForBootstrap3: true }); }); diff --git a/packages/uniforms/__suites__/wrapField.tsx b/packages/uniforms/__suites__/wrapField.tsx index 08e5cd036..46b24a2e3 100644 --- a/packages/uniforms/__suites__/wrapField.tsx +++ b/packages/uniforms/__suites__/wrapField.tsx @@ -9,10 +9,11 @@ export function testWrapField( wrapField: (wrapperProps: any, children: ReactNode) => ReactElement, options?: { skipForMUI?: boolean; - feedbackable?: boolean; + skipForAntD?: boolean; + onlyForBootstrap3?: boolean; }, ) { - skipTestIf(!options?.feedbackable)( + skipTestIf(!options?.onlyForBootstrap3)( ' - renders wrapper with (feedbackable=true)', () => { const error = new Error(); @@ -43,7 +44,7 @@ export function testWrapField( ).toBe(true); }); - skipTestIf(options?.skipForMUI)( + skipTestIf(options?.skipForMUI || options?.skipForAntD)( ' - renders wrapper with correct class', () => { renderWithZod({ @@ -70,7 +71,7 @@ export function testWrapField( expect(screen.getByText('Hint')).toBeInTheDocument(); }); - skipTestIf(options?.skipForMUI)( + skipTestIf(options?.skipForMUI || options?.skipForAntD)( ' - renders help block with specified class', () => { renderWithZod({ @@ -97,25 +98,18 @@ export function testWrapField( expect(screen.getByText('Error')).toBeInTheDocument(); }); - // FIXME: fix - // skipTestIf(options?.skipForMUI)( - // ' - renders error block (showInlineError=false)', - // () => { - // // TODO: Add proper test for this - // const error = new Error(); - // renderWithZod({ - // element: wrapField( - // { error, showInlineError: false, errorMessage: 'Error' }, - //
, - // ), - // schema: z.object({}), - // }); - // screen.debug(); - // // expect(wrapper.find('.text-danger')).toHaveLength(0); - // }, - // ); - skipTestIf(options?.skipForMUI)( + ' - renders wrapper with label', + () => { + renderWithZod({ + element: wrapField({ label: 'Label' },
), + schema: z.object({}), + }); + expect(screen.getByText('Label')).toBeInTheDocument(); + }, + ); + + skipTestIf(options?.skipForMUI || options?.skipForAntD)( ' - label has custom class (String)', () => { renderWithZod({ @@ -130,7 +124,7 @@ export function testWrapField( }, ); - skipTestIf(options?.skipForMUI)( + skipTestIf(options?.skipForMUI || options?.skipForAntD)( ' - label has custom class (Array[String])', () => { renderWithZod({ @@ -145,4 +139,114 @@ export function testWrapField( expect(label.classList.contains('custom-2')).toBe(true); }, ); + + skipTestIf(!options?.skipForAntD)( + ' - renders wrapper with a custom validateStatus', + () => { + renderWithZod({ + element: wrapField( + { validateStatus: 'success' }, +
, + ), + schema: z.object({}), + }); + expect( + screen + .getByTestId('x') + .closest('.ant-form-item-has-feedback.ant-form-item-has-success'), + ).toBeInTheDocument(); + }, + ); + + skipTestIf(!options?.skipForAntD)( + ' - renders wrapper with extra style', + () => { + renderWithZod({ + element: wrapField( + { wrapperStyle: { backgroundColor: 'red' } }, +
, + ), + schema: z.object({}), + }); + expect( + screen + .getByTestId('x') + .closest('.ant-form-item') + ?.getAttribute('style'), + ).toBe('background-color: red;'); + }, + ); + + skipTestIf(options?.skipForMUI)( + ' - renders wrapper with extra text', + () => { + renderWithZod({ + element: wrapField({ extra: 'Extra' },
), + schema: z.object({}), + }); + if (options?.skipForAntD) { + expect(screen.getByText('Extra')).toBeInTheDocument(); + } else { + expect(screen.getByTestId('x').parentElement).toHaveAttribute('extra'); + } + }, + ); + + skipTestIf(!options?.skipForAntD)( + ' - renders wrapper with an error status (error)', + () => { + const error = new Error(); + renderWithZod({ + element: wrapField({ error },
), + schema: z.object({}), + }); + expect( + screen + .getByTestId('x') + .closest('.ant-form-item-has-feedback.ant-form-item-has-error'), + ).toBeInTheDocument(); + }, + ); + + skipTestIf(options?.skipForMUI)( + ' - renders error block (showInlineError=false)', + () => { + const error = new Error(); + renderWithZod({ + element: wrapField( + { error, showInlineError: false, errorMessage: 'Error' }, +
, + ), + schema: z.object({}), + }); + if (options?.skipForAntD) { + expect( + screen + .getByTestId('x') + .closest('.ant-form-item-has-feedback.ant-form-item-has-error'), + ).toBeInTheDocument(); + } else { + expect( + screen + .getByTestId('x') + .parentElement?.classList.contains( + options?.onlyForBootstrap3 ? 'has-error' : 'is-invalid', + ), + ).toBe(true); + } + }, + ); + + skipTestIf(!options?.skipForAntD)( + ' - renders wrapper with label and info', + () => { + renderWithZod({ + element: wrapField({ label: 'Label', info: 'Info' },
), + schema: z.object({}), + }); + expect(screen.getByRole('img').getAttribute('aria-label')).toBe( + 'question-circle', + ); + }, + ); }