Skip to content

Commit

Permalink
Test loading messages in pollingstation choice form (#276)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jschuurk-kr
jschuurk-kr authored Aug 22, 2024
1 parent 34db88e commit 53afc53
Show file tree
Hide file tree
Showing 4 changed files with 202 additions and 143 deletions.
333 changes: 194 additions & 139 deletions frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,166 +8,221 @@ import { PollingStationListProvider } from "@kiesraad/api";
import { pollingStationsMockResponse } from "@kiesraad/api-mocks";

describe("Test PollingStationChoiceForm", () => {
test("Form field entry", async () => {
overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationsMockResponse);
const user = userEvent.setup();
describe("Polling station input form", () => {
test("Form field entry", async () => {
overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationsMockResponse);
const user = userEvent.setup();

render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);
render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);

const pollingStation = screen.getByTestId("pollingStation");
const pollingStation = screen.getByTestId("pollingStation");

// Test if the feedback field shows an error
await user.type(pollingStation, "abc");
const pollingStationFeedback = await screen.findByTestId("pollingStationSelectorFeedback");
expect(
within(pollingStationFeedback).getByText("Geen stembureau gevonden met nummer abc"),
).toBeVisible();
// Test if the feedback field shows an error
await user.type(pollingStation, "abc");
const pollingStationFeedback = await screen.findByTestId("pollingStationSelectorFeedback");
expect(
await within(pollingStationFeedback).findByText("Geen stembureau gevonden met nummer abc"),
).toBeVisible();

await user.clear(pollingStation);
await user.clear(pollingStation);

// Test if maxLength on field works
await user.type(pollingStation, "1234567");
expect(pollingStation).toHaveValue("123456");
// Test if maxLength on field works
await user.type(pollingStation, "1234567");
expect(pollingStation).toHaveValue("123456");

await user.clear(pollingStation);
});

test("Selecting a valid polling station", async () => {
overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationsMockResponse);
const user = userEvent.setup();
render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);
const pollingStation = screen.getByTestId("pollingStation");

// Test if the polling station name is shown
await user.type(pollingStation, "33");
const pollingStationFeedback = await screen.findByTestId("pollingStationSelectorFeedback");
expect(within(pollingStationFeedback).getByText('Stembureau "Op Rolletjes"')).toBeVisible();
});

test("Selecting a non-existing polling station", async () => {
overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationsMockResponse);
const user = userEvent.setup();
render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);
const pollingStation = screen.getByTestId("pollingStation");

// Test if the polling station name is shown
await user.type(pollingStation, "99");
const pollingStationFeedback = await screen.findByTestId("pollingStationSelectorFeedback");
expect(
within(pollingStationFeedback).getByText("Geen stembureau gevonden met nummer 99"),
).toBeVisible();
});

test("Polling station list", async () => {
overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationsMockResponse);
const user = userEvent.setup();
await user.clear(pollingStation);
});

render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);
test("Selecting a valid polling station", async () => {
overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationsMockResponse);
const user = userEvent.setup();
render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);
const pollingStation = screen.getByTestId("pollingStation");

// Test if the polling station name is shown
await user.type(pollingStation, "33");
const pollingStationFeedback = await screen.findByTestId("pollingStationSelectorFeedback");
expect(
await within(pollingStationFeedback).findByText('Stembureau "Op Rolletjes"'),
).toBeVisible();
});

expect(screen.getByText("Kies het stembureau")).not.toBeVisible();
const openPollingStationList = screen.getByTestId("openPollingStationList");
await user.click(openPollingStationList);
test("Selecting a non-existing polling station", async () => {
overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationsMockResponse);
const user = userEvent.setup();
render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);
const pollingStation = screen.getByTestId("pollingStation");

// Test if the polling station name is shown
await user.type(pollingStation, "99");
const pollingStationFeedback = await screen.findByTestId("pollingStationSelectorFeedback");
expect(
await within(pollingStationFeedback).findByText("Geen stembureau gevonden met nummer 99"),
).toBeVisible();
});

expect(screen.getByText("Kies het stembureau")).toBeVisible();
test("Submitting an empty or invalid polling station shows alert", async () => {
const user = userEvent.setup();
render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);

const pollingStation = screen.getByTestId("pollingStation");
const submitButton = screen.getByRole("button", { name: "Beginnen" });

await user.click(submitButton);

// Test that an alert is visible
const pollingStationSubmitFeedback = await screen.findByTestId(
"pollingStationSubmitFeedback",
);
expect(
within(pollingStationSubmitFeedback).getByText(
"Voer een geldig nummer van een stembureau in om te beginnen",
),
).toBeVisible();

// Now start typing an invalid polling station number
await user.type(pollingStation, "abc");

// Test that the alert disappeared
expect(pollingStationSubmitFeedback).not.toBeVisible();

// Click submit again and see that the alert appeared again
await user.click(submitButton);

expect(
within(screen.getByTestId("pollingStationSubmitFeedback")).getByText(
"Voer een geldig nummer van een stembureau in om te beginnen",
),
).toBeVisible();
});

// Check if the station number and name exist and are visible
const pollingStationList = screen.getByTestId("polling_station_list");
expect(within(pollingStationList).getByText("33")).toBeVisible();
expect(within(pollingStationList).getByText('Stembureau "Op Rolletjes"')).toBeVisible();
expect(within(pollingStationList).getByText("34")).toBeVisible();
expect(within(pollingStationList).getByText("Testplek")).toBeVisible();
test("Form displays message when searching", async () => {
overrideOnce(
"get",
"/api/elections/1/polling_stations",
200,
pollingStationsMockResponse,
"infinite",
);
const user = userEvent.setup();
render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);
const pollingStation = screen.getByTestId("pollingStation");

await user.type(pollingStation, "33");
const pollingStationSearching = await screen.findByTestId("pollingStationSelectorFeedback");
expect(within(pollingStationSearching).getByText("aan het zoeken …")).toBeVisible();
});
});

test("Polling station list no stations", async () => {
overrideOnce("get", "/api/elections/1/polling_stations", 200, {
polling_stations: [],
describe("Polling station list", () => {
test("Display polling station list", async () => {
overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationsMockResponse);
const user = userEvent.setup();

render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);

expect(screen.getByText("Kies het stembureau")).not.toBeVisible();
const openPollingStationList = screen.getByTestId("openPollingStationList");
await user.click(openPollingStationList);

expect(screen.getByText("Kies het stembureau")).toBeVisible();

// Check if the station number and name exist and are visible
const pollingStationList = screen.getByTestId("polling_station_list");
expect(within(pollingStationList).getByText("33")).toBeVisible();
expect(within(pollingStationList).getByText('Stembureau "Op Rolletjes"')).toBeVisible();
expect(within(pollingStationList).getByText("34")).toBeVisible();
expect(within(pollingStationList).getByText("Testplek")).toBeVisible();
});
const user = userEvent.setup();

render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);
test("Polling station list no stations", async () => {
overrideOnce("get", "/api/elections/1/polling_stations", 200, {
polling_stations: [],
});
const user = userEvent.setup();

const openPollingStationList = screen.getByTestId("openPollingStationList");
await user.click(openPollingStationList);
expect(screen.getByText("Kies het stembureau")).toBeVisible();
render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);

// Check if the error message is visible
expect(screen.getByText("Geen stembureaus gevonden")).toBeVisible();
});
const openPollingStationList = screen.getByTestId("openPollingStationList");
await user.click(openPollingStationList);
expect(screen.getByText("Kies het stembureau")).toBeVisible();

test("Polling station request returns 404", async () => {
overrideOnce("get", "/api/elections/1/polling_stations", 404, {
error: "Resource not found",
// Check if the error message is visible
expect(screen.getByText("Geen stembureaus gevonden")).toBeVisible();
});
const user = userEvent.setup();

render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);
test("Polling station request returns 404", async () => {
overrideOnce("get", "/api/elections/1/polling_stations", 404, {
error: "Resource not found",
});
const user = userEvent.setup();

const openPollingStationList = screen.getByTestId("openPollingStationList");
await user.click(openPollingStationList);
expect(screen.getByText("Kies het stembureau")).toBeVisible();
render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);

// Check if the error message is visible
expect(screen.getByText("Geen stembureaus gevonden")).toBeVisible();
});
const openPollingStationList = screen.getByTestId("openPollingStationList");
await user.click(openPollingStationList);
expect(screen.getByText("Kies het stembureau")).toBeVisible();

// Check if the error message is visible
expect(screen.getByText("Geen stembureaus gevonden")).toBeVisible();
});

test("Submitting an empty or invalid polling station shows alert", async () => {
const user = userEvent.setup();
render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);

const pollingStation = screen.getByTestId("pollingStation");
const submitButton = screen.getByRole("button", { name: "Beginnen" });

await user.click(submitButton);

// Test that an alert is visible
const pollingStationSubmitFeedback = await screen.findByTestId("pollingStationSubmitFeedback");
expect(
within(pollingStationSubmitFeedback).getByText(
"Voer een geldig nummer van een stembureau in om te beginnen",
),
).toBeVisible();

// Now start typing an invalid polling station number
await user.type(pollingStation, "abc");

// Test that the alert disappeared
expect(pollingStationSubmitFeedback).not.toBeVisible();

// Click submit again and see that the alert appeared again
await user.click(submitButton);

expect(
within(screen.getByTestId("pollingStationSubmitFeedback")).getByText(
"Voer een geldig nummer van een stembureau in om te beginnen",
),
).toBeVisible();
test("Polling station list shows message while loading", async () => {
overrideOnce(
"get",
"/api/elections/1/polling_stations",
200,
{
polling_stations: [],
},
"infinite",
);
const user = userEvent.setup();

render(
<PollingStationListProvider electionId={1}>
<PollingStationChoiceForm />
</PollingStationListProvider>,
);

const openPollingStationList = screen.getByTestId("openPollingStationList");
await user.click(openPollingStationList);
expect(screen.getByText("Kies het stembureau")).toBeVisible();

// check if the loading message is visible
expect(screen.getByText("aan het laden …")).toBeVisible();
});
});
});
2 changes: 1 addition & 1 deletion frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export function PollingStationChoiceForm() {
return (
<div className="flex">
<Icon icon={<Spinner size="lg" />} />
aan het zoeken …
aan het laden …
</div>
);
} else if (pollingStations.length === 0) {
Expand Down
2 changes: 1 addition & 1 deletion frontend/app/component/form/polling_station_choice/PollingStationSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export function PollingStationSelector({
(() => {
if (pollingStationsLoading || loading) {
return (
<div className={cls.message}>
<div id="pollingStationSelectorFeedback" className={cls.message}>
<span className={cls.icon}>
<Icon icon={<Spinner size="md" />} />
</span>
Expand Down
Loading

0 comments on commit 53afc53

Please sign in to comment.