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"); });});
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");
});
});