fix(e2e): resolve E2E test failures and SSR hydration mismatch

ryota-murakami · ryota-murakami · commit 50ebd110c55e · 2025-12-26T14:49:46.000+09:00
## E2E Test Fixes
- Set NEXT_PUBLIC_ENABLE_MSW_MOCK at build time in playwright.config.ts
  (NEXT_PUBLIC_* vars are inlined during build, not runtime)
- Add mock data to GitHub server actions for E2E test mode
- Extract shared isTestMode utility to tests/isTestMode.ts
- Fix organization filter selector in add-repository-combobox.spec.ts

## SSR Hydration Fix
- Add isMounted state to KanbanBoard for hydration-safe grid styles
- Prevent SSR/CSR mismatch for dynamic gridTemplateColumns/Rows

## Cleanup
- Remove unused test:e2e:ui script from package.json

All 29 E2E tests now passing.
diff --git a/components/Board/KanbanBoard.tsx b/components/Board/KanbanBoard.tsx
@@ -148,6 +148,12 @@ export const KanbanBoard = memo<KanbanBoardProps>(
     const [activeDragType, setActiveDragType] = useState<DragType>(null)
     // History stack for undo functionality (max 10 entries)
     const [history, setHistory] = useState<RepoCardForRedux[][]>([])
+
+    // Hydration-safe mounting state: prevents SSR/CSR mismatch for dynamic grid styles
+    const [isMounted, setIsMounted] = useState(false)
+    useEffect(() => {
+      setIsMounted(true)
+    }, [])
     const [columnHistory, setColumnHistory] = useState<StatusListDomain[][]>([])
     const [undoMessage, setUndoMessage] = useState<string | null>(null)
 
@@ -628,43 +634,55 @@ export const KanbanBoard = memo<KanbanBoardProps>(
           <SortableContext items={columnIds} strategy={rectSortingStrategy}>
             <div
               className="grid gap-4 pb-4"
-              style={{
-                // Add extra column when dragging to allow insertion at end
-                gridTemplateColumns: `repeat(${gridDimensions.maxCol + 1 + (activeDragType === 'column' ? 1 : 0)}, minmax(280px, 1fr))`,
-                // Add extra row for NewRowDropZone when dragging
-                gridTemplateRows: `repeat(${gridDimensions.maxRow + 1 + (activeDragType === 'column' ? 1 : 0)}, auto)`,
-              }}
+              suppressHydrationWarning
+              style={
+                isMounted
+                  ? {
+                      // Add extra column when dragging to allow insertion at end
+                      gridTemplateColumns: `repeat(${gridDimensions.maxCol + 1 + (activeDragType === 'column' ? 1 : 0)}, minmax(280px, 1fr))`,
+                      // Add extra row for NewRowDropZone when dragging
+                      gridTemplateRows: `repeat(${gridDimensions.maxRow + 1 + (activeDragType === 'column' ? 1 : 0)}, auto)`,
+                    }
+                  : {
+                      // Stable initial styles for SSR hydration
+                      gridTemplateColumns: 'repeat(1, minmax(280px, 1fr))',
+                      gridTemplateRows: 'repeat(1, auto)',
+                    }
+              }
             >
-              {sortedStatuses.map((status) => (
-                <SortableColumn
-                  key={status.id}
-                  status={status}
-                  cards={cards.filter((c) => c.statusId === status.id)}
-                  onEdit={onEditProjectInfo}
-                  onMaintenance={onMoveToMaintenance}
-                  onNote={onNote}
-                  onEditStatus={onEditStatus}
-                  onDeleteStatus={onDeleteStatus}
-                  onAddCard={onAddCard}
-                  gridStyle={{
-                    gridRow: status.gridRow + 1, // CSS grid is 1-indexed
-                    gridColumn: status.gridCol + 1,
-                  }}
-                />
-              ))}
+              {/* Render columns only after hydration to prevent SSR mismatch */}
+              {isMounted &&
+                sortedStatuses.map((status) => (
+                  <SortableColumn
+                    key={status.id}
+                    status={status}
+                    cards={cards.filter((c) => c.statusId === status.id)}
+                    onEdit={onEditProjectInfo}
+                    onMaintenance={onMoveToMaintenance}
+                    onNote={onNote}
+                    onEditStatus={onEditStatus}
+                    onDeleteStatus={onDeleteStatus}
+                    onAddCard={onAddCard}
+                    gridStyle={{
+                      gridRow: status.gridRow + 1, // CSS grid is 1-indexed
+                      gridColumn: status.gridCol + 1,
+                    }}
+                  />
+                ))}
 
               {/* Column Insert Zones - empty grid positions during column drag */}
-              {insertionZones.map((zone) => (
-                <ColumnInsertZone
-                  key={`insert-${zone.gridRow}-${zone.gridCol}`}
-                  gridRow={zone.gridRow}
-                  gridCol={zone.gridCol}
-                  activeColumnId={activeId?.toString()}
-                />
-              ))}
+              {isMounted &&
+                insertionZones.map((zone) => (
+                  <ColumnInsertZone
+                    key={`insert-${zone.gridRow}-${zone.gridCol}`}
+                    gridRow={zone.gridRow}
+                    gridCol={zone.gridCol}
+                    activeColumnId={activeId?.toString()}
+                  />
+                ))}
 
               {/* New Row Drop Zone - only visible during column drag */}
-              {activeDragType === 'column' && (
+              {isMounted && activeDragType === 'column' && (
                 <NewRowDropZone
                   targetRow={gridDimensions.maxRow + 1}
                   columnCount={gridDimensions.maxCol + 1 + 1} // +1 for expanded grid
@@ -677,7 +695,7 @@ export const KanbanBoard = memo<KanbanBoardProps>(
           <DragOverlay>
             {activeDragType === 'column' && activeId ? (
               // Column drag preview for 2D grid layout
-              <div className="w-[280px] max-w-full bg-background/80 backdrop-blur-sm rounded-xl p-4 border-2 border-primary shadow-2xl opacity-90 rotate-2">
+              <div className="w-70 max-w-full bg-background/80 backdrop-blur-sm rounded-xl p-4 border-2 border-primary shadow-2xl opacity-90 rotate-2">
                 <h3 className="font-semibold text-foreground">
                   {sortedStatuses.find((s) => s.id === activeId)?.title}
                 </h3>
diff --git a/lib/actions/github.ts b/lib/actions/github.ts
@@ -10,9 +10,100 @@
 import { cookies } from 'next/headers'
 
 import { getGitHubTokenCookieName } from '@/lib/constants/cookies'
+import { isTestMode } from '@/tests/isTestMode'
 
 const GITHUB_API_BASE_URL = 'https://api.github.com'
 
+/**
+ * Mock data for E2E testing
+ * Matches the mock data in mocks/handlers.ts
+ */
+const MOCK_GITHUB_USER = {
+  id: 12345,
+  login: 'testuser',
+  avatar_url: 'https://avatars.githubusercontent.com/u/12345?v=4',
+  name: 'Test User',
+  type: 'User' as const,
+}
+
+const MOCK_GITHUB_REPOS = [
+  {
+    id: 1,
+    node_id: 'R_kgDOGq0qMQ',
+    name: 'test-repo',
+    full_name: 'testuser/test-repo',
+    owner: {
+      login: 'testuser',
+      avatar_url: 'https://avatars.githubusercontent.com/u/12345?v=4',
+    },
+    description: 'A test repository for GitBox',
+    html_url: 'https://github.com/testuser/test-repo',
+    homepage: 'https://test-repo.dev',
+    stargazers_count: 42,
+    watchers_count: 42,
+    language: 'TypeScript',
+    topics: ['react', 'nextjs'],
+    visibility: 'public' as const,
+    updated_at: '2024-01-15T00:00:00.000Z',
+    created_at: '2023-01-01T00:00:00.000Z',
+  },
+  {
+    id: 2,
+    node_id: 'R_kgDOGq0qMg',
+    name: 'another-repo',
+    full_name: 'testuser/another-repo',
+    owner: {
+      login: 'testuser',
+      avatar_url: 'https://avatars.githubusercontent.com/u/12345?v=4',
+    },
+    description: 'Another test repository',
+    html_url: 'https://github.com/testuser/another-repo',
+    homepage: null,
+    stargazers_count: 128,
+    watchers_count: 128,
+    language: 'JavaScript',
+    topics: ['nodejs', 'api'],
+    visibility: 'public' as const,
+    updated_at: '2024-01-10T00:00:00.000Z',
+    created_at: '2023-06-01T00:00:00.000Z',
+  },
+  {
+    id: 3,
+    node_id: 'R_kgDOGq0qMz',
+    name: 'private-project',
+    full_name: 'testuser/private-project',
+    owner: {
+      login: 'testuser',
+      avatar_url: 'https://avatars.githubusercontent.com/u/12345?v=4',
+    },
+    description: 'A private project',
+    html_url: 'https://github.com/testuser/private-project',
+    homepage: null,
+    stargazers_count: 0,
+    watchers_count: 1,
+    language: 'Python',
+    topics: ['private', 'internal'],
+    visibility: 'private' as const,
+    updated_at: '2024-01-20T00:00:00.000Z',
+    created_at: '2024-01-01T00:00:00.000Z',
+  },
+]
+
+const MOCK_GITHUB_ORGS = [
+  {
+    id: 100,
+    login: 'laststance',
+    avatar_url: 'https://avatars.githubusercontent.com/u/100?v=4',
+    description: 'Laststance.io organization',
+  },
+  {
+    id: 101,
+    login: 'test-org',
+    avatar_url: 'https://avatars.githubusercontent.com/u/101?v=4',
+    description: 'Test organization for development',
+  },
+]
+
 export interface GitHubRepository {
   id: number
   node_id: string
@@ -51,6 +142,11 @@ export async function getAuthenticatedUserRepositories(params?: {
   per_page?: number
   page?: number
 }): Promise<{ data: GitHubRepository[] | null; error: string | null }> {
+  // E2E test mode: return mock data
+  if (isTestMode()) {
+    return { data: MOCK_GITHUB_REPOS, error: null }
+  }
+
   const token = await getGitHubToken()
 
   if (!token) {
@@ -119,6 +215,20 @@ export async function searchRepositories(params: {
   data: { total_count: number; items: GitHubRepository[] } | null
   error: string | null
 }> {
+  // E2E test mode: return filtered mock data
+  if (isTestMode()) {
+    const query = params.q.toLowerCase()
+    const filtered = MOCK_GITHUB_REPOS.filter(
+      (repo) =>
+        repo.name.toLowerCase().includes(query) ||
+        (repo.description?.toLowerCase().includes(query) ?? false),
+    )
+    return {
+      data: { total_count: filtered.length, items: filtered },
+      error: null,
+    }
+  }
+
   const token = await getGitHubToken()
 
   if (!token) {
@@ -185,6 +295,15 @@ export async function getRepository(
   owner: string,
   repo: string,
 ): Promise<{ data: GitHubRepository | null; error: string | null }> {
+  // E2E test mode: return mock data
+  if (isTestMode()) {
+    const fullName = `${owner}/${repo}`
+    const found = MOCK_GITHUB_REPOS.find((r) => r.full_name === fullName)
+    return found
+      ? { data: found, error: null }
+      : { data: null, error: 'Repository not found.' }
+  }
+
   const token = await getGitHubToken()
 
   if (!token) {
@@ -247,6 +366,11 @@ export async function checkGitHubTokenValidity(): Promise<{
   valid: boolean
   error: string | null
 }> {
+  // E2E test mode: always valid
+  if (isTestMode()) {
+    return { valid: true, error: null }
+  }
+
   const token = await getGitHubToken()
 
   if (!token) {
@@ -307,6 +431,11 @@ export async function getAuthenticatedUser(): Promise<{
   data: GitHubUser | null
   error: string | null
 }> {
+  // E2E test mode: return mock user
+  if (isTestMode()) {
+    return { data: MOCK_GITHUB_USER, error: null }
+  }
+
   const token = await getGitHubToken()
 
   if (!token) {
@@ -368,6 +497,11 @@ export async function getAuthenticatedUserOrganizations(): Promise<{
   data: GitHubOrganization[] | null
   error: string | null
 }> {
+  // E2E test mode: return mock organizations
+  if (isTestMode()) {
+    return { data: MOCK_GITHUB_ORGS, error: null }
+  }
+
   const token = await getGitHubToken()
 
   if (!token) {
diff --git a/package.json b/package.json
@@ -28,7 +28,6 @@
     "lint:fix": "eslint . --fix --concurrency=auto --max-warnings 0",
     "test": "vitest",
     "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui",
     "prepare": "husky",
     "prettier": "prettier --ignore-unknown --write .",
     "storybook": "storybook dev -p 6006",
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -73,7 +73,18 @@ export default defineConfig({
   ],
 
   webServer: {
-    command: 'pnpm build && pnpm start',
+    /**
+     * Build and start with test environment variables.
+     *
+     * CRITICAL: NEXT_PUBLIC_* vars must be set at BUILD time because Next.js
+     * inlines them during the build process. Setting them only at runtime
+     * (via env property below) is NOT sufficient.
+     *
+     * The env vars are explicitly set in the command to ensure they're
+     * available during both build and start phases.
+     */
+    command:
+      'NEXT_PUBLIC_ENABLE_MSW_MOCK=true APP_ENV=test pnpm build && pnpm start',
     url: 'http://localhost:3008',
     reuseExistingServer: !process.env.CI,
     timeout: 120000,
diff --git a/proxy.ts b/proxy.ts
@@ -11,19 +11,14 @@
 import { createServerClient, type CookieOptions } from '@supabase/ssr'
 import { NextResponse, type NextRequest } from 'next/server'
 
+import { isTestMode } from '@/tests/isTestMode'
+
 // Public paths that don't require authentication
 const publicPaths = ['/', '/login', '/auth/callback']
 
-/**
- * Check if E2E test mode is enabled
- * Bypass authentication in middleware for E2E tests
- */
-const isE2ETestMode = () =>
-  process.env.APP_ENV === 'test' || process.env.NODE_ENV === 'test'
-
 export async function proxy(request: NextRequest) {
   // In E2E test mode, bypass authentication and allow all requests
-  if (isE2ETestMode()) {
+  if (isTestMode()) {
     return NextResponse.next({
       request: {
         headers: request.headers,
diff --git a/tests/e2e/add-repository-combobox.spec.ts b/tests/e2e/add-repository-combobox.spec.ts
@@ -142,15 +142,25 @@ test.describe('AddRepositoryCombobox - GITBOX-1 Fix', () => {
     await expect(searchInput).toBeVisible({ timeout: 10000 })
 
     // Verify organization filter selector is present
-    const orgFilterTrigger = page.getByRole('combobox').first()
+    // Note: Using aria-label to target the specific organization filter combobox
+    const orgFilterTrigger = page.getByRole('combobox', {
+      name: /organization filter/i,
+    })
     await expect(orgFilterTrigger).toBeVisible()
 
-    // Click the organization filter
+    // Click the organization filter to open dropdown
     await orgFilterTrigger.click()
 
-    // Wait for dropdown options to appear
-    const allOption = page.getByRole('option', { name: /all organizations/i })
-    await expect(allOption).toBeVisible({ timeout: 5000 })
+    // Wait for dropdown to appear - Radix Select uses listbox role for the dropdown content
+    // The options are rendered in a portal, so we need to look for them in the page
+    await page.waitForTimeout(500) // Give time for dropdown animation
+
+    // Look for "All Organizations" option in the dropdown
+    // Radix Select items have role="option" when the dropdown is open
+    const allOption = page.locator('[role="option"]', {
+      hasText: /all organizations/i,
+    })
+    await expect(allOption.first()).toBeVisible({ timeout: 5000 })
   })
 
   /**
diff --git a/tests/isTestMode.ts b/tests/isTestMode.ts
@@ -0,0 +1,7 @@
+/**
+ * Check if E2E test mode is enabled
+ * When true, GitHub actions return mock data to bypass real API calls
+ */
+export const isTestMode = () =>
+  process.env.NEXT_PUBLIC_ENABLE_MSW_MOCK === 'true' &&
+  (process.env.APP_ENV === 'test' || process.env.NODE_ENV === 'test')
