From 8b091a7b2348f09c9c6a76be975525a92d7e7c0d Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Mon, 2 May 2022 09:48:49 +0200 Subject: [PATCH] Migrated ShortUrlCreationSetting test to react testing library --- .../ShortUrlCreationSettings.test.tsx | 125 ++++++++---------- 1 file changed, 58 insertions(+), 67 deletions(-) diff --git a/test/settings/ShortUrlCreationSettings.test.tsx b/test/settings/ShortUrlCreationSettings.test.tsx index 519a065f..ac177e42 100644 --- a/test/settings/ShortUrlCreationSettings.test.tsx +++ b/test/settings/ShortUrlCreationSettings.test.tsx @@ -1,38 +1,40 @@ -import { shallow, ShallowWrapper } from 'enzyme'; +import { fireEvent, render, screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; -import { DropdownItem } from 'reactstrap'; import { ShortUrlCreationSettings as ShortUrlsSettings, Settings } from '../../src/settings/reducers/settings'; import { ShortUrlCreationSettings } from '../../src/settings/ShortUrlCreationSettings'; -import { FormText } from '../../src/utils/forms/FormText'; -import ToggleSwitch from '../../src/utils/ToggleSwitch'; -import { DropdownBtn } from '../../src/utils/DropdownBtn'; describe('', () => { - let wrapper: ShallowWrapper; const setShortUrlCreationSettings = jest.fn(); - const createWrapper = (shortUrlCreation?: ShortUrlsSettings) => { - wrapper = shallow( - ({ shortUrlCreation })} - setShortUrlCreationSettings={setShortUrlCreationSettings} - />, - ); + const setUp = (shortUrlCreation?: ShortUrlsSettings) => render( + ({ shortUrlCreation })} + setShortUrlCreationSettings={setShortUrlCreationSettings} + />, + ); - return wrapper; - }; - - afterEach(() => wrapper?.unmount()); afterEach(jest.clearAllMocks); it.each([ [{ validateUrls: true }, true], [{ validateUrls: false }, false], [undefined, false], - ])('URL validation switch is toggled if option is true', (shortUrlCreation, expectedChecked) => { - const wrapper = createWrapper(shortUrlCreation); - const urlValidationToggle = wrapper.find(ToggleSwitch).first(); + ])('URL validation switch has proper initial state', (shortUrlCreation, expectedChecked) => { + const matcher = /^Request validation on long URLs when creating new short URLs/; - expect(urlValidationToggle.prop('checked')).toEqual(expectedChecked); + setUp(shortUrlCreation); + + const checkbox = screen.getByLabelText(matcher); + const label = screen.getByText(matcher); + + if (expectedChecked) { + expect(checkbox).toBeChecked(); + expect(label).toHaveTextContent('Validate URL checkbox will be checked'); + expect(label).not.toHaveTextContent('Validate URL checkbox will be unchecked'); + } else { + expect(checkbox).not.toBeChecked(); + expect(label).toHaveTextContent('Validate URL checkbox will be unchecked'); + expect(label).not.toHaveTextContent('Validate URL checkbox will be checked'); + } }); it.each([ @@ -40,32 +42,22 @@ describe('', () => { [{ forwardQuery: false }, false], [{}, true], ])('forward query switch is toggled if option is true', (shortUrlCreation, expectedChecked) => { - const wrapper = createWrapper({ validateUrls: true, ...shortUrlCreation }); - const forwardQueryToggle = wrapper.find(ToggleSwitch).last(); + const matcher = /^Make all new short URLs forward their query params to the long URL/; - expect(forwardQueryToggle.prop('checked')).toEqual(expectedChecked); - }); + setUp({ validateUrls: true, ...shortUrlCreation }); - it.each([ - [{ validateUrls: true }, 'Validate URL checkbox will be checked'], - [{ validateUrls: false }, 'Validate URL checkbox will be unchecked'], - [undefined, 'Validate URL checkbox will be unchecked'], - ])('shows expected helper text for URL validation', (shortUrlCreation, expectedText) => { - const wrapper = createWrapper(shortUrlCreation); - const validateUrlText = wrapper.find(FormText).first(); + const checkbox = screen.getByLabelText(matcher); + const label = screen.getByText(matcher); - expect(validateUrlText.html()).toContain(expectedText); - }); - - it.each([ - [{ forwardQuery: true }, 'Forward query params on redirect checkbox will be checked'], - [{ forwardQuery: false }, 'Forward query params on redirect checkbox will be unchecked'], - [{}, 'Forward query params on redirect checkbox will be checked'], - ])('shows expected helper text for query forwarding', (shortUrlCreation, expectedText) => { - const wrapper = createWrapper({ validateUrls: true, ...shortUrlCreation }); - const forwardQueryText = wrapper.find(FormText).at(1); - - expect(forwardQueryText.html()).toContain(expectedText); + if (expectedChecked) { + expect(checkbox).toBeChecked(); + expect(label).toHaveTextContent('Forward query params on redirect checkbox will be checked'); + expect(label).not.toHaveTextContent('Forward query params on redirect checkbox will be unchecked'); + } else { + expect(checkbox).not.toBeChecked(); + expect(label).toHaveTextContent('Forward query params on redirect checkbox will be unchecked'); + expect(label).not.toHaveTextContent('Forward query params on redirect checkbox will be checked'); + } }); it.each([ @@ -77,47 +69,46 @@ describe('', () => { ], [undefined, 'Suggest tags starting with input', 'starting with'], ])('shows expected texts for tags suggestions', (shortUrlCreation, expectedText, expectedHint) => { - const wrapper = createWrapper(shortUrlCreation); - const hintText = wrapper.find(FormText).last(); - const dropdown = wrapper.find(DropdownBtn); + setUp(shortUrlCreation); - expect(dropdown.prop('text')).toEqual(expectedText); - expect(hintText.html()).toContain(expectedHint); + expect(screen.getByRole('button', { name: expectedText })).toBeInTheDocument(); + expect(screen.getByText(/^The list of suggested tags will contain those/)).toHaveTextContent(expectedHint); }); it.each([[true], [false]])('invokes setShortUrlCreationSettings when URL validation toggle value changes', (validateUrls) => { - const wrapper = createWrapper(); - const urlValidationToggle = wrapper.find(ToggleSwitch).first(); + setUp({ validateUrls }); expect(setShortUrlCreationSettings).not.toHaveBeenCalled(); - urlValidationToggle.simulate('change', validateUrls); - expect(setShortUrlCreationSettings).toHaveBeenCalledWith({ validateUrls }); + fireEvent.click(screen.getByLabelText(/^Request validation on long URLs when creating new short URLs/)); + expect(setShortUrlCreationSettings).toHaveBeenCalledWith({ validateUrls: !validateUrls }); }); it.each([[true], [false]])('invokes setShortUrlCreationSettings when forward query toggle value changes', (forwardQuery) => { - const wrapper = createWrapper(); - const urlValidationToggle = wrapper.find(ToggleSwitch).last(); + setUp({ validateUrls: true, forwardQuery }); expect(setShortUrlCreationSettings).not.toHaveBeenCalled(); - urlValidationToggle.simulate('change', forwardQuery); - expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining({ forwardQuery })); + fireEvent.click(screen.getByLabelText(/^Make all new short URLs forward their query params to the long URL/)); + expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining({ forwardQuery: !forwardQuery })); }); - it('invokes setShortUrlCreationSettings when dropdown value changes', () => { - const wrapper = createWrapper(); - const firstDropdownItem = wrapper.find(DropdownItem).first(); - const secondDropdownItem = wrapper.find(DropdownItem).last(); + it('invokes setShortUrlCreationSettings when dropdown value changes', async () => { + setUp(); + + const clickItem = async (name: string) => { + fireEvent.click(screen.getByRole('button', { name: 'Suggest tags starting with input' })); + fireEvent.click(await screen.findByRole('menuitem', { name })); + }; expect(setShortUrlCreationSettings).not.toHaveBeenCalled(); - firstDropdownItem.simulate('click'); - expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining( - { tagFilteringMode: 'startsWith' }, - )); - - secondDropdownItem.simulate('click'); + await clickItem('Suggest tags including input'); expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining( { tagFilteringMode: 'includes' }, )); + + await clickItem('Suggest tags starting with input'); + expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining( + { tagFilteringMode: 'startsWith' }, + )); }); });