From 4a47d2fbf7e36642bc7bebe38d59d070d1f779c9 Mon Sep 17 00:00:00 2001 From: Wada Yusuke Date: Fri, 29 May 2026 17:34:26 +0900 Subject: [PATCH 1/2] github link button add --- frontend/e2e/github-link.spec.ts | 40 +++++++++++++++++-- frontend/e2e/navigation.spec.ts | 4 +- .../src/components/AuthenticatedLayout.tsx | 27 ++++++++----- 3 files changed, 55 insertions(+), 16 deletions(-) diff --git a/frontend/e2e/github-link.spec.ts b/frontend/e2e/github-link.spec.ts index eeda1288..f9e14526 100644 --- a/frontend/e2e/github-link.spec.ts +++ b/frontend/e2e/github-link.spec.ts @@ -181,7 +181,39 @@ test.describe("GitHub 連携 - 検出フレームワーク表示", () => { ).toBeVisible(); }); - test("サイドバーの GitHub連携 クリックで連携が実行されポーリング表示になる", async ({ + test("サイドバーの GitHub連携 クリックは画面遷移のみで連携を実行しない", async ({ + page, + }) => { + let runCalled = false; + await page.route("**/api/github-link/cache", (route) => + route.fulfill({ + status: 200, + contentType: "application/json", + body: JSON.stringify({ result: null, status: null }), + }), + ); + await page.route("**/api/github-link/run", (route) => { + runCalled = true; + return route.fulfill({ + status: 202, + contentType: "application/json", + body: JSON.stringify({ status: "pending" }), + }); + }); + + // 別ページから GitHub連携 リンクで遷移する + await page.goto("/career"); + await waitForAuthenticatedLayout(page); + + await page.getByRole("link", { name: "GitHub連携", exact: true }).click(); + + // キャッシュ（空状態）が表示され、連携 API は呼ばれない + await expect(page).toHaveURL(/\/github_link/); + await expect(page.getByText(/まだ連携データがありません/)).toBeVisible(); + expect(runCalled).toBe(false); + }); + + test("サブパネルの「連携実行」ボタンで連携が実行されポーリング表示になる", async ({ page, }) => { await page.route("**/api/github-link/cache", (route) => @@ -209,9 +241,9 @@ test.describe("GitHub 連携 - 検出フレームワーク表示", () => { await page.goto("/github_link"); await waitForAuthenticatedLayout(page); - await page - .getByRole("button", { name: "GitHub連携", exact: true }) - .click(); + // ▼ でサブパネルを開き、「連携実行」ボタンを押すと連携が走る + await page.getByRole("button", { name: "GitHub連携オプション" }).click(); + await page.getByRole("button", { name: "連携実行" }).click(); await expect( page.getByText("GitHubプロフィールを取得中..."), diff --git a/frontend/e2e/navigation.spec.ts b/frontend/e2e/navigation.spec.ts index 26e9d5d8..9630091c 100644 --- a/frontend/e2e/navigation.spec.ts +++ b/frontend/e2e/navigation.spec.ts @@ -16,9 +16,9 @@ test.describe("認証済みユーザーのナビゲーション", () => { await expect(page.getByText("DevForge")).toBeVisible(); await expect(page.getByRole("link", { name: "職務経歴書" })).toBeVisible(); - // GitHub連携 は連携トリガーを兼ねるためボタン + // GitHub連携 は画面遷移に徹するためリンク（連携実行はサブパネルのボタン） await expect( - page.getByRole("button", { name: "GitHub連携", exact: true }), + page.getByRole("link", { name: "GitHub連携", exact: true }), ).toBeVisible(); await expect(page.getByRole("link", { name: "ブログ連携" })).toBeVisible(); }); diff --git a/frontend/src/components/AuthenticatedLayout.tsx b/frontend/src/components/AuthenticatedLayout.tsx index d6bd1781..e0a975c0 100644 --- a/frontend/src/components/AuthenticatedLayout.tsx +++ b/frontend/src/components/AuthenticatedLayout.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom"; +import { NavLink, Outlet, useNavigate } from "react-router-dom"; import type { AuthUser } from "../router/guards"; import type { Theme } from "../hooks/useTheme"; @@ -25,14 +25,15 @@ export function AuthenticatedLayout({ onLogout: () => void; }) { const navigate = useNavigate(); - const location = useLocation(); // GitHub 連携オプション（フォーク含む）の開閉とチェック状態。 const [githubOptionsOpen, setGithubOptionsOpen] = useState(false); const [includeForks, setIncludeForks] = useState(false); /** * GitHub 連携を実行する。 - * 連携 API のトリガーはこのサイドバークリックのみ。 + * 連携 API のトリガーはサブパネル内の「連携実行」ボタンのみ。 + * サイドバー項目のクリックは画面遷移に徹し、連携リクエストは飛ばさない + * （不要なリクエストの温床になるため）。 * 実行意図を runNonce としてページへ渡し、ダッシュボード側で * 連携実行（ポーリング）とエラー表示を担わせる。 */ @@ -42,8 +43,6 @@ export function AuthenticatedLayout({ }); }; - const githubActive = location.pathname === "/github_link"; - return (
@@ -61,13 +60,14 @@ export function AuthenticatedLayout({ {user.isGitHubUser && (
- +