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');
});
});