From 1bf35697743119129fb7141168c40a71f76393a1 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Wed, 13 Oct 2021 23:10:22 +0200 Subject: [PATCH] Allowed to customize initial state for forward query --- src/settings/ShortUrlCreation.tsx | 20 ++++++++-- src/settings/reducers/settings.ts | 1 + src/short-urls/CreateShortUrl.tsx | 2 +- test/settings/ShortUrlCreation.test.tsx | 51 ++++++++++++++++++++----- 4 files changed, 59 insertions(+), 15 deletions(-) diff --git a/src/settings/ShortUrlCreation.tsx b/src/settings/ShortUrlCreation.tsx index 2caaa329..53814d71 100644 --- a/src/settings/ShortUrlCreation.tsx +++ b/src/settings/ShortUrlCreation.tsx @@ -14,8 +14,8 @@ const tagFilteringModeText = (tagFilteringMode: TagFilteringMode | undefined): s tagFilteringMode === 'includes' ? 'Suggest tags including input' : 'Suggest tags starting with input'; const tagFilteringModeHint = (tagFilteringMode: TagFilteringMode | undefined): ReactNode => tagFilteringMode === 'includes' - ? <>The list of suggested tags will contain existing ones including provided input. - : <>The list of suggested tags will contain existing ones starting with provided input.; + ? <>The list of suggested tags will contain those including provided input. + : <>The list of suggested tags will contain those starting with provided input.; export const ShortUrlCreation: FC = ({ settings, setShortUrlCreationSettings }) => { const shortUrlCreation: ShortUrlCreationSettings = settings.shortUrlCreation ?? { validateUrls: false }; @@ -24,19 +24,31 @@ export const ShortUrlCreation: FC = ({ settings, setShort ); return ( - + setShortUrlCreationSettings({ ...shortUrlCreation, validateUrls })} > - By default, request validation on long URLs when creating new short URLs. + Request validation on long URLs when creating new short URLs. The initial state of the Validate URL checkbox will be {shortUrlCreation.validateUrls ? 'checked' : 'unchecked'}. + + setShortUrlCreationSettings({ ...shortUrlCreation, forwardQuery })} + > + Make all new short URLs forward their query params to the long URL. + + The initial state of the Forward query params on redirect checkbox will + be {shortUrlCreation.forwardQuery ?? true ? 'checked' : 'unchecked'}. + + + diff --git a/src/settings/reducers/settings.ts b/src/settings/reducers/settings.ts index 3fb0ca3d..6b0079d2 100644 --- a/src/settings/reducers/settings.ts +++ b/src/settings/reducers/settings.ts @@ -22,6 +22,7 @@ export type TagFilteringMode = 'startsWith' | 'includes'; export interface ShortUrlCreationSettings { validateUrls: boolean; tagFilteringMode?: TagFilteringMode; + forwardQuery?: boolean; } export type TagsMode = 'cards' | 'list'; diff --git a/src/short-urls/CreateShortUrl.tsx b/src/short-urls/CreateShortUrl.tsx index aa98109e..a13daab8 100644 --- a/src/short-urls/CreateShortUrl.tsx +++ b/src/short-urls/CreateShortUrl.tsx @@ -30,7 +30,7 @@ const getInitialState = (settings?: ShortUrlCreationSettings): ShortUrlData => ( maxVisits: undefined, findIfExists: false, validateUrl: settings?.validateUrls ?? false, - forwardQuery: true, + forwardQuery: settings?.forwardQuery ?? true, }); const CreateShortUrl = (ShortUrlForm: FC, CreateShortUrlResult: FC) => ({ diff --git a/test/settings/ShortUrlCreation.test.tsx b/test/settings/ShortUrlCreation.test.tsx index 3a61f5dd..fda31fdb 100644 --- a/test/settings/ShortUrlCreation.test.tsx +++ b/test/settings/ShortUrlCreation.test.tsx @@ -29,20 +29,42 @@ describe('', () => { [ undefined, false ], ])('URL validation switch is toggled if option is true', (shortUrlCreation, expectedChecked) => { const wrapper = createWrapper(shortUrlCreation); - const toggle = wrapper.find(ToggleSwitch); + const urlValidationToggle = wrapper.find(ToggleSwitch).first(); - expect(toggle.prop('checked')).toEqual(expectedChecked); + expect(urlValidationToggle.prop('checked')).toEqual(expectedChecked); }); it.each([ - [{ validateUrls: true }, 'checkbox will be checked' ], - [{ validateUrls: false }, 'checkbox will be unchecked' ], - [ undefined, 'checkbox will be unchecked' ], + [{ forwardQuery: true }, true ], + [{ 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(); + + expect(forwardQueryToggle.prop('checked')).toEqual(expectedChecked); + }); + + 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 text = wrapper.find('.form-text').first(); + const validateUrlText = wrapper.find('.form-text').first(); - expect(text.text()).toContain(expectedText); + expect(validateUrlText.text()).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('.form-text').at(1); + + expect(forwardQueryText.text()).toContain(expectedText); }); it.each([ @@ -62,15 +84,24 @@ describe('', () => { expect(hintText.text()).toContain(expectedHint); }); - it.each([[ true ], [ false ]])('invokes setShortUrlCreationSettings when toggle value changes', (validateUrls) => { + it.each([[ true ], [ false ]])('invokes setShortUrlCreationSettings when URL validation toggle value changes', (validateUrls) => { const wrapper = createWrapper(); - const toggle = wrapper.find(ToggleSwitch); + const urlValidationToggle = wrapper.find(ToggleSwitch).first(); expect(setShortUrlCreationSettings).not.toHaveBeenCalled(); - toggle.simulate('change', validateUrls); + urlValidationToggle.simulate('change', validateUrls); expect(setShortUrlCreationSettings).toHaveBeenCalledWith({ validateUrls }); }); + it.each([[ true ], [ false ]])('invokes setShortUrlCreationSettings when forward query toggle value changes', (forwardQuery) => { + const wrapper = createWrapper(); + const urlValidationToggle = wrapper.find(ToggleSwitch).last(); + + expect(setShortUrlCreationSettings).not.toHaveBeenCalled(); + urlValidationToggle.simulate('change', forwardQuery); + expect(setShortUrlCreationSettings).toHaveBeenCalledWith(expect.objectContaining({ forwardQuery })); + }); + it('invokes setShortUrlCreationSettings when dropdown value changes', () => { const wrapper = createWrapper(); const firstDropdownItem = wrapper.find(DropdownItem).first();