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

Migrated ShortUrlCreationSetting test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-05-02 09:48:49 +02:00
parent 8edb3dc923
commit 8b091a7b23
1 changed files with 58 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
test/settings/ShortUrlCreationSettings.test.tsx
View file

@ -1,38 +1,40 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { fireEvent, render, screen } from '@testing-library/react';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { DropdownItem } from 'reactstrap';
import { ShortUrlCreationSettings as ShortUrlsSettings, Settings } from '../../src/settings/reducers/settings'; import { ShortUrlCreationSettings as ShortUrlsSettings, Settings } from '../../src/settings/reducers/settings';
import { ShortUrlCreationSettings } from '../../src/settings/ShortUrlCreationSettings'; 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('<ShortUrlCreationSettings />', () => { describe('<ShortUrlCreationSettings />', () => {
let wrapper: ShallowWrapper;
const setShortUrlCreationSettings = jest.fn(); const setShortUrlCreationSettings = jest.fn();
const createWrapper = (shortUrlCreation?: ShortUrlsSettings) => { const setUp = (shortUrlCreation?: ShortUrlsSettings) => render(
wrapper = shallow( <ShortUrlCreationSettings
<ShortUrlCreationSettings settings={Mock.of<Settings>({ shortUrlCreation })}
settings={Mock.of<Settings>({ shortUrlCreation })} setShortUrlCreationSettings={setShortUrlCreationSettings}
setShortUrlCreationSettings={setShortUrlCreationSettings} />,
/>, );
);
return wrapper;
};
afterEach(() => wrapper?.unmount());
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
it.each([ it.each([
[{ validateUrls: true }, true], [{ validateUrls: true }, true],
[{ validateUrls: false }, false], [{ validateUrls: false }, false],
[undefined, false], [undefined, false],
])('URL validation switch is toggled if option is true', (shortUrlCreation, expectedChecked) => { ])('URL validation switch has proper initial state', (shortUrlCreation, expectedChecked) => {
const wrapper = createWrapper(shortUrlCreation); const matcher = /^Request validation on long URLs when creating new short URLs/;
const urlValidationToggle = wrapper.find(ToggleSwitch).first();
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([ it.each([
@ -40,32 +42,22 @@ describe('<ShortUrlCreationSettings />', () => {
[{ forwardQuery: false }, false], [{ forwardQuery: false }, false],
[{}, true], [{}, true],
])('forward query switch is toggled if option is true', (shortUrlCreation, expectedChecked) => { ])('forward query switch is toggled if option is true', (shortUrlCreation, expectedChecked) => {
const wrapper = createWrapper({ validateUrls: true, ...shortUrlCreation }); const matcher = /^Make all new short URLs forward their query params to the long URL/;
const forwardQueryToggle = wrapper.find(ToggleSwitch).last();
expect(forwardQueryToggle.prop('checked')).toEqual(expectedChecked); setUp({ validateUrls: true, ...shortUrlCreation });
});
it.each([ const checkbox = screen.getByLabelText(matcher);
[{ validateUrls: true }, '<b>Validate URL</b> checkbox will be <b>checked</b>'], const label = screen.getByText(matcher);
[{ validateUrls: false }, '<b>Validate URL</b> checkbox will be <b>unchecked</b>'],
[undefined, '<b>Validate URL</b> checkbox will be <b>unchecked</b>'],
])('shows expected helper text for URL validation', (shortUrlCreation, expectedText) => {
const wrapper = createWrapper(shortUrlCreation);
const validateUrlText = wrapper.find(FormText).first();
expect(validateUrlText.html()).toContain(expectedText); if (expectedChecked) {
}); expect(checkbox).toBeChecked();
expect(label).toHaveTextContent('Forward query params on redirect checkbox will be checked');
it.each([ expect(label).not.toHaveTextContent('Forward query params on redirect checkbox will be unchecked');
[{ forwardQuery: true }, '<b>Forward query params on redirect</b> checkbox will be <b>checked</b>'], } else {
[{ forwardQuery: false }, '<b>Forward query params on redirect</b> checkbox will be <b>unchecked</b>'], expect(checkbox).not.toBeChecked();
[{}, '<b>Forward query params on redirect</b> checkbox will be <b>checked</b>'], expect(label).toHaveTextContent('Forward query params on redirect checkbox will be unchecked');
])('shows expected helper text for query forwarding', (shortUrlCreation, expectedText) => { expect(label).not.toHaveTextContent('Forward query params on redirect checkbox will be checked');
const wrapper = createWrapper({ validateUrls: true, ...shortUrlCreation }); }
const forwardQueryText = wrapper.find(FormText).at(1);
expect(forwardQueryText.html()).toContain(expectedText);
}); });
it.each([ it.each([
@ -77,47 +69,46 @@ describe('<ShortUrlCreationSettings />', () => {
], ],
[undefined, 'Suggest tags starting with input', 'starting with'], [undefined, 'Suggest tags starting with input', 'starting with'],
])('shows expected texts for tags suggestions', (shortUrlCreation, expectedText, expectedHint) => { ])('shows expected texts for tags suggestions', (shortUrlCreation, expectedText, expectedHint) => {
const wrapper = createWrapper(shortUrlCreation); setUp(shortUrlCreation);
const hintText = wrapper.find(FormText).last();
const dropdown = wrapper.find(DropdownBtn);
expect(dropdown.prop('text')).toEqual(expectedText); expect(screen.getByRole('button', { name: expectedText })).toBeInTheDocument();
expect(hintText.html()).toContain(expectedHint); 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) => { it.each([[true], [false]])('invokes setShortUrlCreationSettings when URL validation toggle value changes', (validateUrls) => {
const wrapper = createWrapper(); setUp({ validateUrls });
const urlValidationToggle = wrapper.find(ToggleSwitch).first();
expect(setShortUrlCreationSettings).not.toHaveBeenCalled(); expect(setShortUrlCreationSettings).not.toHaveBeenCalled();
urlValidationToggle.simulate('change', validateUrls); fireEvent.click(screen.getByLabelText(/^Request validation on long URLs when creating new short URLs/));
expect(setShortUrlCreationSettings).toHaveBeenCalledWith({ validateUrls }); expect(setShortUrlCreationSettings).toHaveBeenCalledWith({ validateUrls: !validateUrls });
}); });
it.each([[true], [false]])('invokes setShortUrlCreationSettings when forward query toggle value changes', (forwardQuery) => { it.each([[true], [false]])('invokes setShortUrlCreationSettings when forward query toggle value changes', (forwardQuery) => {
const wrapper = createWrapper(); setUp({ validateUrls: true, forwardQuery });
const urlValidationToggle = wrapper.find(ToggleSwitch).last();
expect(setShortUrlCreationSettings).not.toHaveBeenCalled(); expect(setShortUrlCreationSettings).not.toHaveBeenCalled();
urlValidationToggle.simulate('change', forwardQuery); fireEvent.click(screen.getByLabelText(/^Make all new short URLs forward their query params to the long URL/));
expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining({ forwardQuery })); expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining({ forwardQuery: !forwardQuery }));
}); });
it('invokes setShortUrlCreationSettings when dropdown value changes', () => { it('invokes setShortUrlCreationSettings when dropdown value changes', async () => {
const wrapper = createWrapper(); setUp();
const firstDropdownItem = wrapper.find(DropdownItem).first();
const secondDropdownItem = wrapper.find(DropdownItem).last(); 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(); expect(setShortUrlCreationSettings).not.toHaveBeenCalled();
firstDropdownItem.simulate('click'); await clickItem('Suggest tags including input');
expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining(
{ tagFilteringMode: 'startsWith' },
));
secondDropdownItem.simulate('click');
expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining( expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining(
{ tagFilteringMode: 'includes' }, { tagFilteringMode: 'includes' },
)); ));
await clickItem('Suggest tags starting with input');
expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining(
{ tagFilteringMode: 'startsWith' },
));
}); });
}); });