📦 [Consolidated] PR #38~#48 の統合・競合解消およびレビュー指摘対応

package.json

@@ -28,16 +28,20 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/coverage-v8": "^4.0.18",
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
+    "jsdom": "^28.1.0",
     "server-only": "^0.0.1",
     "tailwindcss": "^4",
     "typescript": "^5",
     "vitest": "^4.0.18"
   }
-}
+}

src/app/api/card/[username]/route.test.ts

@@ -40,4 +40,16 @@ describe("GET /api/card/[username] cache headers", () => {
         expect(response.status).toBe(404);
         expect(response.headers.get("Cache-Control")).toBe("public, s-maxage=60, stale-while-revalidate=120");
     });
+
+    it("uses short cache header on error", async () => {
+        const { fetchCardData } = await import("@/lib/cardDataFetcher");
+        vi.mocked(fetchCardData).mockRejectedValueOnce(new Error("API Error"));
+
+        const { GET } = await import("./route");
+        const req = new Request("http://localhost/api/card/erroruser");
+        const response = await GET(req, { params: Promise.resolve({ username: "erroruser" }) });
+
+        expect(response.status).toBe(503);
+        expect(response.headers.get("Cache-Control")).toBe("public, s-maxage=60, stale-while-revalidate=120");
+    });
 });

src/app/api/dashboard/year/route.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { NextRequest } from "next/server";
+import { type Session } from "next-auth";
+
+import type { YearInReviewData } from "@/lib/types";
+
+const mockSession: Session = {
+    user: { name: "Alice", email: "alice@example.com", image: "", login: "alice" },
+    accessToken: "token",
+    expires: new Date(Date.now() + 2 * 86400 * 1000).toISOString(),
+};
+vi.mock("next-auth", () => ({
+    getServerSession: vi.fn(),
+}));
+
+vi.mock("@/lib/auth", () => ({
+    authOptions: {},
+}));
+
+vi.mock("@/lib/githubViewer", () => ({
+    fetchViewerLogin: vi.fn(),
+}));
+
+vi.mock("@/lib/githubYearInReview", () => ({
+    fetchYearInReviewData: vi.fn(),
+}));
+
+function createMockRequest(url: string): NextRequest {
+    return new NextRequest(url);
+}
+
+describe("GET /api/dashboard/year validation", () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+    });
+
+    it("returns 401 when not authorized", async () => {
+        const { getServerSession } = await import("next-auth");
+        vi.mocked(getServerSession).mockResolvedValueOnce(null);
+
+        const { GET } = await import("./route");
+        const req = createMockRequest("http://localhost/api/dashboard/year");
+        const response = await GET(req);
+
+        expect(response.status).toBe(401);
+    });
+
+    it("returns 400 when year is invalid (not a number)", async () => {
+        const { getServerSession } = await import("next-auth");
+        vi.mocked(getServerSession).mockResolvedValueOnce(mockSession);
+
+        const { GET } = await import("./route");
+        const req = createMockRequest("http://localhost/api/dashboard/year?year=abc");
+        const response = await GET(req);
+
+        expect(response.status).toBe(400);
+        const data = await response.json();
+        expect(data.error).toBe("Invalid year");
+    });
+
+    it("returns 400 when year is before 2008", async () => {
+        const { getServerSession } = await import("next-auth");
+        vi.mocked(getServerSession).mockResolvedValueOnce(mockSession);
+
+        const { GET } = await import("./route");
+        const req = createMockRequest("http://localhost/api/dashboard/year?year=2007");
+        const response = await GET(req);
+
+        expect(response.status).toBe(400);
+        const data = await response.json();
+        expect(data.error).toBe("Invalid year");
+    });
+
+    it("returns 400 when year is in the future", async () => {
+        const { getServerSession } = await import("next-auth");
+        vi.mocked(getServerSession).mockResolvedValueOnce(mockSession);
+
+        const { GET } = await import("./route");
+        const currentYear = new Date().getUTCFullYear();
+        const req = createMockRequest(`http://localhost/api/dashboard/year?year=${currentYear + 1}`);
+        const response = await GET(req);
+
+        expect(response.status).toBe(400);
+        const data = await response.json();
+        expect(data.error).toBe("Invalid year");
+    });
+
+    it("returns 200 and fetches data when year is valid", async () => {
+        const { getServerSession } = await import("next-auth");
+        vi.mocked(getServerSession).mockResolvedValueOnce(mockSession);
+
+        const { fetchYearInReviewData } = await import("@/lib/githubYearInReview");
+        vi.mocked(fetchYearInReviewData).mockResolvedValueOnce({ data: "ok" } as unknown as YearInReviewData);
+
+        const { GET } = await import("./route");
+        const currentYear = new Date().getUTCFullYear();
+        const req = createMockRequest(`http://localhost/api/dashboard/year?year=${currentYear}`);
+        const response = await GET(req);
+
+        expect(response.status).toBe(200);
+        const data = await response.json();
+        expect(data).toEqual({ data: "ok" });
+        expect(fetchYearInReviewData).toHaveBeenCalledWith("alice", currentYear, "token");
+    });
+
+    it("returns 200 and falls back to current year when year is not provided", async () => {
+        const { getServerSession } = await import("next-auth");
+        vi.mocked(getServerSession).mockResolvedValueOnce(mockSession);
+
+        const { fetchYearInReviewData } = await import("@/lib/githubYearInReview");
+        vi.mocked(fetchYearInReviewData).mockResolvedValueOnce({ data: "ok" } as unknown as YearInReviewData);
+
+        const { GET } = await import("./route");
+        const req = createMockRequest(`http://localhost/api/dashboard/year`);
+        const response = await GET(req);
+
+        expect(response.status).toBe(200);
+        const data = await response.json();
+        expect(data).toEqual({ data: "ok" });
+
+        const currentYear = new Date().getUTCFullYear();
+        expect(fetchYearInReviewData).toHaveBeenCalledWith("alice", currentYear, "token");
+    });
+});

src/components/ShareButtons.test.tsx

@@ -0,0 +1,155 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import ShareButtons from "./ShareButtons";
+
+describe("ShareButtons", () => {
+  let originalClipboard: Navigator["clipboard"] | undefined;
+  let originalExecCommand: (commandId: string, showUI?: boolean, value?: string) => boolean;
+  let originalLocation: Location;
+
+  beforeEach(() => {
+    originalClipboard = navigator.clipboard;
+    originalExecCommand = document.execCommand;
+    originalLocation = window.location;
+
+    Object.defineProperty(window, "location", {
+      value: { origin: "http://localhost", href: "http://localhost/johndoe" },
+      writable: true,
+    });
+
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+  });
+
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    Object.assign(navigator, { clipboard: originalClipboard });
+    document.execCommand = originalExecCommand;
+
+    Object.defineProperty(window, "location", {
+      value: originalLocation,
+      writable: true,
+    });
+  });
+
+  it("uses document.execCommand as fallback when navigator.clipboard.writeText fails", async () => {
+    // 1. Mock clipboard.writeText to reject
+    const writeTextMock = vi.fn().mockRejectedValue(new Error("Not allowed"));
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: writeTextMock,
+      },
+    });
+
+    // 2. Mock execCommand
+    const execCommandMock = vi.fn().mockReturnValue(true);
+    document.execCommand = execCommandMock;
+
+    // 3. Spy on document.createElement, document.body.appendChild, and document.body.removeChild
+    // to verify the full fallback flow
+    const createElementSpy = vi.spyOn(document, "createElement");
+    const appendChildSpy = vi.spyOn(document.body, "appendChild");
+    const removeChildSpy = vi.spyOn(document.body, "removeChild");
+
+    render(<ShareButtons username="johndoe" />);
+
+    const copyButton = screen.getByRole("button", { name: "Copy profile URL" });
+
+    fireEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(writeTextMock).toHaveBeenCalledWith("http://localhost/johndoe");
+    });
+
+    await waitFor(() => {
+      expect(createElementSpy).toHaveBeenCalledWith("textarea");
+
+      // Find the appendChild call that appends the textarea (since React might also call appendChild)
+      const textareaAppendCall = appendChildSpy.mock.calls.find(
+        (call) => (call[0] as HTMLElement).tagName === "TEXTAREA"
+      );
+
+      expect(textareaAppendCall).toBeDefined();
+      if (textareaAppendCall) {
+        const appendedNode = textareaAppendCall[0] as HTMLTextAreaElement;
+        expect(appendedNode.value).toBe("http://localhost/johndoe");
+
+        expect(execCommandMock).toHaveBeenCalledWith("copy");
+
+        // Verify removeChild was called with the same element
+        expect(removeChildSpy).toHaveBeenCalledWith(appendedNode);
+      }
+    });
+
+    // Clear out React's state updates
+    await act(async () => {
+      vi.advanceTimersByTime(2500);
+    });
+  });
+
+  it("uses navigator.clipboard.writeText when available and successful", async () => {
+    // Mock clipboard.writeText to succeed
+    const writeTextMock = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: writeTextMock,
+      },
+    });
+
+    const execCommandMock = vi.fn().mockReturnValue(true);
+    document.execCommand = execCommandMock;
+
+    render(<ShareButtons username="johndoe" />);
+
+    const copyButton = screen.getByRole("button", { name: "Copy profile URL" });
+
+    fireEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(writeTextMock).toHaveBeenCalledWith("http://localhost/johndoe");
+    });
+
+    // Fallback should not be triggered
+    expect(execCommandMock).not.toHaveBeenCalled();
+
+    // Clear out React's state updates
+    await act(async () => {
+      vi.advanceTimersByTime(2500);
+    });
+  });
+
+  it("shows 'Copied!' feedback after copying", async () => {
+    // Mock clipboard.writeText to succeed
+    const writeTextMock = vi.fn().mockResolvedValue(undefined);
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: writeTextMock,
+      },
+    });
+
+    render(<ShareButtons username="johndoe" />);
+
+    const copyButton = screen.getByRole("button", { name: "Copy profile URL" });
+
+    fireEvent.click(copyButton);
+
+    // Check if the button text changes
+    await waitFor(() => {
+      expect(screen.getByText("Copied!")).toBeDefined();
+    });
+
+    // Fast forward time
+    await act(async () => {
+      vi.advanceTimersByTime(2500);
+    });
+
+    // Check if the button text changes back
+    await waitFor(() => {
+      expect(screen.getByText("Copy URL")).toBeDefined();
+    });
+  });
+});

src/components/ThemeController.tsx

@@ -1,65 +1,13 @@
 "use client";
 
-import { useEffect } from "react";
-import { FastAverageColor } from "fast-average-color";
-import { adjustAccentColor } from "@/lib/color";
+import { useThemeColor } from "@/hooks/useThemeColor";
 
 type Props = {
   avatarUrl?: string;
   topLanguageColor?: string;
 };
 
 export default function ThemeController({ avatarUrl, topLanguageColor }: Props) {
-  useEffect(() => {
-    // 1. Apply top language color immediately as a fallback/initial state
-    if (topLanguageColor) {
-      applyColor(topLanguageColor);
-    }
-
-    const fac = new FastAverageColor();
-    let isMounted = true;
-
-    // 2. Extract color from avatar asynchronously
-    if (avatarUrl) {
-      const img = new Image();
-      img.crossOrigin = "Anonymous";
-      img.src = avatarUrl;
-
-      // Use getColorAsync to extract color
-      fac.getColorAsync(img, {
-        algorithm: 'dominant', // 'dominant' or 'simple' (average)
-      })
-      .then((color) => {
-        if (isMounted) {
-          // color.value is [r, g, b, a]
-          applyColor(color.value.slice(0, 3) as [number, number, number]);
-        }
-      })
-      .catch((e) => {
-        console.warn("Failed to extract color from avatar, keeping fallback color.", e);
-      });
-    }
-
-    // Cleanup: Reset to default theme colors on unmount
-    return () => {
-      isMounted = false;
-      fac.destroy();
-      resetColor();
-    };
-  }, [avatarUrl, topLanguageColor]);
-
+  useThemeColor({ avatarUrl, topLanguageColor });
   return null;
 }
-
-function applyColor(color: string | [number, number, number]) {
-  const result = adjustAccentColor(color);
-  document.documentElement.style.setProperty("--accent", result.accent);
-  document.documentElement.style.setProperty("--accent-rgb", result.accentRgb);
-  document.documentElement.style.setProperty("--accent-hover", result.accentHover);
-}
-
-function resetColor() {
-  document.documentElement.style.removeProperty("--accent");
-  document.documentElement.style.removeProperty("--accent-rgb");
-  document.documentElement.style.removeProperty("--accent-hover");
-}