65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
import { describe, it, expect } from "vitest";
|
||
import {
|
||
CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
|
||
CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
|
||
CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
|
||
CREATE_FLOW_WIDE_MAX_CLASS,
|
||
CREATE_FLOW_MD_CENTERED_MAIN_CLASS,
|
||
CREATE_FLOW_MD_CENTERED_SHELL_CLASS,
|
||
CREATE_FLOW_PAGE_GUTTER_CLASS,
|
||
CREATE_FLOW_VIEWPORT_FRAME_CLASS,
|
||
getCreateFlowContentMaxClass,
|
||
} from "../../app/(app)/create/components/createFlowLayoutTokens";
|
||
|
||
describe("createFlowLayoutTokens", () => {
|
||
it("exports create-flow column and two-column max class strings", () => {
|
||
expect(CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS).toBe(
|
||
"w-full min-w-0 lg:max-w-[640px]",
|
||
);
|
||
expect(CREATE_FLOW_MD_UP_GRID_CELL_CLASS).toBe(
|
||
"w-full min-w-0 lg:mx-auto lg:max-w-[640px]",
|
||
);
|
||
expect(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS).toBe(
|
||
"w-full min-w-0 lg:max-w-[1328px]",
|
||
);
|
||
expect(CREATE_FLOW_WIDE_MAX_CLASS).toBe("w-full min-w-0 lg:max-w-[1440px]");
|
||
});
|
||
|
||
it("uses one gutter scale across the six viewport bands", () => {
|
||
expect(CREATE_FLOW_PAGE_GUTTER_CLASS).toBe("px-5 md:px-12 lg:px-16");
|
||
});
|
||
|
||
it("sizes the wizard frame with dynamic viewport height", () => {
|
||
expect(CREATE_FLOW_VIEWPORT_FRAME_CLASS).toContain("h-dvh");
|
||
expect(CREATE_FLOW_VIEWPORT_FRAME_CLASS).toContain("max-h-dvh");
|
||
});
|
||
|
||
it("centers lockup+card and card-stack steps in the nav–footer band from md", () => {
|
||
expect(CREATE_FLOW_MD_CENTERED_MAIN_CLASS).toBe(
|
||
"items-start justify-center overflow-y-auto",
|
||
);
|
||
expect(CREATE_FLOW_MD_CENTERED_SHELL_CLASS).toBe("md:my-auto md:pt-0");
|
||
});
|
||
|
||
it("aligns the action bar max-width with the step content column", () => {
|
||
expect(
|
||
getCreateFlowContentMaxClass({ step: "community-name" }),
|
||
).toBe(CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS);
|
||
expect(
|
||
getCreateFlowContentMaxClass({ step: "community-structure" }),
|
||
).toBe(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS);
|
||
expect(
|
||
getCreateFlowContentMaxClass({ step: "communication-methods" }),
|
||
).toBe(CREATE_FLOW_WIDE_MAX_CLASS);
|
||
expect(
|
||
getCreateFlowContentMaxClass({ step: "final-review" }),
|
||
).toBe(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS);
|
||
expect(
|
||
getCreateFlowContentMaxClass({
|
||
step: "informational",
|
||
isTemplateReview: true,
|
||
}),
|
||
).toBe(CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS);
|
||
});
|
||
});
|