test: add more assertions

Signed-off-by: rare-magma <[email protected]>

src/App.test.tsx

@@ -1,4 +1,4 @@
-import { cleanup, render, screen } from "@testing-library/react";
+import { act, cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import App from "./App";
 import { budgetsDB, calcHistDB, optionsDB } from "./db";
@@ -44,7 +44,11 @@ describe("App", () => {
   });
 
   it("deletes budget when clicking delete button", async () => {
-    await expect(budgetsDB.getItem(testBudget.id)).resolves.toEqual(testBudget);
+    await act(async () => {
+      await expect(budgetsDB.getItem(testBudget.id)).resolves.toEqual(
+        testBudget,
+      );
+    });
     const newButton = screen.getAllByRole("button", { name: "new budget" });
     await userEvent.click(newButton[0]);
     await screen
@@ -57,6 +61,8 @@ describe("App", () => {
       screen.getByRole("button", { name: /confirm budget deletion/i }),
     );
 
-    await expect(budgetsDB.getItem(testBudget.id)).resolves.toBeNull();
+    await act(async () => {
+      await expect(budgetsDB.getItem(testBudget.id)).resolves.toBeNull();
+    });
   });
 });

src/components/CalculateButton/CalculateButton.test.tsx

@@ -22,9 +22,9 @@ describe("CalculateButton", () => {
     expect(comp).toMatchSnapshot();
   });
 
-  it("renders initial state", () => {
+  it("renders initial state", async () => {
     expect(
-      screen.getByLabelText("select operation type to item value"),
+      await screen.findByLabelText("select operation type to item value"),
     ).toBeInTheDocument();
   });
 

src/components/Chart/Chart.test.tsx

@@ -18,10 +18,6 @@ describe("Chart", () => {
       })}
     />
   );
-  beforeAll(() => {
-    vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockReturnValue(800);
-    vi.spyOn(HTMLElement.prototype, "clientWidth", "get").mockReturnValue(800);
-  });
 
   beforeEach(() => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -44,6 +40,7 @@ describe("Chart", () => {
   it("matches snapshot", () => {
     expect(comp).toMatchSnapshot();
   });
+
   it("renders initial state", () => {
     expect(screen.getByText("chart header")).toBeInTheDocument();
     expect(screen.getByText("median revenue")).toBeInTheDocument();

src/components/ChartsPage/ChartsPage.test.tsx

@@ -7,11 +7,6 @@ describe("ChartsPage", () => {
   const onShowGraphs = vi.fn();
   const comp = <ChartsPage onShowGraphs={onShowGraphs} />;
 
-  beforeAll(() => {
-    vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockReturnValue(800);
-    vi.spyOn(HTMLElement.prototype, "clientWidth", "get").mockReturnValue(800);
-  });
-
   beforeEach(() => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     //@ts-ignore

src/components/ItemForm/ItemFormGroup.test.tsx

@@ -4,6 +4,8 @@ import React from "react";
 import {
   configContextSpy,
   itemForm1,
+  setBudgetMock,
+  testBudget,
   testSpanishConfigContext,
 } from "../../setupTests";
 import { ItemFormGroup } from "./ItemFormGroup";
@@ -26,26 +28,71 @@ describe("ItemFormGroup", () => {
   it("matches snapshot", () => {
     expect(comp).toMatchSnapshot();
   });
-  it("renders initial state", () => {
-    expect(screen.getByDisplayValue("name1")).toBeInTheDocument();
-    expect(screen.getByDisplayValue("$10")).toBeInTheDocument();
+
+  it("renders initial state", async () => {
+    expect(await screen.findByDisplayValue("name1")).toBeInTheDocument();
+    expect(await screen.findByDisplayValue("$10")).toBeInTheDocument();
   });
 
   it("reacts to user changing input", async () => {
+    setBudgetMock.mockClear();
     await userEvent.type(screen.getByDisplayValue("name1"), "change name");
+
     expect(screen.getByDisplayValue("name1change name")).toBeInTheDocument();
+    expect(setBudgetMock).toHaveBeenCalledWith(
+      {
+        ...testBudget,
+        expenses: {
+          items: [{ id: 1, name: "name1change name", value: 10 }],
+          total: 10,
+        },
+      },
+      false,
+    );
+
+    setBudgetMock.mockClear();
 
     await userEvent.type(screen.getByDisplayValue("$10"), "123");
+
     expect(screen.getByDisplayValue("$123")).toBeInTheDocument();
+    expect(setBudgetMock).toHaveBeenCalledWith(
+      {
+        ...testBudget,
+        expenses: {
+          items: [{ id: 1, name: "expense1", value: 123 }],
+          total: 123,
+        },
+        stats: {
+          ...testBudget.stats,
+          available: -23,
+          withGoal: -33,
+        },
+      },
+      false,
+    );
   });
 
   it("removes item when user clicks delete confirmation button", async () => {
+    setBudgetMock.mockClear();
     await userEvent.click(
       screen.getByRole("button", { name: "delete item 1" }),
     );
     await userEvent.click(
       screen.getByRole("button", { name: "confirm item 1 deletion" }),
     );
+
+    expect(setBudgetMock).toHaveBeenCalledWith(
+      {
+        ...testBudget,
+        expenses: { items: [], total: 0 },
+        stats: {
+          ...testBudget.stats,
+          available: 100,
+          withGoal: 90,
+        },
+      },
+      true,
+    );
   });
 
   it("shows tooltip when user hovers over", async () => {

src/components/LandingPage/LandingPage.test.tsx

@@ -3,10 +3,12 @@ import userEvent from "@testing-library/user-event";
 import {
   budgetContextSpy,
   generalContextSpy,
+  setBudgetMock,
   testBudget,
   testEmptyBudgetContext,
   testGeneralContext,
 } from "../../setupTests";
+import { createNewBudget } from "../../utils";
 import { LandingPage } from "./LandingPage";
 
 describe("LandingPage", () => {
@@ -30,14 +32,16 @@ describe("LandingPage", () => {
   });
 
   it("triggers new budget", async () => {
+    setBudgetMock.mockClear();
     const newButton = screen.getAllByRole("button", { name: "new budget" })[0];
     await userEvent.click(newButton);
+    expect(setBudgetMock).toHaveBeenCalledWith(createNewBudget(), true);
   });
 
   it("triggers upload", async () => {
     await userEvent.upload(
       screen.getByTestId("import-form-control-landing-page"),
-      new File([testBudget as unknown as Blob], "test"),
+      new File([JSON.stringify(testBudget)], "test"),
     );
   });
 

src/components/NavBar/NavBar.test.tsx

@@ -2,7 +2,9 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import {
   budgetContextSpy,
+  setBudgetMock,
   testBudget,
+  testBudgetClone,
   testEmptyBudgetContext,
 } from "../../setupTests";
 import { NavBar } from "./NavBar";
@@ -46,14 +48,18 @@ describe("NavBar", () => {
   });
 
   it("triggers event when clone button is pressed", async () => {
+    setBudgetMock.mockClear();
     await userEvent.click(screen.getByLabelText("clone budget"));
+    expect(setBudgetMock).toHaveBeenCalledWith(testBudgetClone, true);
   });
 
   it("triggers event when import button is pressed", async () => {
     await userEvent.click(screen.getByLabelText("import budget"));
     await userEvent.upload(
       screen.getByTestId("import-form-control"),
-      new File([testBudget as unknown as Blob], "budget"),
+      new File([JSON.stringify(testBudget)], "budget", {
+        type: "application/json",
+      }),
     );
   });
 
@@ -81,9 +87,14 @@ describe("NavBar", () => {
   });
 
   it("triggers event when user changes budget name input", async () => {
+    setBudgetMock.mockClear();
     await userEvent.type(screen.getByDisplayValue("2023-03"), "change name");
 
     expect(screen.getByDisplayValue("2023-03change name")).toBeInTheDocument();
+    expect(setBudgetMock).toHaveBeenCalledWith(
+      { ...testBudget, name: "2023-03change name" },
+      false,
+    );
   });
 
   it("triggers event when user clicks delete budget button", async () => {

src/components/Notification/Notification.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { BudgetNotification } from "../../context/GeneralContext";
+import { setNotificationsMock, undoMock } from "../../setupTests";
 import { Notification } from "./Notification";
 
 describe("Notification", () => {
@@ -26,18 +27,22 @@ describe("Notification", () => {
   });
 
   it("closes when close button is clicked", async () => {
+    setNotificationsMock.mockClear();
     await userEvent.click(
       screen.getByRole("button", {
         name: "dismiss notification",
       }),
     );
+    expect(setNotificationsMock).toHaveBeenCalledWith([]);
   });
 
   it("closes when undo button is clicked", async () => {
+    undoMock.mockClear();
     await userEvent.click(
       screen.getByRole("button", {
         name: "undo budget deletion",
       }),
     );
+    expect(undoMock).toHaveBeenCalled();
   });
 });

src/components/StatCard/StatCard.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
+import { setBudgetMock, testBudget } from "../../setupTests";
 import { StatCard } from "./StatCard";
 
 describe("StatCard", () => {
@@ -24,20 +25,40 @@ describe("StatCard", () => {
   });
 
   it("triggers onChange when user changes input", async () => {
+    setBudgetMock.mockClear();
     await userEvent.type(screen.getByLabelText("reserves"), "2");
 
+    expect(setBudgetMock).toHaveBeenCalledWith(
+      { ...testBudget, stats: { ...testBudget.stats, reserves: 2 } },
+      false,
+    );
     expect(screen.getByDisplayValue("$2")).toBeInTheDocument();
 
     await userEvent.clear(screen.getByTestId("goal-input"));
     await userEvent.type(screen.getByTestId("goal-input"), "95");
+    expect(setBudgetMock).toHaveBeenCalledWith(
+      {
+        ...testBudget,
+        stats: { ...testBudget.stats, goal: 95, saved: 95, withGoal: -5 },
+      },
+      false,
+    );
 
     expect(screen.getByDisplayValue("95")).toBeInTheDocument();
   });
 
   it("triggers onAutoGoal when user clicks button", async () => {
+    setBudgetMock.mockClear();
     await userEvent.click(
       screen.getByRole("button", { name: "calculate savings goal" }),
     );
+    expect(setBudgetMock).toHaveBeenCalledWith(
+      {
+        ...testBudget,
+        stats: { ...testBudget.stats, goal: 90, saved: 90, withGoal: 0 },
+      },
+      true,
+    );
   });
 
   it("triggers onShowGraphs when user clicks button", async () => {