test: use testids instead of text queries for unit tests (#5)

Co-authored-by: me <ramvignesh-b@github.com>
Reviewed-on: #5

frontend/src/components/RouteGuards.test.tsx

@@ -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(
       <PublicRoute>
-        <div>Login Page</div>
+        <div data-testid="mock-login-page">Login Page</div>
       </PublicRoute>,
       "/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(
       <PublicRoute>
-        <div>Login Form</div>
+        <div data-testid="login-form">Login Form</div>
       </PublicRoute>,
       "/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(
       <PublicRoute>
-        <div>Login Form</div>
+        <div data-testid="login-form">Login Form</div>
       </PublicRoute>,
       "/public",
     );
-    expect(screen.getByText("Login Form")).toBeInTheDocument();
+    expect(screen.getByTestId("login-form")).toBeInTheDocument();
   });
 });

frontend/src/components/SplashScreen.tsx

@@ -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 />
 

frontend/src/components/drawer/DrawerSection.tsx

@@ -40,6 +40,7 @@ export function DrawerSection({
       >
         <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"

frontend/src/components/drawer/PasskeyModal.tsx

@@ -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">

frontend/src/components/reader/EnvelopeReveal.tsx

@@ -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}

frontend/src/components/ui/LogModal.tsx

@@ -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">