feat/welcome-letter integration (#2)

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

frontend/src/pages/Drawer.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { mockUser } from "../../test/fixtures/user.fixture";
@@ -7,77 +7,117 @@ import { useAuthStore } from "../store/useAuthStore";
 import Drawer from "./Drawer";
 
 vi.mock("../hooks/useLetters");
+vi.mock("../components/drawer/WelcomeLetterOverlay", () => ({
+  WelcomeLetterOverlay: ({ onComplete }: any) => (
+    <div data-testid="welcome-letter-overlay">
+      <button
+        type="button"
+        data-testid="overlay-exit-button"
+        onClick={onComplete}
+      >
+        I'll see you
+      </button>
+    </div>
+  ),
+}));
 
 describe("Drawer Page", () => {
-    beforeEach(() => {
-        // Setup authenticated state for the test
-        useAuthStore.setState({
-            user: mockUser,
-            accessToken: "fake-token",
-            isInitializing: false,
-        });
-
-        vi.mocked(useLetters).mockReturnValue({
-            drafts: [],
-            kept: [],
-            sent: [],
-            vault: [],
-            loading: false,
-            isAuthRequired: false,
-        });
+  beforeEach(() => {
+    // Setup authenticated state for the test
+    useAuthStore.setState({
+      user: mockUser,
+      accessToken: "fake-token",
+      isInitializing: false,
     });
 
-    it("renders the cabinet sections and empty state message", () => {
-        render(
-            <MemoryRouter>
-                <Drawer />
-            </MemoryRouter>,
-        );
+    vi.mocked(useLetters).mockReturnValue({
+      drafts: [],
+      kept: [],
+      sent: [],
+      vault: [],
+      loading: false,
+      isAuthRequired: false,
+    });
+  });
 
-        expect(screen.getByText(/Drafts/i)).toBeInTheDocument();
-        expect(screen.getAllByText(/Kept/i).length).toBeGreaterThanOrEqual(1);
-        expect(screen.getByText(/Vault/i)).toBeInTheDocument();
-        expect(screen.getByText(/This drawer remains silent/i)).toBeInTheDocument();
+  it("renders the cabinet sections and empty state message", () => {
+    render(
+      <MemoryRouter>
+        <Drawer />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText(/Drafts/i)).toBeInTheDocument();
+    expect(screen.getAllByText(/Kept/i).length).toBeGreaterThanOrEqual(1);
+    expect(screen.getByText(/Vault/i)).toBeInTheDocument();
+    expect(screen.getByText(/This drawer remains silent/i)).toBeInTheDocument();
+  });
+
+  it("renders the loading state", () => {
+    vi.mocked(useLetters).mockReturnValue({
+      drafts: [],
+      kept: [],
+      sent: [],
+      vault: [],
+      loading: true,
+      isAuthRequired: false,
     });
 
-    it("renders the loading state", () => {
-        vi.mocked(useLetters).mockReturnValue({
-            drafts: [],
-            kept: [],
-            sent: [],
-            vault: [],
-            loading: true,
-            isAuthRequired: false,
-        });
+    render(
+      <MemoryRouter>
+        <Drawer />
+      </MemoryRouter>,
+    );
 
-        render(
-            <MemoryRouter>
-                <Drawer />
-            </MemoryRouter>,
-        );
+    expect(screen.getByText(/Opening your cabinet/i)).toBeInTheDocument();
+  });
 
-        expect(screen.getByText(/Opening your cabinet/i)).toBeInTheDocument();
+  it("renders the authentication required modal when api requires auth", () => {
+    vi.mocked(useLetters).mockReturnValue({
+      drafts: [],
+      kept: [],
+      sent: [],
+      vault: [],
+      loading: false,
+      isAuthRequired: true,
     });
 
-    it("renders the authentication required modal when api requires auth", () => {
-        vi.mocked(useLetters).mockReturnValue({
-            drafts: [],
-            kept: [],
-            sent: [],
-            vault: [],
-            loading: false,
-            isAuthRequired: true,
-        });
+    render(
+      <MemoryRouter>
+        <Drawer />
+      </MemoryRouter>,
+    );
 
-        render(
-            <MemoryRouter>
-                <Drawer />
-            </MemoryRouter>,
-        );
+    expect(screen.getByText(/You've been away a while./i)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
+  });
 
-        expect(
-            screen.getByText(/You've been away a while./i),
-        ).toBeInTheDocument();
-        expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
-    });
+  it("renders the welcome letter when firstTime state is present", () => {
+    render(
+      <MemoryRouter
+        initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
+      >
+        <Drawer />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByTestId("welcome-letter-overlay")).toBeInTheDocument();
+  });
+
+  it("renders the drawer content when the letter is closed", () => {
+    render(
+      <MemoryRouter
+        initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
+      >
+        <Drawer />
+      </MemoryRouter>,
+    );
+
+    const completeButton = screen.getByTestId("overlay-exit-button");
+    fireEvent.click(completeButton);
+
+    expect(
+      screen.queryByTestId("welcome-letter-overlay"),
+    ).not.toBeInTheDocument();
+  });
 });