Skip to content

Commit

Permalink
Fix false positives in tests (#199)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cikzh
cikzh authored Aug 5, 2024
1 parent 352798d commit eb401fc
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 47 deletions.
42 changes: 24 additions & 18 deletions frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,16 @@ import {
POLLING_STATION_DATA_ENTRY_REQUEST_BODY,
PollingStationFormController,
} from "@kiesraad/api";
import { electionMock, politicalGroupMock } from "@kiesraad/api-mocks";
import { electionMock, politicalGroupMock, pollingStationMock } from "@kiesraad/api-mocks";

import { CandidatesVotesForm } from "./CandidatesVotesForm";

const Component = (
<PollingStationFormController election={electionMock} pollingStationId={1} entryNumber={1}>
<PollingStationFormController
pollingStationId={pollingStationMock.id}
entryNumber={1}
election={electionMock}
>
<CandidatesVotesForm group={politicalGroupMock} />
</PollingStationFormController>
);
Expand Down Expand Up @@ -59,12 +63,12 @@ describe("Test CandidatesVotesForm", () => {
});
describe("CandidatesVotesForm user interactions", () => {
test("hitting enter key does not result in api call", async () => {
const spy = vi.spyOn(global, "fetch");

const user = userEvent.setup();
render(Component);

const candidate1 = screen.getByTestId("candidate_votes[0].votes");
const spy = vi.spyOn(global, "fetch");

const candidate1 = await screen.findByTestId("candidate_votes[0].votes");
await user.type(candidate1, "12345");
expect(candidate1).toHaveValue("12.345");

Expand All @@ -82,7 +86,7 @@ describe("Test CandidatesVotesForm", () => {

render(Component);

const candidate1 = screen.getByTestId("candidate_votes[0].votes");
const candidate1 = await screen.findByTestId("candidate_votes[0].votes");
expect(candidate1).toHaveFocus();
await user.type(candidate1, "12345");
expect(candidate1).toHaveValue("12.345");
Expand Down Expand Up @@ -148,8 +152,6 @@ describe("Test CandidatesVotesForm", () => {

describe("CandidatesVotesForm API request and response", () => {
test("CandidateVotesForm request body is equal to the form data", async () => {
const spy = vi.spyOn(global, "fetch");

const politicalGroupMockData: PoliticalGroup = {
number: 1,
name: "Lijst 1 - Vurige Vleugels Partij",
Expand All @@ -171,7 +173,7 @@ describe("Test CandidatesVotesForm", () => {
],
};

const electionMockData: Election = {
const electionMockData: Required<Election> = {
id: 1,
name: "Gemeenteraadsverkiezingen 2026",
category: "Municipal",
Expand Down Expand Up @@ -203,11 +205,14 @@ describe("Test CandidatesVotesForm", () => {
],
};

const electionMock = electionMockData as Required<Election>;
const politicalGroupMock = politicalGroupMockData as Required<PoliticalGroup>;

const Component = (
<PollingStationFormController election={electionMock} pollingStationId={1} entryNumber={1}>
<PollingStationFormController
pollingStationId={pollingStationMock.id}
entryNumber={1}
election={electionMockData}
>
<CandidatesVotesForm group={politicalGroupMock} />
</PollingStationFormController>
);
Expand Down Expand Up @@ -249,11 +254,12 @@ describe("Test CandidatesVotesForm", () => {
};

const user = userEvent.setup();

render(Component);

const spy = vi.spyOn(global, "fetch");

await user.type(
screen.getByTestId("candidate_votes[0].votes"),
await screen.findByTestId("candidate_votes[0].votes"),
expectedRequest.data.political_group_votes[0]?.candidate_votes[0]?.votes.toString() ?? "0",
);

Expand Down Expand Up @@ -289,7 +295,7 @@ describe("Test CandidatesVotesForm", () => {

render(Component);

const submitButton = screen.getByRole("button", { name: "Volgende" });
const submitButton = await screen.findByRole("button", { name: "Volgende" });
await user.click(submitButton);
const feedbackServerError = await screen.findByTestId("feedback-server-error");
expect(feedbackServerError).toHaveTextContent(/^Error422 error from mock$/);
Expand All @@ -305,7 +311,7 @@ describe("Test CandidatesVotesForm", () => {

render(Component);

const submitButton = screen.getByRole("button", { name: "Volgende" });
const submitButton = await screen.findByRole("button", { name: "Volgende" });
await user.click(submitButton);
const feedbackServerError = await screen.findByTestId("feedback-server-error");
expect(feedbackServerError).toHaveTextContent(/^Error500 error from mock$/);
Expand All @@ -332,7 +338,7 @@ describe("Test CandidatesVotesForm", () => {

// Since the component does not allow to input invalid values such as -3,
// not inputting any values and just clicking the submit button.
const submitButton = screen.getByRole("button", { name: "Volgende" });
const submitButton = await screen.findByRole("button", { name: "Volgende" });
await user.click(submitButton);

const feedbackError = await screen.findByTestId("feedback-error");
Expand All @@ -357,7 +363,7 @@ describe("Test CandidatesVotesForm", () => {
render(Component);
const user = userEvent.setup();

await user.type(screen.getByTestId("candidate_votes[0].votes"), "1");
await user.type(await screen.findByTestId("candidate_votes[0].votes"), "1");
await user.type(screen.getByTestId("candidate_votes[1].votes"), "2");
await user.type(screen.getByTestId("total"), "10");

Expand Down Expand Up @@ -391,7 +397,7 @@ describe("Test CandidatesVotesForm", () => {

// Since no warnings exist for the fields on this page,
// not inputting any values and just clicking submit.
const submitButton = screen.getByRole("button", { name: "Volgende" });
const submitButton = await screen.findByRole("button", { name: "Volgende" });
await user.click(submitButton);

const feedbackWarning = await screen.findByTestId("feedback-warning");
Expand Down
24 changes: 13 additions & 11 deletions frontend/app/component/form/differences/DifferencesForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,16 @@ import {
POLLING_STATION_DATA_ENTRY_REQUEST_BODY,
PollingStationFormController,
} from "@kiesraad/api";
import { electionMock } from "@kiesraad/api-mocks";
import { electionMock, pollingStationMock } from "@kiesraad/api-mocks";

import { DifferencesForm } from "./DifferencesForm";

const Component = (
<PollingStationFormController election={electionMock} pollingStationId={1} entryNumber={1}>
<PollingStationFormController
pollingStationId={pollingStationMock.id}
entryNumber={1}
election={electionMock}
>
<DifferencesForm />
</PollingStationFormController>
);
Expand Down Expand Up @@ -61,13 +65,12 @@ describe("Test DifferencesForm", () => {

describe("DifferencesForm user interactions", () => {
test("hitting enter key does not result in api call", async () => {
const spy = vi.spyOn(global, "fetch");

const user = userEvent.setup();

render(Component);
const spy = vi.spyOn(global, "fetch");

const moreBallotsCount = screen.getByTestId("more_ballots_count");
const moreBallotsCount = await screen.findByTestId("more_ballots_count");
await user.type(moreBallotsCount, "12345");
expect(moreBallotsCount).toHaveValue("12.345");

Expand All @@ -85,7 +88,7 @@ describe("Test DifferencesForm", () => {

render(Component);

const moreBallotsCount = screen.getByTestId("more_ballots_count");
const moreBallotsCount = await screen.findByTestId("more_ballots_count");
expect(moreBallotsCount).toHaveFocus();
await user.type(moreBallotsCount, "12345");
expect(moreBallotsCount).toHaveValue("12.345");
Expand Down Expand Up @@ -145,8 +148,6 @@ describe("Test DifferencesForm", () => {

describe("DifferencesForm API request and response", () => {
test("DifferencesForm request body is equal to the form data", async () => {
const spy = vi.spyOn(global, "fetch");

const expectedRequest = {
data: {
...rootRequest.data,
Expand All @@ -165,9 +166,10 @@ describe("Test DifferencesForm", () => {
const user = userEvent.setup();

render(Component);
const spy = vi.spyOn(global, "fetch");

await user.type(
screen.getByTestId("more_ballots_count"),
await screen.findByTestId("more_ballots_count"),
expectedRequest.data.differences_counts.more_ballots_count.toString(),
);
await user.type(
Expand Down Expand Up @@ -217,7 +219,7 @@ describe("Test DifferencesForm", () => {

render(Component);

const submitButton = screen.getByRole("button", { name: "Volgende" });
const submitButton = await screen.findByRole("button", { name: "Volgende" });
await user.click(submitButton);
const feedbackServerError = await screen.findByTestId("feedback-server-error");
expect(feedbackServerError).toHaveTextContent(/^Error422 error from mock$/);
Expand All @@ -232,7 +234,7 @@ describe("Test DifferencesForm", () => {

render(Component);

const submitButton = screen.getByRole("button", { name: "Volgende" });
const submitButton = await screen.findByRole("button", { name: "Volgende" });
await user.click(submitButton);
const feedbackServerError = await screen.findByTestId("feedback-server-error");
expect(feedbackServerError).toHaveTextContent(/^Error500 error from mock$/);
Expand Down
41 changes: 24 additions & 17 deletions frontend/app/component/form/voters_and_votes/VotersAndVotesForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,16 @@ import {
POLLING_STATION_DATA_ENTRY_REQUEST_BODY,
PollingStationFormController,
} from "@kiesraad/api";
import { electionMock } from "@kiesraad/api-mocks";
import { electionMock, pollingStationMock } from "@kiesraad/api-mocks";

import { VotersAndVotesForm } from "./VotersAndVotesForm";

const Component = (
<PollingStationFormController election={electionMock} pollingStationId={1} entryNumber={1}>
<PollingStationFormController
pollingStationId={pollingStationMock.id}
entryNumber={1}
election={electionMock}
>
<VotersAndVotesForm />
</PollingStationFormController>
);
Expand Down Expand Up @@ -61,13 +65,12 @@ describe("Test VotersAndVotesForm", () => {

describe("VotersAndVotesForm user interactions", () => {
test("hitting enter key does not result in api call", async () => {
const spy = vi.spyOn(global, "fetch");

const user = userEvent.setup();

render(Component);
const spy = vi.spyOn(global, "fetch");

const pollCards = screen.getByTestId("poll_card_count");
const pollCards = await screen.findByTestId("poll_card_count");
await user.type(pollCards, "12345");
expect(pollCards).toHaveValue("12.345");

Expand All @@ -85,7 +88,7 @@ describe("Test VotersAndVotesForm", () => {

render(Component);

const pollCards = screen.getByTestId("poll_card_count");
const pollCards = await screen.findByTestId("poll_card_count");
expect(pollCards).toHaveFocus();
await user.type(pollCards, "12345");
expect(pollCards).toHaveValue("12.345");
Expand Down Expand Up @@ -150,8 +153,6 @@ describe("Test VotersAndVotesForm", () => {

describe("VotersAndVotesForm API request and response", () => {
test("VotersAndVotesForm request body is equal to the form data", async () => {
const spy = vi.spyOn(global, "fetch");

const expectedRequest = {
data: {
...rootRequest.data,
Expand All @@ -173,6 +174,7 @@ describe("Test VotersAndVotesForm", () => {
const user = userEvent.setup();

render(Component);
const spy = vi.spyOn(global, "fetch");

await userTypeInputs(user, {
...expectedRequest.data.voters_counts,
Expand Down Expand Up @@ -202,7 +204,7 @@ describe("Test VotersAndVotesForm", () => {

render(Component);

const submitButton = screen.getByRole("button", { name: "Volgende" });
const submitButton = await screen.findByRole("button", { name: "Volgende" });
await user.click(submitButton);
const feedbackServerError = await screen.findByTestId("feedback-server-error");
expect(feedbackServerError).toHaveTextContent(/^Error422 error from mock$/);
Expand All @@ -221,7 +223,7 @@ describe("Test VotersAndVotesForm", () => {

render(Component);

const submitButton = screen.getByRole("button", { name: "Volgende" });
const submitButton = await screen.findByRole("button", { name: "Volgende" });
await user.click(submitButton);
const feedbackServerError = await screen.findByTestId("feedback-server-error");
expect(feedbackServerError).toHaveTextContent(/^Error500 error from mock$/);
Expand Down Expand Up @@ -251,7 +253,7 @@ describe("Test VotersAndVotesForm", () => {

// Since the component does not allow to input invalid values such as -3,
// not inputting any values and just clicking the submit button.
const submitButton = screen.getByRole("button", { name: "Volgende" });
const submitButton = await screen.findByRole("button", { name: "Volgende" });
await user.click(submitButton);

const feedbackError = await screen.findByTestId("feedback-error");
Expand Down Expand Up @@ -282,7 +284,8 @@ describe("Test VotersAndVotesForm", () => {

render(Component);

await user.type(screen.getByTestId("poll_card_count"), "1");
// We await the first element to appear, so we know the page is loaded
await user.type(await screen.findByTestId("poll_card_count"), "1");
await user.type(screen.getByTestId("proxy_certificate_count"), "1");
await user.type(screen.getByTestId("voter_card_count"), "1");
await user.type(screen.getByTestId("total_admitted_voters_count"), "4");
Expand Down Expand Up @@ -322,7 +325,8 @@ describe("Test VotersAndVotesForm", () => {

render(Component);

await user.type(screen.getByTestId("votes_candidates_counts"), "1");
// We await the first element to appear, so we know the page is loaded
await user.type(await screen.findByTestId("votes_candidates_counts"), "1");
await user.type(screen.getByTestId("blank_votes_count"), "1");
await user.type(screen.getByTestId("invalid_votes_count"), "1");
await user.type(screen.getByTestId("total_votes_cast_count"), "4");
Expand Down Expand Up @@ -358,7 +362,7 @@ describe("Test VotersAndVotesForm", () => {

// Since the component does not allow to input values for non-existing fields,
// not inputting any values and just clicking the submit button.
const submitButton = screen.getByRole("button", { name: "Volgende" });
const submitButton = await screen.findByRole("button", { name: "Volgende" });
await user.click(submitButton);

expect(screen.queryByTestId("result")).toBeNull();
Expand Down Expand Up @@ -389,7 +393,8 @@ describe("Test VotersAndVotesForm", () => {

render(Component);

await user.type(screen.getByTestId("votes_candidates_counts"), "0");
// We await the first element to appear, so we know the page is loaded
await user.type(await screen.findByTestId("votes_candidates_counts"), "0");
await user.type(screen.getByTestId("blank_votes_count"), "1");
await user.type(screen.getByTestId("invalid_votes_count"), "0");
await user.type(screen.getByTestId("total_votes_cast_count"), "1");
Expand Down Expand Up @@ -423,7 +428,8 @@ describe("Test VotersAndVotesForm", () => {

render(Component);

await user.type(screen.getByTestId("votes_candidates_counts"), "0");
// We await the first element to appear, so we know the page is loaded
await user.type(await screen.findByTestId("votes_candidates_counts"), "0");
await user.type(screen.getByTestId("blank_votes_count"), "0");
await user.type(screen.getByTestId("invalid_votes_count"), "1");
await user.type(screen.getByTestId("total_votes_cast_count"), "1");
Expand Down Expand Up @@ -459,7 +465,8 @@ describe("Test VotersAndVotesForm", () => {

render(Component);

await user.type(screen.getByTestId("poll_card_count"), "1");
// We await the first element to appear, so we know the page is loaded
await user.type(await screen.findByTestId("poll_card_count"), "1");
await user.type(screen.getByTestId("proxy_certificate_count"), "0");
await user.type(screen.getByTestId("voter_card_count"), "0");
await user.type(screen.getByTestId("total_admitted_voters_count"), "1");
Expand Down
2 changes: 1 addition & 1 deletion frontend/app/test/unit/test-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function getUrlMethodAndBody(

export async function userTypeInputs(user: UserEvent, inputs: { [key: string]: string | number }) {
for (const [key, value] of Object.entries(inputs)) {
const input = screen.getByTestId(key);
const input = await screen.findByTestId(key);
await user.type(input, value.toString());
expect(input).toHaveValue(value.toString());
}
Expand Down

0 comments on commit eb401fc

Please sign in to comment.