Merge branch 'refactor/foritify_tests' of https://git.ramvignesh.dev/me/pi-ku into feature/home_revamp

2026-05-08 05:22:51 +05:30
parent aeead98570
commit b29218b6e6
12 changed files with 392 additions and 403 deletions
@@ -9,8 +9,8 @@ function renderGuard(ui: React.ReactNode, mountPath: "/protected" | "/public") {
  return render(
    <MemoryRouter initialEntries={[mountPath]}>
      <Routes>
-        <Route path="/login" element={<div>Login Page</div>} />
-        <Route path="/drawer" element={<div>Drawer Page</div>} />
+        <Route path="/login" element={<div data-testid="login-page">Login Page</div>} />
+        <Route path="/drawer" element={<div data-testid="drawer-page">Drawer Page</div>} />
        <Route path="/protected" element={ui} />
        <Route path="/public" element={ui} />
      </Routes>
@@ -35,13 +35,13 @@ describe("ProtectedRoute", () => {
    });
    renderGuard(
      <ProtectedRoute>
-        <div>Secret</div>
+        <div data-testid="secret-page">Secret</div>
      </ProtectedRoute>,
      "/protected",
    );

-    expect(screen.getByText(/Unsealing/i)).toBeInTheDocument();
-    expect(screen.queryByText("Secret")).not.toBeInTheDocument();
+    expect(screen.getByTestId("splash-screen")).toBeInTheDocument();
+    expect(screen.queryByTestId("secret-page")).not.toBeInTheDocument();
  });

  it("should redirect unauthenticated users to /login", () => {
@@ -52,12 +52,12 @@ describe("ProtectedRoute", () => {
    });
    renderGuard(
      <ProtectedRoute>
-        <div>Secret</div>
+        <div data-testid="secret-page">Secret</div>
      </ProtectedRoute>,
      "/protected",
    );
-    expect(screen.getByText("Login Page")).toBeInTheDocument();
-    expect(screen.queryByText("Secret")).not.toBeInTheDocument();
+    expect(screen.getByTestId("login-page")).toBeInTheDocument();
+    expect(screen.queryByTestId("secret-page")).not.toBeInTheDocument();
  });

  it("should render page for authenticated users", () => {
@@ -68,12 +68,12 @@ describe("ProtectedRoute", () => {
    });
    renderGuard(
      <ProtectedRoute>
-        <div>Secret</div>
+        <div data-testid="secret-page">Secret</div>
      </ProtectedRoute>,
      "/protected",
    );

-    expect(screen.getByText("Secret")).toBeInTheDocument();
+    expect(screen.getByTestId("secret-page")).toBeInTheDocument();
  });
 });

@@ -86,12 +86,12 @@ describe("PublicRoute", () => {
    });
    renderGuard(
      <AutoRedirectRoute>
-        <div>Login Page</div>
+        <div data-testid="mock-login-page">Login Page</div>
      </AutoRedirectRoute>,
      "/public",
    );
-    expect(screen.getByText(/Unsealing/i)).toBeInTheDocument();
-    expect(screen.queryByText("Login Page")).not.toBeInTheDocument();
+    expect(screen.getByTestId("splash-screen")).toBeInTheDocument();
+    expect(screen.queryByTestId("mock-login-page")).not.toBeInTheDocument();
  });

  it("should redirect authenticated users to /drawer", () => {
@@ -102,12 +102,12 @@ describe("PublicRoute", () => {
    });
    renderGuard(
      <AutoRedirectRoute>
-        <div>Login Form</div>
+        <div data-testid="login-form">Login Form</div>
      </AutoRedirectRoute>,
      "/public",
    );
-    expect(screen.getByText("Drawer Page")).toBeInTheDocument();
-    expect(screen.queryByText("Login Form")).not.toBeInTheDocument();
+    expect(screen.getByTestId("drawer-page")).toBeInTheDocument();
+    expect(screen.queryByTestId("login-form")).not.toBeInTheDocument();
  });

  it("should render page for unauthenticated users", () => {
@@ -118,10 +118,10 @@ describe("PublicRoute", () => {
    });
    renderGuard(
      <AutoRedirectRoute>
-        <div>Login Form</div>
+        <div data-testid="login-form">Login Form</div>
      </AutoRedirectRoute>,
      "/public",
    );
-    expect(screen.getByText("Login Form")).toBeInTheDocument();
+    expect(screen.getByTestId("login-form")).toBeInTheDocument();
  });
 });
@@ -3,7 +3,7 @@ import Logo from "./Logo";

 export default function SplashScreen() {
  return (
-    <div className="fixed w-screen h-screen inset-0 flex flex-col items-center justify-center z-9999  before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')">
+    <div data-testid="splash-screen" className="fixed w-screen h-screen inset-0 flex flex-col items-center justify-center z-9999  before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')">
      <div className="flex flex-col items-center gap-6 animate-pulse">
        <Logo />

@@ -1,97 +1,95 @@
 import { GearFineIcon } from "@phosphor-icons/react";

 interface DrawerSectionProps {
-  id: string;
-  title: string;
-  count: number;
-  subtext: string;
-  isOpen: boolean;
-  onClick: () => void;
-  children: React.ReactNode;
-  icon: React.ReactNode;
+    id: string;
+    title: string;
+    count: number;
+    subtext: string;
+    isOpen: boolean;
+    onClick: () => void;
+    children: React.ReactNode;
+    icon: React.ReactNode;
 }

 export function DrawerSection({
-  id,
-  title,
-  count,
-  subtext,
-  isOpen,
-  onClick,
-  children,
-  icon,
+    id,
+    title,
+    count,
+    subtext,
+    isOpen,
+    onClick,
+    children,
+    icon,
 }: DrawerSectionProps) {
-  return (
-    <div
-      id={id}
-      className={`join-item group flex flex-col transition-colors duration-3000 ease-in-out ${isOpen ? "bg-base-300/30" : ""}`}
-    >
-      <div
-        className={`bg-neutral/10 transition-all duration-1000 ease-in-out overflow-visible ${isOpen ? "max-h-125" : "max-h-0 pointer-events-none"}`}
-      >
+    return (
        <div
-          className={`transition-opacity ease-in-out ${
-            isOpen
-              ? "opacity-100 py-3 border-b border-base-content/5 duration-700 delay-500"
-              : "opacity-0 duration-100"
-          }`}
+            id={id}
+            className={`join-item group flex flex-col transition-colors duration-3000 ease-in-out ${isOpen ? "bg-base-300/30" : ""}`}
        >
-          {children}
-          {count === 0 && (
-            <div className="text-sm text-center text-neutral">
-              This drawer remains silent...
+            <div
+                className={`bg-neutral/10 transition-all duration-1000 ease-in-out overflow-visible ${isOpen ? "max-h-125" : "max-h-0 pointer-events-none"}`}
+            >
+                <div
+                    className={`transition-opacity ease-in-out ${isOpen
+                        ? "opacity-100 py-3 border-b border-base-content/5 duration-700 delay-500"
+                        : "opacity-0 duration-100"
+                        }`}
+                >
+                    {children}
+                    {count === 0 && (
+                        <p data-testid={`empty-drawer-message-${id}`} className="text-center text-base-content/20 mt-4">
+                            This drawer remains silent
+                        </p>
+                    )}
+                </div>
            </div>
-          )}
-        </div>
-      </div>

-      <button
-        type="button"
-        onClick={onClick}
-        data-testid={`drawer-section-${id}`}
-        className="w-full relative p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 overflow-hidden focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40"
-      >
-        <div className="flex-1">
-          <div
-            className={`font-sans text-xs tracking-widester uppercase transition-colors duration-800 ${
-              isOpen
-                ? "text-base-content"
-                : "text-base-content/40 group-hover:text-base-content/80"
-            }`}
-          >
-            {title}
-          </div>
-          <div className="font-sans text-xs text-base-content/20 mt-1">
-            <span className="font-mono text-xs md:text-base -mt-1 absolute text-primary/30">
-              {count}
-            </span>{" "}
-            <span className="ml-3">{subtext}</span>
-          </div>
-          <div className="absolute right-5 -translate-y-15 text-base-content/4">
-            {icon}
-          </div>
-        </div>
+            <button
+                type="button"
+                onClick={onClick}
+                data-testid={`drawer-section-${id}`}
+                className="w-full relative p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 overflow-hidden focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40"
+            >
+                <div className="flex-1">
+                    <div
+                        data-testid="drawer-section-title"
+                        className={`font-sans text-xs tracking-widester uppercase transition-colors duration-800 ${isOpen
+                            ? "text-base-content"
+                            : "text-base-content/40 group-hover:text-base-content/80"
+                            }`}
+                    >
+                        {title}
+                    </div>
+                    <div className="font-sans text-xs text-base-content/20 mt-1">
+                        <span className="font-mono text-xs md:text-base -mt-1 absolute text-primary/30">
+                            {count}
+                        </span>{" "}
+                        <span className="ml-3">{subtext}</span>
+                    </div>
+                    <div className="absolute right-5 -translate-y-15 text-base-content/4">
+                        {icon}
+                    </div>
+                </div>

-        {id === "vault" ? (
-          <GearFineIcon
-            className={
-              "-mt-3 group-hover:animate-[spin_8s_ease-in-out_1] group-hover:text-neutral-content text-neutral"
-            }
-            weight={"duotone"}
-            size={30}
-          />
-        ) : (
-          <div
-            className={`w-8 h-1 rounded-sm transition-all duration-300 bg-neutral ${
-              isOpen
-                ? "bg-primary/80! opacity-80 scale-110"
-                : "group-hover:bg-primary"
-            }`}
-          >
-            <div className="absolute -top-1 left-1.75 w-5 h-px bg-base-content/5" />
-          </div>
-        )}
-      </button>
-    </div>
-  );
+                {id === "vault" ? (
+                    <GearFineIcon
+                        className={
+                            "-mt-3 group-hover:animate-[spin_8s_ease-in-out_1] group-hover:text-neutral-content text-neutral"
+                        }
+                        weight={"duotone"}
+                        size={30}
+                    />
+                ) : (
+                    <div
+                        className={`w-8 h-1 rounded-sm transition-all duration-300 bg-neutral ${isOpen
+                            ? "bg-primary/80! opacity-80 scale-110"
+                            : "group-hover:bg-primary"
+                            }`}
+                    >
+                        <div className="absolute -top-1 left-1.75 w-5 h-px bg-base-content/5" />
+                    </div>
+                )}
+            </button>
+        </div>
+    );
 }
@@ -12,7 +12,7 @@ export function PasskeyModal() {
        className="text-primary mx-auto mb-8 animate-pulse"
        weight="duotone"
      />
-      <h3 className="font-bold text-lg font-display text-primary">
+      <h3 data-testid="passkey-modal-title" className="font-bold text-lg font-display text-primary">
        You've been away a while.
      </h3>
      <p className="py-4 font-sans">
@@ -123,7 +123,7 @@ export function EnvelopeReveal({
          <span className={"text-neutral-content/60 font-xs font-display"}>
            to
          </span>
-          <h1 className="text-3xl font-bold text-base-content">{recipient}</h1>
+          <h1 data-testid="envelope-recipient" className="text-3xl font-bold text-base-content">{recipient}</h1>
          <p className="text-base-content/60 font-display mt-8">{date}</p>
          <img
            src={stamp}
@@ -24,7 +24,7 @@ export const LogModal = ({
        {status === "WARN" && (
          <WarningIcon className="text-warning" size={16} weight="duotone" />
        )}
-        {message}
+        <span data-testid="log-modal-message">{message}</span>
        {log && (
          <>
            <div className="divider text-primary-content text-xs uppercase tracking-widest">