test(utilities): add more utilities tests

* also the components BeforeLogin and CollectionArchive

Author: dsm23

src/components/BeforeLogin/test.tsx

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "@jest/globals";
+import { render, screen } from "@testing-library/react";
+import BeforeLogin from ".";
+
+describe("component", () => {
+  describe("BeforeLogin", () => {
+    it("should render correctly", () => {
+      render(<BeforeLogin />);
+
+      expect(
+        screen.getByText("Welcome to your dashboard!"),
+      ).toBeInTheDocument();
+    });
+  });
+});

src/components/CollectionArchive/test.tsx

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "@jest/globals";
+import { render } from "@testing-library/react";
+import { CollectionArchive } from ".";
+
+describe("component", () => {
+  describe("CollectionArchive", () => {
+    it("should render correctly", () => {
+      const { container } = render(<CollectionArchive posts={[]} />);
+
+      expect(container.querySelector(".container")).toBeInTheDocument();
+    });
+  });
+});

src/utilities/can-use-dom/node.test.ts

@@ -1,6 +1,7 @@
 /**
  * @jest-environment node
  */
+
 import { describe, expect, it } from "@jest/globals";
 import canUseDOM from ".";
 

src/utilities/generate-meta/test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { generateMeta } from ".";
+
+jest.mock("~/utilities/get-url", () => ({
+  __esModule: true,
+  getServerSideURL: jest.fn(() => "http://localhost:3000"),
+}));
+
+describe("utilities", () => {
+  describe("generateMeta", () => {
+    it("null doc", async () => {
+      expect(
+        await generateMeta({
+          doc: null,
+        }),
+      ).toStrictEqual({
+        description: undefined,
+        openGraph: {
+          description: "",
+          images: [
+            {
+              url: "http://localhost:3000/website-template-OG.webp",
+            },
+          ],
+          siteName: "Payload Website Template",
+          title: "Payload Website Template",
+          type: "website",
+          url: "/",
+        },
+        title: "Payload Website Template",
+      });
+    });
+  });
+});

src/utilities/get-url/node.test.ts

@@ -1,6 +1,7 @@
 /**
  * @jest-environment node
  */
+
 import { afterEach, describe, expect, it } from "@jest/globals";
 import { getClientSideURL, getServerSideURL } from ".";
 

src/utilities/merge-open-graph/test.ts

@@ -0,0 +1,85 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { mergeOpenGraph } from ".";
+
+jest.mock("~/utilities/get-url", () => ({
+  __esModule: true,
+  getServerSideURL: jest.fn(() => "http://localhost:3000"),
+}));
+
+describe("utilities", () => {
+  describe("mergeOpenGraph", () => {
+    it("no arguments", () => {
+      expect(mergeOpenGraph()).toStrictEqual({
+        type: "website",
+        description: "An open-source website built with Payload and Next.js.",
+        images: [
+          {
+            url: "http://localhost:3000/website-template-OG.webp",
+          },
+        ],
+        siteName: "Payload Website Template",
+        title: "Payload Website Template",
+      });
+    });
+
+    it("with arguments", () => {
+      expect(
+        mergeOpenGraph({
+          description: "Custom description",
+        }),
+      ).toEqual(
+        expect.objectContaining({
+          description: "Custom description",
+        }),
+      );
+    });
+
+    expect(
+      mergeOpenGraph({
+        description: "Custom description",
+      }),
+    ).toEqual(
+      expect.not.objectContaining({
+        description: "An open-source website built with Payload and Next.js",
+      }),
+    );
+
+    it("with images arguments", () => {
+      expect(
+        mergeOpenGraph({
+          images: [
+            {
+              url: "http://localhost:3000/custom-image.webp",
+            },
+          ],
+        }),
+      ).toEqual(
+        expect.objectContaining({
+          images: [
+            {
+              url: "http://localhost:3000/custom-image.webp",
+            },
+          ],
+        }),
+      );
+    });
+
+    expect(
+      mergeOpenGraph({
+        images: [
+          {
+            url: "http://localhost:3000/custom-image.webp",
+          },
+        ],
+      }),
+    ).toEqual(
+      expect.not.objectContaining({
+        images: [
+          {
+            url: "http://localhost:3000/website-template-OG.webp",
+          },
+        ],
+      }),
+    );
+  });
+});

src/utilities/ui/test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "@jest/globals";
+import { cn } from ".";
+
+describe("utilities", () => {
+  describe("cn", () => {
+    it("works normally", () => {
+      expect(cn("bg-red hover:bg-dark-red px-2 py-1", "bg-[#B91C1C] p-3")).toBe(
+        "hover:bg-dark-red bg-[#B91C1C] p-3",
+      );
+    });
+
+    it("removes undefined", () => {
+      expect(cn("px-2", undefined)).toBe("px-2");
+    });
+  });
+});

src/utilities/use-debounce/test.ts

@@ -0,0 +1,122 @@
+import { describe, expect, it, jest } from "@jest/globals";
+import { act, renderHook } from "@testing-library/react";
+import { useDebounce } from ".";
+
+describe("utilities", () => {
+  describe("useDebounce", () => {
+    jest.useFakeTimers();
+
+    it("should return the initial value immediately", () => {
+      const initialValue = "initial";
+
+      const { result } = renderHook(() => useDebounce(initialValue));
+
+      expect(result.current).toBe(initialValue);
+    });
+
+    it("should update the debounced value after the specified delay", () => {
+      const initialValue = "initial";
+      const newValue = "updated";
+      const delay = 500;
+
+      const { result, rerender } = renderHook(
+        ({ value }) => useDebounce(value, delay),
+        { initialProps: { value: initialValue } },
+      );
+
+      expect(result.current).toBe(initialValue);
+
+      rerender({ value: newValue });
+
+      expect(result.current).toBe(initialValue);
+
+      act(() => {
+        jest.advanceTimersByTime(delay);
+      });
+
+      expect(result.current).toBe(newValue);
+    });
+
+    it("should not update if the value changes within the delay", () => {
+      const initialValue = "initial";
+      const intermediateValue = "intermediate";
+      const finalValue = "final";
+      const delay = 300;
+
+      const { result, rerender } = renderHook(
+        ({ value }) => useDebounce(value, delay),
+        { initialProps: { value: initialValue } },
+      );
+
+      expect(result.current).toBe(initialValue);
+
+      rerender({ value: intermediateValue });
+
+      act(() => {
+        jest.advanceTimersByTime(delay / 2);
+      });
+
+      expect(result.current).toBe(initialValue);
+
+      rerender({ value: finalValue });
+
+      act(() => {
+        jest.advanceTimersByTime(delay / 2);
+      });
+
+      expect(result.current).not.toBe(intermediateValue);
+
+      act(() => {
+        jest.advanceTimersByTime(delay / 2);
+      });
+
+      expect(result.current).toBe(finalValue);
+    });
+
+    it("should use the default delay if none is provided", () => {
+      const initialValue = "initial";
+      const newValue = "updated";
+      const defaultDelay = 200;
+
+      const { result, rerender } = renderHook(
+        ({ value }) => useDebounce(value),
+        {
+          initialProps: { value: initialValue },
+        },
+      );
+
+      expect(result.current).toBe(initialValue);
+
+      rerender({ value: newValue });
+
+      act(() => {
+        jest.advanceTimersByTime(defaultDelay);
+      });
+
+      expect(result.current).toBe(newValue);
+    });
+
+    it("should clear the timeout on unmount", () => {
+      const initialValue = "initial";
+      const newValue = "updated";
+      const delay = 400;
+
+      const { result, rerender, unmount } = renderHook(
+        ({ value, delay }) => useDebounce(value, delay),
+        { initialProps: { value: initialValue, delay } },
+      );
+
+      expect(result.current).toBe(initialValue);
+
+      rerender({ value: newValue, delay });
+
+      unmount();
+
+      act(() => {
+        jest.advanceTimersByTime(delay);
+      });
+
+      expect(result.current).toBe(initialValue);
+    });
+  });
+});