87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
|
import { render } from '@testing-library/react'
|
|
import { screen, fireEvent } from '@testing-library/dom'
|
|
import '@testing-library/jest-dom'
|
|
import { Navigation } from '../Navigation'
|
|
|
|
// Mock the UI components
|
|
vi.mock('../ui', () => ({
|
|
LogoMark: () => <div data-testid="logo-mark">Logo</div>,
|
|
Magnetic: ({ children }: { children: React.ReactNode }) => <div>{children}</div>
|
|
}))
|
|
|
|
describe('Navigation Component', () => {
|
|
const mockProps = {
|
|
darkMode: false,
|
|
setDarkMode: vi.fn(),
|
|
mobileMenuOpen: false,
|
|
setMobileMenuOpen: vi.fn()
|
|
}
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks()
|
|
})
|
|
|
|
it('renders navigation with logo and brand name', () => {
|
|
render(<Navigation {...mockProps} />)
|
|
|
|
expect(screen.getByTestId('logo-mark')).toBeInTheDocument()
|
|
expect(screen.getByText('Miracles in Motion')).toBeInTheDocument()
|
|
expect(screen.getByText('Essentials for every student')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders desktop navigation links', () => {
|
|
render(<Navigation {...mockProps} />)
|
|
|
|
expect(screen.getByLabelText('Read success stories')).toBeInTheDocument()
|
|
expect(screen.getByLabelText('View testimonies')).toBeInTheDocument()
|
|
expect(screen.getByLabelText('Volunteer opportunities')).toBeInTheDocument()
|
|
expect(screen.getByLabelText('Corporate partnerships')).toBeInTheDocument()
|
|
expect(screen.getByLabelText('Request assistance')).toBeInTheDocument()
|
|
expect(screen.getByLabelText('Portal login')).toBeInTheDocument()
|
|
})
|
|
|
|
it('toggles dark mode when button is clicked', () => {
|
|
render(<Navigation {...mockProps} />)
|
|
|
|
const darkModeButtons = screen.getAllByLabelText('Switch to dark mode')
|
|
fireEvent.click(darkModeButtons[0])
|
|
|
|
expect(mockProps.setDarkMode).toHaveBeenCalledWith(true)
|
|
})
|
|
|
|
it('toggles mobile menu when hamburger button is clicked', () => {
|
|
render(<Navigation {...mockProps} />)
|
|
|
|
const mobileMenuButton = screen.getByLabelText('Open navigation menu')
|
|
fireEvent.click(mobileMenuButton)
|
|
|
|
expect(mockProps.setMobileMenuOpen).toHaveBeenCalledWith(true)
|
|
})
|
|
|
|
it('displays mobile menu when mobileMenuOpen is true', () => {
|
|
render(<Navigation {...mockProps} mobileMenuOpen={true} />)
|
|
|
|
const storiesLinks = screen.getAllByText('Stories')
|
|
expect(storiesLinks).toHaveLength(2) // One in desktop nav, one in mobile nav
|
|
expect(screen.getByText('Testimonies')).toBeInTheDocument()
|
|
expect(screen.getByText('Volunteers')).toBeInTheDocument()
|
|
})
|
|
|
|
it('handles keyboard navigation correctly', () => {
|
|
render(<Navigation {...mockProps} />)
|
|
|
|
const darkModeButton = screen.getAllByLabelText('Switch to dark mode')[0]
|
|
fireEvent.keyDown(darkModeButton, { key: 'Enter', code: 'Enter' })
|
|
|
|
expect(mockProps.setDarkMode).toHaveBeenCalledWith(true)
|
|
})
|
|
|
|
it('displays correct icon based on dark mode state', () => {
|
|
const { rerender } = render(<Navigation {...mockProps} darkMode={false} />)
|
|
expect(screen.getAllByLabelText('Switch to dark mode')).toHaveLength(2)
|
|
|
|
rerender(<Navigation {...mockProps} darkMode={true} />)
|
|
expect(screen.getAllByLabelText('Switch to light mode')).toHaveLength(2)
|
|
})
|
|
}) |