59 lines · 2.2 KB · TypeScript
RawDownload
import { renderToStaticMarkup } from "react-dom/server";import { describe, expect, it } from "vite-plus/test"; import { ComposerBannerStack, type ComposerBannerStackItem } from "./ComposerBannerStack"; const banner = (id: string): ComposerBannerStackItem => ({  id,  variant: "warning",  icon: <span aria-hidden="true">!</span>,  title: `${id} warning`,}); describe("ComposerBannerStack", () => {  it("keeps expanded banners in layout flow so surrounding content moves out of their way", () => {    const markup = renderToStaticMarkup(      <ComposerBannerStack items={[banner("front"), banner("stacked")]} />,    );     const expandedItems = markup.match(      /<div data-composer-banner-stack-expanded-items="true" class="([^"]+)">/,    );     expect(expandedItems?.[1]).toContain("grid-rows-[0fr]");    expect(expandedItems?.[1]).toContain("group-hover/banner-stack:grid-rows-[1fr]");    expect(expandedItems?.[1]).toContain("z-20");    expect(expandedItems?.[1]).not.toContain("absolute");    expect(markup.indexOf("front warning")).toBeLessThan(markup.indexOf("stacked warning"));    expect(markup).toContain("invisible pointer-events-none");    expect(markup).toContain("group-focus-within/banner-stack:visible");  });   it("does not render an expandable region for a single banner", () => {    const markup = renderToStaticMarkup(<ComposerBannerStack items={[banner("front")]} />);     expect(markup).not.toContain("data-composer-banner-stack-expanded-items");    expect(markup).toContain("alert-glass");    expect(markup).toContain('data-variant="warning"');    expect(markup).toContain("transform:none");    expect(markup).not.toContain("will-change:transform");  });   it("applies item-specific surface and action layout classes", () => {    const markup = renderToStaticMarkup(      <ComposerBannerStack        items={[          {            ...banner("branch"),            className: "branch-surface",            actionClassName: "branch-actions",            actions: <button type="button">Repair</button>,          },        ]}      />,    );     expect(markup).toContain("branch-surface");    expect(markup).toContain("branch-actions");  });});