test(web): add tests for OAuthCallback and ProtectedRoute

Author: mariuspruvot

apps/web/src/features/auth/OAuthCallback.test.tsx

@@ -0,0 +1,107 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+
+// Mock react-router before any imports that use it
+const mockNavigate = vi.fn()
+let mockSearchParams = new URLSearchParams()
+vi.mock('react-router', () => ({
+  useNavigate: () => mockNavigate,
+  useSearchParams: () => [mockSearchParams],
+}))
+
+// Mock apiFetch
+const mockApiFetch = vi.fn()
+vi.mock('../../shared/api/client', () => ({
+  apiFetch: (...args: unknown[]) => mockApiFetch(...args),
+}))
+
+// Import after mocks
+import OAuthCallback from './OAuthCallback'
+import { useAuthStore } from './store'
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  useAuthStore.setState({
+    accessToken: null,
+    user: null,
+    isAuthenticated: false,
+    returnUrl: null,
+  })
+  sessionStorage.clear()
+})
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('OAuthCallback', () => {
+  test('redirects to / when no access_token in params', () => {
+    mockSearchParams = new URLSearchParams()
+    render(<OAuthCallback />)
+
+    expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true })
+  })
+
+  test('shows authenticating message', () => {
+    mockSearchParams = new URLSearchParams('access_token=test-token')
+    mockApiFetch.mockResolvedValue({ ok: true, json: () => Promise.resolve({ id: '1', github_login: 'testuser' }) })
+    render(<OAuthCallback />)
+
+    expect(screen.getByText('Authenticating...')).toBeTruthy()
+  })
+
+  test('calls login and fetches user on valid token', async () => {
+    mockSearchParams = new URLSearchParams('access_token=test-token')
+    const fakeUser = { id: '1', github_id: 123, github_login: 'testuser', email: null, avatar_url: null, created_at: '2026-01-01' }
+    mockApiFetch.mockResolvedValue({ ok: true, json: () => Promise.resolve(fakeUser) })
+
+    render(<OAuthCallback />)
+
+    // Wait for async effects
+    await vi.waitFor(() => {
+      expect(mockApiFetch).toHaveBeenCalledWith('/api/v1/auth/me')
+    })
+
+    await vi.waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true })
+    })
+
+    expect(useAuthStore.getState().isAuthenticated).toBe(true)
+    expect(useAuthStore.getState().accessToken).toBe('test-token')
+  })
+
+  test('navigates to returnUrl from sessionStorage after login', async () => {
+    sessionStorage.setItem('helprs.returnUrl', '/installations/123/settings')
+    mockSearchParams = new URLSearchParams('access_token=test-token')
+    const fakeUser = { id: '1', github_id: 123, github_login: 'testuser', email: null, avatar_url: null, created_at: '2026-01-01' }
+    mockApiFetch.mockResolvedValue({ ok: true, json: () => Promise.resolve(fakeUser) })
+
+    render(<OAuthCallback />)
+
+    await vi.waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/installations/123/settings', { replace: true })
+    })
+  })
+
+  test('redirects to / on fetch failure', async () => {
+    mockSearchParams = new URLSearchParams('access_token=bad-token')
+    mockApiFetch.mockResolvedValue({ ok: false })
+
+    render(<OAuthCallback />)
+
+    await vi.waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true })
+    })
+  })
+
+  test('redirects to / on network error', async () => {
+    mockSearchParams = new URLSearchParams('access_token=test-token')
+    mockApiFetch.mockRejectedValue(new Error('Network error'))
+
+    render(<OAuthCallback />)
+
+    await vi.waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true })
+    })
+  })
+})

apps/web/src/features/auth/ProtectedRoute.test.tsx

@@ -0,0 +1,89 @@
+import { cleanup, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import { useAuthStore } from './store'
+
+// Capture window.location.href assignments
+const locationHrefSpy = vi.fn()
+const originalLocation = window.location
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  sessionStorage.clear()
+  // Mock window.location
+  Object.defineProperty(window, 'location', {
+    value: { ...originalLocation, pathname: '/installations/42/settings', search: '', href: '' },
+    writable: true,
+    configurable: true,
+  })
+  Object.defineProperty(window.location, 'href', {
+    set: locationHrefSpy,
+    get: () => '',
+    configurable: true,
+  })
+})
+
+afterEach(() => {
+  cleanup()
+  Object.defineProperty(window, 'location', { value: originalLocation, writable: true, configurable: true })
+})
+
+// Import after setup
+import ProtectedRoute, { RETURN_URL_STORAGE_KEY } from './ProtectedRoute'
+
+describe('ProtectedRoute', () => {
+  test('renders children when authenticated', () => {
+    useAuthStore.setState({ isAuthenticated: true, accessToken: 'token' })
+
+    render(
+      <ProtectedRoute>
+        <div data-testid="protected-content">Secret content</div>
+      </ProtectedRoute>
+    )
+
+    expect(screen.getByTestId('protected-content')).toBeTruthy()
+    expect(screen.getByText('Secret content')).toBeTruthy()
+  })
+
+  test('shows redirect message when not authenticated', () => {
+    useAuthStore.setState({ isAuthenticated: false, accessToken: null })
+
+    render(
+      <ProtectedRoute>
+        <div>Secret content</div>
+      </ProtectedRoute>
+    )
+
+    expect(screen.getByText('Redirecting to login...')).toBeTruthy()
+    expect(screen.queryByText('Secret content')).toBeNull()
+  })
+
+  test('redirects to GitHub OAuth when not authenticated', () => {
+    useAuthStore.setState({ isAuthenticated: false, accessToken: null })
+
+    render(
+      <ProtectedRoute>
+        <div>Secret content</div>
+      </ProtectedRoute>
+    )
+
+    expect(locationHrefSpy).toHaveBeenCalledWith(
+      expect.stringContaining('/api/v1/auth/github')
+    )
+  })
+
+  test('persists returnUrl to sessionStorage when not authenticated', () => {
+    useAuthStore.setState({ isAuthenticated: false, accessToken: null })
+
+    render(
+      <ProtectedRoute>
+        <div>Secret content</div>
+      </ProtectedRoute>
+    )
+
+    expect(sessionStorage.getItem(RETURN_URL_STORAGE_KEY)).toBe('/installations/42/settings')
+  })
+
+  test('exports RETURN_URL_STORAGE_KEY constant', () => {
+    expect(RETURN_URL_STORAGE_KEY).toBe('helprs.returnUrl')
+  })
+})