-
-
Notifications
You must be signed in to change notification settings - Fork 244
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Migrated
wrapField tests to @testing-library/react (#1318)
Co-authored-by: Adrian Mucha <[email protected]>
- Loading branch information
1 parent
1436d4c
commit 5667df5
Showing
12 changed files
with
248 additions
and
370 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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('<wrapField> - renders wrapper with label', () => { | ||
| const element = wrapField({ label: 'Label' }, <div />); | ||
| const wrapper = mount(element); | ||
|
|
||
| // @ts-expect-error Correct label type. | ||
| expect(wrapper.find(Form.Item).prop('label').props.children[0]).toBe('Label'); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders wrapper with label and info', () => { | ||
| const element = wrapField({ label: 'Label', info: 'Info' }, <div />); | ||
| const wrapper = mount(element); | ||
|
|
||
| expect(wrapper.find(Tooltip).prop('title')).toBe('Info'); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders wrapper with an error message', () => { | ||
| const error = new Error(); | ||
| const element = wrapField( | ||
| { error, showInlineError: true, errorMessage: 'Error' }, | ||
| <div />, | ||
| ); | ||
| const wrapper = mount(element); | ||
|
|
||
| expect(wrapper.find(Form.Item).prop('help')).toBe('Error'); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders wrapper with an error status', () => { | ||
| const element = wrapField({}, <div />); | ||
| const wrapper = mount(element); | ||
|
|
||
| expect(wrapper.find(Form.Item).prop('validateStatus')).toBe(undefined); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders wrapper with an error status (error)', () => { | ||
| const error = new Error(); | ||
| const element = wrapField({ error }, <div />); | ||
| const wrapper = mount(element); | ||
|
|
||
| expect(wrapper.find(Form.Item).prop('validateStatus')).toBe('error'); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders wrapper with help text', () => { | ||
| const element = wrapField({ help: 'Help' }, <div />); | ||
| const wrapper = mount(element); | ||
|
|
||
| expect(wrapper.find(Form.Item).prop('help')).toBe('Help'); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders wrapper with extra text', () => { | ||
| const element = wrapField({ extra: 'Extra' }, <div />); | ||
| const wrapper = mount(element); | ||
|
|
||
| expect(wrapper.find(Form.Item).prop('extra')).toBe('Extra'); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders wrapper with extra style', () => { | ||
| const element = wrapField({ wrapperStyle: {} }, <div />); | ||
| const wrapper = mount(element); | ||
|
|
||
| expect(wrapper.find(Form.Item).prop('style')).toEqual({}); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders wrapper with a custom validateStatus', () => { | ||
| const element = wrapField({ validateStatus: 'success' }, <div />); | ||
| 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('<wrapField> - renders wrapper with extra style', () => { | ||
| const { container } = renderWithZod({ | ||
| element: wrapField( | ||
| { wrapperStyle: { backgroundColor: 'red' } }, | ||
| <div data-testid="x" />, | ||
| ), | ||
| schema: z.object({}), | ||
| }); | ||
| const element = container.getElementsByClassName('ant-form-item')[0]; | ||
| expect(element?.getAttribute('style')).toBe('background-color: red;'); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders wrapper with label and info', () => { | ||
| renderWithZod({ | ||
| element: wrapField({ label: 'Label', info: 'Info' }, <div />), | ||
| schema: z.object({}), | ||
| }); | ||
| expect(screen.getByRole('img').getAttribute('aria-label')).toBe( | ||
| 'question-circle', | ||
| ); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders wrapper with extra text', () => { | ||
| renderWithZod({ | ||
| element: wrapField({ extra: 'Extra' }, <div data-testid="x" />), | ||
| schema: z.object({}), | ||
| }); | ||
| expect(screen.getByText('Extra')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders wrapper with a custom validateStatus', () => { | ||
| renderWithZod({ | ||
| element: wrapField( | ||
| { validateStatus: 'success' }, | ||
| <div data-testid="x" />, | ||
| ), | ||
| schema: z.object({}), | ||
| }); | ||
| expect( | ||
| screen | ||
| .getByTestId('x') | ||
| .closest('.ant-form-item-has-feedback.ant-form-item-has-success'), | ||
| ).toBeInTheDocument(); | ||
| }); | ||
| }); |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,76 +1,20 @@ | ||
| import { screen } from '@testing-library/react'; | ||
| import React from 'react'; | ||
| import { wrapField } from 'uniforms-bootstrap4'; | ||
|
|
||
| import mount from './_mount'; | ||
|
|
||
| test('<wrapField> - renders wrapper with correct class', () => { | ||
| const element = wrapField({ wrapClassName: 'container' }, <div />); | ||
| const wrapper = mount(element); | ||
|
|
||
| expect(wrapper.find('.container')).toHaveLength(1); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders help block', () => { | ||
| const element = wrapField({ help: 'Hint' }, <div />); | ||
| const wrapper = mount(element); | ||
|
|
||
| expect(wrapper.find('.form-text').text()).toBe('Hint'); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders help block with specified class', () => { | ||
| const element = wrapField( | ||
| { help: 'Hint', helpClassName: 'text-hint' }, | ||
| <div />, | ||
| ); | ||
| const wrapper = mount(element); | ||
|
|
||
| expect(wrapper.find('.form-text.text-hint')).toHaveLength(1); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders error block', () => { | ||
| const error = new Error(); | ||
| const element = wrapField( | ||
| { error, showInlineError: true, errorMessage: 'Error' }, | ||
| <div />, | ||
| ); | ||
| const wrapper = mount(element); | ||
|
|
||
| expect(wrapper.find('.text-danger').text()).toBe('Error'); | ||
| }); | ||
|
|
||
| test('<wrapField> - renders error block (showInlineError=false)', () => { | ||
| const error = new Error(); | ||
| const element = wrapField( | ||
| { error, showInlineError: false, errorMessage: 'Error' }, | ||
| <div />, | ||
| ); | ||
| const wrapper = mount(element); | ||
|
|
||
| expect(wrapper.find('.text-danger')).toHaveLength(0); | ||
| }); | ||
|
|
||
| test('<wrapField> - label has custom class (String)', () => { | ||
| const element = wrapField( | ||
| { | ||
| label: 'A field label', | ||
| labelClassName: 'custom-label-class', | ||
| }, | ||
| <div />, | ||
| ); | ||
| const wrapper = mount(element); | ||
|
|
||
| expect(wrapper.find('label.custom-label-class')).toHaveLength(1); | ||
| }); | ||
|
|
||
| test('<wrapField> - label has custom class (Array[String])', () => { | ||
| const element = wrapField( | ||
| { | ||
| label: 'A field label', | ||
| labelClassName: ['custom-1', 'custom-2'], | ||
| }, | ||
| <div />, | ||
| ); | ||
| 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('<wrapField> - renders wrapper with correct class', () => { | ||
| renderWithZod({ | ||
| element: wrapField( | ||
| { wrapClassName: 'container' }, | ||
| <div data-testid="x" />, | ||
| ), | ||
| schema: z.object({}), | ||
| }); | ||
| expect( | ||
| screen.getByTestId('x').parentElement?.classList.contains('container'), | ||
| ).toBe(true); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.