adilallo
81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import { render, screen } from "@testing-library/react";
|
|
import { describe, it, expect } from "vitest";
|
|
import FeatureGrid from "../../app/components/FeatureGrid";
|
|
import {
|
|
componentTestSuite,
|
|
ComponentTestSuiteConfig,
|
|
} from "../utils/componentTestSuite";
|
|
|
|
type FeatureGridProps = React.ComponentProps<typeof FeatureGrid>;
|
|
|
|
const baseProps: FeatureGridProps = {
|
|
title: "Feature Tools",
|
|
subtitle: "Everything you need",
|
|
};
|
|
|
|
const config: ComponentTestSuiteConfig<FeatureGridProps> = {
|
|
component: FeatureGrid,
|
|
name: "FeatureGrid",
|
|
props: baseProps,
|
|
optionalProps: {
|
|
className: "custom-class",
|
|
title: undefined,
|
|
subtitle: undefined,
|
|
},
|
|
primaryRole: "region",
|
|
testCases: {
|
|
renders: true,
|
|
accessibility: true,
|
|
keyboardNavigation: false,
|
|
disabledState: false,
|
|
errorState: false,
|
|
},
|
|
};
|
|
|
|
componentTestSuite<FeatureGridProps>(config);
|
|
|
|
describe("FeatureGrid (behavioral tests)", () => {
|
|
it("renders title and subtitle", () => {
|
|
render(<FeatureGrid title="Test Title" subtitle="Test Subtitle" />);
|
|
expect(
|
|
screen.getByRole("heading", { name: "Test Title" }),
|
|
).toBeInTheDocument();
|
|
expect(
|
|
screen.getByRole("heading", { name: "Test Subtitle" }),
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
it("renders all four feature cards", () => {
|
|
render(<FeatureGrid title="Test" subtitle="Test" />);
|
|
expect(
|
|
screen.getByRole("link", { name: "Decision-making support tools" }),
|
|
).toBeInTheDocument();
|
|
expect(
|
|
screen.getByRole("link", { name: "Values alignment exercises" }),
|
|
).toBeInTheDocument();
|
|
expect(
|
|
screen.getByRole("link", { name: "Membership guidance resources" }),
|
|
).toBeInTheDocument();
|
|
expect(
|
|
screen.getByRole("link", { name: "Conflict resolution tools" }),
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
it("has proper accessibility attributes", () => {
|
|
render(<FeatureGrid title="Test" subtitle="Test" />);
|
|
const section = document.querySelector("section");
|
|
expect(section).toHaveAttribute("aria-labelledby", "feature-grid-headline");
|
|
expect(screen.getByRole("grid")).toHaveAttribute(
|
|
"aria-label",
|
|
"Feature tools and services",
|
|
);
|
|
});
|
|
|
|
it("handles missing props gracefully", () => {
|
|
render(<FeatureGrid />);
|
|
const section = document.querySelector("section");
|
|
expect(section).toBeInTheDocument();
|
|
});
|
|
});
|