Fix showing of polling station number on input pages (#197)

Co-authored-by: cikzh <marlonpeeters@tweedegolf.com> Co-authored-by: Mark Janssen <20283+praseodym@users.noreply.github.com> Co-authored-by: Joep Schuurkes <145749778+jschuurk-kr@users.noreply.github.com>
kiesraad · Jul 31, 2024 · 8f6645a · 8f6645a
1 parent 6fc980d
commit 8f6645a
Show file tree

Hide file tree

Showing 37 changed files with 437 additions and 701 deletions.
diff --git a/frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.test.tsx b/frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.test.tsx
@@ -9,19 +9,19 @@ import {
   POLLING_STATION_DATA_ENTRY_REQUEST_BODY,
   PollingStationFormController,
 } from "@kiesraad/api";
-import { electionDetailMock, politicalGroupMock } from "@kiesraad/api-mocks";
+import { electionMock, politicalGroupMock } from "@kiesraad/api-mocks";
 
 import { CandidatesVotesForm } from "./CandidatesVotesForm";
 
 const Component = (
-  <PollingStationFormController election={electionDetailMock} pollingStationId={1} entryNumber={1}>
+  <PollingStationFormController election={electionMock} pollingStationId={1} entryNumber={1}>
     <CandidatesVotesForm group={politicalGroupMock} />
   </PollingStationFormController>
 );
 
 const rootRequest: POLLING_STATION_DATA_ENTRY_REQUEST_BODY = {
   data: {
-    political_group_votes: electionDetailMock.political_groups.map((group) => ({
+    political_group_votes: electionMock.political_groups.map((group) => ({
       number: group.number,
       total: 0,
       candidate_votes: group.candidates.map((candidate) => ({
@@ -173,7 +173,7 @@ describe("Test CandidatesVotesForm", () => {
 
       const electionMockData: Election = {
         id: 1,
-        name: "Municipal Election",
+        name: "Gemeenteraadsverkiezingen 2026",
         category: "Municipal",
         election_date: "2024-11-30",
         nomination_date: "2024-11-01",

diff --git a/frontend/app/component/form/differences/DifferencesForm.test.tsx b/frontend/app/component/form/differences/DifferencesForm.test.tsx
@@ -10,19 +10,19 @@ import {
   POLLING_STATION_DATA_ENTRY_REQUEST_BODY,
   PollingStationFormController,
 } from "@kiesraad/api";
-import { electionDetailMock } from "@kiesraad/api-mocks";
+import { electionMock } from "@kiesraad/api-mocks";
 
 import { DifferencesForm } from "./DifferencesForm";
 
 const Component = (
-  <PollingStationFormController election={electionDetailMock} pollingStationId={1} entryNumber={1}>
+  <PollingStationFormController election={electionMock} pollingStationId={1} entryNumber={1}>
     <DifferencesForm />
   </PollingStationFormController>
 );
 
 const rootRequest: POLLING_STATION_DATA_ENTRY_REQUEST_BODY = {
   data: {
-    political_group_votes: electionDetailMock.political_groups.map((group) => ({
+    political_group_votes: electionMock.political_groups.map((group) => ({
       number: group.number,
       total: 0,
       candidate_votes: group.candidates.map((candidate) => ({

diff --git a/frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.test.tsx b/frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.test.tsx
@@ -1,21 +1,21 @@
 import { userEvent } from "@testing-library/user-event";
 import { describe, expect, test } from "vitest";
 
-import { PollingStationChoiceForm } from "app/component/form/polling_station_choice/PollingStationChoiceForm.tsx";
+import { PollingStationChoiceForm } from "app/component/form/polling_station_choice/PollingStationChoiceForm";
 import { overrideOnce, render, screen, within } from "app/test/unit";
 
-import { PollingStationProvider } from "@kiesraad/api";
-import { pollingStationMock } from "@kiesraad/api-mocks";
+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, pollingStationMock);
+    overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationsMockResponse);
     const user = userEvent.setup();
 
     render(
-      <PollingStationProvider electionId={1}>
+      <PollingStationListProvider electionId={1}>
         <PollingStationChoiceForm />
-      </PollingStationProvider>,
+      </PollingStationListProvider>,
     );
 
     const pollingStation = screen.getByTestId("pollingStation");
@@ -37,12 +37,12 @@ describe("Test PollingStationChoiceForm", () => {
   });
 
   test("Selecting a valid polling station", async () => {
-    overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationMock);
+    overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationsMockResponse);
     const user = userEvent.setup();
     render(
-      <PollingStationProvider electionId={1}>
+      <PollingStationListProvider electionId={1}>
         <PollingStationChoiceForm />
-      </PollingStationProvider>,
+      </PollingStationListProvider>,
     );
     const pollingStation = screen.getByTestId("pollingStation");
 
@@ -53,12 +53,12 @@ describe("Test PollingStationChoiceForm", () => {
   });
 
   test("Selecting a non-existing polling station", async () => {
-    overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationMock);
+    overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationsMockResponse);
     const user = userEvent.setup();
     render(
-      <PollingStationProvider electionId={1}>
+      <PollingStationListProvider electionId={1}>
         <PollingStationChoiceForm />
-      </PollingStationProvider>,
+      </PollingStationListProvider>,
     );
     const pollingStation = screen.getByTestId("pollingStation");
 
@@ -71,13 +71,13 @@ describe("Test PollingStationChoiceForm", () => {
   });
 
   test("Polling station list", async () => {
-    overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationMock);
+    overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationsMockResponse);
     const user = userEvent.setup();
 
     render(
-      <PollingStationProvider electionId={1}>
+      <PollingStationListProvider electionId={1}>
         <PollingStationChoiceForm />
-      </PollingStationProvider>,
+      </PollingStationListProvider>,
     );
 
     expect(screen.getByText("Kies het stembureau")).not.toBeVisible();
@@ -101,9 +101,9 @@ describe("Test PollingStationChoiceForm", () => {
     const user = userEvent.setup();
 
     render(
-      <PollingStationProvider electionId={1}>
+      <PollingStationListProvider electionId={1}>
         <PollingStationChoiceForm />
-      </PollingStationProvider>,
+      </PollingStationListProvider>,
     );
 
     const openPollingStationList = screen.getByTestId("openPollingStationList");
@@ -121,9 +121,9 @@ describe("Test PollingStationChoiceForm", () => {
     const user = userEvent.setup();
 
     render(
-      <PollingStationProvider electionId={1}>
+      <PollingStationListProvider electionId={1}>
         <PollingStationChoiceForm />
-      </PollingStationProvider>,
+      </PollingStationListProvider>,
     );
 
     const openPollingStationList = screen.getByTestId("openPollingStationList");

diff --git a/frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.tsx b/frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.tsx
@@ -1,7 +1,7 @@
-import { useContext, useState } from "react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { PollingStationsContext } from "@kiesraad/api";
+import { usePollingStationList } from "@kiesraad/api";
 import { Alert, BottomBar, Button, Icon, Spinner } from "@kiesraad/ui";
 
 import { PollingStationSelector } from "./PollingStationSelector";
@@ -10,7 +10,7 @@ import { PollingStationsList } from "./PollingStationsList";
 export function PollingStationChoiceForm() {
   const navigate = useNavigate();
 
-  const { pollingStations, pollingStationsLoading } = useContext(PollingStationsContext);
+  const { pollingStations, pollingStationsLoading } = usePollingStationList();
   const [pollingStationNumber, setPollingStationNumber] = useState<string>("");
 
   const handleSubmit = () => {
@@ -39,7 +39,7 @@ export function PollingStationChoiceForm() {
       <p className="md">
         Klopt de naam van het stembureau met de naam op je papieren proces verbaal?
         <br />
-        Dan kan je beginnen.
+        Dan kan je beginnen. Klopt de naam niet? Overleg met de coördinator.
       </p>
       <BottomBar type="form">
         <Button

diff --git a/frontend/app/component/form/polling_station_choice/PollingStationSelector.module.css b/frontend/app/component/form/polling_station_choice/PollingStationSelector.module.css
@@ -3,6 +3,10 @@
   align-items: center;
 }
 
+.input {
+  text-align: right;
+}
+
 .result {
   margin: 0 1em;
   padding: 0 2em;

diff --git a/frontend/app/component/form/polling_station_choice/PollingStationSelector.tsx b/frontend/app/component/form/polling_station_choice/PollingStationSelector.tsx
@@ -1,6 +1,6 @@
-import { Dispatch, SetStateAction, useContext, useMemo, useState } from "react";
+import { Dispatch, SetStateAction, useMemo, useState } from "react";
 
-import { PollingStation, PollingStationsContext } from "@kiesraad/api";
+import { PollingStation, usePollingStationList } from "@kiesraad/api";
 import { IconError } from "@kiesraad/icon";
 import { Icon, InputField, Spinner } from "@kiesraad/ui";
 import { cn, useDebouncedCallback } from "@kiesraad/util";
@@ -25,7 +25,7 @@ export function PollingStationSelector({
     undefined,
   );
 
-  const { pollingStations, pollingStationsLoading } = useContext(PollingStationsContext);
+  const { pollingStations, pollingStationsLoading } = usePollingStationList();
 
   const debouncedCallback = useDebouncedCallback((pollingStation: PollingStation | undefined) => {
     setLoading(false);
@@ -44,6 +44,7 @@ export function PollingStationSelector({
     <div className={cls.container}>
       <InputField
         id="pollingStation"
+        className={cls.input}
         name="number"
         value={pollingStationNumber}
         label="Voer het nummer in:"

diff --git a/frontend/app/component/form/voters_and_votes/VotersAndVotesForm.test.tsx b/frontend/app/component/form/voters_and_votes/VotersAndVotesForm.test.tsx
@@ -10,19 +10,19 @@ import {
   POLLING_STATION_DATA_ENTRY_REQUEST_BODY,
   PollingStationFormController,
 } from "@kiesraad/api";
-import { electionDetailMock } from "@kiesraad/api-mocks";
+import { electionMock } from "@kiesraad/api-mocks";
 
 import { VotersAndVotesForm } from "./VotersAndVotesForm";
 
 const Component = (
-  <PollingStationFormController election={electionDetailMock} pollingStationId={1} entryNumber={1}>
+  <PollingStationFormController election={electionMock} pollingStationId={1} entryNumber={1}>
     <VotersAndVotesForm />
   </PollingStationFormController>
 );
 
 const rootRequest: POLLING_STATION_DATA_ENTRY_REQUEST_BODY = {
   data: {
-    political_group_votes: electionDetailMock.political_groups.map((group) => ({
+    political_group_votes: electionMock.political_groups.map((group) => ({
       number: group.number,
       total: 0,
       candidate_votes: group.candidates.map((candidate) => ({

diff --git a/frontend/app/main.tsx b/frontend/app/main.tsx
@@ -5,8 +5,8 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { ApiProvider, ElectionListProvider } from "@kiesraad/api";
 
 // ignore in prod
-import { startMockAPI } from "./msw-mock-api.ts";
-import { routes } from "./routes.tsx";
+import { startMockAPI } from "./msw-mock-api";
+import { routes } from "./routes";
 
 const rootDiv = document.getElementById("root");
 if (!rootDiv) throw new Error("Root div not found");

diff --git a/frontend/app/module/input/InputLayout.tsx b/frontend/app/module/input/InputLayout.tsx
@@ -1,20 +1,18 @@
-import { Outlet, useParams } from "react-router-dom";
+import { Outlet } from "react-router-dom";
 
 import { Footer } from "app/component/footer/Footer";
 
-import { PollingStationProvider } from "@kiesraad/api";
+import { PollingStationListProvider, useElection } from "@kiesraad/api";
 
 export function InputLayout() {
-  const { electionId } = useParams();
+  const { election } = useElection();
   return (
-    <PollingStationProvider electionId={parseInt(electionId ?? "", 10)}>
+    <PollingStationListProvider electionId={election.id}>
       <div className="app-layout">
-        <nav>Hello world</nav>
-
+        <nav>{election.name}</nav> {/* TODO: Add Role in front of election name */}
         <Outlet />
-
         <Footer />
       </div>
-    </PollingStationProvider>
+    </PollingStationListProvider>
   );
 }
diff --git a/frontend/app/module/input/PollingStation/PollingStationHomePage.tsx b/frontend/app/module/input/PollingStation/PollingStationHomePage.tsx
@@ -0,0 +1,9 @@
+import { Link } from "react-router-dom";
+
+export function PollingStationHomePage() {
+  return (
+    <span>
+      Klik <Link to={"./recounted"}>hier</Link> om met de invoer te beginnen.
+    </span>
+  );
+}
diff --git a/frontend/app/module/input/PollingStation/PollingStationLayout.test.tsx b/frontend/app/module/input/PollingStation/PollingStationLayout.test.tsx
@@ -1,20 +1,47 @@
-import { describe, expect, test } from "vitest";
+import Router from "react-router";
 
-import { render } from "app/test/unit";
+import { describe, expect, test, vi } from "vitest";
 
-import { ElectionListProvider, ElectionProvider } from "@kiesraad/api";
+import { PollingStationLayout } from "app/module/input";
+import { overrideOnce, render, screen } from "app/test/unit";
 
-import { PollingStationLayout } from "./PollingStationLayout";
+import {
+  ElectionListProvider,
+  ElectionProvider,
+  PollingStationFormController,
+  PollingStationListProvider,
+} from "@kiesraad/api";
+import {
+  electionMock,
+  electionMockResponse,
+  pollingStationMock,
+  pollingStationsMockResponse,
+} from "@kiesraad/api-mocks";
 
 describe("PollingStationLayout", () => {
-  test("Enter form field values", () => {
+  overrideOnce("get", "/api/elections/1", 200, electionMockResponse);
+  overrideOnce("get", "/api/elections/1/polling_stations", 200, pollingStationsMockResponse);
+  vi.spyOn(Router, "useParams").mockReturnValue({
+    electionId: electionMock.id.toString(),
+    pollingStationId: pollingStationMock.id.toString(),
+  });
+  test("Render", async () => {
     render(
       <ElectionListProvider>
-        <ElectionProvider electionId={1}>
-          <PollingStationLayout />
+        <ElectionProvider electionId={electionMock.id}>
+          <PollingStationListProvider electionId={electionMock.id}>
+            <PollingStationFormController
+              election={electionMock}
+              pollingStationId={pollingStationMock.id}
+              entryNumber={1}
+            >
+              <PollingStationLayout />
+            </PollingStationFormController>
+          </PollingStationListProvider>
         </ElectionProvider>
       </ElectionListProvider>,
     );
-    expect(true).toBe(true);
+    expect(await screen.findByText(pollingStationMock.name));
+    expect(await screen.findByText(pollingStationMock.number));
   });
 });