refactor(frontend): add component tests, fix login type contract, improve test teardown

- Add render-based tests for AuthFormShell, ErrorBoundary, and Navigation (14 new passing tests)
- Fix login() signature from (AuthSessionResponse) to (token: string) — was accepting full session but only consuming response.id
- Add clearAllAuthListeners() to auth test afterEach blocks to prevent listener leaks on mid-test failure
- Update useAuthSubmit to pass result.id to login() instead of full session object
- Update useAuthSubmit.test.ts to assert login receives the token string

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: agusmdev

template/frontend/scorecard.png

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react'
+import { AuthFormShell } from './AuthFormShell'
+
+describe('AuthFormShell', () => {
+  it('renders title and description', () => {
+    render(
+      <AuthFormShell title="Sign In" description="Enter your credentials" footer={null}>
+        <div>form content</div>
+      </AuthFormShell>
+    )
+
+    expect(screen.getByText('Sign In')).toBeInTheDocument()
+    expect(screen.getByText('Enter your credentials')).toBeInTheDocument()
+  })
+
+  it('renders children', () => {
+    render(
+      <AuthFormShell title="Title" description="Desc" footer={null}>
+        <input data-testid="form-input" />
+      </AuthFormShell>
+    )
+
+    expect(screen.getByTestId('form-input')).toBeInTheDocument()
+  })
+
+  it('renders footer slot', () => {
+    render(
+      <AuthFormShell
+        title="Title"
+        description="Desc"
+        footer={<a href="/register">Create account</a>}
+      >
+        <div />
+      </AuthFormShell>
+    )
+
+    expect(screen.getByRole('link', { name: 'Create account' })).toBeInTheDocument()
+  })
+})

template/frontend/src/components/AuthFormShell.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { vi } from 'vitest'
+import { ErrorBoundary } from './ErrorBoundary'
+
+function Bomb({ shouldThrow }: { shouldThrow: boolean }) {
+  if (shouldThrow) throw new Error('Test error message')
+  return <div>All good</div>
+}
+
+// Suppress React's error boundary console output in tests
+const consoleError = console.error
+beforeEach(() => {
+  console.error = vi.fn()
+})
+afterEach(() => {
+  console.error = consoleError
+})
+
+describe('ErrorBoundary', () => {
+  it('renders children when no error', () => {
+    render(
+      <ErrorBoundary>
+        <div data-testid="child">content</div>
+      </ErrorBoundary>
+    )
+
+    expect(screen.getByTestId('child')).toBeInTheDocument()
+  })
+
+  it('renders error UI when a child throws', () => {
+    render(
+      <ErrorBoundary>
+        <Bomb shouldThrow />
+      </ErrorBoundary>
+    )
+
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+    expect(screen.getByText('Test error message')).toBeInTheDocument()
+  })
+
+  it('shows Try again and Copy error details buttons on error', () => {
+    render(
+      <ErrorBoundary>
+        <Bomb shouldThrow />
+      </ErrorBoundary>
+    )
+
+    expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Copy error details/i })).toBeInTheDocument()
+  })
+
+  it('calls onError prop when a child throws', () => {
+    const onError = vi.fn()
+
+    render(
+      <ErrorBoundary onError={onError}>
+        <Bomb shouldThrow />
+      </ErrorBoundary>
+    )
+
+    expect(onError).toHaveBeenCalledWith(
+      expect.objectContaining({ message: 'Test error message' }),
+      expect.objectContaining({ componentStack: expect.any(String) })
+    )
+  })
+
+  it('Try again button clears error state (click does not throw)', () => {
+    render(
+      <ErrorBoundary>
+        <Bomb shouldThrow />
+      </ErrorBoundary>
+    )
+
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+
+    // Clicking Try again should not itself throw — it clears internal state
+    expect(() => fireEvent.click(screen.getByRole('button', { name: 'Try again' }))).not.toThrow()
+  })
+})

template/frontend/src/components/ErrorBoundary.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { vi } from 'vitest'
+import { Navigation } from './Navigation'
+
+const mockLogout = vi.fn()
+
+vi.mock('@/contexts/AuthContext', () => ({
+  useAuth: vi.fn(),
+}))
+
+import { useAuth } from '@/contexts/AuthContext'
+const mockUseAuth = useAuth as ReturnType<typeof vi.fn>
+
+describe('Navigation (unauthenticated)', () => {
+  beforeEach(() => {
+    mockUseAuth.mockReturnValue({ isAuthenticated: false, logout: mockLogout })
+  })
+
+  it('renders Login and Sign Up links', () => {
+    render(<Navigation />)
+    expect(screen.getByRole('link', { name: 'Login' })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'Sign Up' })).toBeInTheDocument()
+  })
+
+  it('does not render Logout button', () => {
+    render(<Navigation />)
+    expect(screen.queryByRole('button', { name: 'Logout' })).not.toBeInTheDocument()
+  })
+
+  it('does not render Items link', () => {
+    render(<Navigation />)
+    expect(screen.queryByRole('link', { name: 'Items' })).not.toBeInTheDocument()
+  })
+})
+
+describe('Navigation (authenticated)', () => {
+  beforeEach(() => {
+    mockLogout.mockReset()
+    mockUseAuth.mockReturnValue({ isAuthenticated: true, logout: mockLogout })
+  })
+
+  it('renders Logout button and Items link', () => {
+    render(<Navigation />)
+    expect(screen.getByRole('button', { name: 'Logout' })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'Items' })).toBeInTheDocument()
+  })
+
+  it('does not render Login or Sign Up when authenticated', () => {
+    render(<Navigation />)
+    expect(screen.queryByRole('link', { name: 'Login' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('link', { name: 'Sign Up' })).not.toBeInTheDocument()
+  })
+
+  it('calls logout when Logout button is clicked', () => {
+    render(<Navigation />)
+    fireEvent.click(screen.getByRole('button', { name: 'Logout' }))
+    expect(mockLogout).toHaveBeenCalledTimes(1)
+  })
+})

template/frontend/src/components/Navigation.test.tsx

@@ -16,6 +16,7 @@ import {
   clearAuthToken,
   subscribeToAuthChanges,
   isAuthenticated,
+  clearAllAuthListeners,
 } from '@/lib/auth'
 import { createAuthChangeHandler } from './AuthContext'
 
@@ -27,6 +28,7 @@ function makeQueryClient() {
 
 describe('AuthContext: login path', () => {
   beforeEach(() => localStorage.clear())
+  afterEach(() => clearAllAuthListeners())
 
   it('stores token on login', () => {
     setAuthToken('login-token')
@@ -45,6 +47,7 @@ describe('AuthContext: login path', () => {
 
 describe('AuthContext: logout path', () => {
   beforeEach(() => localStorage.clear())
+  afterEach(() => clearAllAuthListeners())
 
   it('clears token and marks unauthenticated', () => {
     setAuthToken('active-token')
@@ -81,7 +84,7 @@ describe('AuthContext: logout path', () => {
 
 describe('AuthContext: 401 path', () => {
   beforeEach(() => localStorage.clear())
-  afterEach(() => vi.unstubAllGlobals())
+  afterEach(() => { vi.unstubAllGlobals(); clearAllAuthListeners() })
 
   it('api-client 401 triggers auth change notification', async () => {
     const { api } = await import('@/lib/api-client')
@@ -120,6 +123,7 @@ describe('AuthContext: 401 path', () => {
 
 describe('createAuthChangeHandler', () => {
   beforeEach(() => localStorage.clear())
+  afterEach(() => clearAllAuthListeners())
 
   it('calls navigate({ to: /login }) when token is cleared', () => {
     const navigate = vi.fn()

template/frontend/src/contexts/AuthContext.test.tsx

@@ -4,13 +4,12 @@ import type { QueryClient } from '@tanstack/react-query'
 import { getAuthToken, setAuthToken, clearAuthToken, subscribeToAuthChanges } from '@/lib/auth'
 import { api } from '@/lib/api-client'
 import { API } from '@/lib/api-endpoints'
-import type { AuthSessionResponse } from '@/types/auth'
 
 interface AuthContextValue {
   isAuthenticated: boolean
   token: string | null
   /** Sync — sets the auth token and updates state. Do not await. */
-  login: (response: AuthSessionResponse) => void
+  login: (token: string) => void
   /** Async — calls the backend logout endpoint then clears local state. Must be awaited. */
   logout: () => Promise<void>
 }
@@ -54,8 +53,8 @@ export function AuthProvider({ children, queryClient }: AuthProviderProps) {
     )
   }, [queryClient, router])
 
-  const login = useCallback((response: AuthSessionResponse) => {
-    setAuthToken(response.id)
+  const login = useCallback((token: string) => {
+    setAuthToken(token)
   }, [])
 
   const logout = useCallback(async () => {

template/frontend/src/contexts/AuthContext.tsx

@@ -32,14 +32,14 @@ describe('executeAuthSubmit', () => {
     vi.unstubAllGlobals()
   })
 
-  it('calls login() with the API response on success', async () => {
+  it('calls login() with the session token on success', async () => {
     mockFetch(200, mockSession)
 
     await executeAuthSubmit('/auth/login', { email: 'a@b.com', password: 'pw' }, {
       login, navigate, successMessage, errorMessage, redirect,
     })
 
-    expect(login).toHaveBeenCalledWith(mockSession)
+    expect(login).toHaveBeenCalledWith(mockSession.id)
   })
 
   it('calls navigate() with the redirect option on success', async () => {

template/frontend/src/hooks/useAuthSubmit.test.ts

@@ -14,7 +14,7 @@ export async function executeAuthSubmit(
   endpoint: string,
   payload: Record<string, unknown>,
   deps: {
-    login: (result: AuthSessionResponse) => void
+    login: (token: string) => void
     navigate: (opts: NavigateOptions) => void
     successMessage: string
     errorMessage: string
@@ -23,7 +23,7 @@ export async function executeAuthSubmit(
 ): Promise<void> {
   try {
     const result = await api.post<AuthSessionResponse>(endpoint, payload)
-    deps.login(result)
+    deps.login(result.id)
     toast.success(deps.successMessage)
     deps.navigate(deps.redirect)
   } catch (err) {