Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wizard: Reset error text and validate on plus button (HMS-5329) #2747

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Wizard: Reset error text and validate on plus button (HMS-5329) #2747

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b0e63f8
Wizard: Reset error text and validate on plus button
regexowl Jan 14, 2025
e6a42e5
test: Test error message reset and validation on add button
regexowl Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 24 additions & 16 deletions src/Components/CreateImageWizard/ChippingInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,31 +44,39 @@ const ChippingInput = ({
value: string
) => {
setInputValue(value);
setErrorText('');
};

const handleKeyDown = (e: React.KeyboardEvent, value: string) => {
if (e.key === ' ' || e.key === 'Enter' || e.key === ',') {
e.preventDefault();
const addItem = (value: string) => {
if (validator(value) && !list?.includes(value)) {
dispatch(addAction(value));
setInputValue('');
setErrorText('');
}

if (validator(value) && !list?.includes(value)) {
dispatch(addAction(value));
setInputValue('');
setErrorText('');
}
if (list?.includes(value)) {
setErrorText(`${item} already exists.`);
}

if (list?.includes(value)) {
setErrorText(`${item} already exists.`);
}
if (!validator(value)) {
setErrorText('Invalid format.');
}
};

if (!validator(value)) {
setErrorText('Invalid format.');
}
const handleKeyDown = (e: React.KeyboardEvent, value: string) => {
if (e.key === ' ' || e.key === 'Enter' || e.key === ',') {
e.preventDefault();
addItem(value);
}
};

const handleAddItem = (e: React.MouseEvent, value: string) => {
dispatch(addAction(value));
addItem(value);
};

const handleClear = () => {
setInputValue('');
setErrorText('');
};

return (
Expand All @@ -91,7 +99,7 @@ const ChippingInput = ({
</Button>
<Button
variant="plain"
onClick={() => setInputValue('')}
onClick={handleClear}
isDisabled={!inputValue}
aria-label="Clear input"
>
Expand Down
42 changes: 34 additions & 8 deletions src/test/Components/CreateImageWizard/steps/Timezone/Timezone.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,34 @@ const selectTimezone = async () => {
await waitFor(() => user.click(amsterdamTimezone));
};

const addNtpServer = async (ntpServer: string) => {
const addNtpServerViaKeyDown = async (ntpServer: string) => {
const user = userEvent.setup();
const ntpServersInput = await screen.findByPlaceholderText(
/add ntp servers/i
);
await waitFor(() => user.type(ntpServersInput, ntpServer.concat(',')));
};

const addNtpServerViaAddButton = async (ntpServer: string) => {
const user = userEvent.setup();
const ntpServersInput = await screen.findByPlaceholderText(
/add ntp servers/i
);
const addServerBtn = await screen.findByRole('button', {
name: /add ntp server/i,
});
await waitFor(() => user.type(ntpServersInput, ntpServer));
await waitFor(() => user.click(addServerBtn));
};

const clearInput = async () => {
const user = userEvent.setup();
const clearInputBtn = await screen.findByRole('button', {
name: /clear input/i,
});
await waitFor(() => user.click(clearInputBtn));
};

const clickRevisitButton = async () => {
const user = userEvent.setup();
const expandable = await screen.findByTestId('timezone-expandable');
Expand Down Expand Up @@ -109,16 +129,22 @@ describe('Step Timezone', () => {
expect(
screen.queryByText('NTP server already exists.')
).not.toBeInTheDocument();
await addNtpServer('0.nl.pool.ntp.org');
await addNtpServer('0.nl.pool.ntp.org');
await addNtpServerViaKeyDown('0.nl.pool.ntp.org');
await addNtpServerViaKeyDown('0.nl.pool.ntp.org');
await screen.findByText('NTP server already exists.');
await clearInput();
expect(
screen.queryByText('NTP server already exists.')
).not.toBeInTheDocument();
await addNtpServerViaAddButton('0.nl.pool.ntp.org');
await screen.findByText('NTP server already exists.');
});

test('NTP server in an invalid format cannot be added', async () => {
await renderCreateMode();
await goToTimezoneStep();
expect(screen.queryByText('Invalid format.')).not.toBeInTheDocument();
await addNtpServer('this is not NTP server');
await addNtpServerViaKeyDown('this is not NTP server');
await screen.findByText('Invalid format.');
});

Expand Down Expand Up @@ -159,8 +185,8 @@ describe('Timezone request generated correctly', () => {
test('with NTP servers', async () => {
await renderCreateMode();
await goToTimezoneStep();
await addNtpServer('0.nl.pool.ntp.org');
await addNtpServer('1.nl.pool.ntp.org');
await addNtpServerViaKeyDown('0.nl.pool.ntp.org');
await addNtpServerViaKeyDown('1.nl.pool.ntp.org');
await goToReviewStep();
const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);

Expand All @@ -182,8 +208,8 @@ describe('Timezone request generated correctly', () => {
await renderCreateMode();
await goToTimezoneStep();
await selectTimezone();
await addNtpServer('0.nl.pool.ntp.org');
await addNtpServer('1.nl.pool.ntp.org');
await addNtpServerViaKeyDown('0.nl.pool.ntp.org');
await addNtpServerViaKeyDown('1.nl.pool.ntp.org');
await goToReviewStep();
const receivedRequest = await interceptBlueprintRequest(CREATE_BLUEPRINT);

Expand Down
Loading