@elabs-ai/components-ui 4.0.0 → 4.1.0

package/src/components/context-rail/context-rail.stories.tsx

@@ -0,0 +1,285 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FileText, History, MessageSquare } from "lucide-react";
+import { expect, screen, waitFor } from "storybook/test";
+
+import { ContextRail, type ContextRailSection } from "./context-rail";
+
+const meta = {
+  title: "Layout/ContextRail",
+  component: ContextRail,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "A right-hand rail whose collapsed state is a 48px icon strip that doubles as its own section switcher — click a switcher entry to make it active, click the ACTIVE entry again to collapse/expand. Below `overlayBreakpoint` (default 768) it renders the strip plus a `Sheet` overlay for the expanded body instead of a fixed-width panel. See `docs/ADR/0035-context-rail-and-side-dock.md`.",
+      },
+    },
+  },
+} satisfies Meta<typeof ContextRail>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sections: ContextRailSection[] = [
+  {
+    id: "sources",
+    label: "Sources",
+    icon: <FileText />,
+    count: 4,
+    content: (
+      <ul className="flex flex-col gap-2 text-body">
+        <li className="rounded-md border border-border p-2">quarterly-report.pdf — p.12</li>
+        <li className="rounded-md border border-border p-2">design-notes.md — §3</li>
+        <li className="rounded-md border border-border p-2">onboarding-flow.fig</li>
+        <li className="rounded-md border border-border p-2">support-thread-4821</li>
+      </ul>
+    ),
+  },
+  {
+    id: "comments",
+    label: "Comments",
+    icon: <MessageSquare />,
+    count: 2,
+    content: (
+      <ul className="flex flex-col gap-2 text-body">
+        <li className="rounded-md border border-border p-2">
+          &ldquo;Can we tighten this copy?&rdquo; — Priya
+        </li>
+        <li className="rounded-md border border-border p-2">
+          &ldquo;Looks good, shipping.&rdquo; — Sam
+        </li>
+      </ul>
+    ),
+  },
+  {
+    id: "activity",
+    label: "Activity",
+    icon: <History />,
+    content: (
+      <ul className="flex flex-col gap-2 text-body text-muted-foreground">
+        <li>Created 2 hours ago</li>
+        <li>Edited by Priya, 40 minutes ago</li>
+        <li>Reviewed by Sam, 5 minutes ago</li>
+      </ul>
+    ),
+  },
+];
+
+/** Expanded (`open`, default), three believable sections, the first active. */
+export const Default: Story = {
+  render: () => (
+    <div className="flex h-[560px] w-full">
+      <div className="flex-1 bg-background p-6 text-muted-foreground">Canvas content</div>
+      <ContextRail sections={sections} defaultActiveSectionId="sources" />
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("button", { name: "Sources 4 items" })).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Comments 2 items" })).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Activity" })).toBeInTheDocument();
+    await expect(canvas.getByText("Sources")).toBeInTheDocument();
+  },
+};
+
+/** `defaultOpen={false}` — the collapsed 48px icon strip, still fully operable as a switcher (uncontrolled, so the click-to-expand in the play function actually moves state). */
+export const Collapsed: Story = {
+  render: () => (
+    <div className="flex h-[560px] w-full">
+      <div className="flex-1 bg-background p-6 text-muted-foreground">Canvas content</div>
+      <ContextRail sections={sections} defaultActiveSectionId="sources" defaultOpen={false} />
+    </div>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const sourcesEntry = await canvas.findByRole("button", { name: "Sources 4 items" });
+    await expect(sourcesEntry).toBeInTheDocument();
+    // Content stays mounted while collapsed (only the ACTIVE section's
+    // content is ever mounted at all — collapsing hides it visually via
+    // CSS, it doesn't unmount it) — so assert visibility, not presence.
+    await expect(canvas.getByText("quarterly-report.pdf — p.12")).not.toBeVisible();
+
+    // Clicking the ACTIVE entry while collapsed expands the rail again.
+    await userEvent.click(sourcesEntry);
+    await expect(canvas.getByText("quarterly-report.pdf — p.12")).toBeVisible();
+  },
+};
+
+/** No sections — the default localized empty state. */
+export const Empty: Story = {
+  render: () => (
+    <div className="flex h-[560px] w-full">
+      <div className="flex-1 bg-background p-6 text-muted-foreground">Canvas content</div>
+      <ContextRail sections={[]} />
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    await expect(await canvas.findByText("No sections")).toBeInTheDocument();
+  },
+};
+
+/**
+ * Below `overlayBreakpoint` the rail mounts its own strip plus a `Sheet`
+ * instead of `Sidebar`. A viewport-size story parameter cannot force this
+ * branch under a headless run (the composed story's `window.innerWidth`
+ * doesn't track the addon's viewport there), so this story forces it
+ * deterministically with a very high `overlayBreakpoint` instead — reliable
+ * both interactively and under `vitest --project storybook`.
+ *
+ * Known constraint (task-11f-brief.md Finding 5): this story's own fixed
+ * `h-[560px]` host is shorter than the browser viewport, so the expanded
+ * body's `Sheet` (always viewport-height) visibly outruns the persistent
+ * strip below it — see the seam this reproduces in `ContextRail`'s own doc
+ * comment.
+ */
+export const Narrow: Story = {
+  // The sheet's real entrance/exit transition is load-bearing here: the
+  // occlusion hit-test is taken against the SETTLED panel, and the final
+  // assertion reads the panel's `data-state="closed"` while its exit animation
+  // is still running (Radix unmounts only afterwards). The suite otherwise runs
+  // under `prefers-reduced-motion: reduce` (`apps/docs/vitest.config.ts`, #125),
+  // which removes that exit window entirely — so this story opts back into full
+  // motion rather than the lock being rewritten around a missing animation.
+  globals: { motionPref: "full" },
+  render: () => (
+    <div className="flex h-[560px] w-full">
+      <div className="flex-1 bg-background p-6 text-muted-foreground">Canvas content</div>
+      <ContextRail sections={sections} defaultActiveSectionId="sources" overlayBreakpoint={2000} />
+    </div>
+  ),
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await expect(canvas.getByRole("button", { name: "Sources 4 items" })).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Comments 2 items" })).toBeInTheDocument();
+    await expect(canvasElement.querySelector('[data-slot="sidebar"]')).toBeNull();
+    await expect(canvasElement.querySelector('[data-slot="context-rail"]')).not.toBeNull();
+
+    // `ContextRail` has no `open`/`defaultOpen` here, so `SidebarProvider`'s
+    // own default (`true`) drives the Sheet `ContextRailNarrow` wires to that
+    // same `open` state — the panel renders OPEN at the same time as the
+    // persistent 48px strip, which is exactly the configuration the
+    // panel-occludes-the-strip regression (fix round 1, task-9b-fix-1.md)
+    // needs to reproduce. `userEvent.click` only checks `pointer-events:
+    // none` — it does NOT hit-test — so an occluded-but-visible button would
+    // still report a passing click. Assert the browser's REAL hit-test
+    // (`document.elementFromPoint`) instead, for an INACTIVE entry and for
+    // the ACTIVE/toggle entry — the reviewer's raw-coordinate repro landed
+    // on the sheet's own close button from exactly the active entry's
+    // position, so both are asserted, not just the easy one.
+    async function assertHitTestable(name: string) {
+      const button = canvas.getByRole("button", { name });
+      // The sheet's own entrance/exit transition (`duration-slow`, 380ms —
+      // `themes.css`) animates the panel in via `slide-in-from-right`. The
+      // panel is `position: fixed`, so mid-transition it sits translated by
+      // roughly its own width — a hit-test taken the instant after the click
+      // that opened it would see that IN-FLIGHT position (measured: right
+      // edge past the viewport, not its resting inset-by-the-strip-width
+      // position) and fail for a reason that has nothing to do with the
+      // Blocker this lock exists to catch. Wait for the REAL, settled
+      // hit-test to succeed instead of sleeping a fixed amount — this reads
+      // as fast as the animation actually is, and still fails for real
+      // (after timing out) if the panel keeps covering the strip once
+      // settled, which is the only case task-9b-fix-1.md's regression is.
+      await waitFor(
+        () => {
+          const rect = button.getBoundingClientRect();
+          if (rect.width === 0) {
+            throw new Error(`"${name}" has not been laid out yet (zero width)`);
+          }
+          const x = rect.left + rect.width / 2;
+          const y = rect.top + rect.height / 2;
+          const hit = document.elementFromPoint(x, y);
+          const hitDescription =
+            hit == null
+              ? "nothing"
+              : `<${hit.tagName.toLowerCase()}${
+                  hit.getAttribute("data-slot")
+                    ? ` data-slot="${hit.getAttribute("data-slot")}"`
+                    : ""
+                }>`;
+          expect(
+            hit != null && button.contains(hit),
+            `expected the centre of "${name}" (${x}, ${y}) to hit-test to that button, but it ` +
+              `hit ${hitDescription} instead — the sheet panel is likely covering the strip`,
+          ).toBe(true);
+        },
+        { timeout: 1000 },
+      );
+      return button;
+    }
+
+    // The switched-to section's content renders inside `SheetContent`, which
+    // Radix portals to `document.body` — a real DOM sibling of
+    // `canvasElement`, not a descendant of it — so it must be queried via
+    // `screen` (bound to `document.body`), not `canvas` (scoped to
+    // `canvasElement`).
+
+    // Inactive entry: clicking it changes the active section.
+    const commentsEntry = await assertHitTestable("Comments 2 items");
+    await userEvent.click(commentsEntry);
+    await expect(screen.getByText("“Looks good, shipping.” — Sam")).toBeVisible();
+
+    // Active/toggle entry: clicking it collapses the rail (closes the Sheet)
+    // rather than changing the section. Radix flips the panel's own
+    // `data-state` synchronously with the click (the exit ANIMATION, and the
+    // eventual unmount, follow after) — asserting that attribute is the
+    // immediate, non-flaky signal that the toggle actually fired, rather
+    // than racing the animation to observe visibility.
+    const commentsToggleEntry = await assertHitTestable("Comments 2 items");
+    await userEvent.click(commentsToggleEntry);
+    await expect(screen.getByRole("dialog", { hidden: true })).toHaveAttribute(
+      "data-state",
+      "closed",
+    );
+  },
+};
+
+/**
+ * Eight sections in the default 20rem rail — the count at which the header's
+ * two occupants genuinely compete for the band. `sections` is caller-supplied
+ * and unbounded, and the switcher is a fixed-height row of 32px buttons, so
+ * left uncapped it reserves its full width before the heading gets any: the
+ * active section's label was measured down to roughly 20px of usable width
+ * (its own padding included), which is no label at all. The cap keeps the
+ * heading's half of the band and moves the overflow into the switcher, which
+ * scrolls.
+ */
+export const ManySections: Story = {
+  render: () => (
+    <div className="flex h-[560px] w-full">
+      <div className="flex-1 bg-background p-6 text-muted-foreground">Canvas content</div>
+      <ContextRail
+        sections={[
+          ...sections,
+          { id: "files", label: "Files", icon: <FileText />, content: <p>Files</p> },
+          { id: "notes", label: "Notes", icon: <MessageSquare />, content: <p>Notes</p> },
+          { id: "audit", label: "Audit", icon: <History />, content: <p>Audit</p> },
+          { id: "links", label: "Links", icon: <FileText />, content: <p>Links</p> },
+          { id: "tasks", label: "Tasks", icon: <MessageSquare />, content: <p>Tasks</p> },
+        ]}
+        defaultActiveSectionId="sources"
+      />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const header = canvasElement.querySelector<HTMLElement>('[data-slot="context-rail-header"]');
+    const heading = canvasElement.querySelector<HTMLElement>('[data-slot="context-rail-heading"]');
+    const switcher = canvasElement.querySelector<HTMLElement>(
+      '[data-slot="context-rail-switcher"]',
+    );
+    await expect(header).not.toBeNull();
+    await expect(heading).not.toBeNull();
+    await expect(switcher).not.toBeNull();
+
+    const headerWidth = header!.getBoundingClientRect().width;
+    const switcherWidth = switcher!.getBoundingClientRect().width;
+    const headingWidth = heading!.getBoundingClientRect().width;
+
+    // The switcher never takes more than half the band…
+    await expect(switcherWidth).toBeLessThanOrEqual(headerWidth / 2 + 0.5);
+    // …so the heading keeps a width a label can actually render in. The
+    // regression this locks measured ~20px here.
+    await expect(headingWidth).toBeGreaterThan(80);
+    // And the header itself never outgrows the rail (the overflow lives
+    // inside the switcher, which scrolls).
+    await expect(switcher!.scrollWidth).toBeGreaterThan(switcher!.clientWidth);
+  },
+};

package/src/components/context-rail/context-rail.test.tsx

@@ -0,0 +1,263 @@
+import type { ReactNode } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { FileText, Quote } from "lucide-react";
+
+import { ContextRail, type ContextRailSection } from "./context-rail";
+
+const sections: ContextRailSection[] = [
+  {
+    id: "sources",
+    label: "Sources",
+    icon: <FileText />,
+    count: 3,
+    content: <p>Sources body</p>,
+  },
+  {
+    id: "quotes",
+    label: "Quotes",
+    icon: <Quote />,
+    content: <p>Quotes body</p>,
+  },
+];
+
+const ORIGINAL_INNER_WIDTH = window.innerWidth;
+
+function setViewportWidth(width: number) {
+  Object.defineProperty(window, "innerWidth", {
+    writable: true,
+    configurable: true,
+    value: width,
+  });
+}
+
+describe("ContextRail", () => {
+  afterEach(() => {
+    setViewportWidth(ORIGINAL_INNER_WIDTH);
+  });
+
+  it("1. is reachable by exact accessible name when collapsed", () => {
+    render(<ContextRail sections={sections} open={false} />);
+    expect(screen.getByRole("button", { name: "Sources 3 items" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Quotes" })).toBeInTheDocument();
+  });
+
+  it("2. mounts only the active section's content", () => {
+    render(<ContextRail sections={sections} activeSectionId="sources" />);
+    expect(screen.getByText("Sources body")).toBeInTheDocument();
+    expect(screen.queryByText("Quotes body")).not.toBeInTheDocument();
+  });
+
+  it("3. calls onActiveSectionChange with the clicked section's id", () => {
+    const onActiveSectionChange = vi.fn();
+    render(
+      <ContextRail
+        sections={sections}
+        activeSectionId="sources"
+        onActiveSectionChange={onActiveSectionChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Quotes" }));
+    expect(onActiveSectionChange).toHaveBeenCalledWith("quotes");
+  });
+
+  it("4. defaults to sections[0] uncontrolled, honours defaultActiveSectionId, and updates on click with no controlled prop", () => {
+    const { unmount } = render(<ContextRail sections={sections} />);
+    expect(screen.getByText("Sources body")).toBeInTheDocument();
+    unmount();
+
+    render(<ContextRail sections={sections} defaultActiveSectionId="quotes" />);
+    expect(screen.getByText("Quotes body")).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "Sources 3 items" }));
+    expect(screen.getByText("Sources body")).toBeInTheDocument();
+    expect(screen.queryByText("Quotes body")).not.toBeInTheDocument();
+  });
+
+  it("5. gives the active entry aria-current=true", () => {
+    render(<ContextRail sections={sections} activeSectionId="quotes" />);
+    expect(screen.getByRole("button", { name: "Quotes" })).toHaveAttribute("aria-current", "true");
+    expect(screen.getByRole("button", { name: "Sources 3 items" })).not.toHaveAttribute(
+      "aria-current",
+    );
+  });
+
+  // Finding 1 (task-11f-brief.md, BLOCKER): `isActive` was computed but never
+  // passed to `SidebarMenuButton`, so `data-active` defaulted to `false` on
+  // every entry and the ENTIRE active-state stylesheet (fill, label weight,
+  // icon colour, accent bar — all gated on `data-[active=true]:…` in
+  // `sidebarMenuButtonVariants`) never applied. Assert BOTH halves: the
+  // active entry carries `data-active="true"` AND an inactive one does not —
+  // asserting only the first half would pass against code that marks every
+  // entry active.
+  it("5b. gives the active entry data-active=true and an inactive one data-active=false", () => {
+    render(<ContextRail sections={sections} activeSectionId="quotes" />);
+    expect(screen.getByRole("button", { name: "Quotes" })).toHaveAttribute("data-active", "true");
+    expect(screen.getByRole("button", { name: "Sources 3 items" })).toHaveAttribute(
+      "data-active",
+      "false",
+    );
+  });
+
+  it("6. clicking the active entry toggles open; clicking an inactive entry opens and reports the new section", () => {
+    const onOpenChange = vi.fn();
+    const { rerender } = render(
+      <ContextRail
+        sections={sections}
+        activeSectionId="sources"
+        open={true}
+        onOpenChange={onOpenChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Sources 3 items" }));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+
+    onOpenChange.mockClear();
+    const onActiveSectionChange = vi.fn();
+    rerender(
+      <ContextRail
+        sections={sections}
+        activeSectionId="sources"
+        open={false}
+        onOpenChange={onOpenChange}
+        onActiveSectionChange={onActiveSectionChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Quotes" }));
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    expect(onActiveSectionChange).toHaveBeenCalledWith("quotes");
+  });
+
+  it("7. disabled sections render a disabled button and do not fire onActiveSectionChange", () => {
+    const onActiveSectionChange = vi.fn();
+    const disabledSections: ContextRailSection[] = [
+      sections[0]!,
+      { ...sections[1]!, disabled: true },
+    ];
+    render(
+      <ContextRail
+        sections={disabledSections}
+        activeSectionId="sources"
+        onActiveSectionChange={onActiveSectionChange}
+      />,
+    );
+    const quotesButton = screen.getByRole("button", { name: "Quotes" });
+    expect(quotesButton).toBeDisabled();
+    fireEvent.click(quotesButton);
+    expect(onActiveSectionChange).not.toHaveBeenCalled();
+  });
+
+  it("8. renders the empty slot for an empty sections array, localized by default, overridable via `empty`", () => {
+    const { container, rerender } = render(<ContextRail sections={[]} />);
+    const emptySlot = container.querySelector('[data-slot="context-rail-empty"]');
+    expect(emptySlot).not.toBeNull();
+    expect(within(emptySlot as HTMLElement).getByText("No sections")).toBeInTheDocument();
+
+    const custom: ReactNode = <p>Nothing to show here</p>;
+    rerender(<ContextRail sections={[]} empty={custom} />);
+    const customEmptySlot = container.querySelector('[data-slot="context-rail-empty"]');
+    expect(customEmptySlot).not.toBeNull();
+    expect(screen.getByText("Nothing to show here")).toBeInTheDocument();
+    expect(screen.queryByText("No sections")).not.toBeInTheDocument();
+  });
+
+  it("9. publishes `width` as --sidebar-width on the provider element, defaulting to 20rem", () => {
+    const { container, rerender } = render(<ContextRail sections={sections} />);
+    const provider = container.firstElementChild as HTMLElement;
+    expect(provider.getAttribute("style") ?? "").toContain("--sidebar-width: 20rem");
+
+    rerender(<ContextRail sections={sections} width="24rem" />);
+    const providerAfter = container.firstElementChild as HTMLElement;
+    expect(providerAfter.getAttribute("style") ?? "").toContain("--sidebar-width: 24rem");
+  });
+
+  it("10. warns exactly once when overlayBreakpoint < 768, and not when >= 768", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const { unmount } = render(<ContextRail sections={sections} overlayBreakpoint={500} />);
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    unmount();
+    warnSpy.mockClear();
+
+    render(<ContextRail sections={sections} overlayBreakpoint={768} />);
+    expect(warnSpy).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it("11. below overlayBreakpoint renders the narrow strip (no [data-slot=sidebar]) with the same switcher names", () => {
+    setViewportWidth(500);
+    const { container } = render(<ContextRail sections={sections} />);
+    expect(container.querySelector('[data-slot="sidebar"]')).toBeNull();
+    expect(container.querySelector('[data-slot="context-rail"]')).not.toBeNull();
+    expect(screen.getByRole("button", { name: "Sources 3 items" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Quotes" })).toBeInTheDocument();
+  });
+
+  it("12. renders all seven data-slot values on an open, non-empty rail", () => {
+    const { container } = render(
+      <ContextRail sections={sections} open={true} activeSectionId="sources" />,
+    );
+    for (const slot of [
+      "context-rail",
+      "context-rail-switcher",
+      "context-rail-switcher-item",
+      "context-rail-count",
+      "context-rail-heading",
+      "context-rail-body",
+    ]) {
+      expect(
+        container.querySelector(`[data-slot="${slot}"]`),
+        `expected [data-slot="${slot}"] to be present`,
+      ).not.toBeNull();
+    }
+  });
+
+  // #382 — `variant` used to be a derived (`Omit<ComponentProps<typeof
+  // Sidebar>, …>`) member of `ContextRailProps`, honoured only in the wide
+  // (`Sidebar`) branch and silently inert below `overlayBreakpoint` (the
+  // narrow branch has no `Sidebar` to forward it to). Fixed by declaring the
+  // props surface instead of deriving it — `variant` is no longer a public
+  // prop at all. This is a compile-time lock: it fails the moment someone
+  // re-derives `ContextRailProps` from `Sidebar`, which is the only way the
+  // prop returns.
+  it("13. (type-level) does not accept a `variant` prop", () => {
+    function typeOnly() {
+      // @ts-expect-error — `variant` was removed from `ContextRailProps`; a
+      // consumer can no longer pass it, and it can no longer be silently
+      // inert in the narrow branch.
+      return <ContextRail sections={[]} variant="floating" />;
+    }
+    expect(typeof typeOnly).toBe("function");
+  });
+
+  // Companion to #13: the type was re-derived from `ComponentProps<"div">`
+  // and stopped omitting `children` alongside `onSelect`, unintentionally
+  // making `children` a public prop again even though both `ContextRailWide`
+  // and `ContextRailNarrow` supply their own JSX children after spreading
+  // `props` — a caller's `children` type-checks and is then silently
+  // discarded at render, the same advertised-but-inert failure #382 fixed
+  // for `variant`. Compile-time lock: fails the moment `children` is
+  // dropped from the `Omit` again.
+  it("15. (type-level) does not accept a `children` prop", () => {
+    function typeOnly() {
+      // @ts-expect-error — `children` is omitted from `ContextRailProps`;
+      // both render branches discard it after spreading `props`, so it
+      // must not be publicly accepted.
+      return <ContextRail sections={[]}>discarded</ContextRail>;
+    }
+    expect(typeof typeOnly).toBe("function");
+  });
+
+  it("14. the wide branch renders data-variant=sidebar on the sidebar root; the narrow branch renders no data-variant at all", () => {
+    const wide = render(<ContextRail sections={sections} open={true} activeSectionId="sources" />);
+    const sidebarRoot = wide.container.querySelector('[data-slot="sidebar"]');
+    expect(sidebarRoot).not.toBeNull();
+    expect(sidebarRoot).toHaveAttribute("data-variant", "sidebar");
+    wide.unmount();
+
+    setViewportWidth(500);
+    const narrow = render(
+      <ContextRail sections={sections} open={true} activeSectionId="sources" />,
+    );
+    expect(narrow.container.querySelector("[data-variant]")).toBeNull();
+    narrow.unmount();
+  });
+});