More tests

Author: stefan-spittank

package-lock.json

@@ -20,11 +20,18 @@
   "devDependencies": {
     "@eslint/eslintrc": "3.3.0",
     "@tailwindcss/postcss": "4.0.14",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "14.6.1",
     "@types/node": "20",
-    "@types/react": "19.0.10",
-    "@types/react-dom": "19.0.4",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
     "eslint": "9.22.0",
     "eslint-config-next": "15.2.1",
+    "jsdom": "26.0.0",
+    "jsdom-testing-mocks": "1.13.1",
     "prettier": "3.5.3",
     "tailwindcss": "4.0.14",
     "typescript": "5.8.2",

package.json

@@ -0,0 +1,39 @@
+import { describe, expect, it, vitest } from "vitest";
+import React from "react";
+import { getMockBohne } from "@/test/mockData";
+import { render } from "@/test/userEvent";
+import { Bohnen } from "@/components/bohnen/Bohnen";
+import * as BohnenRowModule from "@/components/bohnen/BohnenRow";
+
+const useContextMock = vitest.hoisted(() => vitest.fn());
+// Hier mocken wir das react Modul, damit useContext unseren dispatchMock zurückgibt
+// der Rest wird mit importOriginal() aus dem Originalmodul geladen
+vitest.mock("react", async (importOriginal) => ({
+  ...(await importOriginal()),
+  useContext: useContextMock,
+}));
+
+vitest.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+describe("Bohnen", () => {
+  it("Should render a BohnenRow for each bohne", () => {
+    // Arrange
+    const bohne1 = getMockBohne({ id: "1" });
+    const bohne2 = getMockBohne({ id: "2" });
+    useContextMock.mockReturnValue({ bohnen: [bohne1, bohne2] });
+
+    const bohnenRowSpy = vitest
+      .spyOn(BohnenRowModule, "default")
+      .mockImplementation(() => <></>);
+
+    // Act
+    render(<Bohnen />);
+
+    // Assert
+    expect(bohnenRowSpy).toHaveBeenCalledTimes(2);
+    expect(bohnenRowSpy).toHaveBeenCalledWith({ bohne: bohne1 }, undefined);
+    expect(bohnenRowSpy).toHaveBeenCalledWith({ bohne: bohne2 }, undefined);
+  });
+});

src/components/bohnen/Bohnen.test.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { describe, expect, it, vitest } from "vitest";
+import BohnenRow from "@/components/bohnen/BohnenRow";
+import { getMockBohne } from "@/test/mockData";
+import { screen } from "@testing-library/react";
+import { render } from "@/test/userEvent";
+
+const dispatchMock = vitest.hoisted(() => vitest.fn());
+
+// Hier mocken wir das react Modul, damit useContext unseren dispatchMock zurückgibt
+// der Rest wird mit importOriginal() aus dem Originalmodul geladen
+vitest.mock("react", async (importOriginal) => ({
+  ...(await importOriginal()),
+  useContext: () => dispatchMock,
+}));
+
+describe("BohnenRow", () => {
+  it("should render an input field to change the Bohnenart", () => {
+    const mockBohne = getMockBohne();
+    render(
+      <table>
+        <tbody>
+          <BohnenRow bohne={mockBohne} />
+        </tbody>
+      </table>,
+    );
+    const input = screen.getByLabelText("Bohnenart");
+    expect(input).toBeVisible();
+  });
+
+  it("should dispatch an UPDATE event if the user clears the input for Bohnenart", async () => {
+    const mockBohne = getMockBohne();
+    const { user } = render(
+      <table>
+        <tbody>
+          <BohnenRow bohne={mockBohne} />
+        </tbody>
+      </table>,
+    );
+    const input = screen.getByLabelText("Bohnenart");
+
+    await user.clear(input);
+    await user.type(input, "test");
+
+    expect(dispatchMock).toHaveBeenCalledWith({
+      type: "UPDATE",
+      payload: { ...mockBohne, art: "" },
+    });
+  });
+});

src/components/bohnen/BohnenRow.test.tsx

@@ -16,13 +16,15 @@ const BohnenRow = ({ bohne }: BohnenRowProps) => {
         <input
           type="text"
           data-testid="art"
+          aria-label="Bohnenart"
           className="border-2 border-slate-400"
-          onChange={(event) =>
+          onChange={(event) => {
+            console.log("event.target.value", event.target.value);
             dispatch({
               type: BohnenActionTypes.UPDATE,
               payload: { ...bohne, art: event.target.value },
-            })
-          }
+            });
+          }}
           value={bohne.art || ""}
         />
       </td>

src/components/bohnen/BohnenRow.tsx

@@ -3,6 +3,18 @@ import { calculate } from "@/state/calculate";
 import { getMockBohne } from "@/test/mockData";
 import { predictPrice } from "@papperlapappyt/papperlapapp-coffee-prediction";
 
+// Verschiedene Verhaltensweisen mocken
+// Variante: asMock Pattern
+// - Nutzt autoMocking mit vitest.mock
+// - import der nun gemockten Methode unter dem Wissen, dass wir nun eine als Spy gewrappte
+//   Methode haben, deren Verhalten wir beliebig steuern können
+
+// Vorteil:
+// - Einfach zu nutzen
+// Nachteil:
+// - das Automocking passiert nur initial einmal beim Laden der Datei
+// => ein vitest.restoreAllMocks löscht den Spy und wir können die Methode nicht mehr steuern
+
 vitest.mock("@papperlapappyt/papperlapapp-coffee-prediction", () => ({
   predictPrice: vitest.fn(),
 }));

src/state/calculate.as-mock-pattern.test.ts

@@ -3,9 +3,23 @@ import { calculate } from "@/state/calculate";
 import { getMockBohne } from "@/test/mockData";
 import * as predictPriceModule from "@papperlapappyt/papperlapapp-coffee-prediction";
 
-// vitest.mock hier nur, weil predictPrice als read-only property aus dem
-// prediction module exportiert wird.
-// Ansonsten bräuchten wir bei diesem Pattern kein vitest.mock.
+// Verschiedene Verhaltensweisen mocken
+// Variante: importModule Pattern
+// - Nutzt vitest.spyOn um die Methode zu mocken
+// - Dafür werden alle exports der Datei mit * in ein Objekt importiert,
+//   um dieses Objekt mit spyOn nutzen zu können
+
+// Vorteil:
+// - Ich bin unabhängig von vitest.restoreAllMocks
+// Nachteil:
+// - Etwas mehr Boilerplate als Variante beim "as Mock" Pattern
+// - vitest.spyOn kann keine read-only properties mocken
+// => Das ist hier im konkreten Beispiel der Fall. Als workaround wird das
+//    Pattern mit vitest.mock kombiniert.
+//    vitest.mock sorgt hier dafür, dass die readOnly property predictPrice
+//    durch einen Mock ersetzt wird der dann nicht mehr readOnly ist.
+// Ansonsten bräuchten wir bei diesem Pattern kein vitest.mock!
+
 vitest.mock("@papperlapappyt/papperlapapp-coffee-prediction");
 
 describe("tests mit 'as Mock' pattern", () => {

src/state/calculate.import-module-pattern.test.ts

@@ -1,6 +1,6 @@
 import { Bohne } from "@/state/state";
 
-export const getMockBohne = (): Bohne => ({
+export const getMockBohne = (overrides?: Partial<Bohne>): Bohne => ({
   id: "1",
   ekp: 10,
   marge: 10,
@@ -9,4 +9,5 @@ export const getMockBohne = (): Bohne => ({
   vkp: 20,
   art: "test",
   vkpRabatt: 0,
+  ...overrides,
 });

src/test/mockData.ts

@@ -0,0 +1,34 @@
+import userEvent from "@testing-library/user-event";
+import { render as testingLibraryRender } from "@testing-library/react";
+import React from "react";
+import { vitest } from "vitest";
+
+// setup function
+export function render(
+  jsx: React.JSX.Element,
+  useFakeTimers?: "useFakeTimers",
+) {
+  const options =
+    useFakeTimers === "useFakeTimers"
+      ? {
+          advanceTimers: vitest.advanceTimersByTime.bind(vitest),
+        }
+      : undefined;
+
+  if (useFakeTimers) {
+    // @ts-expect-error Workaround für Inkompatibilität zw. vitest mock timer und user event click:
+    // https://github.com/testing-library/user-event/issues/1115
+    globalThis.jest = {
+      advanceTimersByTime: vitest.advanceTimersByTime.bind(vitest),
+    };
+  }
+
+  return {
+    user: userEvent.setup(options),
+    // Import `render` from the framework library of your choice.
+    // See https://testing-library.com/docs/dom-testing-library/install#wrappers
+    ...testingLibraryRender(jsx, {
+      wrapper: (props) => props.children,
+    }),
+  };
+}

src/test/userEvent.ts

@@ -0,0 +1,19 @@
+import * as JestDomMatchers from "@testing-library/jest-dom/matchers";
+import { expect, vitest } from "vitest";
+import "@testing-library/jest-dom/vitest";
+
+expect.extend({ ...JestDomMatchers });
+
+const { error } = console;
+
+console.error = vitest.fn((message, ...restArgs) => {
+  error.apply(console, [message, ...restArgs]); // keep default behaviour
+  throw message instanceof Error ? message : new Error(message);
+});
+
+const { warn } = console;
+
+console.warn = (message, ...restArgs) => {
+  warn.apply(console, [message, ...restArgs]); // keep default behaviour
+  throw message instanceof Error ? message : new Error(message);
+};