Create tests and stories for createflownav
This commit is contained in:
adilallo
+27
-125
@@ -17,17 +17,10 @@ export default {
|
||||
control: { type: "select" },
|
||||
options: [
|
||||
"default",
|
||||
"homeHeaderXsmall",
|
||||
"homeHeaderSm",
|
||||
"homeHeaderMd",
|
||||
"homeHeaderLg",
|
||||
"homeHeaderXl",
|
||||
"header",
|
||||
"headerMd",
|
||||
"headerLg",
|
||||
"headerXl",
|
||||
"footer",
|
||||
"footerLg",
|
||||
"createFlow",
|
||||
"topNavFolderTop",
|
||||
"topNavHeader",
|
||||
],
|
||||
description: "The size variant of the logo",
|
||||
},
|
||||
@@ -53,40 +46,19 @@ export const Sizes = {
|
||||
render: (args) => (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Default Sizes</h3>
|
||||
<h3 className="text-white font-semibold mb-3">Standard Sizes</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="default" />
|
||||
<Logo {...args} size="header" />
|
||||
<Logo {...args} size="footer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Header Sizes</h3>
|
||||
<h3 className="text-white font-semibold mb-3">Responsive Sizes</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="header" />
|
||||
<Logo {...args} size="headerMd" />
|
||||
<Logo {...args} size="headerLg" />
|
||||
<Logo {...args} size="headerXl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Home Header Sizes</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="homeHeaderXsmall" />
|
||||
<Logo {...args} size="homeHeaderSm" />
|
||||
<Logo {...args} size="homeHeaderMd" />
|
||||
<Logo {...args} size="homeHeaderLg" />
|
||||
<Logo {...args} size="homeHeaderXl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Footer Sizes</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="footer" />
|
||||
<Logo {...args} size="footerLg" />
|
||||
<Logo {...args} size="createFlow" />
|
||||
<Logo {...args} size="topNavFolderTop" />
|
||||
<Logo {...args} size="topNavHeader" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -95,7 +67,7 @@ export const Sizes = {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Different size variants available for the logo component across different contexts.",
|
||||
"Different size variants available for the logo component. Responsive sizes adapt to breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -110,37 +82,22 @@ export const IconOnly = {
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">
|
||||
Icon Only - Default Sizes
|
||||
Icon Only - Standard Sizes
|
||||
</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="default" />
|
||||
<Logo {...args} size="header" />
|
||||
<Logo {...args} size="footer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">
|
||||
Icon Only - Header Sizes
|
||||
Icon Only - Responsive Sizes
|
||||
</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="header" />
|
||||
<Logo {...args} size="headerMd" />
|
||||
<Logo {...args} size="headerLg" />
|
||||
<Logo {...args} size="headerXl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">
|
||||
Icon Only - Home Header Sizes
|
||||
</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="homeHeaderXsmall" />
|
||||
<Logo {...args} size="homeHeaderSm" />
|
||||
<Logo {...args} size="homeHeaderMd" />
|
||||
<Logo {...args} size="homeHeaderLg" />
|
||||
<Logo {...args} size="homeHeaderXl" />
|
||||
<Logo {...args} size="createFlow" />
|
||||
<Logo {...args} size="topNavFolderTop" />
|
||||
<Logo {...args} size="topNavHeader" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -155,34 +112,22 @@ export const IconOnly = {
|
||||
},
|
||||
};
|
||||
|
||||
export const HomeHeaderContext = {
|
||||
export const TopNavContext = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)] p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">
|
||||
Home Header Context (White Text)
|
||||
TopNav Context (Responsive)
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">XSmall:</span>
|
||||
<Logo size="homeHeaderXsmall" />
|
||||
<span className="text-white text-sm w-32">FolderTop:</span>
|
||||
<Logo size="topNavFolderTop" showText={true} />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Small:</span>
|
||||
<Logo size="homeHeaderSm" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Medium:</span>
|
||||
<Logo size="homeHeaderMd" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Large:</span>
|
||||
<Logo size="homeHeaderLg" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">XLarge:</span>
|
||||
<Logo size="homeHeaderXl" />
|
||||
<span className="text-white text-sm w-32">Header:</span>
|
||||
<Logo size="topNavHeader" showText={true} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -192,36 +137,24 @@ export const HomeHeaderContext = {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Home header context showing white text variants. These are used on dark/transparent backgrounds.",
|
||||
"TopNav context showing responsive logo sizes. Text hides on smallest breakpoint, shows on larger breakpoints.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const HeaderContext = {
|
||||
export const CreateFlowContext = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
|
||||
<div className="min-h-screen bg-black p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">
|
||||
Header Context (Dark Text)
|
||||
Create Flow Context
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Default:</span>
|
||||
<Logo size="header" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Medium:</span>
|
||||
<Logo size="headerMd" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Large:</span>
|
||||
<Logo size="headerLg" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">XLarge:</span>
|
||||
<Logo size="headerXl" />
|
||||
<span className="text-white text-sm w-32">CreateFlow:</span>
|
||||
<Logo size="createFlow" showText={true} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -231,38 +164,7 @@ export const HeaderContext = {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Header context showing dark text variants. These are used on light backgrounds.",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const FooterContext = {
|
||||
args: {},
|
||||
render: () => (
|
||||
<div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">
|
||||
Footer Context (Larger Sizes)
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Default:</span>
|
||||
<Logo size="footer" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Large:</span>
|
||||
<Logo size="footerLg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story:
|
||||
"Footer context showing larger size variants for footer placement.",
|
||||
"Create flow context showing responsive logo. Used in CreateFlowTopNav component.",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
import CreateFlowFooter from "../../app/components/utility/CreateFlowFooter";
|
||||
import Button from "../../app/components/buttons/Button";
|
||||
|
||||
export default {
|
||||
title: "Components/Utility/CreateFlowFooter",
|
||||
component: CreateFlowFooter,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Footer component for the create rule flow with progress bar and buttons.",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
progressBar: {
|
||||
control: "boolean",
|
||||
description: "Whether to show the progress bar",
|
||||
},
|
||||
secondButton: {
|
||||
control: false,
|
||||
description: "The second button (typically Next) to display on the right side",
|
||||
},
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
progressBar: true,
|
||||
secondButton: (
|
||||
<Button buttonType="filled" palette="default" size="xsmall">
|
||||
Next
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const WithoutProgressBar = {
|
||||
args: {
|
||||
progressBar: false,
|
||||
secondButton: (
|
||||
<Button buttonType="filled" palette="default" size="xsmall">
|
||||
Next
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const WithoutSecondButton = {
|
||||
args: {
|
||||
progressBar: true,
|
||||
secondButton: undefined,
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,65 @@
|
||||
import CreateFlowTopNav from "../../app/components/utility/CreateFlowTopNav";
|
||||
|
||||
export default {
|
||||
title: "Components/Utility/CreateFlowTopNav",
|
||||
component: CreateFlowTopNav,
|
||||
parameters: {
|
||||
layout: "fullscreen",
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
"Top navigation bar for the create rule flow. Includes logo and action buttons (Share, Export, Edit, Exit/Save & Exit).",
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
hasShare: {
|
||||
control: "boolean",
|
||||
description: "Whether to show the Share button",
|
||||
},
|
||||
hasExport: {
|
||||
control: "boolean",
|
||||
description: "Whether to show the Export button",
|
||||
},
|
||||
hasEdit: {
|
||||
control: "boolean",
|
||||
description: "Whether to show the Edit button",
|
||||
},
|
||||
loggedIn: {
|
||||
control: "boolean",
|
||||
description: "Whether the user is logged in (affects Exit button text)",
|
||||
},
|
||||
onShare: { action: "share clicked" },
|
||||
onExport: { action: "export clicked" },
|
||||
onEdit: { action: "edit clicked" },
|
||||
onExit: { action: "exit clicked" },
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
args: {
|
||||
hasShare: false,
|
||||
hasExport: false,
|
||||
hasEdit: false,
|
||||
loggedIn: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const AllButtons = {
|
||||
args: {
|
||||
hasShare: true,
|
||||
hasExport: true,
|
||||
hasEdit: true,
|
||||
loggedIn: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const LoggedIn = {
|
||||
args: {
|
||||
hasShare: true,
|
||||
hasExport: true,
|
||||
hasEdit: true,
|
||||
loggedIn: true,
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,70 @@
|
||||
import React from "react";
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import "@testing-library/jest-dom/vitest";
|
||||
import CreateFlowFooter from "../../app/components/utility/CreateFlowFooter";
|
||||
import Button from "../../app/components/buttons/Button";
|
||||
import {
|
||||
componentTestSuite,
|
||||
ComponentTestSuiteConfig,
|
||||
} from "../utils/componentTestSuite";
|
||||
|
||||
type CreateFlowFooterProps = React.ComponentProps<typeof CreateFlowFooter>;
|
||||
|
||||
const baseProps: CreateFlowFooterProps = {};
|
||||
|
||||
const config: ComponentTestSuiteConfig<CreateFlowFooterProps> = {
|
||||
component: CreateFlowFooter,
|
||||
name: "CreateFlowFooter",
|
||||
props: baseProps,
|
||||
requiredProps: [],
|
||||
optionalProps: {
|
||||
secondButton: <Button>Next</Button>,
|
||||
progressBar: true,
|
||||
className: "test-class",
|
||||
},
|
||||
primaryRole: "contentinfo",
|
||||
testCases: {
|
||||
renders: true,
|
||||
accessibility: true,
|
||||
keyboardNavigation: false,
|
||||
disabledState: false,
|
||||
errorState: false,
|
||||
},
|
||||
};
|
||||
|
||||
componentTestSuite<CreateFlowFooterProps>(config);
|
||||
|
||||
describe("CreateFlowFooter (behavioral tests)", () => {
|
||||
it("renders Back button", () => {
|
||||
render(<CreateFlowFooter />);
|
||||
const backButton = screen.getByRole("button", { name: "Back" });
|
||||
expect(backButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders progress bar when progressBar is true", () => {
|
||||
render(<CreateFlowFooter progressBar={true} />);
|
||||
const footer = screen.getByRole("contentinfo", { name: "Create Flow Footer" });
|
||||
expect(footer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not render progress bar when progressBar is false", () => {
|
||||
const { container } = render(<CreateFlowFooter progressBar={false} />);
|
||||
const progressBar = container.querySelector('[role="progressbar"]');
|
||||
expect(progressBar).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders secondButton when provided", () => {
|
||||
const secondButton = <Button>Next</Button>;
|
||||
render(<CreateFlowFooter secondButton={secondButton} />);
|
||||
const nextButton = screen.getByRole("button", { name: "Next" });
|
||||
expect(nextButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not render secondButton when not provided", () => {
|
||||
render(<CreateFlowFooter />);
|
||||
const buttons = screen.getAllByRole("button");
|
||||
expect(buttons).toHaveLength(1);
|
||||
expect(buttons[0]).toHaveTextContent("Back");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,119 @@
|
||||
import React from "react";
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import "@testing-library/jest-dom/vitest";
|
||||
import CreateFlowTopNav from "../../app/components/utility/CreateFlowTopNav";
|
||||
import {
|
||||
componentTestSuite,
|
||||
ComponentTestSuiteConfig,
|
||||
} from "../utils/componentTestSuite";
|
||||
|
||||
// Mock next/navigation
|
||||
vi.mock("next/navigation", () => ({
|
||||
useRouter: () => ({
|
||||
push: vi.fn(),
|
||||
replace: vi.fn(),
|
||||
prefetch: vi.fn(),
|
||||
back: vi.fn(),
|
||||
forward: vi.fn(),
|
||||
refresh: vi.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
type CreateFlowTopNavProps = React.ComponentProps<typeof CreateFlowTopNav>;
|
||||
|
||||
const baseProps: CreateFlowTopNavProps = {};
|
||||
|
||||
const config: ComponentTestSuiteConfig<CreateFlowTopNavProps> = {
|
||||
component: CreateFlowTopNav,
|
||||
name: "CreateFlowTopNav",
|
||||
props: baseProps,
|
||||
requiredProps: [],
|
||||
optionalProps: {
|
||||
hasShare: true,
|
||||
hasExport: true,
|
||||
hasEdit: true,
|
||||
loggedIn: true,
|
||||
onShare: vi.fn(),
|
||||
onExport: vi.fn(),
|
||||
onEdit: vi.fn(),
|
||||
onExit: vi.fn(),
|
||||
className: "test-class",
|
||||
},
|
||||
primaryRole: "banner",
|
||||
testCases: {
|
||||
renders: true,
|
||||
accessibility: true,
|
||||
keyboardNavigation: false,
|
||||
disabledState: false,
|
||||
errorState: false,
|
||||
},
|
||||
};
|
||||
|
||||
componentTestSuite<CreateFlowTopNavProps>(config);
|
||||
|
||||
describe("CreateFlowTopNav (behavioral tests)", () => {
|
||||
it("renders Exit button by default", () => {
|
||||
render(<CreateFlowTopNav />);
|
||||
const exitButton = screen.getByRole("button", { name: "Exit" });
|
||||
expect(exitButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows Save & Exit when loggedIn is true", () => {
|
||||
render(<CreateFlowTopNav loggedIn={true} />);
|
||||
const exitButton = screen.getByRole("button", { name: "Save & Exit" });
|
||||
expect(exitButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows Exit when loggedIn is false", () => {
|
||||
render(<CreateFlowTopNav loggedIn={false} />);
|
||||
const exitButton = screen.getByRole("button", { name: "Exit" });
|
||||
expect(exitButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders Share button when hasShare is true", () => {
|
||||
render(<CreateFlowTopNav hasShare={true} />);
|
||||
const shareButton = screen.getByRole("button", { name: "Share" });
|
||||
expect(shareButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not render Share button when hasShare is false", () => {
|
||||
render(<CreateFlowTopNav hasShare={false} />);
|
||||
expect(screen.queryByRole("button", { name: "Share" })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders Export button when hasExport is true", () => {
|
||||
render(<CreateFlowTopNav hasExport={true} />);
|
||||
const exportButton = screen.getByRole("button", { name: "Export" });
|
||||
expect(exportButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders Edit button when hasEdit is true", () => {
|
||||
render(<CreateFlowTopNav hasEdit={true} />);
|
||||
const editButton = screen.getByRole("button", { name: "Edit" });
|
||||
expect(editButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("calls onExit when Exit button is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const handleExit = vi.fn();
|
||||
render(<CreateFlowTopNav onExit={handleExit} />);
|
||||
|
||||
const exitButton = screen.getByRole("button", { name: "Exit" });
|
||||
await user.click(exitButton);
|
||||
|
||||
expect(handleExit).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("calls onShare when Share button is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
const handleShare = vi.fn();
|
||||
render(<CreateFlowTopNav hasShare={true} onShare={handleShare} />);
|
||||
|
||||
const shareButton = screen.getByRole("button", { name: "Share" });
|
||||
await user.click(shareButton);
|
||||
|
||||
expect(handleShare).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@@ -46,19 +46,26 @@ describe("Logo (behavioral tests)", () => {
|
||||
});
|
||||
|
||||
it("hides text when showText is false", () => {
|
||||
render(<Logo showText={false} />);
|
||||
expect(screen.queryByText("CommunityRule")).not.toBeInTheDocument();
|
||||
const { container } = render(<Logo showText={false} />);
|
||||
const textElement = container.querySelector('.hidden');
|
||||
expect(textElement).toBeInTheDocument();
|
||||
expect(screen.getByAltText("CommunityRule Logo Icon")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders with different size variants", () => {
|
||||
const { rerender } = render(<Logo size="header" />);
|
||||
const { rerender } = render(<Logo size="default" />);
|
||||
expect(screen.getByRole("link")).toBeInTheDocument();
|
||||
|
||||
rerender(<Logo size="footer" />);
|
||||
expect(screen.getByRole("link")).toBeInTheDocument();
|
||||
|
||||
rerender(<Logo size="homeHeaderMd" />);
|
||||
rerender(<Logo size="createFlow" />);
|
||||
expect(screen.getByRole("link")).toBeInTheDocument();
|
||||
|
||||
rerender(<Logo size="topNavFolderTop" />);
|
||||
expect(screen.getByRole("link")).toBeInTheDocument();
|
||||
|
||||
rerender(<Logo size="topNavHeader" />);
|
||||
expect(screen.getByRole("link")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user