From 5667df5835383da6313bfb7b09d4663a83becba0 Mon Sep 17 00:00:00 2001 From: Volodymyr Zakhovaiko Date: Mon, 3 Jun 2024 09:00:10 +0200 Subject: [PATCH] Migrated `wrapField` tests to @testing-library/react (#1318) Co-authored-by: Adrian Mucha --- packages/uniforms-antd/__tests__/index.ts | 6 + .../uniforms-antd/__tests__/wrapField.tsx | 121 +++++++--------- .../__tests__/wrapField.tsx | 84 ----------- .../uniforms-bootstrap4/__tests__/index.ts | 1 + .../__tests__/wrapField.tsx | 90 +++--------- .../uniforms-bootstrap5/__tests__/index.ts | 1 + .../__tests__/wrapField.tsx | 90 +++--------- .../uniforms-material/__tests__/wrapField.tsx | 35 ----- packages/uniforms-mui/__tests__/index.ts | 8 ++ packages/uniforms-mui/__tests__/wrapField.tsx | 46 ++---- packages/uniforms/__suites__/index.ts | 5 +- packages/uniforms/__suites__/wrapField.tsx | 131 ++++++++++++++++++ 12 files changed, 248 insertions(+), 370 deletions(-) delete mode 100644 packages/uniforms-bootstrap3/__tests__/wrapField.tsx delete mode 100644 packages/uniforms-material/__tests__/wrapField.tsx create mode 100644 packages/uniforms/__suites__/wrapField.tsx diff --git a/packages/uniforms-antd/__tests__/index.ts b/packages/uniforms-antd/__tests__/index.ts index f65bc471c..f81a686bb 100644 --- a/packages/uniforms-antd/__tests__/index.ts +++ b/packages/uniforms-antd/__tests__/index.ts @@ -65,4 +65,10 @@ describe('@RTL', () => { suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); suites.testValidatedQuickForm(theme.ValidatedQuickForm); + suites.testWrapField(theme.wrapField, { + helpPropsName: 'help', + withoutWrapClassName: true, + withoutHelpClassName: true, + withoutLabelClassName: true, + }); }); diff --git a/packages/uniforms-antd/__tests__/wrapField.tsx b/packages/uniforms-antd/__tests__/wrapField.tsx index 4039b8930..a8dd46d3d 100644 --- a/packages/uniforms-antd/__tests__/wrapField.tsx +++ b/packages/uniforms-antd/__tests__/wrapField.tsx @@ -1,75 +1,52 @@ -import Form from 'antd/lib/form'; -import Tooltip from 'antd/lib/tooltip'; +import { screen } from '@testing-library/react'; 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'); +import { renderWithZod } from 'uniforms/__suites__'; +import { z } from 'zod'; + +describe('wrapField tests', () => { + test(' - renders wrapper with extra style', () => { + const { container } = renderWithZod({ + element: wrapField( + { wrapperStyle: { backgroundColor: 'red' } }, +
, + ), + schema: z.object({}), + }); + const element = container.getElementsByClassName('ant-form-item')[0]; + expect(element?.getAttribute('style')).toBe('background-color: red;'); + }); + + test(' - 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', + ); + }); + + test(' - renders wrapper with extra text', () => { + renderWithZod({ + element: wrapField({ extra: 'Extra' },
), + schema: z.object({}), + }); + expect(screen.getByText('Extra')).toBeInTheDocument(); + }); + + test(' - 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(); + }); }); diff --git a/packages/uniforms-bootstrap3/__tests__/wrapField.tsx b/packages/uniforms-bootstrap3/__tests__/wrapField.tsx deleted file mode 100644 index 9089eec21..000000000 --- a/packages/uniforms-bootstrap3/__tests__/wrapField.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React from 'react'; -import { wrapField } from 'uniforms-bootstrap3'; - -import mount from './_mount'; - -test(' - renders wrapper with correct class', () => { - const element = wrapField({ wrapClassName: 'container' },
); - const wrapper = mount(element); - - expect(wrapper.find('.container')).toHaveLength(1); -}); - -test(' - renders help block', () => { - const element = wrapField({ help: 'Hint' },
); - const wrapper = mount(element); - - expect(wrapper.find('.help-block').text()).toBe('Hint'); -}); - -test(' - renders help block with specified class', () => { - const element = wrapField( - { help: 'Hint', helpClassName: 'text-hint' }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('.help-block.text-hint')).toHaveLength(1); -}); - -test(' - renders error block', () => { - const error = new Error(); - const element = wrapField( - { error, showInlineError: true, errorMessage: 'Error' }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('.help-block').text()).toBe('Error'); -}); - -test(' - renders error block (feedbackable)', () => { - const error = new Error(); - const element = wrapField({ error, feedbackable: true },
); - const wrapper = mount(element); - - expect(wrapper.find('.form-control-feedback')).toHaveLength(1); -}); - -test(' - renders error block (showInlineError=false)', () => { - const error = new Error(); - const element = wrapField( - { error, showInlineError: false, errorMessage: 'Error' }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('.help-block')).toHaveLength(0); -}); - -test(' - label has custom class (String)', () => { - const element = wrapField( - { - label: 'A field label', - labelClassName: 'custom-label-class', - }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('label.custom-label-class')).toHaveLength(1); -}); - -test(' - label has custom class (Array[String])', () => { - const element = wrapField( - { - label: 'A field label', - labelClassName: ['custom-1', 'custom-2'], - }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('label.custom-1.custom-2')).toHaveLength(1); -}); diff --git a/packages/uniforms-bootstrap4/__tests__/index.ts b/packages/uniforms-bootstrap4/__tests__/index.ts index 74eb7b3de..7a40863f3 100644 --- a/packages/uniforms-bootstrap4/__tests__/index.ts +++ b/packages/uniforms-bootstrap4/__tests__/index.ts @@ -63,4 +63,5 @@ describe('@RTL', () => { suites.testTextField(theme.TextField, { testWrapClassName: true }); suites.testValidatedForm(theme.ValidatedForm); suites.testValidatedQuickForm(theme.ValidatedQuickForm); + suites.testWrapField(theme.wrapField); }); diff --git a/packages/uniforms-bootstrap4/__tests__/wrapField.tsx b/packages/uniforms-bootstrap4/__tests__/wrapField.tsx index ec97accf1..873a35d17 100644 --- a/packages/uniforms-bootstrap4/__tests__/wrapField.tsx +++ b/packages/uniforms-bootstrap4/__tests__/wrapField.tsx @@ -1,76 +1,20 @@ +import { screen } from '@testing-library/react'; import React from 'react'; import { wrapField } from 'uniforms-bootstrap4'; - -import mount from './_mount'; - -test(' - renders wrapper with correct class', () => { - const element = wrapField({ wrapClassName: 'container' },
); - const wrapper = mount(element); - - expect(wrapper.find('.container')).toHaveLength(1); -}); - -test(' - renders help block', () => { - const element = wrapField({ help: 'Hint' },
); - const wrapper = mount(element); - - expect(wrapper.find('.form-text').text()).toBe('Hint'); -}); - -test(' - renders help block with specified class', () => { - const element = wrapField( - { help: 'Hint', helpClassName: 'text-hint' }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('.form-text.text-hint')).toHaveLength(1); -}); - -test(' - renders error block', () => { - const error = new Error(); - const element = wrapField( - { error, showInlineError: true, errorMessage: 'Error' }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('.text-danger').text()).toBe('Error'); -}); - -test(' - renders error block (showInlineError=false)', () => { - const error = new Error(); - const element = wrapField( - { error, showInlineError: false, errorMessage: 'Error' }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('.text-danger')).toHaveLength(0); -}); - -test(' - label has custom class (String)', () => { - const element = wrapField( - { - label: 'A field label', - labelClassName: 'custom-label-class', - }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('label.custom-label-class')).toHaveLength(1); -}); - -test(' - label has custom class (Array[String])', () => { - const element = wrapField( - { - label: 'A field label', - labelClassName: ['custom-1', 'custom-2'], - }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('label.custom-1.custom-2')).toHaveLength(1); +import { renderWithZod } from 'uniforms/__suites__'; +import { z } from 'zod'; + +describe('wrapField tests', () => { + test(' - renders wrapper with correct class', () => { + renderWithZod({ + element: wrapField( + { wrapClassName: 'container' }, +
, + ), + schema: z.object({}), + }); + expect( + screen.getByTestId('x').parentElement?.classList.contains('container'), + ).toBe(true); + }); }); diff --git a/packages/uniforms-bootstrap5/__tests__/index.ts b/packages/uniforms-bootstrap5/__tests__/index.ts index 374958d94..656683d20 100644 --- a/packages/uniforms-bootstrap5/__tests__/index.ts +++ b/packages/uniforms-bootstrap5/__tests__/index.ts @@ -68,4 +68,5 @@ describe('@RTL', () => { }); suites.testValidatedForm(theme.ValidatedForm); suites.testValidatedQuickForm(theme.ValidatedQuickForm); + suites.testWrapField(theme.wrapField); }); diff --git a/packages/uniforms-bootstrap5/__tests__/wrapField.tsx b/packages/uniforms-bootstrap5/__tests__/wrapField.tsx index 88b7b8bbd..34872ccca 100644 --- a/packages/uniforms-bootstrap5/__tests__/wrapField.tsx +++ b/packages/uniforms-bootstrap5/__tests__/wrapField.tsx @@ -1,76 +1,20 @@ +import { screen } from '@testing-library/react'; import React from 'react'; import { wrapField } from 'uniforms-bootstrap5'; - -import mount from './_mount'; - -test(' - renders wrapper with correct class', () => { - const element = wrapField({ wrapClassName: 'container' },
); - const wrapper = mount(element); - - expect(wrapper.find('.container')).toHaveLength(1); -}); - -test(' - renders help block', () => { - const element = wrapField({ help: 'Hint' },
); - const wrapper = mount(element); - - expect(wrapper.find('.form-text').text()).toBe('Hint'); -}); - -test(' - renders help block with specified class', () => { - const element = wrapField( - { help: 'Hint', helpClassName: 'text-hint' }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('.form-text.text-hint')).toHaveLength(1); -}); - -test(' - renders error block', () => { - const error = new Error(); - const element = wrapField( - { error, showInlineError: true, errorMessage: 'Error' }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('.text-danger').text()).toBe('Error'); -}); - -test(' - renders error block (showInlineError=false)', () => { - const error = new Error(); - const element = wrapField( - { error, showInlineError: false, errorMessage: 'Error' }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('.text-danger')).toHaveLength(0); -}); - -test(' - label has custom class (String)', () => { - const element = wrapField( - { - label: 'A field label', - labelClassName: 'custom-label-class', - }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('label.custom-label-class')).toHaveLength(1); -}); - -test(' - label has custom class (Array[String])', () => { - const element = wrapField( - { - label: 'A field label', - labelClassName: ['custom-1', 'custom-2'], - }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find('label.custom-1.custom-2')).toHaveLength(1); +import { renderWithZod } from 'uniforms/__suites__'; +import { z } from 'zod'; + +describe('wrapField tests', () => { + test(' - renders wrapper with correct class', () => { + renderWithZod({ + element: wrapField( + { wrapClassName: 'container' }, +
, + ), + schema: z.object({}), + }); + expect( + screen.getByTestId('x').parentElement?.classList.contains('container'), + ).toBe(true); + }); }); diff --git a/packages/uniforms-material/__tests__/wrapField.tsx b/packages/uniforms-material/__tests__/wrapField.tsx deleted file mode 100644 index 27f25020f..000000000 --- a/packages/uniforms-material/__tests__/wrapField.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import FormControl from '@material-ui/core/FormControl'; -import FormHelperText from '@material-ui/core/FormHelperText'; -import React from 'react'; -import { wrapField } from 'uniforms-material'; - -import mount from './_mount'; - -test(' - renders wrapper', () => { - const element = wrapField({},
); - const wrapper = mount(element); - - expect(wrapper.find(FormControl)).toHaveLength(1); -}); - -test(' - renders wrapper with helper text', () => { - const element = wrapField({ helperText: 'Helper text' },
); - const wrapper = mount(element); - - expect(wrapper.find(FormHelperText).text()).toBe('Helper text'); -}); - -test(' - renders wrapper with error', () => { - const element = wrapField( - { - showInlineError: true, - error: new Error(), - errorMessage: 'Error message', - }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find(FormControl).prop('error')).toBe(true); - expect(wrapper.find(FormHelperText).text()).toBe('Error message'); -}); diff --git a/packages/uniforms-mui/__tests__/index.ts b/packages/uniforms-mui/__tests__/index.ts index 634b6f46f..6827b839e 100644 --- a/packages/uniforms-mui/__tests__/index.ts +++ b/packages/uniforms-mui/__tests__/index.ts @@ -60,4 +60,12 @@ describe('@RTL', () => { suites.testTextField(theme.TextField); suites.testValidatedForm(theme.ValidatedForm); suites.testValidatedQuickForm(theme.ValidatedQuickForm); + suites.testWrapField(theme.wrapField, { + helpPropsName: 'helperText', + withoutLabel: true, + withoutInlineError: true, + withoutWrapClassName: true, + withoutHelpClassName: true, + withoutLabelClassName: true, + }); }); diff --git a/packages/uniforms-mui/__tests__/wrapField.tsx b/packages/uniforms-mui/__tests__/wrapField.tsx index af882cc7a..052c017ee 100644 --- a/packages/uniforms-mui/__tests__/wrapField.tsx +++ b/packages/uniforms-mui/__tests__/wrapField.tsx @@ -1,35 +1,19 @@ -import FormControl from '@mui/material/FormControl'; -import FormHelperText from '@mui/material/FormHelperText'; +import { screen } from '@testing-library/react'; import React from 'react'; import { wrapField } from 'uniforms-mui'; +import { renderWithZod } from 'uniforms/__suites__'; +import { z } from 'zod'; -import mount from './_mount'; - -test(' - renders wrapper', () => { - const element = wrapField({},
); - const wrapper = mount(element); - - expect(wrapper.find(FormControl)).toHaveLength(1); -}); - -test(' - renders wrapper with helper text', () => { - const element = wrapField({ helperText: 'Helper text' },
); - const wrapper = mount(element); - - expect(wrapper.find(FormHelperText).text()).toBe('Helper text'); -}); - -test(' - renders wrapper with error', () => { - const element = wrapField( - { - showInlineError: true, - error: new Error(), - errorMessage: 'Error message', - }, -
, - ); - const wrapper = mount(element); - - expect(wrapper.find(FormControl).prop('error')).toBe(true); - expect(wrapper.find(FormHelperText).text()).toBe('Error message'); +describe('wrapField tests', () => { + test(' - renders wrapper', () => { + renderWithZod({ + element: wrapField({},
), + schema: z.object({}), + }); + expect( + screen + .getByTestId('x') + .parentElement?.classList.contains('MuiFormControl-root'), + ).toBe(true); + }); }); diff --git a/packages/uniforms/__suites__/index.ts b/packages/uniforms/__suites__/index.ts index e63c78281..5b5921d47 100644 --- a/packages/uniforms/__suites__/index.ts +++ b/packages/uniforms/__suites__/index.ts @@ -16,10 +16,11 @@ export * from './NestField'; export * from './NumField'; export * from './QuickForm'; export * from './RadioField'; +export * from './render-zod'; +export * from './render'; export * from './SelectField'; export * from './SubmitField'; export * from './TextField'; export * from './ValidatedForm'; export * from './ValidatedQuickForm'; -export * from './render'; -export * from './render-zod'; +export * from './wrapField'; diff --git a/packages/uniforms/__suites__/wrapField.tsx b/packages/uniforms/__suites__/wrapField.tsx new file mode 100644 index 000000000..4c919f433 --- /dev/null +++ b/packages/uniforms/__suites__/wrapField.tsx @@ -0,0 +1,131 @@ +import { screen } from '@testing-library/react'; +import React, { ReactElement, ReactNode } from 'react'; +import z from 'zod'; + +import { renderWithZod } from './render-zod'; +import { skipTestIf } from './skipTestIf'; + +export function testWrapField( + wrapField: (wrapperProps: any, children: ReactNode) => ReactElement, + options: { + withoutLabel?: boolean; + withoutWrapClassName?: boolean; + withoutHelpClassName?: boolean; + withoutLabelClassName?: boolean; + withoutInlineError?: boolean; + helpPropsName: 'help' | 'helperText'; + } = { + helpPropsName: 'help', + }, +) { + skipTestIf(options?.withoutWrapClassName)( + ' - renders wrapper with correct class', + () => { + renderWithZod({ + element: wrapField( + { wrapClassName: 'container' }, +
, + ), + schema: z.object({}), + }); + expect( + screen.getByTestId('x').parentElement?.classList.contains('container'), + ).toBe(true); + }, + ); + + test(' - renders help block', () => { + renderWithZod({ + element: wrapField({ [options.helpPropsName]: 'Hint' },
), + schema: z.object({}), + }); + expect(screen.getByText('Hint')).toBeInTheDocument(); + }); + + skipTestIf(options?.withoutHelpClassName)( + ' - renders help block with specified class', + () => { + renderWithZod({ + element: wrapField( + { help: 'Hint', helpClassName: 'text-hint' }, +
, + ), + schema: z.object({}), + }); + const span = screen.getByText('Hint'); + expect(span.classList.contains('text-hint')).toBe(true); + }, + ); + + test(' - renders error block (showInlineError=true)', () => { + const error = new Error(); + renderWithZod({ + element: wrapField( + { error, showInlineError: true, errorMessage: 'Error' }, +
, + ), + schema: z.object({}), + }); + expect(screen.getByText('Error')).toBeInTheDocument(); + }); + + skipTestIf(options?.withoutLabel)( + ' - renders wrapper with label', + () => { + renderWithZod({ + element: wrapField({ label: 'Label' },
), + schema: z.object({}), + }); + expect(screen.getByText('Label')).toBeInTheDocument(); + }, + ); + + skipTestIf(options?.withoutLabelClassName)( + ' - label has custom class (String)', + () => { + renderWithZod({ + element: wrapField( + { label: 'A field label', labelClassName: 'custom-label-class' }, +
, + ), + schema: z.object({}), + }); + const label = screen.getByText('A field label'); + expect(label.classList.contains('custom-label-class')).toBe(true); + }, + ); + + skipTestIf(options.withoutLabelClassName)( + ' - label has custom class (Array[String])', + () => { + renderWithZod({ + element: wrapField( + { label: 'A field label', labelClassName: ['custom-1', 'custom-2'] }, +
, + ), + schema: z.object({}), + }); + const label = screen.getByText('A field label'); + expect(label.classList.contains('custom-1')).toBe(true); + expect(label.classList.contains('custom-2')).toBe(true); + }, + ); + + skipTestIf(options?.withoutInlineError)( + ' - renders error block (showInlineError=false)', + () => { + const error = new Error(); + renderWithZod({ + element: wrapField( + { error, showInlineError: false, errorMessage: 'Error' }, +
, + ), + schema: z.object({}), + }); + const x = screen.getByTestId('x'); + expect( + x.closest('.ant-form-item-has-error, .is-invalid'), + ).toBeInTheDocument(); + }, + ); +}