diff --git a/frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.test.tsx b/frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.test.tsx index bc589ff38..f6c3988fb 100644 --- a/frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.test.tsx +++ b/frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.test.tsx @@ -55,258 +55,261 @@ describe("Test CandidatesVotesForm", () => { afterEach(() => { vi.restoreAllMocks(); // ToDo: tests pass without this, so not needed? }); + describe("CandidatesVotesForm user interactions", () => { + test("hitting enter key does not result in api call", async () => { + const spy = vi.spyOn(global, "fetch"); - 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"); - await user.type(candidate1, "12345"); - expect(candidate1).toHaveValue("12.345"); + const user = userEvent.setup(); + render(Component); - await user.keyboard("{enter}"); + const candidate1 = screen.getByTestId("candidate_votes-0.votes"); + await user.type(candidate1, "12345"); + expect(candidate1).toHaveValue("12.345"); - expect(spy).not.toHaveBeenCalled(); - }); + await user.keyboard("{enter}"); - test("Form field entry and keybindings", async () => { - overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 200, { - message: "Data saved", - saved: true, - validation_results: { errors: [], warnings: [] }, + expect(spy).not.toHaveBeenCalled(); }); - const user = userEvent.setup(); + test("Form field entry and keybindings", async () => { + overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 200, { + message: "Data saved", + saved: true, + validation_results: { errors: [], warnings: [] }, + }); + + const user = userEvent.setup(); - render(Component); + render(Component); - const candidate1 = screen.getByTestId("candidate_votes-0.votes"); - expect(candidate1).toHaveFocus(); - await user.type(candidate1, "12345"); - expect(candidate1).toHaveValue("12.345"); + const candidate1 = screen.getByTestId("candidate_votes-0.votes"); + expect(candidate1).toHaveFocus(); + await user.type(candidate1, "12345"); + expect(candidate1).toHaveValue("12.345"); - await user.keyboard("{enter}"); + await user.keyboard("{enter}"); - const candidate2 = screen.getByTestId("candidate_votes-1.votes"); - expect(candidate2).toHaveFocus(); - await user.type(candidate2, "6789"); - expect(candidate2).toHaveValue("6.789"); + const candidate2 = screen.getByTestId("candidate_votes-1.votes"); + expect(candidate2).toHaveFocus(); + await user.type(candidate2, "6789"); + expect(candidate2).toHaveValue("6.789"); - await user.keyboard("{enter}"); + await user.keyboard("{enter}"); - const candidate3 = screen.getByTestId("candidate_votes-2.votes"); - expect(candidate3).toHaveFocus(); - await user.type(candidate3, "123"); - expect(candidate3).toHaveValue("123"); + const candidate3 = screen.getByTestId("candidate_votes-2.votes"); + expect(candidate3).toHaveFocus(); + await user.type(candidate3, "123"); + expect(candidate3).toHaveValue("123"); - await user.keyboard("{enter}"); + await user.keyboard("{enter}"); - const candidate4 = screen.getByTestId("candidate_votes-3.votes"); - expect(candidate4).toHaveFocus(); - await user.paste("4242"); - expect(candidate4).toHaveValue("4.242"); + const candidate4 = screen.getByTestId("candidate_votes-3.votes"); + expect(candidate4).toHaveFocus(); + await user.paste("4242"); + expect(candidate4).toHaveValue("4.242"); - await user.keyboard("{enter}"); + await user.keyboard("{enter}"); - const candidate5 = screen.getByTestId("candidate_votes-4.votes"); - expect(candidate5).toHaveFocus(); - await user.type(candidate5, "12"); - expect(candidate5).toHaveValue("12"); + const candidate5 = screen.getByTestId("candidate_votes-4.votes"); + expect(candidate5).toHaveFocus(); + await user.type(candidate5, "12"); + expect(candidate5).toHaveValue("12"); - await user.keyboard("{enter}"); + await user.keyboard("{enter}"); - const candidate6 = screen.getByTestId("candidate_votes-5.votes"); - expect(candidate6).toHaveFocus(); - // Test if maxLength on field works - await user.type(candidate6, "1000000000"); - expect(candidate6).toHaveValue("100.000.000"); + const candidate6 = screen.getByTestId("candidate_votes-5.votes"); + expect(candidate6).toHaveFocus(); + // Test if maxLength on field works + await user.type(candidate6, "1000000000"); + expect(candidate6).toHaveValue("100.000.000"); - await user.keyboard("{enter}"); + await user.keyboard("{enter}"); - const candidate7 = screen.getByTestId("candidate_votes-6.votes"); - expect(candidate7).toHaveFocus(); - await user.type(candidate7, "3"); - expect(candidate7).toHaveValue("3"); + const candidate7 = screen.getByTestId("candidate_votes-6.votes"); + expect(candidate7).toHaveFocus(); + await user.type(candidate7, "3"); + expect(candidate7).toHaveValue("3"); - await user.keyboard("{enter}"); + await user.keyboard("{enter}"); - const total = screen.getByTestId("total"); - await user.click(total); - expect(total).toHaveFocus(); - await user.type(total, "555"); - expect(total).toHaveValue("555"); + const total = screen.getByTestId("total"); + await user.click(total); + expect(total).toHaveFocus(); + await user.type(total, "555"); + expect(total).toHaveValue("555"); - const submitButton = screen.getByRole("button", { name: "Volgende" }); - await user.click(submitButton); + const submitButton = screen.getByRole("button", { name: "Volgende" }); + await user.click(submitButton); - const result = await screen.findByTestId("result"); - expect(result).toHaveTextContent(/^Success$/); + const result = await screen.findByTestId("result"); + expect(result).toHaveTextContent(/^Success$/); + }); }); - 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", - candidates: [ - { - number: 1, - initials: "E.", - first_name: "Eldor", - last_name: "Zilverlicht", - locality: "Amsterdam", - }, - { - number: 2, - initials: "G.", - first_name: "Grom", - last_name: "Donderbrul", - locality: "Rotterdam", - }, - ], - }; - - const electionMockData: Election = { - id: 1, - name: "Municipal Election", - category: "Municipal", - election_date: "2024-11-30", - nomination_date: "2024-11-01", - political_groups: [ - politicalGroupMockData, - { - number: 2, - name: "Lijst 2 - Wijzen van Water en Wind", - candidates: [ - { - number: 1, - initials: "A.", - first_name: "Alice", - last_name: "Foo", - locality: "Amsterdam", - gender: "Female", - }, - { - number: 2, - initials: "C.", - first_name: "Charlie", - last_name: "Doe", - locality: "Rotterdam", - }, - ], - }, - ], - }; - - const electionMock = electionMockData as Required; - const politicalGroupMock = politicalGroupMockData as Required; - - const Component = ( - - - - ); - - const expectedRequest = { - data: { - ...rootRequest.data, - political_group_votes: [ + 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", + candidates: [ { number: 1, - total: 10, - candidate_votes: [ - { - number: 1, - votes: 5, - }, - { - number: 2, - votes: 5, - }, - ], + initials: "E.", + first_name: "Eldor", + last_name: "Zilverlicht", + locality: "Amsterdam", }, { number: 2, - total: 0, - candidate_votes: [ + initials: "G.", + first_name: "Grom", + last_name: "Donderbrul", + locality: "Rotterdam", + }, + ], + }; + + const electionMockData: Election = { + id: 1, + name: "Municipal Election", + category: "Municipal", + election_date: "2024-11-30", + nomination_date: "2024-11-01", + political_groups: [ + politicalGroupMockData, + { + number: 2, + name: "Lijst 2 - Wijzen van Water en Wind", + candidates: [ { number: 1, - votes: 0, + initials: "A.", + first_name: "Alice", + last_name: "Foo", + locality: "Amsterdam", + gender: "Female", }, { number: 2, - votes: 0, + initials: "C.", + first_name: "Charlie", + last_name: "Doe", + locality: "Rotterdam", }, ], }, ], - }, - }; + }; - const user = userEvent.setup(); + const electionMock = electionMockData as Required; + const politicalGroupMock = politicalGroupMockData as Required; - render(Component); + const Component = ( + + + + ); + + const expectedRequest = { + data: { + ...rootRequest.data, + political_group_votes: [ + { + number: 1, + total: 10, + candidate_votes: [ + { + number: 1, + votes: 5, + }, + { + number: 2, + votes: 5, + }, + ], + }, + { + number: 2, + total: 0, + candidate_votes: [ + { + number: 1, + votes: 0, + }, + { + number: 2, + votes: 0, + }, + ], + }, + ], + }, + }; - await user.type( - screen.getByTestId("candidate_votes-0.votes"), - expectedRequest.data.political_group_votes[0]?.candidate_votes[0]?.votes.toString() ?? "0", - ); + const user = userEvent.setup(); - await user.type( - screen.getByTestId("candidate_votes-1.votes"), - expectedRequest.data.political_group_votes[0]?.candidate_votes[1]?.votes.toString() ?? "0", - ); + render(Component); - await user.type( - screen.getByTestId("total"), - expectedRequest.data.political_group_votes[0]?.total.toString() ?? "0", - ); + await user.type( + screen.getByTestId("candidate_votes-0.votes"), + expectedRequest.data.political_group_votes[0]?.candidate_votes[0]?.votes.toString() ?? "0", + ); - const submitButton = screen.getByRole("button", { name: "Volgende" }); - await user.click(submitButton); + await user.type( + screen.getByTestId("candidate_votes-1.votes"), + expectedRequest.data.political_group_votes[0]?.candidate_votes[1]?.votes.toString() ?? "0", + ); - expect(spy).toHaveBeenCalled(); - const { url, method, body } = getUrlMethodAndBody(spy.mock.calls); - expect(url).toEqual("http://testhost/v1/api/polling_stations/1/data_entries/1"); - expect(method).toEqual("POST"); - expect(body).toEqual(expectedRequest); + await user.type( + screen.getByTestId("total"), + expectedRequest.data.political_group_votes[0]?.total.toString() ?? "0", + ); - const result = await screen.findByTestId("result"); - expect(result).toHaveTextContent(/^Success$/); - }); + const submitButton = screen.getByRole("button", { name: "Volgende" }); + await user.click(submitButton); - test("422 response results in display of error message", async () => { - overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 422, { - message: "422 error from mock", + expect(spy).toHaveBeenCalled(); + const { url, method, body } = getUrlMethodAndBody(spy.mock.calls); + expect(url).toEqual("http://testhost/v1/api/polling_stations/1/data_entries/1"); + expect(method).toEqual("POST"); + expect(body).toEqual(expectedRequest); + + const result = await screen.findByTestId("result"); + expect(result).toHaveTextContent(/^Success$/); }); - const user = userEvent.setup(); + test("422 response results in display of error message", async () => { + overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 422, { + message: "422 error from mock", + }); - render(Component); + const user = userEvent.setup(); - const submitButton = screen.getByRole("button", { name: "Volgende" }); - await user.click(submitButton); - const feedbackServerError = await screen.findByTestId("feedback-server-error"); - expect(feedbackServerError).toHaveTextContent(/^Error422 error from mock$/); - }); + render(Component); - test("500 response results in display of error message", async () => { - overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 500, { - message: "500 error from mock", - errorCode: "500_ERROR", + const submitButton = screen.getByRole("button", { name: "Volgende" }); + await user.click(submitButton); + const feedbackServerError = await screen.findByTestId("feedback-server-error"); + expect(feedbackServerError).toHaveTextContent(/^Error422 error from mock$/); }); - const user = userEvent.setup(); + test("500 response results in display of error message", async () => { + overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 500, { + message: "500 error from mock", + errorCode: "500_ERROR", + }); + + const user = userEvent.setup(); - render(Component); + render(Component); - const submitButton = screen.getByRole("button", { name: "Volgende" }); - await user.click(submitButton); - const feedbackServerError = await screen.findByTestId("feedback-server-error"); - expect(feedbackServerError).toHaveTextContent(/^Error500 error from mock$/); + const submitButton = screen.getByRole("button", { name: "Volgende" }); + await user.click(submitButton); + const feedbackServerError = await screen.findByTestId("feedback-server-error"); + expect(feedbackServerError).toHaveTextContent(/^Error500 error from mock$/); + }); }); describe("CandidatesVotesForm errors", () => { diff --git a/frontend/app/component/form/differences/DifferencesForm.test.tsx b/frontend/app/component/form/differences/DifferencesForm.test.tsx index 8793628ed..b9d520708 100644 --- a/frontend/app/component/form/differences/DifferencesForm.test.tsx +++ b/frontend/app/component/form/differences/DifferencesForm.test.tsx @@ -58,202 +58,208 @@ describe("Test DifferencesForm", () => { vi.restoreAllMocks(); // ToDo: tests pass without this, so not needed? }); - test("hitting enter key does not result in api call", async () => { - const spy = vi.spyOn(global, "fetch"); + 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(); + const user = userEvent.setup(); - render(Component); + render(Component); - const moreBallotsCount = screen.getByTestId("more_ballots_count"); - await user.type(moreBallotsCount, "12345"); - expect(moreBallotsCount).toHaveValue("12.345"); + const moreBallotsCount = screen.getByTestId("more_ballots_count"); + await user.type(moreBallotsCount, "12345"); + expect(moreBallotsCount).toHaveValue("12.345"); - await user.keyboard("{enter}"); + await user.keyboard("{enter}"); - expect(spy).not.toHaveBeenCalled(); - }); - - test("Form field entry and keybindings", async () => { - overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 200, { - message: "Data saved", - saved: true, - validation_results: { errors: [], warnings: [] }, + expect(spy).not.toHaveBeenCalled(); }); - const user = userEvent.setup(); + test("Form field entry and keybindings", async () => { + overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 200, { + message: "Data saved", + saved: true, + validation_results: { errors: [], warnings: [] }, + }); - render(Component); + const user = userEvent.setup(); - const moreBallotsCount = screen.getByTestId("more_ballots_count"); - expect(moreBallotsCount).toHaveFocus(); - await user.type(moreBallotsCount, "12345"); - expect(moreBallotsCount).toHaveValue("12.345"); + render(Component); - await user.keyboard("{enter}"); + const moreBallotsCount = screen.getByTestId("more_ballots_count"); + expect(moreBallotsCount).toHaveFocus(); + await user.type(moreBallotsCount, "12345"); + expect(moreBallotsCount).toHaveValue("12.345"); - const fewerBallotsCount = screen.getByTestId("fewer_ballots_count"); - expect(fewerBallotsCount).toHaveFocus(); - await user.paste("6789"); - expect(fewerBallotsCount).toHaveValue("6.789"); + await user.keyboard("{enter}"); - await user.keyboard("{enter}"); + const fewerBallotsCount = screen.getByTestId("fewer_ballots_count"); + expect(fewerBallotsCount).toHaveFocus(); + await user.paste("6789"); + expect(fewerBallotsCount).toHaveValue("6.789"); - const unreturnedBallotsCount = screen.getByTestId("unreturned_ballots_count"); - expect(unreturnedBallotsCount).toHaveFocus(); - await user.type(unreturnedBallotsCount, "123"); - expect(unreturnedBallotsCount).toHaveValue("123"); + await user.keyboard("{enter}"); - await user.keyboard("{enter}"); + const unreturnedBallotsCount = screen.getByTestId("unreturned_ballots_count"); + expect(unreturnedBallotsCount).toHaveFocus(); + await user.type(unreturnedBallotsCount, "123"); + expect(unreturnedBallotsCount).toHaveValue("123"); - const tooFewBallotsHandedOutCount = screen.getByTestId("too_few_ballots_handed_out_count"); - expect(tooFewBallotsHandedOutCount).toHaveFocus(); - await user.paste("4242"); - expect(tooFewBallotsHandedOutCount).toHaveValue("4.242"); + await user.keyboard("{enter}"); - await user.keyboard("{enter}"); + const tooFewBallotsHandedOutCount = screen.getByTestId("too_few_ballots_handed_out_count"); + expect(tooFewBallotsHandedOutCount).toHaveFocus(); + await user.paste("4242"); + expect(tooFewBallotsHandedOutCount).toHaveValue("4.242"); - const tooManyBallotsHandedOutCount = screen.getByTestId("too_many_ballots_handed_out_count"); - expect(tooManyBallotsHandedOutCount).toHaveFocus(); - await user.type(tooManyBallotsHandedOutCount, "12"); - expect(tooManyBallotsHandedOutCount).toHaveValue("12"); + await user.keyboard("{enter}"); - await user.keyboard("{enter}"); + const tooManyBallotsHandedOutCount = screen.getByTestId("too_many_ballots_handed_out_count"); + expect(tooManyBallotsHandedOutCount).toHaveFocus(); + await user.type(tooManyBallotsHandedOutCount, "12"); + expect(tooManyBallotsHandedOutCount).toHaveValue("12"); - const otherExplanationCount = screen.getByTestId("other_explanation_count"); - expect(otherExplanationCount).toHaveFocus(); - // Test if maxLength on field works - await user.type(otherExplanationCount, "1000000000"); - expect(otherExplanationCount).toHaveValue("100.000.000"); + await user.keyboard("{enter}"); - await user.keyboard("{enter}"); + const otherExplanationCount = screen.getByTestId("other_explanation_count"); + expect(otherExplanationCount).toHaveFocus(); + // Test if maxLength on field works + await user.type(otherExplanationCount, "1000000000"); + expect(otherExplanationCount).toHaveValue("100.000.000"); - const noExplanationCount = screen.getByTestId("no_explanation_count"); - expect(noExplanationCount).toHaveFocus(); - await user.type(noExplanationCount, "3"); - expect(noExplanationCount).toHaveValue("3"); + await user.keyboard("{enter}"); - await user.keyboard("{enter}"); + const noExplanationCount = screen.getByTestId("no_explanation_count"); + expect(noExplanationCount).toHaveFocus(); + await user.type(noExplanationCount, "3"); + expect(noExplanationCount).toHaveValue("3"); - const submitButton = screen.getByRole("button", { name: "Volgende" }); - await user.click(submitButton); + await user.keyboard("{enter}"); - const result = await screen.findByTestId("result"); - expect(result).toHaveTextContent(/^Success$/); - }); + const submitButton = screen.getByRole("button", { name: "Volgende" }); + await user.click(submitButton); - test("DifferencesForm request body is equal to the form data", async () => { - const spy = vi.spyOn(global, "fetch"); - - const expectedRequest = { - data: { - ...rootRequest.data, - differences_counts: { - more_ballots_count: 2, - fewer_ballots_count: 0, - unreturned_ballots_count: 0, - too_few_ballots_handed_out_count: 0, - too_many_ballots_handed_out_count: 1, - other_explanation_count: 0, - no_explanation_count: 1, - }, - }, - }; - - const user = userEvent.setup(); - - render(Component); - - await user.type( - screen.getByTestId("more_ballots_count"), - expectedRequest.data.differences_counts.more_ballots_count.toString(), - ); - await user.type( - screen.getByTestId("fewer_ballots_count"), - expectedRequest.data.differences_counts.fewer_ballots_count.toString(), - ); - await user.type( - screen.getByTestId("unreturned_ballots_count"), - expectedRequest.data.differences_counts.unreturned_ballots_count.toString(), - ); - await user.type( - screen.getByTestId("too_few_ballots_handed_out_count"), - expectedRequest.data.differences_counts.too_few_ballots_handed_out_count.toString(), - ); - await user.type( - screen.getByTestId("too_many_ballots_handed_out_count"), - expectedRequest.data.differences_counts.too_many_ballots_handed_out_count.toString(), - ); - await user.type( - screen.getByTestId("other_explanation_count"), - expectedRequest.data.differences_counts.other_explanation_count.toString(), - ); - await user.type( - screen.getByTestId("no_explanation_count"), - expectedRequest.data.differences_counts.no_explanation_count.toString(), - ); - - const submitButton = screen.getByRole("button", { name: "Volgende" }); - await user.click(submitButton); - - expect(spy).toHaveBeenCalled(); - const { url, method, body } = getUrlMethodAndBody(spy.mock.calls); - expect(url).toEqual("http://testhost/v1/api/polling_stations/1/data_entries/1"); - expect(method).toEqual("POST"); - expect(body).toEqual(expectedRequest); - - const result = await screen.findByTestId("result"); - expect(result).toHaveTextContent(/^Success$/); + const result = await screen.findByTestId("result"); + expect(result).toHaveTextContent(/^Success$/); + }); }); - test("422 response results in display of error message", async () => { - overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 422, { - message: "422 error from mock", + 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, + differences_counts: { + more_ballots_count: 2, + fewer_ballots_count: 0, + unreturned_ballots_count: 0, + too_few_ballots_handed_out_count: 0, + too_many_ballots_handed_out_count: 1, + other_explanation_count: 0, + no_explanation_count: 1, + }, + }, + }; + + const user = userEvent.setup(); + + render(Component); + + await user.type( + screen.getByTestId("more_ballots_count"), + expectedRequest.data.differences_counts.more_ballots_count.toString(), + ); + await user.type( + screen.getByTestId("fewer_ballots_count"), + expectedRequest.data.differences_counts.fewer_ballots_count.toString(), + ); + await user.type( + screen.getByTestId("unreturned_ballots_count"), + expectedRequest.data.differences_counts.unreturned_ballots_count.toString(), + ); + await user.type( + screen.getByTestId("too_few_ballots_handed_out_count"), + expectedRequest.data.differences_counts.too_few_ballots_handed_out_count.toString(), + ); + await user.type( + screen.getByTestId("too_many_ballots_handed_out_count"), + expectedRequest.data.differences_counts.too_many_ballots_handed_out_count.toString(), + ); + await user.type( + screen.getByTestId("other_explanation_count"), + expectedRequest.data.differences_counts.other_explanation_count.toString(), + ); + await user.type( + screen.getByTestId("no_explanation_count"), + expectedRequest.data.differences_counts.no_explanation_count.toString(), + ); + + const submitButton = screen.getByRole("button", { name: "Volgende" }); + await user.click(submitButton); + + expect(spy).toHaveBeenCalled(); + const { url, method, body } = getUrlMethodAndBody(spy.mock.calls); + expect(url).toEqual("http://testhost/v1/api/polling_stations/1/data_entries/1"); + expect(method).toEqual("POST"); + expect(body).toEqual(expectedRequest); + + const result = await screen.findByTestId("result"); + expect(result).toHaveTextContent(/^Success$/); }); - const user = userEvent.setup(); + test("422 response results in display of error message", async () => { + overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 422, { + message: "422 error from mock", + }); - render(Component); + const user = userEvent.setup(); - const submitButton = screen.getByRole("button", { name: "Volgende" }); - await user.click(submitButton); - const feedbackServerError = await screen.findByTestId("feedback-server-error"); - expect(feedbackServerError).toHaveTextContent(/^Error422 error from mock$/); - }); + render(Component); - test("500 response results in display of error message", async () => { - overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 500, { - message: "500 error from mock", + const submitButton = screen.getByRole("button", { name: "Volgende" }); + await user.click(submitButton); + const feedbackServerError = await screen.findByTestId("feedback-server-error"); + expect(feedbackServerError).toHaveTextContent(/^Error422 error from mock$/); }); - const user = userEvent.setup(); + test("500 response results in display of error message", async () => { + overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 500, { + message: "500 error from mock", + }); + + const user = userEvent.setup(); - render(Component); + render(Component); - const submitButton = screen.getByRole("button", { name: "Volgende" }); - await user.click(submitButton); - const feedbackServerError = await screen.findByTestId("feedback-server-error"); - expect(feedbackServerError).toHaveTextContent(/^Error500 error from mock$/); + const submitButton = screen.getByRole("button", { name: "Volgende" }); + await user.click(submitButton); + const feedbackServerError = await screen.findByTestId("feedback-server-error"); + expect(feedbackServerError).toHaveTextContent(/^Error500 error from mock$/); + }); }); - // TODO: Add validation test once backend validation is implemented - test.skip("Incorrect total is caught by validation", async () => { - const user = userEvent.setup(); + describe("DifferencesForm errors", () => { + // TODO: Add validation test once backend validation is implemented + test.skip("Incorrect total is caught by validation", async () => { + const user = userEvent.setup(); - render(Component); + render(Component); - await user.type(screen.getByTestId("more_ballots_count"), "2"); - await user.type(screen.getByTestId("fewer_ballots_count"), "0"); - await user.type(screen.getByTestId("unreturned_ballots_count"), "0"); - await user.type(screen.getByTestId("too_few_ballots_handed_out_count"), "0"); - await user.type(screen.getByTestId("too_many_ballots_handed_out_count"), "1"); - await user.type(screen.getByTestId("other_explanation_count"), "0"); - await user.type(screen.getByTestId("no_explanation_count"), "1"); + await user.type(screen.getByTestId("more_ballots_count"), "2"); + await user.type(screen.getByTestId("fewer_ballots_count"), "0"); + await user.type(screen.getByTestId("unreturned_ballots_count"), "0"); + await user.type(screen.getByTestId("too_few_ballots_handed_out_count"), "0"); + await user.type(screen.getByTestId("too_many_ballots_handed_out_count"), "1"); + await user.type(screen.getByTestId("other_explanation_count"), "0"); + await user.type(screen.getByTestId("no_explanation_count"), "1"); - const submitButton = screen.getByRole("button", { name: "Volgende" }); - await user.click(submitButton); + const submitButton = screen.getByRole("button", { name: "Volgende" }); + await user.click(submitButton); - const feedbackError = await screen.findByTestId("feedback-error"); - expect(feedbackError).toHaveTextContent(/^IncorrectTotal,IncorrectTotal$/); + const feedbackError = await screen.findByTestId("feedback-error"); + expect(feedbackError).toHaveTextContent(/^IncorrectTotal,IncorrectTotal$/); + }); }); }); diff --git a/frontend/app/component/form/voters_and_votes/VotersAndVotesForm.test.tsx b/frontend/app/component/form/voters_and_votes/VotersAndVotesForm.test.tsx index 301865767..3aed47dbe 100644 --- a/frontend/app/component/form/voters_and_votes/VotersAndVotesForm.test.tsx +++ b/frontend/app/component/form/voters_and_votes/VotersAndVotesForm.test.tsx @@ -58,287 +58,207 @@ describe("Test VotersAndVotesForm", () => { vi.restoreAllMocks(); // ToDo: tests pass without this, so not needed? }); - test("hitting enter key does not result in api call", async () => { - const spy = vi.spyOn(global, "fetch"); + 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(); + const user = userEvent.setup(); - render(Component); + render(Component); - const pollCards = screen.getByTestId("poll_card_count"); - await user.type(pollCards, "12345"); - expect(pollCards).toHaveValue("12.345"); + const pollCards = screen.getByTestId("poll_card_count"); + await user.type(pollCards, "12345"); + expect(pollCards).toHaveValue("12.345"); - await user.keyboard("{enter}"); + await user.keyboard("{enter}"); - expect(spy).not.toHaveBeenCalled(); - }); - - test("Form field entry and keybindings", async () => { - overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 200, { - message: "Data saved", - saved: true, - validation_results: { errors: [], warnings: [] }, + expect(spy).not.toHaveBeenCalled(); }); - const user = userEvent.setup(); + test("Form field entry and keybindings", async () => { + overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 200, { + message: "Data saved", + saved: true, + validation_results: { errors: [], warnings: [] }, + }); - render(Component); + const user = userEvent.setup(); - const pollCards = screen.getByTestId("poll_card_count"); - expect(pollCards).toHaveFocus(); - await user.type(pollCards, "12345"); - expect(pollCards).toHaveValue("12.345"); + render(Component); - await user.keyboard("{enter}"); + const pollCards = screen.getByTestId("poll_card_count"); + expect(pollCards).toHaveFocus(); + await user.type(pollCards, "12345"); + expect(pollCards).toHaveValue("12.345"); - const proxyCertificates = screen.getByTestId("proxy_certificate_count"); - expect(proxyCertificates).toHaveFocus(); - await user.paste("6789"); - expect(proxyCertificates).toHaveValue("6.789"); + await user.keyboard("{enter}"); - await user.keyboard("{enter}"); + const proxyCertificates = screen.getByTestId("proxy_certificate_count"); + expect(proxyCertificates).toHaveFocus(); + await user.paste("6789"); + expect(proxyCertificates).toHaveValue("6.789"); - const voterCards = screen.getByTestId("voter_card_count"); - expect(voterCards).toHaveFocus(); - await user.type(voterCards, "123"); - expect(voterCards).toHaveValue("123"); + await user.keyboard("{enter}"); - await user.keyboard("{enter}"); + const voterCards = screen.getByTestId("voter_card_count"); + expect(voterCards).toHaveFocus(); + await user.type(voterCards, "123"); + expect(voterCards).toHaveValue("123"); - const totalAdmittedVoters = screen.getByTestId("total_admitted_voters_count"); - expect(totalAdmittedVoters).toHaveFocus(); - await user.paste("4242"); - expect(totalAdmittedVoters).toHaveValue("4.242"); + await user.keyboard("{enter}"); - await user.keyboard("{enter}"); + const totalAdmittedVoters = screen.getByTestId("total_admitted_voters_count"); + expect(totalAdmittedVoters).toHaveFocus(); + await user.paste("4242"); + expect(totalAdmittedVoters).toHaveValue("4.242"); - const votesOnCandidates = screen.getByTestId("votes_candidates_counts"); - expect(votesOnCandidates).toHaveFocus(); - await user.type(votesOnCandidates, "12"); - expect(votesOnCandidates).toHaveValue("12"); + await user.keyboard("{enter}"); - await user.keyboard("{enter}"); + const votesOnCandidates = screen.getByTestId("votes_candidates_counts"); + expect(votesOnCandidates).toHaveFocus(); + await user.type(votesOnCandidates, "12"); + expect(votesOnCandidates).toHaveValue("12"); - const blankVotes = screen.getByTestId("blank_votes_count"); - expect(blankVotes).toHaveFocus(); - // Test if maxLength on field works - await user.type(blankVotes, "1000000000"); - expect(blankVotes).toHaveValue("100.000.000"); + await user.keyboard("{enter}"); - await user.keyboard("{enter}"); + const blankVotes = screen.getByTestId("blank_votes_count"); + expect(blankVotes).toHaveFocus(); + // Test if maxLength on field works + await user.type(blankVotes, "1000000000"); + expect(blankVotes).toHaveValue("100.000.000"); - const invalidVotes = screen.getByTestId("invalid_votes_count"); - expect(invalidVotes).toHaveFocus(); - await user.type(invalidVotes, "3"); - expect(invalidVotes).toHaveValue("3"); + await user.keyboard("{enter}"); - await user.keyboard("{enter}"); + const invalidVotes = screen.getByTestId("invalid_votes_count"); + expect(invalidVotes).toHaveFocus(); + await user.type(invalidVotes, "3"); + expect(invalidVotes).toHaveValue("3"); - const totalVotesCast = screen.getByTestId("total_votes_cast_count"); - expect(totalVotesCast).toHaveFocus(); - await user.type(totalVotesCast, "555"); - expect(totalVotesCast).toHaveValue("555"); + await user.keyboard("{enter}"); - const submitButton = screen.getByRole("button", { name: "Volgende" }); - await user.click(submitButton); + const totalVotesCast = screen.getByTestId("total_votes_cast_count"); + expect(totalVotesCast).toHaveFocus(); + await user.type(totalVotesCast, "555"); + expect(totalVotesCast).toHaveValue("555"); - const result = await screen.findByTestId("result"); - expect(result).toHaveTextContent(/^Success$/); + const submitButton = screen.getByRole("button", { name: "Volgende" }); + await user.click(submitButton); + + const result = await screen.findByTestId("result"); + expect(result).toHaveTextContent(/^Success$/); + }); }); - test("VotersAndVotesForm request body is equal to the form data", async () => { - const spy = vi.spyOn(global, "fetch"); - - const expectedRequest = { - data: { - ...rootRequest.data, - voters_counts: { - poll_card_count: 1, - proxy_certificate_count: 2, - voter_card_count: 3, - total_admitted_voters_count: 6, - }, - votes_counts: { - votes_candidates_counts: 4, - blank_votes_count: 5, - invalid_votes_count: 6, - total_votes_cast_count: 15, + 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, + voters_counts: { + poll_card_count: 1, + proxy_certificate_count: 2, + voter_card_count: 3, + total_admitted_voters_count: 6, + }, + votes_counts: { + votes_candidates_counts: 4, + blank_votes_count: 5, + invalid_votes_count: 6, + total_votes_cast_count: 15, + }, }, - }, - }; - - const user = userEvent.setup(); - - render(Component); - - await user.type( - screen.getByTestId("poll_card_count"), - expectedRequest.data.voters_counts.poll_card_count.toString(), - ); - await user.type( - screen.getByTestId("proxy_certificate_count"), - expectedRequest.data.voters_counts.proxy_certificate_count.toString(), - ); - await user.type( - screen.getByTestId("voter_card_count"), - expectedRequest.data.voters_counts.voter_card_count.toString(), - ); - await user.type( - screen.getByTestId("total_admitted_voters_count"), - expectedRequest.data.voters_counts.total_admitted_voters_count.toString(), - ); - - await user.type( - screen.getByTestId("votes_candidates_counts"), - expectedRequest.data.votes_counts.votes_candidates_counts.toString(), - ); - await user.type( - screen.getByTestId("blank_votes_count"), - expectedRequest.data.votes_counts.blank_votes_count.toString(), - ); - await user.type( - screen.getByTestId("invalid_votes_count"), - expectedRequest.data.votes_counts.invalid_votes_count.toString(), - ); - await user.type( - screen.getByTestId("total_votes_cast_count"), - expectedRequest.data.votes_counts.total_votes_cast_count.toString(), - ); - - const submitButton = screen.getByRole("button", { name: "Volgende" }); - await user.click(submitButton); - - expect(spy).toHaveBeenCalled(); - const { url, method, body } = getUrlMethodAndBody(spy.mock.calls); - - expect(url).toEqual("http://testhost/v1/api/polling_stations/1/data_entries/1"); - expect(method).toEqual("POST"); - expect(body).toEqual(expectedRequest); - - const result = await screen.findByTestId("result"); - expect(result).toHaveTextContent(/^Success$/); - }); + }; - test("422 response results in display of error message", async () => { - overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 422, { - message: "422 error from mock", - }); + const user = userEvent.setup(); - const user = userEvent.setup(); + render(Component); - render(Component); + await user.type( + screen.getByTestId("poll_card_count"), + expectedRequest.data.voters_counts.poll_card_count.toString(), + ); + await user.type( + screen.getByTestId("proxy_certificate_count"), + expectedRequest.data.voters_counts.proxy_certificate_count.toString(), + ); + await user.type( + screen.getByTestId("voter_card_count"), + expectedRequest.data.voters_counts.voter_card_count.toString(), + ); + await user.type( + screen.getByTestId("total_admitted_voters_count"), + expectedRequest.data.voters_counts.total_admitted_voters_count.toString(), + ); + + await user.type( + screen.getByTestId("votes_candidates_counts"), + expectedRequest.data.votes_counts.votes_candidates_counts.toString(), + ); + await user.type( + screen.getByTestId("blank_votes_count"), + expectedRequest.data.votes_counts.blank_votes_count.toString(), + ); + await user.type( + screen.getByTestId("invalid_votes_count"), + expectedRequest.data.votes_counts.invalid_votes_count.toString(), + ); + await user.type( + screen.getByTestId("total_votes_cast_count"), + expectedRequest.data.votes_counts.total_votes_cast_count.toString(), + ); - const submitButton = screen.getByRole("button", { name: "Volgende" }); - await user.click(submitButton); - const feedbackServerError = await screen.findByTestId("feedback-server-error"); - expect(feedbackServerError).toHaveTextContent(/^Error422 error from mock$/); + const submitButton = screen.getByRole("button", { name: "Volgende" }); + await user.click(submitButton); - expect(screen.queryByTestId("result")).not.toBeNull(); - expect(screen.queryByTestId("result")).toHaveTextContent(/^422 error from mock$/); - }); + expect(spy).toHaveBeenCalled(); + const { url, method, body } = getUrlMethodAndBody(spy.mock.calls); + + expect(url).toEqual("http://testhost/v1/api/polling_stations/1/data_entries/1"); + expect(method).toEqual("POST"); + expect(body).toEqual(expectedRequest); - test("500 response results in display of error message", async () => { - overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 500, { - message: "500 error from mock", - errorCode: "500_ERROR", + const result = await screen.findByTestId("result"); + expect(result).toHaveTextContent(/^Success$/); }); - const user = userEvent.setup(); + test("422 response results in display of error message", async () => { + overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 422, { + message: "422 error from mock", + }); - render(Component); + const user = userEvent.setup(); - const submitButton = screen.getByRole("button", { name: "Volgende" }); - await user.click(submitButton); - const feedbackServerError = await screen.findByTestId("feedback-server-error"); - expect(feedbackServerError).toHaveTextContent(/^Error500 error from mock$/); + render(Component); - expect(screen.queryByTestId("result")).not.toBeNull(); - expect(screen.queryByTestId("result")).toHaveTextContent(/^500 error from mock$/); - }); + const submitButton = screen.getByRole("button", { name: "Volgende" }); + await user.click(submitButton); + const feedbackServerError = await screen.findByTestId("feedback-server-error"); + expect(feedbackServerError).toHaveTextContent(/^Error422 error from mock$/); - test("Incorrect total is caught by validation", async () => { - overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 200, { - message: "Data saved", - saved: true, - validation_results: { - errors: [ - { - fields: [ - "data.votes_counts.total_votes_cast_count", - "data.votes_counts.blank_votes_count", - "data.votes_counts.invalid_votes_count", - "data.votes_counts.votes_candidates_counts", - ], - code: "IncorrectTotal", - }, - { - fields: [ - "data.voters_counts.total_admitted_voters_count", - "data.voters_counts.poll_card_count", - "data.voters_counts.proxy_certificate_count", - "data.voters_counts.voter_card_count", - ], - code: "IncorrectTotal", - }, - ], - warnings: [], - }, + expect(screen.queryByTestId("result")).not.toBeNull(); + expect(screen.queryByTestId("result")).toHaveTextContent(/^422 error from mock$/); }); - const user = userEvent.setup(); - - render(Component); - - await user.type(screen.getByTestId("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"); + test("500 response results in display of error message", async () => { + overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 500, { + message: "500 error from mock", + errorCode: "500_ERROR", + }); - await user.type(screen.getByTestId("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"); + const user = userEvent.setup(); - const submitButton = screen.getByRole("button", { name: "Volgende" }); - await user.click(submitButton); + render(Component); - const feedbackError = await screen.findByTestId("feedback-error"); - expect(feedbackError).toHaveTextContent(/^IncorrectTotalIncorrectTotal$/); - expect(screen.queryByTestId("result")).toBeNull(); - }); + const submitButton = screen.getByRole("button", { name: "Volgende" }); + await user.click(submitButton); + const feedbackServerError = await screen.findByTestId("feedback-server-error"); + expect(feedbackServerError).toHaveTextContent(/^Error500 error from mock$/); - test("Error with non-existing fields is displayed", async () => { - overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 200, { - saved: true, - message: "Data entry saved successfully", - validation_results: { - errors: [ - { - fields: [ - "data.not_a_real_object.not_a_real_field", - "data.not_a_real_object.this_field_does_not_exist", - ], - code: "NotARealError", - }, - ], - warnings: [], - }, + expect(screen.queryByTestId("result")).not.toBeNull(); + expect(screen.queryByTestId("result")).toHaveTextContent(/^500 error from mock$/); }); - - const user = userEvent.setup(); - - render(Component); - - // 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" }); - await user.click(submitButton); - - expect(screen.queryByTestId("result")).toBeNull(); - expect(screen.queryByTestId("feedback-error")).toBeNull(); - expect(screen.queryByTestId("feedback-warning")).toBeNull(); - expect(screen.queryByTestId("feedback-server-error")).toBeNull(); }); describe("VotersAndVotesForm errors", () => { @@ -442,6 +362,39 @@ describe("Test VotersAndVotesForm", () => { expect(screen.queryByTestId("feedback-warning")).toBeNull(); expect(screen.queryByTestId("server-feedback-error")).toBeNull(); }); + + test("Error with non-existing fields is not displayed", async () => { + overrideOnce("post", "/v1/api/polling_stations/1/data_entries/1", 200, { + saved: true, + message: "Data entry saved successfully", + validation_results: { + errors: [ + { + fields: [ + "data.not_a_real_object.not_a_real_field", + "data.not_a_real_object.this_field_does_not_exist", + ], + code: "NotARealError", + }, + ], + warnings: [], + }, + }); + + const user = userEvent.setup(); + + render(Component); + + // 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" }); + await user.click(submitButton); + + expect(screen.queryByTestId("result")).toBeNull(); + expect(screen.queryByTestId("feedback-error")).toBeNull(); + expect(screen.queryByTestId("feedback-warning")).toBeNull(); + expect(screen.queryByTestId("feedback-server-error")).toBeNull(); + }); }); describe("VotersAndVotesForm warnings", () => {