matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert old tests to use "react-testing-library"

Browse Source
This commit is contained in:
Justin
2022-04-04 11:53:47 -04:00
parent 9a099b3fa7
commit ed47cf5f09
71 changed files with 411 additions and 1515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/soapbox/components/ui/form-group/__tests__/form-group.test.js
View File

@ -1,61 +0,0 @@
import React from 'react';
import { createShallowComponent } from 'soapbox/test_helpers';
jest.mock('uuid', () => ({
...jest.requireActual('uuid'),
}));
import FormGroup from '../form-group';
describe('<FormGroup />', () => {
it('connects the label and input', () => {
const component = createShallowComponent(
<FormGroup labelText='My label'>
<input type='text' />
</FormGroup>,
);
const otherComponent = createShallowComponent(
<FormGroup labelText='My other label'>
<input type='text' />
</FormGroup>,
);
const inputId = component.find('input').at(0).prop('id');
const labelId = component.find('label').at(0).prop('htmlFor');
expect(inputId).toBe(labelId);
const otherInputId = otherComponent.find('input').at(0).prop('id');
expect(otherInputId).not.toBe(inputId);
});
it('renders errors', () => {
const component = createShallowComponent(
<FormGroup labelText='My label' errors={['is invalid', 'is required']}>
<input type='text' />
</FormGroup>,
);
expect(component.text()).toContain('is invalid, is required');
});
it('renders label', () => {
const component = createShallowComponent(
<FormGroup labelText='My label'>
<input type='text' />
</FormGroup>,
);
expect(component.text()).toContain('My label');
});
it('renders hint', () => {
const component = createShallowComponent(
<FormGroup labelText='My label' hintText='My hint'>
<input type='text' />
</FormGroup>,
);
expect(component.text()).toContain('My hint');
});
});

60
app/soapbox/components/ui/form-group/__tests__/form-group.test.tsx Normal file
View File

@ -0,0 +1,60 @@
import React from 'react';
import { render, screen } from '../../../../jest/test-helpers';
import FormGroup from '../form-group';
jest.mock('uuid', () => jest.requireActual('uuid'));
describe('<FormGroup />', () => {
it('connects the label and input', () => {
render(
<>
<div>
<FormGroup labelText='My label'>
<input type='text' data-testid='winner' />
</FormGroup>
</div>
<div>
<FormGroup labelText='My other label'>
<input type='text' />
</FormGroup>
</div>
</>,
);
expect(screen.getByLabelText('My label')).toHaveAttribute('data-testid');
expect(screen.getByLabelText('My other label')).not.toHaveAttribute('data-testid');
expect(screen.queryByTestId('form-group-error')).not.toBeInTheDocument();
});
it('renders errors', () => {
render(
<FormGroup labelText='My label' errors={['is invalid', 'is required']}>
<input type='text' />
</FormGroup>,
);
expect(screen.getByTestId('form-group-error')).toHaveTextContent('is invalid');
});
it('renders label', () => {
render(
<FormGroup labelText='My label'>
<input type='text' />
</FormGroup>,
);
expect(screen.getByTestId('form-group-label')).toHaveTextContent('My label');
});
it('renders hint', () => {
render(
<FormGroup labelText='My label' hintText='My hint'>
<input type='text' />
</FormGroup>,
);
expect(screen.getByTestId('form-group-hint')).toHaveTextContent('My hint');
});
});

8
app/soapbox/components/ui/form-group/form-group.tsx
View File

@ -24,6 +24,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
<div>
<label
htmlFor={formFieldId}
data-testid='form-group-label'
className='block text-sm font-medium text-gray-700 dark:text-gray-400'
>
{labelText}
@ -34,13 +35,16 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
{inputChildren.filter((_, i) => i !== 0)}
{errors?.length > 0 && (
<p className='mt-0.5 text-xs text-danger-900 bg-danger-200 rounded-md inline-block px-2 py-1 relative form-error'>
<p
data-testid='form-group-error'
className='mt-0.5 text-xs text-danger-900 bg-danger-200 rounded-md inline-block px-2 py-1 relative form-error'
>
{errors.join(', ')}
</p>
)}
{hintText ? (
<p className='mt-0.5 text-xs text-gray-400'>
<p data-testid='form-group-hint' className='mt-0.5 text-xs text-gray-400'>
{hintText}
</p>
) : null}