GitHub Actions
134 lines
3.5 KiB
TypeScript
134 lines
3.5 KiB
TypeScript
import { ReactNode } from 'react'
|
|
import { describe, it, expect, vi } from 'vitest'
|
|
import { render, screen } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
import { BrowserRouter } from 'react-router-dom'
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
|
import Layout from '../Layout'
|
|
import { ThemeProvider } from '../../context/ThemeContext'
|
|
|
|
const mockLogout = vi.fn()
|
|
|
|
// Mock AuthContext
|
|
vi.mock('../../hooks/useAuth', () => ({
|
|
useAuth: () => ({
|
|
logout: mockLogout,
|
|
}),
|
|
}))
|
|
|
|
// Mock API
|
|
vi.mock('../../api/health', () => ({
|
|
checkHealth: vi.fn().mockResolvedValue({
|
|
version: '0.1.0',
|
|
git_commit: 'abcdef1',
|
|
}),
|
|
}))
|
|
|
|
const renderWithProviders = (children: ReactNode) => {
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
retry: false,
|
|
},
|
|
},
|
|
})
|
|
|
|
return render(
|
|
<QueryClientProvider client={queryClient}>
|
|
<BrowserRouter>
|
|
<ThemeProvider>
|
|
{children}
|
|
</ThemeProvider>
|
|
</BrowserRouter>
|
|
</QueryClientProvider>
|
|
)
|
|
}
|
|
|
|
describe('Layout', () => {
|
|
it('renders the application logo', () => {
|
|
renderWithProviders(
|
|
<Layout>
|
|
<div>Test Content</div>
|
|
</Layout>
|
|
)
|
|
|
|
const logos = screen.getAllByAltText('Charon')
|
|
expect(logos.length).toBeGreaterThan(0)
|
|
expect(logos[0]).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders all navigation items', async () => {
|
|
renderWithProviders(
|
|
<Layout>
|
|
<div>Test Content</div>
|
|
</Layout>
|
|
)
|
|
|
|
expect(screen.getByText('Dashboard')).toBeInTheDocument()
|
|
expect(screen.getByText('Proxy Hosts')).toBeInTheDocument()
|
|
expect(screen.getByText('Remote Servers')).toBeInTheDocument()
|
|
expect(screen.getByText('Certificates')).toBeInTheDocument()
|
|
// Expand Tasks and Import to see nested items
|
|
await userEvent.click(screen.getByText('Tasks'))
|
|
expect(screen.getByText('Import')).toBeInTheDocument()
|
|
await userEvent.click(screen.getByText('Import'))
|
|
expect(screen.getByText('Caddyfile')).toBeInTheDocument()
|
|
expect(screen.getByText('CrowdSec')).toBeInTheDocument()
|
|
expect(screen.getByText('Settings')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders children content', () => {
|
|
renderWithProviders(
|
|
<Layout>
|
|
<div data-testid="test-content">Test Content</div>
|
|
</Layout>
|
|
)
|
|
|
|
expect(screen.getByTestId('test-content')).toBeInTheDocument()
|
|
})
|
|
|
|
it('displays version information', async () => {
|
|
renderWithProviders(
|
|
<Layout>
|
|
<div>Test Content</div>
|
|
</Layout>
|
|
)
|
|
|
|
expect(await screen.findByText('Version 0.1.0')).toBeInTheDocument()
|
|
})
|
|
|
|
it('calls logout when logout button is clicked', async () => {
|
|
renderWithProviders(
|
|
<Layout>
|
|
<div>Test Content</div>
|
|
</Layout>
|
|
)
|
|
|
|
await userEvent.click(screen.getByText('Logout'))
|
|
|
|
expect(mockLogout).toHaveBeenCalled()
|
|
})
|
|
|
|
it('toggles sidebar on mobile', async () => {
|
|
renderWithProviders(
|
|
<Layout>
|
|
<div>Test Content</div>
|
|
</Layout>
|
|
)
|
|
|
|
// The mobile sidebar toggle is found by test-id
|
|
const toggleButton = screen.getByTestId('mobile-menu-toggle')
|
|
|
|
// Click to open the sidebar
|
|
await userEvent.click(toggleButton)
|
|
|
|
// The overlay should be present when mobile sidebar is open
|
|
// The overlay has class 'fixed inset-0 bg-gray-900/50 z-20 lg:hidden'
|
|
// Click the toggle again to close
|
|
await userEvent.click(toggleButton)
|
|
|
|
// Toggle button should still be in the document
|
|
expect(toggleButton).toBeInTheDocument()
|
|
})
|
|
})
|