diff --git a/src/domains/helpers/EditDomainRedirectsModal.tsx b/src/domains/helpers/EditDomainRedirectsModal.tsx index 2706a210..0bc86bf8 100644 --- a/src/domains/helpers/EditDomainRedirectsModal.tsx +++ b/src/domains/helpers/EditDomainRedirectsModal.tsx @@ -38,7 +38,7 @@ export const EditDomainRedirectsModal: FC = ( return ( -
+ Edit redirects for {domain.domain} diff --git a/test/domains/helpers/EditDomainRedirectsModal.test.tsx b/test/domains/helpers/EditDomainRedirectsModal.test.tsx index 067f5f3b..3fc7205a 100644 --- a/test/domains/helpers/EditDomainRedirectsModal.test.tsx +++ b/test/domains/helpers/EditDomainRedirectsModal.test.tsx @@ -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('', () => { - let wrapper: ShallowWrapper; const editDomainRedirects = jest.fn().mockResolvedValue(undefined); const toggle = jest.fn(); const domain = Mock.of({ @@ -15,81 +13,67 @@ describe('', () => { baseUrlRedirect: 'baz', }, }); - - beforeEach(() => { - wrapper = shallow( + const setUp = () => ({ + user: userEvent.setup(), + ...render( , - ); + ), }); 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, - }); + })); }); });