nextjs-rewrite (#5)

Reviewed-on: #5
Co-authored-by: David Gwilliam <dhgwilliam@gmail.com>
Co-committed-by: David Gwilliam <dhgwilliam@gmail.com>

src/__tests__/Navigation.test.tsx

@@ -0,0 +1,170 @@
+/**
+ * Epic 1: Authentication & User Management
+ * Component Test: Navigation
+ * 
+ * Tests the navigation component for proper display based on session state
+ */
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import Navigation from '@/components/Navigation'
+
+// Mock the SessionProvider
+vi.mock('@/components/SessionProvider', () => ({
+  useSession: vi.fn(),
+}))
+
+// Mock the auth-client
+vi.mock('@/lib/auth-client', () => ({
+  authClient: {
+    signOut: vi.fn(),
+  },
+}))
+
+// Mock fetch for role API call
+global.fetch = vi.fn()
+
+import { useSession } from '@/components/SessionProvider'
+
+describe('Epic 1: Navigation Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(global.fetch).mockResolvedValue({
+      json: () => Promise.resolve({ role: 'player' }),
+    } as Response)
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('renders the logo and basic links when not logged in', () => {
+    vi.mocked(useSession).mockReturnValue({
+      session: null,
+      loading: false,
+      refreshSession: vi.fn(),
+    })
+
+    render(<Navigation />)
+
+    expect(screen.getByText('EuchreCamp')).toBeInTheDocument()
+    expect(screen.getByText('Rankings')).toBeInTheDocument()
+    expect(screen.getByText('Sign in')).toBeInTheDocument()
+    expect(screen.getByText('Sign up')).toBeInTheDocument()
+  })
+
+  it('shows user menu when logged in', async () => {
+    vi.mocked(useSession).mockReturnValue({
+      session: {
+        user: { 
+          id: 'user-123',
+          email: 'test@example.com', 
+          name: 'Test User',
+          role: 'player'
+        },
+        session: { token: 'abc123' },
+      },
+      loading: false,
+      refreshSession: vi.fn(),
+    })
+
+    render(<Navigation />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Test User')).toBeInTheDocument()
+    })
+    
+    expect(screen.getByText('Sign out')).toBeInTheDocument()
+    expect(screen.getByText('Tournaments')).toBeInTheDocument()
+  })
+
+  it('shows Tournaments link when logged in', async () => {
+    vi.mocked(useSession).mockReturnValue({
+      session: {
+        user: { 
+          id: 'user-123',
+          email: 'test@example.com', 
+          name: 'Test User',
+          role: 'player'
+        },
+        session: { token: 'abc123' },
+      },
+      loading: false,
+      refreshSession: vi.fn(),
+    })
+
+    render(<Navigation />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Tournaments')).toBeInTheDocument()
+    })
+  })
+
+  it('shows admin link for club_admin role', async () => {
+    vi.mocked(useSession).mockReturnValue({
+      session: {
+        user: {
+          id: 'admin-123',
+          email: 'admin@example.com',
+          name: 'Admin User',
+          role: 'club_admin',
+        },
+        session: { token: 'abc123' },
+      },
+      loading: false,
+      refreshSession: vi.fn(),
+    })
+
+    // Mock fetch to return club_admin role
+    vi.mocked(global.fetch).mockResolvedValue({
+      json: () => Promise.resolve({ role: 'club_admin' }),
+    } as Response)
+
+    render(<Navigation />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Admin')).toBeInTheDocument()
+    })
+    expect(screen.getByText('Tournaments')).toBeInTheDocument()
+  })
+
+  it('hides admin link for non-admin users', async () => {
+    vi.mocked(useSession).mockReturnValue({
+      session: {
+        user: {
+          id: 'player-123',
+          email: 'player@example.com',
+          name: 'Player User',
+          role: 'player',
+        },
+        session: { token: 'abc123' },
+      },
+      loading: false,
+      refreshSession: vi.fn(),
+    })
+
+    // Mock fetch to return player role
+    vi.mocked(global.fetch).mockResolvedValue({
+      json: () => Promise.resolve({ role: 'player' }),
+    } as Response)
+
+    render(<Navigation />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Tournaments')).toBeInTheDocument()
+    })
+    expect(screen.queryByText('Admin')).not.toBeInTheDocument()
+  })
+
+  it('shows loading state', () => {
+    vi.mocked(useSession).mockReturnValue({
+      session: null,
+      loading: true,
+      refreshSession: vi.fn(),
+    })
+
+    render(<Navigation />)
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+  })
+})