From 50bae8d2ce1d7a1c620584215f52847d7e837aef Mon Sep 17 00:00:00 2001
From: ramvignesh-b <ramvignesh-b@github.com>
Date: Tue, 21 Apr 2026 04:44:07 +0530
Subject: [PATCH] fix: update Reader tests to include envelope

---
 frontend/src/pages/Reader.test.tsx | 15 ++++------
 frontend/src/pages/Reader.tsx      | 45 +++++++++++++++++-------------
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/frontend/src/pages/Reader.test.tsx b/frontend/src/pages/Reader.test.tsx
index 7a8c2b3..30b2c1e 100644
--- a/frontend/src/pages/Reader.test.tsx
+++ b/frontend/src/pages/Reader.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { HttpResponse, http } from "msw";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -48,7 +48,7 @@ describe("Reader Page", () => {
     ).toBeInTheDocument();
   });
 
-  it("should load and decrypt the letter when a valid key is provided", async () => {
+  it("should load and decrypt the letter when a valid key is provided and display the envelope", async () => {
     const mockPublicId = "test-uuid";
     const letterContent = JSON.stringify({ objects: [] });
     const metadata = { recipient: "Guest" };
@@ -69,19 +69,16 @@ describe("Reader Page", () => {
       }),
     );
 
-    render(
+    const {container} = render(
       <MemoryRouter initialEntries={[`/read/${mockPublicId}#${sharingKey}`]}>
         <Routes>
           <Route path="/read/:public_id" element={<Reader />} />
         </Routes>
       </MemoryRouter>,
     );
-
-    // Should show loading state first
-    expect(screen.getByText(/Breaking the seal.../i)).toBeInTheDocument();
-
-    expect(await screen.findByText(/A sealed letter for/i)).toBeInTheDocument();
-    expect(screen.getAllByText(/Guest/i).length).toBeGreaterThanOrEqual(1);
+    await waitFor(() => {
+      expect(screen.getByText(/Guest/i)).toBeInTheDocument();
+    })
   });
 
   it("should display an error message if the server request fails", async () => {
diff --git a/frontend/src/pages/Reader.tsx b/frontend/src/pages/Reader.tsx
index a99f573..ed25814 100644
--- a/frontend/src/pages/Reader.tsx
+++ b/frontend/src/pages/Reader.tsx
@@ -34,7 +34,10 @@ export default function Reader() {
   const [revealState, setRevealState] = useState<"sealed" | "revealed">(
     "sealed",
   );
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<{
+    message: string;
+    log: string;
+  } | null>(null);
   const [warning, setWarning] = useState<{
     message: string;
     log: string;
@@ -48,7 +51,10 @@ export default function Reader() {
   useEffect(() => {
     if (!(sharingKey || masterKey)) {
       setError(
-        "No sharing key provided. Please check the link or log in if you are the author.",
+          {
+            message: "No sharing key provided. Please check the link or log in if you are the author.",
+            log: ""
+          },
       );
       setIsDecrypting(false);
       return;
@@ -131,8 +137,7 @@ export default function Reader() {
         }
         setDecryptedCanvasData(canvasData);
       } catch (err) {
-        const message = err instanceof Error ? err.message : "Unknown error";
-        setError(`Failed to load letter: ${message}`);
+        setError({ message: `Failed to load letter :(`, log: err instanceof Error ? err.message : "Unknown error"});
       } finally {
         setIsDecrypting(false);
       }
@@ -174,8 +179,8 @@ export default function Reader() {
       <LogModal
         isOpen={!!error}
         onClose={() => (window.location.href = "/")}
-        message={error}
-        log={error}
+        message={error.message}
+        log={error.log}
         status="ERROR"
       />
     );
@@ -184,7 +189,19 @@ export default function Reader() {
   return (
     <section className="min-h-fit w-full bg-base-100 px-4 py-8 md:py-16 font-serif relative overflow-hidden">
       <div className="fixed inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.5)_100%)] pointer-events-none z-0" />
-
+      <div
+          className={`transition-all duration-1000 relative ${revealState === "revealed" ? "opacity-0 w-0 h-0" : "opacity-100"}`}
+      >
+        <EnvelopeReveal
+            recipient={metadata?.recipient || "Someone dear"}
+            date={
+              metadata?.updated_at
+                  ? formatDate(new Date(metadata.updated_at))
+                  : undefined
+            }
+            onRevealComplete={() => setRevealState("revealed")}
+        />
+      </div>
       <LogModal
         isOpen={!!warning}
         onClose={() => setWarning(null)}
@@ -211,19 +228,7 @@ export default function Reader() {
           </div>
         </div>
       )}
-      <div
-        className={`transition-all duration-1000 relative ${revealState === "revealed" ? "opacity-0 w-0 h-0" : "opacity-100"}`}
-      >
-        <EnvelopeReveal
-          recipient={metadata?.recipient || "Someone dear"}
-          date={
-            metadata?.updated_at
-              ? formatDate(new Date(metadata.updated_at))
-              : undefined
-          }
-          onRevealComplete={() => setRevealState("revealed")}
-        />
-      </div>
+
 
       <footer className="mt-16 text-center z-10 opacity-10 pointer-events-none">
         <p className="text-xs font-sans uppercase tracking-[0.5em]">