From 046a0326c8597b88aa3b9a802ea977ead00010e0 Mon Sep 17 00:00:00 2001
From: Fingertips <ghiantan0418@gmail.com>
Date: Sat, 28 Sep 2024 01:05:47 +0800
Subject: [PATCH] Add unit test for providers

- Added a test to ensure the `ThemeProvider` correctly applies the selected `theme`
  to the document's `root` element.
- Mocked `localStorage` to return a predefined `theme` value for testing.
- Verified that the appropriate `class` is applied to `document.documentElement`
  based on the `theme`.
---
 client/package-lock.json                      | 113 +++++++++++++++++-
 client/package.json                           |   1 +
 .../src/lib/providers/query-provider.test.tsx |  95 +++++++++++++++
 .../src/lib/providers/theme-provider.test.tsx |  71 +++++++++++
 .../src/lib/providers/toast-provider.test.tsx | 100 ++++++++++++++++
 5 files changed, 378 insertions(+), 2 deletions(-)
 create mode 100644 client/src/lib/providers/query-provider.test.tsx
 create mode 100644 client/src/lib/providers/theme-provider.test.tsx
 create mode 100644 client/src/lib/providers/toast-provider.test.tsx

diff --git a/client/package-lock.json b/client/package-lock.json
index 68e7594..c22c50e 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -21,6 +21,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.9.0",
+        "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.1",
         "@types/node": "^22.5.4",
         "@types/react": "^18.3.3",
@@ -40,6 +41,13 @@
         "vitest": "^2.1.1"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.0.tgz",
+      "integrity": "sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -1427,6 +1435,48 @@
         "node": ">=18"
       }
     },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz",
+      "integrity": "sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "lodash": "^4.17.21",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@testing-library/react": {
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.1.tgz",
@@ -1991,7 +2041,6 @@
       "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "dequal": "^2.0.3"
       }
@@ -2345,6 +2394,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2459,7 +2515,6 @@
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -3172,6 +3227,16 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -3444,6 +3509,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3557,6 +3629,16 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -4199,6 +4281,20 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -4535,6 +4631,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
diff --git a/client/package.json b/client/package.json
index b82de69..e7bbdfb 100644
--- a/client/package.json
+++ b/client/package.json
@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@types/node": "^22.5.4",
     "@types/react": "^18.3.3",
diff --git a/client/src/lib/providers/query-provider.test.tsx b/client/src/lib/providers/query-provider.test.tsx
new file mode 100644
index 0000000..937599c
--- /dev/null
+++ b/client/src/lib/providers/query-provider.test.tsx
@@ -0,0 +1,95 @@
+import { fireEvent, render, act } from "@testing-library/react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { describe, it, expect, vi } from "vitest";
+import "@testing-library/jest-dom";
+
+import QueryProvider from "./query-provider";
+
+const DefaultMockComponent = () => {
+  const { data } = useQuery({
+    queryKey: ["testQuery"],
+    queryFn: async () => await Promise.resolve("Fetched data"),
+  });
+
+  return <p>{data}</p>;
+};
+
+const SuccessMockComponent = () => {
+  const { mutate } = useMutation({
+    mutationKey: ["testQuery"],
+    mutationFn: async () => await Promise.resolve("Success"),
+    onSuccess: (data) => console.log(data),
+  });
+
+  return <button onClick={() => mutate()} />;
+};
+
+const ErrorMockComponent = () => {
+  const { mutate } = useMutation({
+    mutationKey: ["testQuery"],
+    mutationFn: async () => await Promise.reject(new Error("Error")),
+    onError: ({ message }) => console.log(message),
+  });
+
+  return <button onClick={() => mutate()} />;
+};
+
+describe("Query Provider", () => {
+  it("renders without crashing", () => {
+    const label = "Hello world!";
+
+    const { getByText } = render(
+      <QueryProvider>
+        <p>{label}</p>
+      </QueryProvider>
+    );
+
+    expect(getByText(label)).toBeInTheDocument();
+  });
+
+  it("should render fetched data", async () => {
+    const { findByText } = render(
+      <QueryProvider>
+        <DefaultMockComponent />
+      </QueryProvider>
+    );
+
+    expect(await findByText("Fetched data")).toBeInTheDocument();
+  });
+
+  it("should logs 'Success' on mutation call", async () => {
+    const consoleLogSpy = vi.spyOn(console, "log");
+
+    const { getByRole } = render(
+      <QueryProvider>
+        <SuccessMockComponent />
+      </QueryProvider>
+    );
+
+    const button = getByRole("button");
+
+    await act(async () => {
+      fireEvent.click(button);
+    });
+
+    expect(consoleLogSpy).toHaveBeenCalledWith("Success");
+  });
+
+  it("should logs 'Error' on mutation call", async () => {
+    const consoleLogSpy = vi.spyOn(console, "log");
+
+    const { getByRole } = render(
+      <QueryProvider>
+        <ErrorMockComponent />
+      </QueryProvider>
+    );
+
+    const button = getByRole("button");
+
+    await act(async () => {
+      fireEvent.click(button);
+    });
+
+    expect(consoleLogSpy).toHaveBeenCalledWith("Error");
+  });
+});
diff --git a/client/src/lib/providers/theme-provider.test.tsx b/client/src/lib/providers/theme-provider.test.tsx
new file mode 100644
index 0000000..7989fc3
--- /dev/null
+++ b/client/src/lib/providers/theme-provider.test.tsx
@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeAll } from "vitest";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { ThemeProvider, ThemeProviderContext } from "./theme-provider";
+
+describe("Theme Provider", () => {
+  beforeAll(() => {
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: (query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        dispatchEvent: () => {},
+      }),
+    });
+  });
+
+  it("should render without any issues", () => {
+    const label = "Hello world!";
+
+    const { getByText } = render(
+      <ThemeProvider>
+        <p>{label}</p>
+      </ThemeProvider>
+    );
+
+    expect(getByText(label)).toBeInTheDocument();
+  });
+
+  it("sets the initial theme from localStorage", () => {
+    const localStorageMock = {
+      getItem: vi.fn().mockReturnValue("light"),
+      setItem: vi.fn(),
+    };
+
+    Object.defineProperty(window, "localStorage", { value: localStorageMock });
+
+    const { getByTestId } = render(
+      <ThemeProvider>
+        <ThemeProviderContext.Consumer>
+          {({ theme }) => <p data-testid="theme">{theme}</p>}
+        </ThemeProviderContext.Consumer>
+      </ThemeProvider>
+    );
+
+    expect(getByTestId("theme")).toHaveTextContent("light");
+  });
+
+  it("applies the theme to the document root", () => {
+    const localStorageMock = {
+      getItem: vi.fn().mockReturnValue("dark"),
+      setItem: vi.fn(),
+    };
+
+    Object.defineProperty(window, "localStorage", { value: localStorageMock });
+
+    render(
+      <ThemeProvider>
+        <p>Test</p>
+      </ThemeProvider>
+    );
+
+    const root = window.document.documentElement;
+
+    expect(root.classList.contains("dark")).toBeTruthy();
+  });
+});
diff --git a/client/src/lib/providers/toast-provider.test.tsx b/client/src/lib/providers/toast-provider.test.tsx
new file mode 100644
index 0000000..3cf7a0b
--- /dev/null
+++ b/client/src/lib/providers/toast-provider.test.tsx
@@ -0,0 +1,100 @@
+import { describe, it, expect, vi, beforeAll, Mock } from "vitest";
+import { render } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { toast } from "sonner";
+
+import { useTheme } from "@/lib/hooks/use-theme";
+
+import ToastProvider from "./toast-provider";
+
+vi.mock("../hooks/use-theme.tsx", () => ({
+  useTheme: vi.fn(),
+}));
+
+vi.mock("sonner", () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+    info: vi.fn(),
+    warning: vi.fn(),
+  },
+  Toaster: () => null,
+}));
+
+const SuccessMockComponent = () => {
+  toast.success("Success!");
+  return null;
+};
+
+const ErrorMockComponent = () => {
+  toast.error("Error!");
+  return null;
+};
+
+const InfoMockComponent = () => {
+  toast.info("Info!");
+  return null;
+};
+
+const WarningMockComponent = () => {
+  toast.warning("Warning!");
+  return null;
+};
+
+describe("Toast Provider", () => {
+  beforeAll(() => {
+    (useTheme as Mock).mockReturnValue({ theme: "light" });
+  });
+
+  it("should render without issues", () => {
+    const label = "Hello world!";
+
+    const { getByText } = render(
+      <ToastProvider>
+        <p>{label}</p>
+      </ToastProvider>
+    );
+
+    expect(getByText(label)).toBeInTheDocument();
+  });
+
+  it("should render a success toast", () => {
+    render(
+      <ToastProvider>
+        <SuccessMockComponent />
+      </ToastProvider>
+    );
+
+    expect(toast.success).toHaveBeenCalledWith("Success!");
+  });
+
+  it("should render a error toast", () => {
+    render(
+      <ToastProvider>
+        <ErrorMockComponent />
+      </ToastProvider>
+    );
+
+    expect(toast.error).toHaveBeenCalledWith("Error!");
+  });
+
+  it("should render a info toast", () => {
+    render(
+      <ToastProvider>
+        <InfoMockComponent />
+      </ToastProvider>
+    );
+
+    expect(toast.info).toHaveBeenCalledWith("Info!");
+  });
+
+  it("should render a warning toast", () => {
+    render(
+      <ToastProvider>
+        <WarningMockComponent />
+      </ToastProvider>
+    );
+
+    expect(toast.warning).toHaveBeenCalledWith("Warning!");
+  });
+});