particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wizard: Disable "No results found" options

Browse source 
The "No results found for <searchTerm>" options were previously enabled, but ignored upon click. This disables them properly and adds tests to check if they're disabled.
This commit is contained in:
regexowl 2025-03-14 08:42:14 +01:00 • committed by Klara Simickova
parent fbc0ea13e6
commit 88f41b0b75
5 changed files with 82 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/Components/CreateImageWizard/steps/Locale/components/KeyboardDropDown.tsx
View file

@ -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}
>
<SelectList>
{selectOptions.map((option) => (
<SelectOption key={option} value={option}>
{option}
{selectOptions.length > 0 ? (
selectOptions.map((option) => (
<SelectOption key={option} value={option}>
{option}
</SelectOption>
))
) : (
<SelectOption isDisabled>
{`No results found for "${filterValue}"`}
</SelectOption>
))}
)}
</SelectList>
</Select>
{errorText && (

33
src/Components/CreateImageWizard/steps/Locale/components/LanguagesDropDown.tsx
View file

@ -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}
>
<SelectList>
{selectOptions.map((option) => (
<SelectOption
key={option}
value={option}
isDisabled={languages?.includes(option) || false}
description={
languages?.includes(option) && 'Language already added'
}
>
{option}
{selectOptions.length > 0 ? (
selectOptions.map((option) => (
<SelectOption
key={option}
value={option}
isDisabled={languages?.includes(option) || false}
description={
languages?.includes(option) && 'Language already added'
}
>
{option}
</SelectOption>
))
) : (
<SelectOption isDisabled>
{`No results found for "${filterValue}"`}
</SelectOption>
))}
)}
</SelectList>
</Select>
{unknownLanguages.length > 0 && (

19
src/Components/CreateImageWizard/steps/Timezone/components/TimezoneDropDown.tsx
View file

@ -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}
>
<SelectList>
{selectOptions.map((option) => (
<SelectOption key={option} value={option}>
{option}
{selectOptions.length > 0 ? (
selectOptions.map((option) => (
<SelectOption key={option} value={option}>
{option}
</SelectOption>
))
) : (
<SelectOption isDisabled>
{`No results found for "${filterValue}"`}
</SelectOption>
))}
)}
</SelectList>
</Select>
{errorText && (

30
src/test/Components/CreateImageWizard/steps/Locale/Locale.test.tsx
View file

@ -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);

18
src/test/Components/CreateImageWizard/steps/Timezone/Timezone.test.tsx
View file

@ -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();