/**
* Epic 1: Authentication & User Management
* Component Test: Navigation
*
* Tests the navigation component for proper display based on session state
*/
import { describe, it, expect, mock, beforeEach, afterEach } from 'bun:test'
import { render, screen, waitFor } from '@testing-library/react'
import Navigation from '@/components/Navigation'
// Mock the SessionProvider
mock.module('@/components/SessionProvider', () => ({
useSession: mock(() => {}),
}))
// Mock the auth-client
mock.module('@/lib/auth-client', () => ({
authClient: {
signOut: mock(() => {}),
},
}))
// Mock fetch for role API call
global.fetch = mock(() => {})
import { useSession } from '@/components/SessionProvider'
describe('Epic 1: Navigation Component', () => {
beforeEach(() => {
mock.clearAllMocks();
(global.fetch).mockImplementation(async (url) => {
if (url?.toString().includes('/api/users/')) {
return new Response(JSON.stringify({ role: 'player' }), {
status: 200,
headers: { 'Content-Type': 'application/json' },
})
}
return new Response(JSON.stringify({}), { status: 200 })
})
})
afterEach(() => {
mock.clearAllMocks();
})
it('renders the logo and basic links when not logged in', () => {
(useSession).mockReturnValue({
session: null,
loading: false,
refreshSession: mock(() => {}),
})
render()
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 () => {
(useSession).mockReturnValue({
session: {
user: {
id: 'user-123',
email: 'test@example.com',
name: 'Test User',
role: 'player'
},
session: { token: 'abc123' },
},
loading: false,
refreshSession: mock(() => {}),
})
render()
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 () => {
(useSession).mockReturnValue({
session: {
user: {
id: 'user-123',
email: 'test@example.com',
name: 'Test User',
role: 'player'
},
session: { token: 'abc123' },
},
loading: false,
refreshSession: mock(() => {}),
})
render()
await waitFor(() => {
expect(screen.getByText('Tournaments')).toBeInTheDocument()
})
})
it('shows admin link for club_admin role', async () => {
(useSession).mockReturnValue({
session: {
user: {
id: 'admin-123',
email: 'admin@example.com',
name: 'Admin User',
role: 'club_admin',
},
session: { token: 'abc123' },
},
loading: false,
refreshSession: mock(() => {}),
});
// Mock fetch to return club_admin role
(global.fetch).mockImplementation(async (url) => {
if (url?.toString().includes('/api/users/admin-123/role')) {
return new Response(JSON.stringify({ role: 'club_admin' }), {
status: 200,
headers: { 'Content-Type': 'application/json' },
})
}
return new Response(JSON.stringify({}), { status: 200 })
})
render()
await waitFor(() => {
expect(screen.getByText('Admin')).toBeInTheDocument()
}, { timeout: 3000 })
expect(screen.getByText('Tournaments')).toBeInTheDocument()
})
it('hides admin link for non-admin users', async () => {
(useSession).mockReturnValue({
session: {
user: {
id: 'player-123',
email: 'player@example.com',
name: 'Player User',
role: 'player',
},
session: { token: 'abc123' },
},
loading: false,
refreshSession: mock(() => {}),
});
// Mock fetch to return player role (already set in beforeEach, but explicit here)
(global.fetch).mockImplementation(async (url) => {
if (url?.toString().includes('/api/users/')) {
return {
json: () => Promise.resolve({ role: 'player' }),
} as Response
}
return {
json: () => Promise.resolve({}),
} as Response
})
render()
await waitFor(() => {
expect(screen.getByText('Tournaments')).toBeInTheDocument()
})
expect(screen.queryByText('Admin')).not.toBeInTheDocument()
})
it('shows loading state', () => {
(useSession).mockReturnValue({
session: null,
loading: true,
refreshSession: mock(() => {}),
})
render()
expect(screen.getByText('Loading...')).toBeInTheDocument()
})
})