adilallo
90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
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);
|
|
|
|
// Pure presentational; no provider context needed (no useMessages/useAuthModal/useCreateFlow consumers).
|
|
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();
|
|
const bar = screen.getByRole("progressbar");
|
|
expect(bar).toHaveAttribute("aria-valuenow", String(1 / 6));
|
|
});
|
|
|
|
it("passes proportionBarProgress to the progress bar", () => {
|
|
render(
|
|
<CreateFlowFooter
|
|
progressBar={true}
|
|
proportionBarProgress="1-1"
|
|
proportionBarVariant="segmented"
|
|
/>,
|
|
);
|
|
expect(screen.getByRole("progressbar")).toHaveAttribute(
|
|
"aria-valuenow",
|
|
String(2 / 6),
|
|
);
|
|
});
|
|
|
|
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");
|
|
});
|
|
});
|