refactor: pass userOptions to avoid mocking context

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

src/guitos/sections/ItemForm/ItemFormGroup.test.tsx

@@ -1,16 +1,13 @@
-import { cleanup, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { createRef } from "react";
 import { BrowserRouter } from "react-router-dom";
 import { describe, expect, it } from "vitest";
-import {
-  configContextSpy,
-  setBudgetMock,
-  testSpanishConfigContext,
-} from "../../../setupTests";
+import { setBudgetMock } from "../../../setupTests";
 import { BudgetMother } from "../../domain/budget.mother";
 import { BudgetItemsMother } from "../../domain/budgetItem.mother";
 import { ItemFormGroup } from "./ItemFormGroup";
+import { UserOptionsMother } from "../../domain/userOptions.mother";
 
 describe("ItemFormGroup", () => {
   const ref = createRef<HTMLInputElement>();
@@ -21,6 +18,7 @@ describe("ItemFormGroup", () => {
         label="Expenses"
         inputRef={ref}
         costPercentage={1}
+        userOptions={UserOptionsMother.default()}
       />
     </BrowserRouter>
   );
@@ -119,17 +117,14 @@ describe("ItemFormGroup", () => {
   });
 
   it("transforms decimal separator based on locale", async () => {
-    cleanup();
-
-    configContextSpy.mockReturnValue(testSpanishConfigContext);
-
     render(
       <BrowserRouter>
         <ItemFormGroup
           itemForm={BudgetItemsMother.itemForm1()}
           label="Expenses"
           inputRef={ref}
           costPercentage={1}
+          userOptions={UserOptionsMother.spanish()}
         />
         ,
       </BrowserRouter>,

src/guitos/sections/ItemForm/ItemFormGroup.tsx

@@ -13,7 +13,6 @@ import CurrencyInput from "react-currency-input-field";
 import { BsXLg } from "react-icons/bs";
 import { calc, parseLocaleNumber, roundBig } from "../../../utils";
 import { useBudget } from "../../context/BudgetContext";
-import { useConfig } from "../../context/ConfigContext";
 import type { Expenses } from "../../domain/expenses";
 import type { Incomes } from "../../domain/incomes";
 import { useDB } from "../../hooks/useDB";
@@ -22,26 +21,28 @@ import "./ItemFormGroup.css";
 import { Budget } from "../../domain/budget";
 import type { BudgetItem } from "../../domain/budgetItem";
 import type { ItemOperation } from "../../domain/calculationHistoryItem";
+import { UserOptions } from "../../domain/userOptions";
 
 interface ItemFormProps {
   itemForm: BudgetItem;
   costPercentage: number;
   label: string;
   inputRef: RefObject<HTMLInputElement>;
+  userOptions: UserOptions;
 }
 
 export function ItemFormGroup({
   itemForm,
   costPercentage,
   inputRef,
   label,
+  userOptions,
 }: ItemFormProps) {
   const [needsRerender, setNeedsRerender] = useState(false);
   const deleteButtonRef = useRef<HTMLButtonElement>(null);
   const valueRef = useRef<HTMLInputElement>(null);
   const { budget, setBudget } = useBudget();
   const { deleteCalcHist, saveCalcHist } = useDB();
-  const { userOptions, intlConfig } = useConfig();
   const isExpense = label === "Expenses";
   const table = isExpense ? budget?.expenses : budget?.incomes;
 
@@ -211,7 +212,7 @@ export function ItemFormGroup({
           className="text-end form-control straight-corners fixed-width-font"
           aria-label={`item ${itemForm.id} value`}
           name="item-value"
-          intlConfig={intlConfig}
+          intlConfig={UserOptions.toIntlConfig(userOptions)}
           defaultValue={itemForm.value}
           allowNegativeValue={false}
           maxLength={14}

src/guitos/sections/ItemForm/__snapshots__/ItemFormGroup.test.tsx.snap

@@ -24,6 +24,12 @@ exports[`ItemFormGroup > matches snapshot 1`] = `
       }
     }
     label="Expenses"
+    userOptions={
+      UserOptions {
+        "currencyCode": "USD",
+        "locale": "en-US",
+      }
+    }
   />
 </BrowserRouter>
 `;

src/guitos/sections/TableCard/TableCard.tsx

@@ -148,6 +148,7 @@ export default function TableCard({ header: label }: TableCardProps) {
                       : 0
                   }
                   inputRef={inputRef}
+                  userOptions={userOptions}
                 />
               </Reorder.Item>
             ))}

src/setupTests.ts

@@ -9,10 +9,7 @@ import { cleanup } from "@testing-library/react";
 import { createElement } from "react";
 import { afterEach, beforeEach, expect, vi } from "vitest";
 import * as AppBudgetContext from "./guitos/context/BudgetContext";
-import * as AppConfigContext from "./guitos/context/ConfigContext";
 import { BudgetMother } from "./guitos/domain/budget.mother";
-import { UserOptionsMother } from "./guitos/domain/userOptions.mother";
-import { UserOptions } from "./guitos/domain/userOptions";
 
 window.crypto.randomUUID = randomUUID;
 global.URL.createObjectURL = vi.fn();
@@ -34,11 +31,9 @@ vi.mock("recharts", async (importOriginal) => {
 // extends Vitest's expect method with methods from react-testing-library
 expect.extend(matchers);
 
-export const configContextSpy = vi.spyOn(AppConfigContext, "useConfig");
 export const budgetContextSpy = vi.spyOn(AppBudgetContext, "useBudget");
 beforeEach(() => {
   budgetContextSpy.mockReturnValue(testBudgetContext);
-  configContextSpy.mockReturnValue(testConfigContext);
 });
 
 // runs a cleanup after each test case (e.g. clearing jsdom)
@@ -60,19 +55,6 @@ Object.defineProperty(window, "matchMedia", {
   })),
 });
 
-export const setUserOptionsMock = vi.fn();
-export const testConfigContext = {
-  userOptions: UserOptionsMother.default(),
-  setUserOptions: setUserOptionsMock,
-  intlConfig: UserOptions.toIntlConfig(UserOptionsMother.default()),
-};
-
-export const testSpanishConfigContext = {
-  userOptions: UserOptionsMother.spanish(),
-  setUserOptions: setUserOptionsMock,
-  intlConfig: UserOptions.toIntlConfig(UserOptionsMother.spanish()),
-};
-
 export const setBudgetMock = vi.fn();
 export const setBudgetListMock = vi.fn();
 export const setBudgetNameListMock = vi.fn();