From c93091f804fdd5cc4fbd277ec1e31c6a3c726521 Mon Sep 17 00:00:00 2001
From: rare-magma <rare-magma@posteo.eu>
Date: Sat, 23 Dec 2023 14:39:05 +0100
Subject: [PATCH] test: update tests after refactor

Signed-off-by: rare-magma <rare-magma@posteo.eu>
---
 .vscode/settings.json                         |  6 +-
 src/App.test.tsx                              |  4 +-
 src/components/ErrorModal/ErrorModal.test.tsx | 61 +++++----------
 .../__snapshots__/ErrorModal.test.tsx.snap    | 32 +-------
 .../LandingPage/LandingPage.test.tsx          | 36 +++------
 .../__snapshots__/LandingPage.test.tsx.snap   | 20 +----
 src/components/NavBar/NavBar.test.tsx         | 49 ++----------
 .../NavBar/__snapshots__/NavBar.test.tsx.snap | 13 +---
 .../Notification/Notification.test.tsx        | 15 ++--
 .../__snapshots__/Notification.test.tsx.snap  |  1 -
 src/context/GeneralContext.test.tsx           | 32 ++++++++
 src/hooks/useDB.ts                            |  5 --
 src/setupTests.ts                             | 78 ++++++++++++++++++-
 src/utils.test.ts                             | 16 ++++
 14 files changed, 173 insertions(+), 195 deletions(-)
 create mode 100644 src/context/GeneralContext.test.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4a8edef..1720134 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,6 +6,6 @@
     "typescriptreact"
   ],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-  },
-}
\ No newline at end of file
+    "source.fixAll.eslint": "explicit"
+  }
+}
diff --git a/src/App.test.tsx b/src/App.test.tsx
index d1baba9..e997c31 100644
--- a/src/App.test.tsx
+++ b/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");
diff --git a/src/components/ErrorModal/ErrorModal.test.tsx b/src/components/ErrorModal/ErrorModal.test.tsx
index 395d357..6779d92 100644
--- a/src/components/ErrorModal/ErrorModal.test.tsx
+++ b/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);
   });
 });
diff --git a/src/components/ErrorModal/__snapshots__/ErrorModal.test.tsx.snap b/src/components/ErrorModal/__snapshots__/ErrorModal.test.tsx.snap
index 669a33d..b5f568c 100644
--- a/src/components/ErrorModal/__snapshots__/ErrorModal.test.tsx.snap
+++ b/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 />`;
diff --git a/src/components/LandingPage/LandingPage.test.tsx b/src/components/LandingPage/LandingPage.test.tsx
index 5005327..cee6d69 100644
--- a/src/components/LandingPage/LandingPage.test.tsx
+++ b/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();
   });
 });
diff --git a/src/components/LandingPage/__snapshots__/LandingPage.test.tsx.snap b/src/components/LandingPage/__snapshots__/LandingPage.test.tsx.snap
index dd6ea8d..799568a 100644
--- a/src/components/LandingPage/__snapshots__/LandingPage.test.tsx.snap
+++ b/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 />`;
diff --git a/src/components/NavBar/NavBar.test.tsx b/src/components/NavBar/NavBar.test.tsx
index 6591d93..78be582 100644
--- a/src/components/NavBar/NavBar.test.tsx
+++ b/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 () => {
diff --git a/src/components/NavBar/__snapshots__/NavBar.test.tsx.snap b/src/components/NavBar/__snapshots__/NavBar.test.tsx.snap
index 4d8da4d..eea1f24 100644
--- a/src/components/NavBar/__snapshots__/NavBar.test.tsx.snap
+++ b/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 />`;
diff --git a/src/components/Notification/Notification.test.tsx b/src/components/Notification/Notification.test.tsx
index 2b22707..8a9f008 100644
--- a/src/components/Notification/Notification.test.tsx
+++ b/src/components/Notification/Notification.test.tsx
@@ -1,11 +1,9 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { vi } from "vitest";
-import { BudgetNotification, Notification } from "./Notification";
+import { BudgetNotification } from "../../context/GeneralContext";
+import { Notification } from "./Notification";
 
 describe("Notification", () => {
-  const onShow = vi.fn();
-
   const notification: BudgetNotification = {
     show: true,
     id: "a",
@@ -13,10 +11,9 @@ describe("Notification", () => {
     showUndo: true,
   };
 
-  const comp = <Notification notification={notification} onShow={onShow} />;
+  const comp = <Notification notification={notification} />;
 
   beforeEach(() => {
-    onShow.mockClear();
     render(comp);
   });
 
@@ -28,21 +25,19 @@ describe("Notification", () => {
     expect(screen.getByText("notification body")).toBeInTheDocument();
   });
 
-  it("triggers onShow when closed", async () => {
+  it("closes when close button is clicked", async () => {
     await userEvent.click(
       screen.getByRole("button", {
         name: "dismiss notification",
       }),
     );
-    expect(onShow).toHaveBeenCalled();
   });
 
-  it("triggers onShow when undo button is clicked", async () => {
+  it("closes when undo button is clicked", async () => {
     await userEvent.click(
       screen.getByRole("button", {
         name: "undo budget deletion",
       }),
     );
-    expect(onShow).toHaveBeenCalled();
   });
 });
diff --git a/src/components/Notification/__snapshots__/Notification.test.tsx.snap b/src/components/Notification/__snapshots__/Notification.test.tsx.snap
index 8c3dad0..23f6f62 100644
--- a/src/components/Notification/__snapshots__/Notification.test.tsx.snap
+++ b/src/components/Notification/__snapshots__/Notification.test.tsx.snap
@@ -10,6 +10,5 @@ exports[`Notification > matches snapshot 1`] = `
       "showUndo": true,
     }
   }
-  onShow={[MockFunction spy]}
 />
 `;
diff --git a/src/context/GeneralContext.test.tsx b/src/context/GeneralContext.test.tsx
new file mode 100644
index 0000000..97a315a
--- /dev/null
+++ b/src/context/GeneralContext.test.tsx
@@ -0,0 +1,32 @@
+import { render } from "@testing-library/react";
+import { generalContextSpy, testErrorGeneralContext } from "../setupTests";
+import { GeneralProvider, useGeneralContext } from "./GeneralContext";
+
+function TestComponent() {
+  const { error, csvErrors, jsonErrors, showError } = useGeneralContext();
+  return (
+    <>
+      <p aria-label="error">{error?.toString()}</p>
+      <p aria-label="csv">{csvErrors.toString()}</p>
+      <p aria-label="json">{jsonErrors.toString()}</p>
+      <p aria-label="showError">{showError.toString()}</p>
+    </>
+  );
+}
+
+describe("GeneralProvider", () => {
+  beforeEach(() => {
+    generalContextSpy.mockReturnValue(testErrorGeneralContext);
+  });
+  it("provides expected GeneralContext obj to child elements", () => {
+    const { getByLabelText } = render(
+      <GeneralProvider>
+        <TestComponent />
+      </GeneralProvider>,
+    );
+    expect(getByLabelText("error").textContent).toEqual("Thrown error");
+    expect(getByLabelText("csv").textContent).toEqual("");
+    expect(getByLabelText("json").textContent).toEqual("");
+    expect(getByLabelText("showError").textContent).toEqual("true");
+  });
+});
diff --git a/src/hooks/useDB.ts b/src/hooks/useDB.ts
index 3045480..e0cfc63 100644
--- a/src/hooks/useDB.ts
+++ b/src/hooks/useDB.ts
@@ -28,7 +28,6 @@ export function useDB() {
     setCsvErrors,
     setJsonErrors,
     setNeedReload,
-    loadingFromDB,
     setLoadingFromDB,
     notifications,
     setNotifications,
@@ -335,8 +334,6 @@ export function useDB() {
   }, [budget]);
 
   return {
-    loadingFromDB,
-    setLoadingFromDB,
     createBudget,
     cloneBudget,
     handleImport,
@@ -347,8 +344,6 @@ export function useDB() {
     loadCurrencyOption,
     loadBudget,
     loadFromDb,
-    notifications,
-    setNotifications,
     options,
   };
 }
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 8cc98be..17a6584 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -11,6 +11,7 @@ import { Budget } from "./components/Budget/Budget";
 import { ItemForm } from "./components/ItemForm/ItemForm";
 import * as AppBudgetContext from "./context/BudgetContext";
 import * as AppConfigContext from "./context/ConfigContext";
+import * as AppGeneralContext from "./context/GeneralContext";
 
 window.crypto.randomUUID = randomUUID;
 // global.URL.createObjectURL = vi.fn();
@@ -24,10 +25,15 @@ expect.extend(matchers);
 
 export const configContextSpy = vi.spyOn(AppConfigContext, "useConfig");
 export const budgetContextSpy = vi.spyOn(AppBudgetContext, "useBudget");
+export const generalContextSpy = vi.spyOn(
+  AppGeneralContext,
+  "useGeneralContext",
+);
 
 beforeEach(() => {
   budgetContextSpy.mockReturnValue(testBudgetContext);
   configContextSpy.mockReturnValue(testConfigContext);
+  generalContextSpy.mockReturnValue(testGeneralContext);
 });
 
 // runs a cleanup after each test case (e.g. clearing jsdom)
@@ -240,7 +246,6 @@ export const testSpanishConfigContext = {
 export const setBudgetMock = vi.fn();
 export const setBudgetListMock = vi.fn();
 export const setBudgetNameListMock = vi.fn();
-export const setNeedReloadMock = vi.fn();
 export const undoMock = vi.fn();
 export const redoMock = vi.fn();
 export const testEmptyBudgetContext = {
@@ -257,7 +262,6 @@ export const testEmptyBudgetContext = {
   past: [],
   future: [],
   needReload: true,
-  setNeedReload: setNeedReloadMock,
   undo: undoMock,
   redo: redoMock,
   canUndo: false,
@@ -277,10 +281,76 @@ export const testBudgetContext = {
   revenuePercentage: 10,
   past: [],
   future: [],
-  needReload: true,
-  setNeedReload: setNeedReloadMock,
   undo: undoMock,
   redo: redoMock,
   canUndo: false,
   canRedo: false,
 };
+
+export const setNeedReloadMock = vi.fn();
+export const setLoadingFromDBMock = vi.fn();
+export const setErrorMock = vi.fn();
+export const setCsvErrorsMock = vi.fn();
+export const setJsonErrorsMock = vi.fn();
+export const setShowErrorMock = vi.fn();
+export const setNotificationsMock = vi.fn();
+export const handleErrorMock = vi.fn();
+export const testGeneralContext = {
+  needReload: false,
+  setNeedReload: setNeedReloadMock,
+  loadingFromDB: false,
+  setLoadingFromDB: setLoadingFromDBMock,
+  error: "",
+  setError: setErrorMock,
+  csvErrors: [],
+  setCsvErrors: setCsvErrorsMock,
+  jsonErrors: [],
+  setJsonErrors: setJsonErrorsMock,
+  showError: false,
+  setShowError: setShowErrorMock,
+  notifications: [],
+  setNotifications: setNotificationsMock,
+  handleError: handleErrorMock,
+};
+
+const jsonErrors: AppGeneralContext.JsonError[] = [
+  {
+    errors:
+      "SyntaxError: Expected ',' or '}' after property value in JSON at position 209",
+    file: "123.json",
+  },
+];
+
+const csvErrors: AppGeneralContext.CsvError[] = [
+  {
+    errors: [
+      {
+        type: "FieldMismatch",
+        code: "TooFewFields",
+        message: "Line 0: Too few fields: expected 3 fields but parsed 2",
+        row: 0,
+      },
+    ],
+    file: "123.csv",
+  },
+];
+
+const error = "Thrown error";
+
+export const testErrorGeneralContext = {
+  ...testGeneralContext,
+  error: error,
+  showError: true,
+};
+
+export const testJsonErrorGeneralContext = {
+  ...testGeneralContext,
+  jsonErrors: jsonErrors,
+  showError: true,
+};
+
+export const testCsvErrorGeneralContext = {
+  ...testGeneralContext,
+  csvErrors: csvErrors,
+  showError: true,
+};
diff --git a/src/utils.test.ts b/src/utils.test.ts
index 0b3f192..3f090b0 100644
--- a/src/utils.test.ts
+++ b/src/utils.test.ts
@@ -29,6 +29,7 @@ import {
   createNewBudget,
   getCountryCode,
   getCurrencyCode,
+  getLabelKey,
   getNestedProperty,
   getNestedValues,
   intlFormat,
@@ -230,3 +231,18 @@ test("getNestedValues", () => {
     expected2,
   );
 });
+
+test("getLabelKey", () => {
+  const optionWithoutItem = {
+    id: "035c2de4-00a4-403c-8f0e-f81339be9a4e",
+    item: "",
+    name: "2023-03",
+  };
+  const option = {
+    id: "035c2de4-00a4-403c-8f0e-f81339be9a4e",
+    item: "item name",
+    name: "2023-03",
+  };
+  expect(getLabelKey(optionWithoutItem)).toEqual("2023-03");
+  expect(getLabelKey(option)).toEqual("2023-03 item name");
+});