Add component testing

.github/workflows/tests.yml

@@ -34,6 +34,7 @@ jobs:
 
       - name: Run test
         run: bun test
+
   test-build:
     runs-on: ubuntu-latest
     steps:

apps/docs/components/page/copy-button.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { CopyButton } from "./copy-button";
+
+// Mock Sentry
+vi.mock("@sentry/nextjs", () => ({
+	captureException: vi.fn(),
+}));
+
+// Mock the useToast hook
+vi.mock("~/hooks/use-toast", () => ({
+	useToast: () => ({
+		toast: vi.fn(),
+	}),
+}));
+
+describe("CopyButton", () => {
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	it("renders with initial state", () => {
+		render(<CopyButton command="npm install" />);
+		expect(screen.getByRole("button")).toBeInTheDocument();
+		expect(screen.getByLabelText("Copy command")).toBeInTheDocument();
+	});
+
+	it("shows copied state when clicked", async () => {
+		const user = userEvent.setup();
+		const mockWriteText = vi.fn();
+
+		// Mock the clipboard API
+		const clipboardSpy = vi.spyOn(navigator.clipboard, "writeText");
+		clipboardSpy.mockImplementation(mockWriteText);
+
+		render(<CopyButton command="npm install" />);
+		const button = screen.getByRole("button");
+
+		await user.click(button);
+
+		expect(mockWriteText).toHaveBeenCalledWith("npm install");
+		expect(screen.getByLabelText("Copy command")).toBeInTheDocument();
+	});
+
+	it("handles clipboard error", async () => {
+		const user = userEvent.setup();
+
+		// Mock the clipboard API with an error
+		const clipboardSpy = vi.spyOn(navigator.clipboard, "writeText");
+		clipboardSpy.mockRejectedValue(new Error("Clipboard error"));
+
+		render(<CopyButton command="npm install" />);
+		const button = screen.getByRole("button");
+
+		await user.click(button);
+
+		expect(clipboardSpy).toHaveBeenCalledWith("npm install");
+		expect(screen.getByLabelText("Copy command")).toBeInTheDocument();
+	});
+});

apps/docs/package.json

@@ -7,7 +7,11 @@
 		"dev": "next dev",
 		"start": "next start",
 		"postinstall": "fumadocs-mdx",
-		"clean": "rimraf node_modules"
+		"clean": "rimraf node_modules",
+		"test": "vitest",
+		"test:ui": "vitest --ui",
+		"test:once": "vitest run",
+		"coverage": "vitest run --coverage"
 	},
 	"dependencies": {
 		"@icons-pack/react-simple-icons": "^11.2.0",
@@ -38,6 +42,15 @@
 		"@types/mdx": "^2.0.13",
 		"@tailwindcss/postcss": "^4.0.3",
 		"tailwindcss": "^4.0.3",
-		"postcss": "^8.5.1"
+		"postcss": "^8.5.1",
+		"@testing-library/react": "^14.2.1",
+		"@testing-library/user-event": "^14.5.2",
+		"@vitejs/plugin-react": "^4.2.1",
+		"@vitest/coverage-v8": "^1.3.1",
+		"@vitest/ui": "^1.3.1",
+		"jsdom": "^24.0.0",
+		"vitest": "^1.3.1",
+		"@testing-library/jest-dom": "^6.4.2",
+		"@types/testing-library__jest-dom": "^5.14.9"
 	}
 }

apps/docs/test/setup.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vitest" />
+/// <reference types="@testing-library/jest-dom" />
+
+import type { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers";
+
+declare module "vitest" {
+	interface Assertion<T = unknown>
+		extends TestingLibraryMatchers<typeof expect.stringContaining, T> {}
+}

apps/docs/vitest.config.ts

@@ -0,0 +1,32 @@
+/// <reference types="vitest" />
+/// <reference types="./test/setup" />
+
+import { resolve } from "node:path";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+	plugins: [react()],
+	test: {
+		environment: "jsdom",
+		globals: true,
+		setupFiles: ["./vitest.setup.ts"],
+		coverage: {
+			provider: "v8",
+			reporter: ["text", "html"],
+			exclude: [
+				"node_modules/**",
+				".next/**",
+				"coverage/**",
+				"**/*.d.ts",
+				"**/*.config.*",
+				"**/index.ts",
+			],
+		},
+	},
+	resolve: {
+		alias: {
+			"~": resolve(__dirname, "./"),
+		},
+	},
+});

apps/docs/vitest.setup.ts

@@ -0,0 +1,11 @@
+import "@testing-library/jest-dom";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup } from "@testing-library/react";
+import { afterEach, expect } from "vitest";
+
+expect.extend(matchers);
+
+// runs a cleanup after each test case
+afterEach(() => {
+	cleanup();
+});

package.json

@@ -12,7 +12,10 @@
 		"fix": "biome check --write .",
 		"check": "biome check",
 		"check:errors": "biome check --diagnostic-level=error",
-		"clean": "rimraf dist node_modules"
+		"clean": "rimraf dist node_modules",
+		"test": "turbo run test",
+		"test:once": "turbo run test:once",
+		"coverage": "turbo run test:coverage"
 	},
 	"devDependencies": {
 		"turbo": "^2.4.0",

turbo.json

@@ -11,6 +11,12 @@
 			"cache": false,
 			"persistent": true
 		},
+		"test:once": {},
+		"test": {
+			"cache": false,
+			"persistent": true
+		},
+		"coverage": {},
 		"clean": {
 			"cache": false
 		},