From 88f41b0b755dac8dcdf4d855a99751136ad50743 Mon Sep 17 00:00:00 2001 From: regexowl Date: Fri, 14 Mar 2025 08:42:14 +0100 Subject: [PATCH] Wizard: Disable "No results found" options The "No results found for " options were previously enabled, but ignored upon click. This disables them properly and adds tests to check if they're disabled. --- .../Locale/components/KeyboardDropDown.tsx | 19 ++++++----- .../Locale/components/LanguagesDropDown.tsx | 33 ++++++++++--------- .../Timezone/components/TimezoneDropDown.tsx | 19 ++++++----- .../steps/Locale/Locale.test.tsx | 30 +++++++++++++---- .../steps/Timezone/Timezone.test.tsx | 18 ++++++++++ 5 files changed, 82 insertions(+), 37 deletions(-) diff --git a/src/Components/CreateImageWizard/steps/Locale/components/KeyboardDropDown.tsx b/src/Components/CreateImageWizard/steps/Locale/components/KeyboardDropDown.tsx index 4709181b..61fbc135 100644 --- a/src/Components/CreateImageWizard/steps/Locale/components/KeyboardDropDown.tsx +++ b/src/Components/CreateImageWizard/steps/Locale/components/KeyboardDropDown.tsx @@ -44,9 +44,6 @@ const KeyboardDropDown = () => { filteredKeyboards = keyboardsList.filter((keyboard: string) => String(keyboard).toLowerCase().includes(filterValue.toLowerCase()) ); - if (!filteredKeyboards.length) { - filteredKeyboards = [`No results found for "${filterValue}"`]; - } if (!isOpen) { setIsOpen(true); } @@ -73,7 +70,7 @@ const KeyboardDropDown = () => { }; const onSelect = (_event: React.MouseEvent, value: string) => { - if (value && !value.includes('No results')) { + if (value) { setInputValue(value); setFilterValue(''); setErrorText(''); @@ -147,11 +144,17 @@ const KeyboardDropDown = () => { shouldFocusFirstItemOnOpen={false} > - {selectOptions.map((option) => ( - - {option} + {selectOptions.length > 0 ? ( + selectOptions.map((option) => ( + + {option} + + )) + ) : ( + + {`No results found for "${filterValue}"`} - ))} + )} {errorText && ( diff --git a/src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx b/src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx index df3c7cde..3ea2e2a2 100644 --- a/src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx +++ b/src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx @@ -49,9 +49,6 @@ const LanguagesDropDown = () => { filteredLanguages = languagesList.filter((language: string) => String(language).toLowerCase().includes(filterValue.toLowerCase()) ); - if (!filteredLanguages.length) { - filteredLanguages = [`No results found for "${filterValue}"`]; - } if (!isOpen) { setIsOpen(true); } @@ -78,7 +75,7 @@ const LanguagesDropDown = () => { }; const onSelect = (_event: React.MouseEvent, value: string) => { - if (value && !value.includes('No results')) { + if (value) { setInputValue(''); setFilterValue(''); dispatch(addLanguage(value)); @@ -151,18 +148,24 @@ const LanguagesDropDown = () => { shouldFocusFirstItemOnOpen={false} > - {selectOptions.map((option) => ( - - {option} + {selectOptions.length > 0 ? ( + selectOptions.map((option) => ( + + {option} + + )) + ) : ( + + {`No results found for "${filterValue}"`} - ))} + )} {unknownLanguages.length > 0 && ( diff --git a/src/Components/CreateImageWizard/steps/Timezone/components/TimezoneDropDown.tsx b/src/Components/CreateImageWizard/steps/Timezone/components/TimezoneDropDown.tsx index 0556607e..be7aec50 100644 --- a/src/Components/CreateImageWizard/steps/Timezone/components/TimezoneDropDown.tsx +++ b/src/Components/CreateImageWizard/steps/Timezone/components/TimezoneDropDown.tsx @@ -43,9 +43,6 @@ const TimezoneDropDown = () => { filteredTimezones = timezones.filter((timezone: string) => String(timezone).toLowerCase().includes(filterValue.toLowerCase()) ); - if (!filteredTimezones.length) { - filteredTimezones = [`No results found for "${filterValue}"`]; - } if (!isOpen) { setIsOpen(true); } @@ -70,7 +67,7 @@ const TimezoneDropDown = () => { }; const onSelect = (_event: React.MouseEvent, value: string) => { - if (value && !value.includes('No results')) { + if (value) { setInputValue(value); setFilterValue(''); setErrorText(''); @@ -144,11 +141,17 @@ const TimezoneDropDown = () => { shouldFocusFirstItemOnOpen={false} > - {selectOptions.map((option) => ( - - {option} + {selectOptions.length > 0 ? ( + selectOptions.map((option) => ( + + {option} + + )) + ) : ( + + {`No results found for "${filterValue}"`} - ))} + )} {errorText && ( diff --git a/src/test/Components/CreateImageWizard/steps/Locale/Locale.test.tsx b/src/test/Components/CreateImageWizard/steps/Locale/Locale.test.tsx index bad437de..877f88ff 100644 --- a/src/test/Components/CreateImageWizard/steps/Locale/Locale.test.tsx +++ b/src/test/Components/CreateImageWizard/steps/Locale/Locale.test.tsx @@ -76,12 +76,12 @@ const selectLanguages = async () => { await waitFor(() => user.click(enOption)); }; -const searchForKeyboard = async () => { +const searchForKeyboard = async (keyboard: string) => { const user = userEvent.setup(); const keyboardDropdown = await screen.findByPlaceholderText( /select a keyboard/i ); - await waitFor(() => user.type(keyboardDropdown, 'us')); + await waitFor(() => user.type(keyboardDropdown, keyboard)); }; const selectKeyboard = async () => { @@ -145,17 +145,35 @@ describe('Step Locale', () => { test('keyboard search results get sorted correctly', async () => { await renderCreateMode(); await goToLocaleStep(); - await searchForKeyboard(); + await searchForKeyboard('us'); const options = await screen.findAllByRole('option'); expect(options[0]).toHaveTextContent('us'); expect(options[1]).toHaveTextContent('us-acentos'); expect(options[2]).toHaveTextContent('us-alt-intl'); }); + test('unknown option is disabled', async () => { + await renderCreateMode(); + await goToLocaleStep(); + + await searchForLanguage('foo'); + await screen.findByText(/no results found/i); + expect( + await screen.findByRole('option', { name: /no results found/i }) + ).toBeDisabled(); + await clearLanguageSearch(); + + await searchForKeyboard('foo'); + await screen.findByText(/no results found/i); + expect( + await screen.findByRole('option', { name: /no results found/i }) + ).toBeDisabled(); + }); + test('revisit step button on Review works', async () => { await renderCreateMode(); await goToLocaleStep(); - await searchForKeyboard(); + await searchForKeyboard('us'); await selectKeyboard(); await goToReviewStep(); await clickRevisitButton(); @@ -191,7 +209,7 @@ describe('Locale request generated correctly', () => { test('with keyboard selected', async () => { await renderCreateMode(); await goToLocaleStep(); - await searchForKeyboard(); + await searchForKeyboard('us'); await selectKeyboard(); await goToReviewStep(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); @@ -214,7 +232,7 @@ describe('Locale request generated correctly', () => { await renderCreateMode(); await goToLocaleStep(); await selectLanguages(); - await searchForKeyboard(); + await searchForKeyboard('us'); await selectKeyboard(); await goToReviewStep(); const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT); diff --git a/src/test/Components/CreateImageWizard/steps/Timezone/Timezone.test.tsx b/src/test/Components/CreateImageWizard/steps/Timezone/Timezone.test.tsx index 563a2253..fe5494a7 100644 --- a/src/test/Components/CreateImageWizard/steps/Timezone/Timezone.test.tsx +++ b/src/test/Components/CreateImageWizard/steps/Timezone/Timezone.test.tsx @@ -59,6 +59,14 @@ const selectTimezone = async () => { await waitFor(() => user.click(amsterdamTimezone)); }; +const searchForUnknownTimezone = async () => { + const user = userEvent.setup(); + const timezoneDropdown = await screen.findByPlaceholderText( + /select a timezone/i + ); + await waitFor(() => user.type(timezoneDropdown, 'foo')); +}; + const addNtpServerViaKeyDown = async (ntpServer: string) => { const user = userEvent.setup(); const ntpServersInput = await screen.findByPlaceholderText( @@ -124,6 +132,16 @@ describe('Step Timezone', () => { await verifyCancelButton(router); }); + test('unknown option is disabled', async () => { + await renderCreateMode(); + await goToTimezoneStep(); + await searchForUnknownTimezone(); + await screen.findByText(/no results found/i); + expect( + await screen.findByRole('option', { name: /no results found/i }) + ).toBeDisabled(); + }); + test('duplicate NTP server cannnot be added', async () => { await renderCreateMode(); await goToTimezoneStep();