{
diff --git a/src/components/TableCard/__snapshots__/TableCard.test.tsx.snap b/src/components/TableCard/__snapshots__/TableCard.test.tsx.snap
index 46bf955..0159ab3 100644
--- a/src/components/TableCard/__snapshots__/TableCard.test.tsx.snap
+++ b/src/components/TableCard/__snapshots__/TableCard.test.tsx.snap
@@ -16,6 +16,5 @@ exports[`TableCard > matches snapshot 1`] = `
}
}
onChange={[MockFunction spy]}
- revenueTotal={0}
/>
`;
diff --git a/src/context/BudgetContext.test.tsx b/src/context/BudgetContext.test.tsx
new file mode 100644
index 0000000..6e75ba7
--- /dev/null
+++ b/src/context/BudgetContext.test.tsx
@@ -0,0 +1,29 @@
+import { render } from "@testing-library/react";
+import { useBudget, BudgetProvider } from "./BudgetContext";
+import { testBudget, testBudgetList } from "../setupTests";
+
+function TestComponent() {
+ const { budget, budgetList } = useBudget();
+ return (
+ <>
+ {JSON.stringify(budget)}
+ {JSON.stringify(budgetList)}
+
+ );
+}
+
+describe("BudgetProvider", () => {
+ it("provides expected BudgetContext obj to child elements", () => {
+ const { getByLabelText } = render(
+
+
+ ,
+ );
+ expect(getByLabelText("budget").textContent).toEqual(
+ JSON.stringify(testBudget),
+ );
+ expect(getByLabelText("budgetList").textContent).toEqual(
+ JSON.stringify(testBudgetList),
+ );
+ });
+});
diff --git a/src/context/BudgetContext.tsx b/src/context/BudgetContext.tsx
new file mode 100644
index 0000000..a3124e1
--- /dev/null
+++ b/src/context/BudgetContext.tsx
@@ -0,0 +1,99 @@
+import { PropsWithChildren, createContext, useContext, useState } from "react";
+import { Budget } from "../components/Budget/Budget";
+import { calcPercentage } from "../utils";
+
+interface BudgetContextInterface {
+ budget: Budget | undefined;
+ setBudget: (value: Budget | undefined) => void;
+
+ budgetList: Budget[] | undefined;
+ setBudgetList: (value: Budget[] | undefined) => void;
+
+ budgetNameList: { id: string; name: string }[] | undefined;
+ setBudgetNameList: (
+ value: { id: string; name: string }[] | undefined,
+ ) => void;
+
+ revenuePercentage: number;
+}
+
+const BudgetContext = createContext({
+ budget: undefined,
+ setBudget: (value: Budget | undefined) => {
+ value;
+ },
+
+ budgetList: [],
+ setBudgetList: (value: Budget[] | undefined) => {
+ value;
+ },
+
+ budgetNameList: [],
+ setBudgetNameList: (value: { id: string; name: string }[] | undefined) => {
+ value;
+ },
+
+ revenuePercentage: 0,
+});
+
+function useBudget() {
+ if (BudgetContext === undefined) {
+ throw new Error("useBudget must be used within a Budget provider");
+ }
+
+ const {
+ budget,
+ setBudget,
+
+ budgetList,
+ setBudgetList,
+
+ budgetNameList,
+ setBudgetNameList,
+
+ revenuePercentage,
+ } = useContext(BudgetContext);
+
+ return {
+ budget,
+ setBudget,
+ budgetList,
+ setBudgetList,
+ budgetNameList,
+ setBudgetNameList,
+ revenuePercentage,
+ };
+}
+
+function BudgetProvider({ children }: PropsWithChildren) {
+ const [budget, setBudget] = useState();
+ const [budgetList, setBudgetList] = useState([]);
+
+ const revenuePercentage = calcPercentage(
+ budget?.expenses.total ?? 0,
+ budget?.incomes.total ?? 0,
+ );
+
+ const [budgetNameList, setBudgetNameList] = useState<
+ { id: string; name: string }[] | undefined
+ >([]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export { BudgetProvider, useBudget };
diff --git a/src/context/ConfigContext.test.tsx b/src/context/ConfigContext.test.tsx
index 44638ca..2bf64a4 100644
--- a/src/context/ConfigContext.test.tsx
+++ b/src/context/ConfigContext.test.tsx
@@ -1,5 +1,6 @@
-import { render } from "@testing-library/react";
+import { cleanup, render } from "@testing-library/react";
import { ConfigProvider, useConfig } from "./ConfigContext";
+import { configContextSpy } from "../setupTests";
function TestComponent() {
const { intlConfig, currency } = useConfig();
@@ -23,4 +24,13 @@ describe("ConfigProvider", () => {
expect(getByLabelText("locale").textContent).toEqual("en-US");
expect(getByLabelText("c").textContent).toEqual("USD");
});
+
+ it.skip("throws error when not used within provider", () => {
+ // configContextSpy.mockClear();
+ configContextSpy.mockReset();
+ cleanup();
+ expect(() => render()).toThrow(
+ "useConfig must be used within a Config provider",
+ );
+ });
});
diff --git a/src/context/ConfigContext.tsx b/src/context/ConfigContext.tsx
index ee7b5e7..540211d 100644
--- a/src/context/ConfigContext.tsx
+++ b/src/context/ConfigContext.tsx
@@ -23,6 +23,10 @@ const ConfigContext = createContext({
});
function useConfig() {
+ if (ConfigContext === undefined) {
+ throw new Error("useConfig must be used within a Config provider");
+ }
+
const { intlConfig, setIntlConfig } = useContext(ConfigContext);
const { currency, setCurrency } = useContext(ConfigContext);
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 57b7f29..989a900 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -9,8 +9,8 @@ import * as matchers from "@testing-library/jest-dom/matchers";
import { randomUUID } from "node:crypto";
import { ItemForm } from "./components/ItemForm/ItemForm";
import { Budget } from "./components/Budget/Budget";
-import { IntlConfig } from "react-currency-input-field/dist/components/CurrencyInputProps";
-import * as AppContext from "./context/ConfigContext";
+import * as AppConfigContext from "./context/ConfigContext";
+import * as AppBudgetContext from "./context/BudgetContext";
window.crypto.randomUUID = randomUUID;
// global.URL.createObjectURL = vi.fn();
@@ -22,6 +22,14 @@ vi.mock("crypto", () => ({
// 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)
afterEach(() => {
cleanup();
@@ -200,26 +208,58 @@ export const testSpanishIntlConfig = { locale: "es-ES", currency: "EUR" };
export const testBudgetList = [testBudget, testBudget2, testBigBudget];
-export const testContext = {
- intlConfig: testIntlConfig || undefined,
- setIntlConfig: (value: IntlConfig) => {
- value;
+export const testBudgetNameList = [
+ {
+ id: testBudget.id,
+ name: testBudget.name,
},
- currency: "USD",
- handleCurrency: (value: string) => {
- value;
+ {
+ id: testBudget2.id,
+ name: testBudget2.name,
},
+];
+
+export const setIntlConfigMock = vi.fn();
+export const handleCurrencyMock = vi.fn();
+export const testConfigContext = {
+ intlConfig: testIntlConfig || undefined,
+ setIntlConfig: setIntlConfigMock,
+ currency: "USD",
+ handleCurrency: handleCurrencyMock,
};
-export const testSpanishContext = {
+export const testSpanishConfigContext = {
intlConfig: testSpanishIntlConfig,
- setIntlConfig: (value: IntlConfig) => {
- value;
- },
+ setIntlConfig: setIntlConfigMock,
currency: "EUR",
- handleCurrency: (value: string) => {
- value;
- },
+ handleCurrency: handleCurrencyMock,
};
-vi.spyOn(AppContext, "useConfig").mockImplementation(() => testContext);
+export const setBudgetMock = vi.fn();
+export const setBudgetListMock = vi.fn();
+export const setBudgetNameListMock = vi.fn();
+export const testEmptyBudgetContext = {
+ budget: undefined,
+ setBudget: setBudgetMock,
+
+ budgetList: [],
+ setBudgetList: setBudgetListMock,
+
+ budgetNameList: [],
+ setBudgetNameList: setBudgetNameListMock,
+
+ revenuePercentage: 0,
+};
+
+export const testBudgetContext = {
+ budget: testBudget,
+ setBudget: setBudgetMock,
+
+ budgetList: testBudgetList,
+ setBudgetList: setBudgetListMock,
+
+ budgetNameList: testBudgetNameList,
+ setBudgetNameList: setBudgetNameListMock,
+
+ revenuePercentage: 10,
+};