Create tests and stories for createflownav

2026-02-07 23:35:22 -07:00
parent 37555b2725
commit 8d9b9d6ff3
6 changed files with 348 additions and 129 deletions
@@ -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");
+  });
+});