Profile page UI and functionality implemented

tests/components/CompletedPage.test.tsx

@@ -1,47 +1,73 @@
-import { describe, it, expect } from "vitest";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
 import { CompletedScreen } from "../../app/(app)/create/screens/completed/CompletedScreen";
+import { CREATE_FLOW_LAST_PUBLISHED_KEY } from "../../lib/create/lastPublishedRule";
+
+const storedRuleFixture = {
+  id: "rule-fixture-1",
+  title: "Fixture Community Rule",
+  summary: "A short summary for tests.",
+  document: {
+    sections: [
+      {
+        categoryName: "Values",
+        entries: [
+          {
+            title: "Fixture value title",
+            body: "Fixture value body text for the test document.",
+          },
+        ],
+      },
+      {
+        categoryName: "Communication",
+        entries: [
+          {
+            title: "Fixture channel",
+            body: "How we talk to each other.",
+          },
+        ],
+      },
+    ],
+  },
+};
 
 describe("CompletedScreen", () => {
+  beforeEach(() => {
+    sessionStorage.removeItem(CREATE_FLOW_LAST_PUBLISHED_KEY);
+  });
+
+  afterEach(() => {
+    sessionStorage.removeItem(CREATE_FLOW_LAST_PUBLISHED_KEY);
+  });
+
   it("renders without crashing", () => {
     render(<CompletedScreen />);
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
   });
 
-  it("renders HeaderLockup with expected title", () => {
+  it("shows no placeholder title or document when session is empty", () => {
+    render(<CompletedScreen />);
+    const h1 = screen.getByRole("heading", { level: 1 });
+    expect(h1.textContent).toBe("");
+    expect(screen.queryByText("Values")).not.toBeInTheDocument();
+  });
+
+  it("renders header and document from sessionStorage", () => {
+    sessionStorage.setItem(
+      CREATE_FLOW_LAST_PUBLISHED_KEY,
+      JSON.stringify(storedRuleFixture),
+    );
     render(<CompletedScreen />);
     expect(
       screen.getByRole("heading", {
-        name: "Mutual Aid Mondays",
+        name: "Fixture Community Rule",
       }),
     ).toBeInTheDocument();
-  });
-
-  it("renders HeaderLockup with expected description", () => {
-    render(<CompletedScreen />);
-    expect(
-      screen.getByText(
-        /Mutual Aid Monday is a grassroots community in Denver, founded in November 2020 by Kelsang Virya, dedicated to supporting neighbors experiencing homelessness./i,
-      ),
-    ).toBeInTheDocument();
-  });
-
-  it("renders Community Rule document with section labels", () => {
-    render(<CompletedScreen />);
+    expect(screen.getByText("A short summary for tests.")).toBeInTheDocument();
     expect(screen.getByText("Values")).toBeInTheDocument();
     expect(screen.getByText("Communication")).toBeInTheDocument();
-    expect(screen.getByText("Membership")).toBeInTheDocument();
-    expect(screen.getByText("Decision-making")).toBeInTheDocument();
-    expect(screen.getByText("Conflict management")).toBeInTheDocument();
-  });
-
-  it("renders document entry titles", () => {
-    render(<CompletedScreen />);
-    expect(screen.getByText("Solidarity Forever")).toBeInTheDocument();
-    expect(screen.getByText("Shared Leadership")).toBeInTheDocument();
-    expect(screen.getByText("Organizing Offline")).toBeInTheDocument();
-    expect(screen.getByText("Circular Food Systems")).toBeInTheDocument();
+    expect(screen.getByText("Fixture value title")).toBeInTheDocument();
   });
 
   it("renders toast alert when page loads", () => {