test: update tests after refactor

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

.vscode/settings.json

@@ -6,6 +6,6 @@
     "typescriptreact"
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-  },
-}
+    "source.fixAll.eslint": "explicit"
+  }
+}

src/App.test.tsx

@@ -16,7 +16,9 @@ describe("App", () => {
     budgetContextSpy.mockReturnValue(testEmptyBudgetContext);
     render(comp);
     expect(screen.getAllByText("guitos")[0]).toBeInTheDocument();
-    expect(screen.getByRole("status")).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: /open guitos changelog/i }),
+    ).toBeInTheDocument();
     expect(budgetsDB.config("name")).toBe("guitos");
     expect(budgetsDB.config("storeName")).toBe("budgets");
     expect(optionsDB.config("name")).toBe("guitos");

src/components/ErrorModal/ErrorModal.test.tsx

@@ -1,50 +1,26 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
+import {
+  generalContextSpy,
+  testCsvErrorGeneralContext,
+  testErrorGeneralContext,
+  testJsonErrorGeneralContext,
+} from "../../setupTests";
 import { ErrorModal } from "./ErrorModal";
 
 describe("ErrorModal", () => {
-  const onError = vi.fn();
-  const onShow = vi.fn();
-
-  const comp = (
-    <ErrorModal
-      error={"Thrown error"}
-      show={true}
-      jsonError={[
-        {
-          errors:
-            "SyntaxError: Expected ',' or '}' after property value in JSON at position 209",
-          file: "123.json",
-        },
-      ]}
-      csvError={[
-        {
-          errors: [
-            {
-              type: "FieldMismatch",
-              code: "TooFewFields",
-              message: "Line 0: Too few fields: expected 3 fields but parsed 2",
-              row: 0,
-            },
-          ],
-          file: "123.csv",
-        },
-      ]}
-      onShow={onShow}
-      onError={onError}
-    />
-  );
+  const comp = <ErrorModal />;
 
   beforeEach(() => {
+    generalContextSpy.mockReturnValue(testJsonErrorGeneralContext);
     render(comp);
   });
 
   it("matches snapshot", () => {
     expect(comp).toMatchSnapshot();
   });
+
   it("renders initial state", () => {
-    expect(screen.getByText("Thrown error")).toBeInTheDocument();
     expect(
       screen.getAllByText("Errors found while importing:")[0],
     ).toBeInTheDocument();
@@ -56,37 +32,36 @@ describe("ErrorModal", () => {
   });
 
   it("closes error when clicking the button", async () => {
+    generalContextSpy.mockClear();
+    generalContextSpy.mockReturnValue(testErrorGeneralContext);
+    render(comp);
     expect(screen.getByTestId("error-modal")).toBeInTheDocument();
     await userEvent.click(screen.getByTestId("error-modal-dismiss"));
-
-    expect(onShow).toHaveBeenCalledWith(false);
   });
 
   it("closes json error when clicking the button", async () => {
     expect(screen.getByTestId("json-error-close")).toBeInTheDocument();
     await userEvent.click(screen.getByTestId("json-error-close"));
-
-    expect(onShow).toHaveBeenCalledWith(false);
   });
 
   it("closes json error modal when clicking the button", async () => {
     expect(screen.getByTestId("json-error-modal")).toBeInTheDocument();
     await userEvent.click(screen.getByTestId("json-error-modal"));
-
-    expect(onShow).toHaveBeenCalledWith(false);
   });
 
   it("closes csv error when clicking the button", async () => {
+    generalContextSpy.mockReturnValue(testCsvErrorGeneralContext);
+    render(comp);
+
     expect(screen.getByTestId("csv-error-close")).toBeInTheDocument();
     await userEvent.click(screen.getByTestId("csv-error-close"));
-
-    expect(onShow).toHaveBeenCalledWith(false);
   });
 
   it("closes csv error modal when clicking the button", async () => {
+    generalContextSpy.mockReturnValue(testCsvErrorGeneralContext);
+    render(comp);
+
     expect(screen.getByTestId("csv-error-modal")).toBeInTheDocument();
     await userEvent.click(screen.getByTestId("csv-error-modal"));
-
-    expect(onShow).toHaveBeenCalledWith(false);
   });
 });

src/components/ErrorModal/__snapshots__/ErrorModal.test.tsx.snap

@@ -1,33 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ErrorModal > matches snapshot 1`] = `
-<ErrorModal
-  csvError={
-    [
-      {
-        "errors": [
-          {
-            "code": "TooFewFields",
-            "message": "Line 0: Too few fields: expected 3 fields but parsed 2",
-            "row": 0,
-            "type": "FieldMismatch",
-          },
-        ],
-        "file": "123.csv",
-      },
-    ]
-  }
-  error="Thrown error"
-  jsonError={
-    [
-      {
-        "errors": "SyntaxError: Expected ',' or '}' after property value in JSON at position 209",
-        "file": "123.json",
-      },
-    ]
-  }
-  onError={[MockFunction spy]}
-  onShow={[MockFunction spy]}
-  show={true}
-/>
-`;
+exports[`ErrorModal > matches snapshot 1`] = `<ErrorModal />`;

src/components/LandingPage/LandingPage.test.tsx

@@ -1,25 +1,16 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
 import {
   budgetContextSpy,
+  generalContextSpy,
   testBudget,
   testEmptyBudgetContext,
+  testGeneralContext,
 } from "../../setupTests";
 import { LandingPage } from "./LandingPage";
 
 describe("LandingPage", () => {
-  const inputRefMock: { current: HTMLInputElement | null } = { current: null };
-  const onNew = vi.fn();
-  const onImport = vi.fn();
-  const comp = (
-    <LandingPage
-      loading={false}
-      inputRef={inputRefMock}
-      onNew={onNew}
-      onImport={onImport}
-    />
-  );
+  const comp = <LandingPage />;
 
   beforeEach(() => {
     budgetContextSpy.mockReturnValue(testEmptyBudgetContext);
@@ -38,18 +29,16 @@ describe("LandingPage", () => {
     ).toBeInTheDocument();
   });
 
-  it("triggers onNew", async () => {
+  it("triggers new budget", async () => {
     const newButton = screen.getAllByRole("button", { name: "new budget" })[0];
     await userEvent.click(newButton);
-    expect(onNew).toHaveBeenCalledTimes(1);
   });
 
-  it("triggers onImport", async () => {
+  it("triggers upload", async () => {
     await userEvent.upload(
       screen.getByTestId("import-form-control-landing-page"),
-      testBudget as unknown as File,
+      new File([testBudget as unknown as Blob], "test"),
     );
-    expect(onImport).toHaveBeenCalledTimes(1);
   });
 
   it("opens instructions in new tab", async () => {
@@ -64,14 +53,11 @@ describe("LandingPage", () => {
   });
 
   it("renders loading spinner", () => {
-    render(
-      <LandingPage
-        loading={true}
-        inputRef={inputRefMock}
-        onNew={onNew}
-        onImport={onImport}
-      />,
-    );
+    generalContextSpy.mockReturnValue({
+      ...testGeneralContext,
+      loadingFromDB: true,
+    });
+    render(<LandingPage />);
     expect(screen.getByRole("status")).toBeInTheDocument();
   });
 });

src/components/LandingPage/__snapshots__/LandingPage.test.tsx.snap

@@ -1,21 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`LandingPage > matches snapshot 1`] = `
-<LandingPage
-  inputRef={
-    {
-      "current": <input
-        class="form-control"
-        data-testid="import-form-control-landing-page"
-        id="import"
-        multiple=""
-        style="display: none;"
-        type="file"
-      />,
-    }
-  }
-  loading={false}
-  onImport={[MockFunction spy]}
-  onNew={[MockFunction spy]}
-/>
-`;
+exports[`LandingPage > matches snapshot 1`] = `<LandingPage />`;

src/components/NavBar/NavBar.test.tsx

@@ -1,6 +1,5 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
 import {
   budgetContextSpy,
   testBudget,
@@ -9,26 +8,7 @@ import {
 import { NavBar } from "./NavBar";
 
 describe("NavBar", () => {
-  const onClone = vi.fn();
-  const onGoBack = vi.fn();
-  const onGoHome = vi.fn();
-  const onGoForward = vi.fn();
-  const onImport = vi.fn();
-  const onNew = vi.fn();
-  const onRemove = vi.fn();
-  const onSelect = vi.fn();
-  const comp = (
-    <NavBar
-      onClone={onClone}
-      onGoBack={onGoBack}
-      onGoHome={onGoHome}
-      onGoForward={onGoForward}
-      onImport={onImport}
-      onNew={onNew}
-      onRemove={onRemove}
-      onSelect={onSelect}
-    />
-  );
+  const comp = <NavBar />;
 
   beforeEach(() => {
     render(comp);
@@ -51,56 +31,43 @@ describe("NavBar", () => {
     expect(screen.getByLabelText("go to newer budget")).toBeInTheDocument();
   });
 
-  it("triggers onGo* when back/fwd buttons are pressed", async () => {
+  it("triggers event when back/fwd buttons are pressed", async () => {
     await userEvent.click(screen.getByLabelText("go to older budget"));
-    expect(onGoBack).toHaveBeenCalledTimes(1);
-    onGoBack.mockClear();
 
     await userEvent.click(screen.getByLabelText("go to newer budget"));
-    expect(onGoForward).toHaveBeenCalledTimes(1);
-    onGoForward.mockClear();
   });
 
-  it("triggers onGo* when back/fwd shortcuts are pressed", async () => {
+  it("triggers event when back/fwd shortcuts are pressed", async () => {
     await userEvent.type(screen.getByTestId("header"), "{pagedown}");
-    expect(onGoBack).toHaveBeenCalledTimes(1);
 
     await userEvent.type(screen.getByTestId("header"), "{home}");
-    expect(onGoHome).toHaveBeenCalledTimes(1);
 
     await userEvent.type(screen.getByTestId("header"), "{pageup}");
-    expect(onGoForward).toHaveBeenCalledTimes(1);
   });
 
-  it("triggers onClone when clone button is pressed", async () => {
+  it("triggers event when clone button is pressed", async () => {
     await userEvent.click(screen.getByLabelText("clone budget"));
-    expect(onClone).toHaveBeenCalledTimes(1);
   });
 
-  it("triggers onImport when import button is pressed", async () => {
+  it("triggers event when import button is pressed", async () => {
     await userEvent.click(screen.getByLabelText("import budget"));
     await userEvent.upload(
       screen.getByTestId("import-form-control"),
-      testBudget as unknown as File,
+      new File([testBudget as unknown as Blob], "budget"),
     );
-    expect(onImport).toHaveBeenCalledTimes(1);
   });
 
-  it("triggers onRename when user changes budget name input", async () => {
+  it("triggers event when user changes budget name input", async () => {
     await userEvent.type(screen.getByDisplayValue("2023-03"), "change name");
 
     expect(screen.getByDisplayValue("2023-03change name")).toBeInTheDocument();
   });
 
-  it("triggers onRemove when user clicks delete budget button", async () => {
+  it("triggers event when user clicks delete budget button", async () => {
     await userEvent.click(screen.getByLabelText("delete budget"));
     await userEvent.click(
       screen.getByRole("button", { name: "confirm budget deletion" }),
     );
-
-    expect(onRemove).toHaveBeenCalledWith(
-      "035c2de4-00a4-403c-8f0e-f81339be9a4e",
-    );
   });
 
   it("opens instructions in new tab", async () => {

src/components/NavBar/__snapshots__/NavBar.test.tsx.snap

@@ -1,14 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`NavBar > matches snapshot 1`] = `
-<NavBar
-  onClone={[MockFunction spy]}
-  onGoBack={[MockFunction spy]}
-  onGoForward={[MockFunction spy]}
-  onGoHome={[MockFunction spy]}
-  onImport={[MockFunction spy]}
-  onNew={[MockFunction spy]}
-  onRemove={[MockFunction spy]}
-  onSelect={[MockFunction spy]}
-/>
-`;
+exports[`NavBar > matches snapshot 1`] = `<NavBar />`;