Simplify and standardize testing structure

tests/components/Button.test.tsx

@@ -0,0 +1,66 @@
+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 Button from "../../app/components/Button";
+import {
+  componentTestSuite,
+  ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+const baseProps: ButtonProps = {
+  children: "Click me",
+};
+
+const config: ComponentTestSuiteConfig<ButtonProps> = {
+  component: Button,
+  name: "Button",
+  props: baseProps,
+  requiredProps: ["children"],
+  optionalProps: {
+    href: "/test",
+    ariaLabel: "Accessible button",
+  },
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: true,
+    disabledState: true,
+    errorState: false,
+  },
+  states: {
+    disabledProps: { disabled: true },
+  },
+};
+
+componentTestSuite<ButtonProps>(config);
+
+describe("Button (behavioral tests)", () => {
+  it("calls onClick when clicked", async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+
+    render(<Button onClick={handleClick}>Click me</Button>);
+
+    const button = screen.getByRole("button", { name: "Click me" });
+    await user.click(button);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders as a link when href is provided", () => {
+    render(
+      <Button href="/learn" variant="default">
+        Learn more
+      </Button>,
+    );
+
+    const link = screen.getByRole("link", { name: "Learn more" });
+    expect(link).toHaveAttribute("href", "/learn");
+  });
+});
+