vitest setup + component tests

frontend/src/components/ui/badge.test.tsx

@@ -0,0 +1,34 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Badge } from "./badge";
+
+describe("Badge", () => {
+  it("renders children content", () => {
+    render(<Badge>Easy</Badge>);
+    expect(screen.getByText("Easy")).toBeInTheDocument();
+  });
+
+  it("applies default variant styles", () => {
+    render(<Badge>Test</Badge>);
+    const badge = screen.getByText("Test");
+    expect(badge).toHaveClass("rounded-full", "text-xs", "font-medium");
+  });
+
+  it("applies outline variant styles", () => {
+    render(<Badge variant="outline">Test</Badge>);
+    const badge = screen.getByText("Test");
+    expect(badge).toHaveClass("border");
+  });
+
+  it("applies custom className", () => {
+    render(<Badge className="custom-class">Test</Badge>);
+    const badge = screen.getByText("Test");
+    expect(badge).toHaveClass("custom-class");
+  });
+
+  it("supports aria-label for accessibility", () => {
+    render(<Badge aria-label="Easy difficulty">Easy</Badge>);
+    const badge = screen.getByText("Easy");
+    expect(badge).toHaveAttribute("aria-label", "Easy difficulty");
+  });
+});