Implement share and export components

tests/components/CompletedPage.test.tsx

@@ -1,8 +1,13 @@
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { useSearchParams } from "next/navigation";
+import { afterEach, beforeEach, describe, expect, it, vi } 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";
+import {
+  CREATE_FLOW_COMPLETED_CELEBRATE_QUERY,
+  CREATE_FLOW_COMPLETED_CELEBRATE_VALUE,
+} from "../../app/(app)/create/utils/flowSteps";
 
 const storedRuleFixture = {
   id: "rule-fixture-1",
@@ -32,9 +37,18 @@ const storedRuleFixture = {
   },
 };
 
+function mockSearchParams(record?: Record<string, string>) {
+  vi.mocked(useSearchParams).mockReturnValue(
+    new URLSearchParams(record ?? undefined) as NonNullable<
+      ReturnType<typeof useSearchParams>
+    >,
+  );
+}
+
 describe("CompletedScreen", () => {
   beforeEach(() => {
     sessionStorage.removeItem(CREATE_FLOW_LAST_PUBLISHED_KEY);
+    mockSearchParams();
   });
 
   afterEach(() => {
@@ -70,7 +84,25 @@ describe("CompletedScreen", () => {
     expect(screen.getByText("Fixture value title")).toBeInTheDocument();
   });
 
-  it("renders toast alert when page loads", () => {
+  it("does not show post-finalize toast without celebrate query", () => {
+    render(<CompletedScreen />);
+    expect(
+      screen.queryByText(
+        "This is what folks see when you share your CommunityRule",
+      ),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        "Your group can use this document as an operating manual.",
+      ),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows post-finalize toast in status region when celebrate query is set", () => {
+    mockSearchParams({
+      [CREATE_FLOW_COMPLETED_CELEBRATE_QUERY]:
+        CREATE_FLOW_COMPLETED_CELEBRATE_VALUE,
+    });
     render(<CompletedScreen />);
     expect(
       screen.getByText(
@@ -82,10 +114,6 @@ describe("CompletedScreen", () => {
         "Your group can use this document as an operating manual.",
       ),
     ).toBeInTheDocument();
-  });
-
-  it("renders toast with role status", () => {
-    render(<CompletedScreen />);
     const statusRegions = screen.getAllByRole("status");
     expect(statusRegions.length).toBeGreaterThanOrEqual(1);
     expect(

tests/components/CreateFlowTopNav.test.tsx

@@ -36,7 +36,7 @@ const config: ComponentTestSuiteConfig<CreateFlowTopNavProps> = {
     hasEdit: true,
     saveDraftOnExit: true,
     onShare: vi.fn(),
-    onExport: vi.fn(),
+    onSelectExportFormat: vi.fn(),
     onEdit: vi.fn(),
     onExit: vi.fn(),
     className: "test-class",
@@ -66,11 +66,30 @@ describe("CreateFlowTopNav (behavioral tests)", () => {
     expect(exitButton).toBeInTheDocument();
   });
 
-  it("shows Exit when saveDraftOnExit is false", () => {
-    render(<CreateFlowTopNav saveDraftOnExit={false} />);
-    const exitButton = screen.getByRole("button", { name: "Exit" });
-    expect(exitButton).toBeInTheDocument();
-  });
+  it.each([
+    ["Download Markdown", "markdown"],
+    ["Download PDF", "pdf"],
+    ["Download CSV", "csv"],
+  ] as const)(
+    "opens export menu and calls onSelectExportFormat for %s",
+    async (menuLabel, expectedFormat) => {
+      const user = userEvent.setup();
+      const handleExport = vi.fn();
+      render(
+        <CreateFlowTopNav
+          hasExport={true}
+          onSelectExportFormat={handleExport}
+        />,
+      );
+
+      const exportButton = screen.getByRole("button", { name: "Export" });
+      await user.click(exportButton);
+      const item = screen.getByRole("menuitem", { name: menuLabel });
+      await user.click(item);
+
+      expect(handleExport).toHaveBeenCalledWith(expectedFormat);
+    },
+  );
 
   it("renders Share button when hasShare is true", () => {
     render(<CreateFlowTopNav hasShare={true} />);
@@ -86,7 +105,12 @@ describe("CreateFlowTopNav (behavioral tests)", () => {
   });
 
   it("renders Export button when hasExport is true", () => {
-    render(<CreateFlowTopNav hasExport={true} />);
+    render(
+      <CreateFlowTopNav
+        hasExport={true}
+        onSelectExportFormat={vi.fn()}
+      />,
+    );
     const exportButton = screen.getByRole("button", { name: "Export" });
     expect(exportButton).toBeInTheDocument();
   });
@@ -107,15 +131,4 @@ describe("CreateFlowTopNav (behavioral tests)", () => {
 
     expect(handleExit).toHaveBeenCalledTimes(1);
   });
-
-  it("calls onShare when Share button is clicked", async () => {
-    const user = userEvent.setup();
-    const handleShare = vi.fn();
-    render(<CreateFlowTopNav hasShare={true} onShare={handleShare} />);
-
-    const shareButton = screen.getByRole("button", { name: "Share" });
-    await user.click(shareButton);
-
-    expect(handleShare).toHaveBeenCalledTimes(1);
-  });
 });

tests/components/layout/ListItem.test.tsx

@@ -0,0 +1,38 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders as render, screen } from "../../utils/test-utils";
+import "@testing-library/jest-dom/vitest";
+import ListItem from "../../../app/components/layout/ListItem";
+
+describe("ListItem", () => {
+  it("renders as a menu item with label and icon", () => {
+    render(
+      <div role="menu" aria-label="Test menu">
+        <ListItem
+          showDivider
+          leadingIcon="markdown_copy"
+          label="Download Markdown"
+          onClick={vi.fn()}
+        />
+      </div>,
+    );
+    expect(screen.getByRole("menuitem", { name: "Download Markdown" })).toBeTruthy();
+  });
+
+  it("invokes onClick when activated", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <div role="menu" aria-label="Test menu">
+        <ListItem
+          showDivider={false}
+          leadingIcon="csv"
+          label="Download CSV"
+          onClick={onClick}
+        />
+      </div>,
+    );
+    await user.click(screen.getByRole("menuitem", { name: "Download CSV" }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});

tests/components/modals/Popover.test.tsx

@@ -0,0 +1,40 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders as render, screen } from "../../utils/test-utils";
+import "@testing-library/jest-dom/vitest";
+import ListItem from "../../../app/components/layout/ListItem";
+import Popover from "../../../app/components/modals/Popover";
+
+describe("Popover (export menu)", () => {
+  it("exposes a menu landmark with localized label", () => {
+    render(
+      <Popover id="export-menu" menuAriaLabel="Export format">
+        <ListItem
+          showDivider
+          leadingIcon="markdown_copy"
+          label="Download Markdown"
+          onClick={vi.fn()}
+        />
+      </Popover>,
+    );
+    expect(screen.getByRole("menu", { name: "Export format" })).toBeTruthy();
+    expect(screen.getByRole("menuitem", { name: "Download Markdown" })).toBeTruthy();
+  });
+
+  it("invokes handler when list item clicked", async () => {
+    const user = userEvent.setup();
+    const onCsv = vi.fn();
+    render(
+      <Popover id="popover-csv" menuAriaLabel="Pick format">
+        <ListItem
+          showDivider={false}
+          leadingIcon="csv"
+          label="Download CSV"
+          onClick={onCsv}
+        />
+      </Popover>,
+    );
+    await user.click(screen.getByRole("menuitem", { name: "Download CSV" }));
+    expect(onCsv).toHaveBeenCalledTimes(1);
+  });
+});

tests/components/modals/Share.test.tsx

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { renderWithProviders as render, screen } from "../../utils/test-utils";
+import "@testing-library/jest-dom/vitest";
+import Share from "../../../app/components/modals/Share";
+
+const noopHandlers = {
+  onCopyLink: vi.fn(),
+  onEmailShare: vi.fn(),
+  onSignalShare: vi.fn(),
+  onSlackShare: vi.fn(),
+  onDiscordShare: vi.fn(),
+};
+
+describe("Share modal", () => {
+  it("does not render dialog when closed", () => {
+    render(
+      <Share isOpen={false} onClose={vi.fn()} {...noopHandlers} />,
+    );
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("renders localized heading and copy link action when open", async () => {
+    const user = userEvent.setup();
+    const onCopyLink = vi.fn();
+    render(
+      <Share
+        isOpen={true}
+        onClose={vi.fn()}
+        {...noopHandlers}
+        onCopyLink={onCopyLink}
+      />,
+    );
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { level: 1, name: /Share this CommunityRule/ }),
+    ).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Copy link" }));
+    expect(onCopyLink).toHaveBeenCalledTimes(1);
+  });
+
+  it("invokes channel handlers for Signal, Slack, and Discord", async () => {
+    const user = userEvent.setup();
+    const onSignalShare = vi.fn();
+    const onSlackShare = vi.fn();
+    const onDiscordShare = vi.fn();
+    render(
+      <Share
+        isOpen={true}
+        onClose={vi.fn()}
+        {...noopHandlers}
+        onSignalShare={onSignalShare}
+        onSlackShare={onSlackShare}
+        onDiscordShare={onDiscordShare}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Signal" }));
+    await user.click(screen.getByRole("button", { name: "Slack" }));
+    await user.click(screen.getByRole("button", { name: "Discord" }));
+    expect(onSignalShare).toHaveBeenCalledTimes(1);
+    expect(onSlackShare).toHaveBeenCalledTimes(1);
+    expect(onDiscordShare).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClose when Done is clicked", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    render(<Share isOpen={true} onClose={onClose} {...noopHandlers} />);
+    await user.click(screen.getByRole("button", { name: "Done" }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClose when header overflow (more) is activated, matching modal chrome parity", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    render(<Share isOpen={true} onClose={onClose} {...noopHandlers} />);
+    await user.click(screen.getByRole("button", { name: "More share options" }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});