@purpurds/popover 0.0.1

package/src/popover.test.tsx

@@ -0,0 +1,642 @@
+import React from "react";
+import { Button } from "@purpurds/button";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { axe } from "vitest-axe";
+
+import { Popover } from "./popover";
+
+describe("Popover - Standalone Variant", () => {
+  it("should render trigger button", () => {
+    render(
+      <Popover>
+        <Popover.Trigger>
+          <Button variant="primary" type="button">
+            Click me
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content closeIconAriaLabel="Close" title="Test Title" body="Test body text">
+          <Popover.Footer>
+            <Popover.Button>Got it</Popover.Button>
+          </Popover.Footer>
+        </Popover.Content>
+      </Popover>
+    );
+    expect(screen.getByRole("button", { name: "Click me" })).toBeInTheDocument();
+  });
+
+  it("should open popover when trigger is clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <Popover.Trigger>
+          <Button variant="primary" type="button">
+            Click me
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content closeIconAriaLabel="Close" title="Test Title" body="Test body text">
+          <Popover.Footer>
+            <Popover.Button>Got it</Popover.Button>
+          </Popover.Footer>
+        </Popover.Content>
+      </Popover>
+    );
+
+    await user.click(screen.getByRole("button", { name: "Click me" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("Test Title")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Test body text")).toBeInTheDocument();
+  });
+
+  it("should close popover when action button is clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <Popover.Trigger>
+          <Button variant="primary" type="button">
+            Click me
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content closeIconAriaLabel="Close" title="Test Title" body="Test body text">
+          <Popover.Footer>
+            <Popover.Button>Got it</Popover.Button>
+          </Popover.Footer>
+        </Popover.Content>
+      </Popover>
+    );
+
+    // Open the popover
+    await user.click(screen.getByRole("button", { name: "Click me" }));
+    await waitFor(() => {
+      expect(screen.getByText("Test Title")).toBeInTheDocument();
+    });
+
+    // Click the action button
+    await user.click(screen.getByRole("button", { name: "Got it" }));
+
+    await waitFor(() => {
+      expect(screen.queryByText("Test Title")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should close popover when close icon is clicked", async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <Popover.Trigger>
+          <Button variant="primary" type="button">
+            Click me
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content closeIconAriaLabel="Close" title="Test Title" body="Test body text">
+          <Popover.Footer>
+            <Popover.Button>Got it</Popover.Button>
+          </Popover.Footer>
+        </Popover.Content>
+      </Popover>
+    );
+
+    // Open the popover
+    await user.click(screen.getByRole("button", { name: "Click me" }));
+    await waitFor(() => {
+      expect(screen.getByText("Test Title")).toBeInTheDocument();
+    });
+
+    // Click the close icon
+    await user.click(screen.getByRole("button", { name: "Close" }));
+
+    await waitFor(() => {
+      expect(screen.queryByText("Test Title")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should close popover when ESC is pressed", async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <Popover.Trigger>
+          <Button variant="primary" type="button">
+            Click me
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content closeIconAriaLabel="Close" title="Test Title" body="Test body text">
+          <Popover.Footer>
+            <Popover.Button>Got it</Popover.Button>
+          </Popover.Footer>
+        </Popover.Content>
+      </Popover>
+    );
+
+    // Open the popover
+    await user.click(screen.getByRole("button", { name: "Click me" }));
+    await waitFor(() => {
+      expect(screen.getByText("Test Title")).toBeInTheDocument();
+    });
+
+    // Press ESC
+    await user.keyboard("{Escape}");
+
+    await waitFor(() => {
+      expect(screen.queryByText("Test Title")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should work in controlled mode", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+    const TestComponent = () => {
+      const [open, setOpen] = React.useState(false);
+      return (
+        <>
+          <button onClick={() => setOpen(true)}>External Open</button>
+          <Popover
+            open={open}
+            onOpenChange={(isOpen) => {
+              setOpen(isOpen);
+              onOpenChange(isOpen);
+            }}
+          >
+            <Popover.Trigger>
+              <Button variant="primary" type="button">
+                Click me
+              </Button>
+            </Popover.Trigger>
+            <Popover.Content closeIconAriaLabel="Close" title="Test Title" body="Test body text">
+              <Popover.Footer>
+                <Popover.Button>Got it</Popover.Button>
+              </Popover.Footer>
+            </Popover.Content>
+          </Popover>
+        </>
+      );
+    };
+
+    render(<TestComponent />);
+
+    // Open via external button
+    await user.click(screen.getByRole("button", { name: "External Open" }));
+    await waitFor(() => {
+      expect(screen.getByText("Test Title")).toBeInTheDocument();
+    });
+    // Note: Radix Popover doesn't call onOpenChange when open prop is set externally,
+    // only when internal interactions (trigger click, ESC) change the state
+  });
+
+  it("should be accessible", async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <Popover.Trigger>
+          <Button variant="primary" type="button">
+            Click me
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content closeIconAriaLabel="Close" title="Test Title" body="Test body text">
+          <Popover.Footer>
+            <Popover.Button>Got it</Popover.Button>
+          </Popover.Footer>
+        </Popover.Content>
+      </Popover>
+    );
+
+    // Open the popover first
+    await user.click(screen.getByRole("button", { name: "Click me" }));
+    await waitFor(() => {
+      expect(screen.getByText("Test Title")).toBeInTheDocument();
+    });
+
+    // Test only the content dialog, not the trigger wrapper
+    const dialog = screen.getByRole("dialog");
+    const results = await axe(dialog);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(results).toHaveNoViolations();
+  });
+});
+
+describe("Popover - Walkthrough Variant", () => {
+  it("should render step indicator with default separator", async () => {
+    render(
+      <Popover.Flow
+        separatorText="of"
+        stepText="Step"
+        backLabel="Back"
+        nextLabel="Next"
+        finishLabel="Finish"
+      >
+        <Popover multistep step={1}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 1
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content closeIconAriaLabel="Close" title="Step 1" body="Step 1 content" />
+        </Popover>
+        <Popover multistep step={2}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 2
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content closeIconAriaLabel="Close" title="Step 2" body="Step 2 content" />
+        </Popover>
+      </Popover.Flow>
+    );
+
+    // First wait for step 1 content to appear (steps need to register, then 300ms delay to open)
+    await waitFor(
+      () => {
+        expect(screen.getByText("Step 1 content")).toBeInTheDocument();
+      },
+      { timeout: 5000, interval: 50 }
+    );
+
+    // Then check for step indicator (appears twice: screen reader + visible)
+    const stepIndicators = screen.getAllByText("Step 1 of 2");
+    expect(stepIndicators.length).toBeGreaterThan(0);
+  });
+
+  it("should render step indicator with custom separator", async () => {
+    render(
+      <Popover.Flow
+        separatorText="av"
+        stepText="Steg"
+        backLabel="Tillbaka"
+        nextLabel="Nästa"
+        finishLabel="Klar"
+      >
+        <Popover multistep step={1}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 1
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content closeIconAriaLabel="Stäng" title="Steg 1" body="Steg 1 innehåll" />
+        </Popover>
+        <Popover multistep step={2}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 2
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content closeIconAriaLabel="Stäng" title="Steg 2" body="Steg 2 innehåll" />
+        </Popover>
+      </Popover.Flow>
+    );
+
+    // First wait for step 1 content to appear (steps need to register, then 300ms delay to open)
+    await waitFor(
+      () => {
+        expect(screen.getByText("Steg 1 innehåll")).toBeInTheDocument();
+      },
+      { timeout: 5000, interval: 50 }
+    );
+
+    // Then check for step indicator (appears twice: screen reader + visible)
+    const stepIndicators = screen.getAllByText("Steg 1 av 2");
+    expect(stepIndicators.length).toBeGreaterThan(0);
+  });
+
+  it("should show first step on mount", async () => {
+    render(
+      <Popover.Flow
+        separatorText="of"
+        stepText="Step"
+        backLabel="Back"
+        nextLabel="Next"
+        finishLabel="Finish"
+      >
+        <Popover multistep step={1}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 1 Target
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content closeIconAriaLabel="Close" title="Step 1 Title" body="Step 1 content" />
+        </Popover>
+        <Popover multistep step={2}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 2 Target
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content closeIconAriaLabel="Close" title="Step 2 Title" body="Step 2 content" />
+        </Popover>
+      </Popover.Flow>
+    );
+
+    // Wait for first step to appear
+    await waitFor(() => {
+      expect(screen.getByText("Step 1 Title")).toBeInTheDocument();
+      expect(screen.getByText("Step 1 content")).toBeInTheDocument();
+    });
+  });
+
+  it("should advance to next step when Next button is clicked", async () => {
+    const user = userEvent.setup();
+    const onAction = vi.fn();
+
+    render(
+      <Popover.Flow
+        separatorText="of"
+        stepText="Step"
+        backLabel="Back"
+        nextLabel="Next"
+        finishLabel="Finish"
+      >
+        <Popover multistep step={1}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 1 Target
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content
+            closeIconAriaLabel="Close"
+            title="Step 1"
+            body="Step 1 content"
+            onAction={onAction}
+          />
+        </Popover>
+        <Popover multistep step={2}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 2 Target
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content
+            closeIconAriaLabel="Close"
+            title="Step 2"
+            body="Step 2 content"
+            onAction={onAction}
+          />
+        </Popover>
+      </Popover.Flow>
+    );
+
+    // Wait for step 1 to appear
+    await waitFor(() => {
+      expect(screen.getByText("Step 1")).toBeInTheDocument();
+    });
+
+    // Click Next button
+    await user.click(screen.getByRole("button", { name: "Next" }));
+
+    // Verify onAction was called with correct params
+    expect(onAction).toHaveBeenCalledWith({ type: "next", step: 1 });
+
+    // Wait for step 2 to appear
+    await waitFor(() => {
+      expect(screen.getByText("Step 2")).toBeInTheDocument();
+      expect(screen.getByText("Step 2 content")).toBeInTheDocument();
+    });
+  });
+
+  it("should go back to previous step when Back button is clicked", async () => {
+    const user = userEvent.setup();
+    const onAction = vi.fn();
+
+    render(
+      <Popover.Flow
+        separatorText="of"
+        stepText="Step"
+        backLabel="Back"
+        nextLabel="Next"
+        finishLabel="Finish"
+      >
+        <Popover multistep step={1}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 1 Target
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content
+            closeIconAriaLabel="Close"
+            title="Step 1"
+            body="Step 1 content"
+            onAction={onAction}
+          />
+        </Popover>
+        <Popover multistep step={2}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 2 Target
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content
+            closeIconAriaLabel="Close"
+            title="Step 2"
+            body="Step 2 content"
+            onAction={onAction}
+          />
+        </Popover>
+      </Popover.Flow>
+    );
+
+    // Wait for step 1 and navigate to step 2
+    await waitFor(() => {
+      expect(screen.getByText("Step 1")).toBeInTheDocument();
+    });
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await waitFor(() => {
+      expect(screen.getByText("Step 2")).toBeInTheDocument();
+    });
+
+    // Click Back button
+    await user.click(screen.getByRole("button", { name: "Back" }));
+    expect(onAction).toHaveBeenCalledWith({ type: "back", step: 2 });
+
+    // Verify we're back at step 1
+    await waitFor(() => {
+      expect(screen.getByText("Step 1")).toBeInTheDocument();
+      expect(screen.getByText("Step 1 content")).toBeInTheDocument();
+    });
+  });
+
+  it("should show Finish button on last step and dismiss flow when clicked", async () => {
+    const user = userEvent.setup();
+    const onAction = vi.fn();
+
+    render(
+      <Popover.Flow
+        separatorText="of"
+        stepText="Step"
+        backLabel="Back"
+        nextLabel="Next"
+        finishLabel="Finish"
+      >
+        <Popover multistep step={1}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 1 Target
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content
+            closeIconAriaLabel="Close"
+            title="Step 1"
+            body="Step 1 content"
+            onAction={onAction}
+          />
+        </Popover>
+        <Popover multistep step={2}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 2 Target
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content
+            closeIconAriaLabel="Close"
+            title="Step 2"
+            body="Step 2 content"
+            onAction={onAction}
+          />
+        </Popover>
+      </Popover.Flow>
+    );
+
+    // Navigate to last step
+    await waitFor(() => {
+      expect(screen.getByText("Step 1")).toBeInTheDocument();
+    });
+    await user.click(screen.getByRole("button", { name: "Next" }));
+    await waitFor(() => {
+      expect(screen.getByText("Step 2")).toBeInTheDocument();
+    });
+
+    // Verify Finish button is shown
+    expect(screen.getByRole("button", { name: "Finish" })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Next" })).not.toBeInTheDocument();
+
+    // Click Finish button
+    await user.click(screen.getByRole("button", { name: "Finish" }));
+    expect(onAction).toHaveBeenCalledWith({ type: "finish", step: 2 });
+
+    // Verify flow is dismissed
+    await waitFor(() => {
+      expect(screen.queryByText("Step 2")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should dismiss flow when close icon is clicked", async () => {
+    const user = userEvent.setup();
+    const onAction = vi.fn();
+
+    render(
+      <Popover.Flow
+        separatorText="of"
+        stepText="Step"
+        backLabel="Back"
+        nextLabel="Next"
+        finishLabel="Finish"
+      >
+        <Popover multistep step={1}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 1 Target
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content
+            closeIconAriaLabel="Close"
+            title="Step 1"
+            body="Step 1 content"
+            onAction={onAction}
+          />
+        </Popover>
+      </Popover.Flow>
+    );
+
+    // Wait for step 1 to appear
+    await waitFor(() => {
+      expect(screen.getByText("Step 1")).toBeInTheDocument();
+    });
+
+    // Click close icon
+    await user.click(screen.getByRole("button", { name: "Close" }));
+    expect(onAction).toHaveBeenCalledWith({ type: "dismiss", step: 1 });
+
+    // Verify flow is dismissed
+    await waitFor(() => {
+      expect(screen.queryByText("Step 1")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should dismiss flow when ESC is pressed", async () => {
+    const user = userEvent.setup();
+    const onAction = vi.fn();
+
+    render(
+      <Popover.Flow
+        separatorText="of"
+        stepText="Step"
+        backLabel="Back"
+        nextLabel="Next"
+        finishLabel="Finish"
+      >
+        <Popover multistep step={1}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 1 Target
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content
+            closeIconAriaLabel="Close"
+            title="Step 1"
+            body="Step 1 content"
+            onAction={onAction}
+          />
+        </Popover>
+      </Popover.Flow>
+    );
+
+    // Wait for step 1 to appear
+    await waitFor(() => {
+      expect(screen.getByText("Step 1")).toBeInTheDocument();
+    });
+
+    // Press ESC
+    await user.keyboard("{Escape}");
+
+    // Verify flow is dismissed
+    await waitFor(() => {
+      expect(screen.queryByText("Step 1")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should not show Back button on first step", async () => {
+    render(
+      <Popover.Flow
+        separatorText="of"
+        stepText="Step"
+        backLabel="Back"
+        nextLabel="Next"
+        finishLabel="Finish"
+      >
+        <Popover multistep step={1}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 1 Target
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content closeIconAriaLabel="Close" title="Step 1" body="Step 1 content" />
+        </Popover>
+        <Popover multistep step={2}>
+          <Popover.Trigger>
+            <Button variant="primary" type="button">
+              Step 2 Target
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content closeIconAriaLabel="Close" title="Step 2" body="Step 2 content" />
+        </Popover>
+      </Popover.Flow>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Step 1")).toBeInTheDocument();
+    });
+
+    expect(screen.queryByRole("button", { name: "Back" })).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument();
+  });
+});