merged fe-testing

fix eslint errors
add slightly more lenient template expression lint rules

frontend/.eslintrc.cjs

@@ -12,23 +12,30 @@ module.exports = {
   parser: "@typescript-eslint/parser",
   plugins: ["react-refresh", "jsx-a11y", "prettier", "@typescript-eslint"],
   rules: {
-    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }]
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    "@typescript-eslint/restrict-template-expressions": [
+      "error",
+      {
+        allowNumber: true,
+        allowBoolean: true
+      }
+    ]
   },
   parserOptions: {
     project: "./tsconfig.json"
   },
   overrides: [
-      {
-        files: "*.e2e.ts",
-        extends: [
-          "eslint:recommended",
-          "plugin:@typescript-eslint/recommended-type-checked",
-          "plugin:playwright/recommended",
-        ],
-        plugins: ["@typescript-eslint"],
-        rules: {
-          "@typescript-eslint/no-floating-promises": "error",
-        }
+    {
+      files: "*.e2e.ts",
+      extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended-type-checked",
+        "plugin:playwright/recommended"
+      ],
+      plugins: ["@typescript-eslint"],
+      rules: {
+        "@typescript-eslint/no-floating-promises": "error"
       }
-    ]
+    }
+  ]
 };

frontend/app/component/form/voters_and_votes/VotersAndVotesForm.test.tsx

@@ -1,20 +1,19 @@
 import { render, screen } from "@testing-library/react";
-import userEvent from '@testing-library/user-event';
+import { userEvent } from "@testing-library/user-event";
 import { expect, test } from "vitest";
 
-import {VotersAndVotesForm} from "./VotersAndVotesForm";
-
+import { VotersAndVotesForm } from "./VotersAndVotesForm";
 
 test("Enter pollCards count", async () => {
   const user = userEvent.setup();
 
   render(<VotersAndVotesForm />);
 
-  const pollCards = screen.getByTestId("pollCards")
+  const pollCards = screen.getByTestId("pollCards");
   expect(pollCards).toBeVisible();
 
-  await user.clear(pollCards)
-  await user.type(pollCards, "12345")
+  await user.clear(pollCards);
+  await user.type(pollCards, "12345");
   expect(pollCards).toHaveValue("12.345");
 
   // ToDo: assert the call to the mocked API once that's been implemented

frontend/app/main.tsx

@@ -26,7 +26,11 @@ function render() {
 }
 
 if (process.env.MSW) {
-  startMockAPI().then(render).catch(console.error);
+  startMockAPI()
+    .then(render)
+    .catch((e: unknown) => {
+      console.error(e);
+    });
 } else {
   render();
 }

frontend/app/module/input/page/PollingStationPage.tsx

@@ -38,7 +38,7 @@ export function PollingStationPage() {
             </ProgressList.Item>
             <ProgressList.Ruler />
             {lijsten.map((lijst, index) => (
-              <ProgressList.Item key={`lijst${index}`} status="idle">
+              <ProgressList.Item key={`lijst${index.toString()}`} status="idle">
                 {lijst}
               </ProgressList.Item>
             ))}

frontend/app/test/unit/server.ts

@@ -13,7 +13,7 @@ import { handlers } from "@kiesraad/api-mocks";
 export const server = setupServer(
   ...handlers.map((h) => {
     // Node's Fetch implementation does not accept URLs with a protocol and host
-    h.info.path = "http://testhost" + h.info.path;
+    h.info.path = "http://testhost" + h.info.path.toString();
     return h;
   })
 );

frontend/lib/ui/Button/Button.tsx

@@ -21,7 +21,7 @@ export function Button({
 }: ButtonProps) {
   return (
     <button
-      className={`${cls["button"]} ${cls[variant]} ${cls[size]}`}
+      className={`${cls["button"] || ""} ${cls[variant] || ""} ${cls[size] || ""}`}
       disabled={isDisabled || isLoading}
       {...htmlButtonProps}
     >

frontend/lib/ui/tag/Tag.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
-import classes from "./tag.module.css";
+import cls from "./tag.module.css";
 
 export interface TagProps {
   type?: "default";
   children: React.ReactNode;
 }
 
 export function Tag({ type = "default", children }: TagProps) {
-  return <div className={`${classes.tag} ${type}`}>{children}</div>;
+  return <div className={`${cls.tag || ""} ${type}`}>{children}</div>;
 }

frontend/lib/util/hook/useInputMask.ts

@@ -1,7 +1,5 @@
 import * as React from "react";
 
-export interface UseInputMaskParams {}
-
 export type FormatFunc = (s: string | number | null | undefined) => string;
 
 export interface UseInputMaskReturn {
@@ -16,7 +14,7 @@ const numberFormatter = new Intl.NumberFormat("nl-NL", {
   maximumFractionDigits: 0
 });
 
-export function useInputMask({}: UseInputMaskParams): UseInputMaskReturn {
+export function useInputMask(): UseInputMaskReturn {
   const format: FormatFunc = React.useCallback((s) => {
     if (!s) return "";
     if (s === "") {

frontend/mockServiceWorker.js

@@ -2,13 +2,14 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.2.2).
+ * Mock Service Worker.
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = '223d191a56023cd36aa88c802961b911'
+const PACKAGE_VERSION = '2.2.13'
+const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -48,7 +49,10 @@ self.addEventListener('message', async function (event) {
     case 'INTEGRITY_CHECK_REQUEST': {
       sendToClient(client, {
         type: 'INTEGRITY_CHECK_RESPONSE',
-        payload: INTEGRITY_CHECKSUM,
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
       })
       break
     }
@@ -202,13 +206,6 @@ async function getResponse(event, client, requestId) {
     return passthrough()
   }
 
-  // Bypass requests with the explicit bypass header.
-  // Such requests can be issued by "ctx.fetch()".
-  const mswIntention = request.headers.get('x-msw-intention')
-  if (['bypass', 'passthrough'].includes(mswIntention)) {
-    return passthrough()
-  }
-
   // Notify the client that a request has been intercepted.
   const requestBuffer = await request.arrayBuffer()
   const clientMessage = await sendToClient(
@@ -240,7 +237,7 @@ async function getResponse(event, client, requestId) {
       return respondWithMock(clientMessage.data)
     }
 
-    case 'MOCK_NOT_FOUND': {
+    case 'PASSTHROUGH': {
       return passthrough()
     }
   }