mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated EditDomainRedirectsModal to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-05-17 22:18:01 +02:00
parent 33adb08105
commit e53f90fc5c
2 changed files with 36 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/domains/helpers/EditDomainRedirectsModal.tsx
View file

@ -38,7 +38,7 @@ export const EditDomainRedirectsModal: FC<EditDomainRedirectsModalProps> = (
return (
<Modal isOpen={isOpen} toggle={toggle} centered>
<form onSubmit={handleSubmit}>
<form name="domainRedirectsModal" onSubmit={handleSubmit}>
<ModalHeader toggle={toggle}>Edit redirects for <b>{domain.domain}</b></ModalHeader>
<ModalBody>
<FormGroup value={baseUrlRedirect} onChange={setBaseUrlRedirect}>

86
test/domains/helpers/EditDomainRedirectsModal.test.tsx
View file

@ -1,12 +1,10 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Mock } from 'ts-mockery';
import { Button, ModalHeader } from 'reactstrap';
import { ShlinkDomain } from '../../../src/api/types';
import { EditDomainRedirectsModal } from '../../../src/domains/helpers/EditDomainRedirectsModal';
import { InfoTooltip } from '../../../src/utils/InfoTooltip';
describe('<EditDomainRedirectsModal />', () => {
let wrapper: ShallowWrapper;
const editDomainRedirects = jest.fn().mockResolvedValue(undefined);
const toggle = jest.fn();
const domain = Mock.of<ShlinkDomain>({
@ -15,81 +13,67 @@ describe('<EditDomainRedirectsModal />', () => {
baseUrlRedirect: 'baz',
},
});
beforeEach(() => {
wrapper = shallow(
const setUp = () => ({
user: userEvent.setup(),
...render(
<EditDomainRedirectsModal domain={domain} isOpen toggle={toggle} editDomainRedirects={editDomainRedirects} />,
);
),
});
afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders domain in header', () => {
const header = wrapper.find(ModalHeader);
expect(header.html()).toContain('foo.com');
setUp();
expect(screen.getByRole('heading')).toHaveTextContent('Edit redirects for foo.com');
});
it('expected amount of form groups and tooltips', () => {
const formGroups = wrapper.find('FormGroup');
const tooltips = wrapper.find(InfoTooltip);
it('has different handlers to toggle the modal', async () => {
const { user } = setUp();
expect(formGroups).toHaveLength(3);
expect(tooltips).toHaveLength(3);
});
it('has different handlers to toggle the modal', () => {
expect(toggle).not.toHaveBeenCalled();
(wrapper.prop('toggle') as Function)();
(wrapper.find(ModalHeader).prop('toggle') as Function)();
wrapper.find(Button).first().simulate('click');
expect(toggle).toHaveBeenCalledTimes(3);
await user.click(screen.getByLabelText('Close'));
await user.click(screen.getByRole('button', { name: 'Cancel' }));
expect(toggle).toHaveBeenCalledTimes(2);
});
it('saves expected values when form is submitted', () => {
const formGroups = wrapper.find('FormGroup');
it('saves expected values when form is submitted', async () => {
const { user } = setUp();
// TODO Using fire event because userEvent.click on the Submit button does not submit the form
const submitForm = () => fireEvent.submit(screen.getByRole('form'));
expect(editDomainRedirects).not.toHaveBeenCalled();
wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
submitForm();
await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
baseUrlRedirect: 'baz',
regular404Redirect: null,
invalidShortUrlRedirect: null,
});
}));
formGroups.at(0).simulate('change', 'new_base_url');
formGroups.at(2).simulate('change', 'new_invalid_short_url');
wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
await user.clear(screen.getByDisplayValue('baz'));
await user.type(screen.getAllByPlaceholderText('No redirect')[0], 'new_base_url');
await user.type(screen.getAllByPlaceholderText('No redirect')[2], 'new_invalid_short_url');
submitForm();
await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
baseUrlRedirect: 'new_base_url',
regular404Redirect: null,
invalidShortUrlRedirect: 'new_invalid_short_url',
});
}));
formGroups.at(1).simulate('change', 'new_regular_404');
formGroups.at(2).simulate('change', '');
wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
await user.type(screen.getAllByPlaceholderText('No redirect')[1], 'new_regular_404');
await user.clear(screen.getByDisplayValue('new_invalid_short_url'));
submitForm();
await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
baseUrlRedirect: 'new_base_url',
regular404Redirect: 'new_regular_404',
invalidShortUrlRedirect: null,
});
}));
formGroups.at(0).simulate('change', '');
formGroups.at(1).simulate('change', '');
formGroups.at(2).simulate('change', '');
wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
await Promise.all(screen.getAllByPlaceholderText('No redirect').map((element) => user.clear(element)));
submitForm();
await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
baseUrlRedirect: null,
regular404Redirect: null,
invalidShortUrlRedirect: null,
});
}));
});
});