Refine use cases rule examples

tests/components/CreateFlowTopNav.test.tsx

@@ -1,6 +1,10 @@
 import React from "react";
-import { describe, it, expect, vi } from "vitest";
-import { renderWithProviders as render, screen } from "../utils/test-utils";
+import { afterEach, beforeEach, describe, it, expect, vi } from "vitest";
+import {
+  renderWithProviders as render,
+  screen,
+  waitFor,
+} from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom/vitest";
 import CreateFlowTopNav from "../../app/components/navigation/CreateFlowTopNav";
@@ -150,6 +154,25 @@ describe("CreateFlowTopNav (behavioral tests)", () => {
     expect(handler).toHaveBeenCalledTimes(1);
   });
 
+  it("renders Duplicate button when hasDuplicate is true", () => {
+    render(
+      <CreateFlowTopNav
+        hasDuplicate={true}
+        duplicateLabel="Duplicate"
+        duplicateAriaLabel="Duplicate"
+        onDuplicate={vi.fn()}
+      />,
+    );
+    expect(
+      screen.getByRole("button", { name: "Duplicate" }),
+    ).toBeInTheDocument();
+  });
+
+  it("uses exitLabel override when provided", () => {
+    render(<CreateFlowTopNav exitLabel="Return" />);
+    expect(screen.getByRole("button", { name: "Return" })).toBeInTheDocument();
+  });
+
   it("calls onExit when Exit button is clicked", async () => {
     const user = userEvent.setup();
     const handleExit = vi.fn();
@@ -161,3 +184,107 @@ describe("CreateFlowTopNav (behavioral tests)", () => {
     expect(handleExit).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("CreateFlowTopNav (viewport < sm2 / 440px)", () => {
+  const defaultInnerWidth = 1200;
+
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: 320,
+    });
+  });
+
+  afterEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: defaultInnerWidth,
+    });
+  });
+
+  const completedScreenProps = {
+    hasShare: true,
+    hasExport: true,
+    hasEdit: true,
+    saveDraftOnExit: true,
+    onShare: vi.fn(),
+    onSelectExportFormat: vi.fn(),
+    onEdit: vi.fn(),
+    onExit: vi.fn(),
+  } as const;
+
+  it("collapses secondary actions into a kebab menu", async () => {
+    render(<CreateFlowTopNav {...completedScreenProps} />);
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: "More options" }),
+      ).toBeInTheDocument();
+    });
+
+    expect(
+      screen.queryByRole("button", { name: "Share" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Export" }),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Edit" })).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Save & Exit" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("opens kebab menu with share, export formats, edit, and save & exit", async () => {
+    const user = userEvent.setup();
+    render(<CreateFlowTopNav {...completedScreenProps} />);
+
+    const kebab = await screen.findByRole("button", { name: "More options" });
+    await user.click(kebab);
+
+    expect(screen.getByRole("menuitem", { name: "Share" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("menuitem", { name: "Download PDF" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("menuitem", { name: "Download CSV" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("menuitem", { name: "Download Markdown" }),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("menuitem", { name: "Edit" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("menuitem", { name: "Save & Exit" }),
+    ).toBeInTheDocument();
+  });
+
+  it("invokes handlers from kebab menu items", async () => {
+    const user = userEvent.setup();
+    const handleShare = vi.fn();
+    const handleEdit = vi.fn();
+    const handleExit = vi.fn();
+
+    render(
+      <CreateFlowTopNav
+        {...completedScreenProps}
+        onShare={handleShare}
+        onEdit={handleEdit}
+        onExit={handleExit}
+      />,
+    );
+
+    const kebab = await screen.findByRole("button", { name: "More options" });
+    await user.click(kebab);
+    await user.click(screen.getByRole("menuitem", { name: "Share" }));
+    expect(handleShare).toHaveBeenCalledTimes(1);
+
+    await user.click(kebab);
+    await user.click(screen.getByRole("menuitem", { name: "Edit" }));
+    expect(handleEdit).toHaveBeenCalledTimes(1);
+
+    await user.click(kebab);
+    await user.click(screen.getByRole("menuitem", { name: "Save & Exit" }));
+    expect(handleExit).toHaveBeenCalledTimes(1);
+  });
+});