41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { render, screen, fireEvent } from '@testing-library/react';
|
|
import { describe, it, expect, beforeEach } from 'vitest';
|
|
import { Nav } from '../Nav';
|
|
import { ThemeProvider } from '../../theme/ThemeProvider';
|
|
|
|
function renderNav() {
|
|
return render(
|
|
<ThemeProvider>
|
|
<Nav />
|
|
</ThemeProvider>,
|
|
);
|
|
}
|
|
|
|
describe('Nav', () => {
|
|
beforeEach(() => {
|
|
window.localStorage.clear();
|
|
document.documentElement.className = '';
|
|
});
|
|
|
|
it('renders all nav links including the CTA', () => {
|
|
renderNav();
|
|
expect(screen.getByText('Pakketten')).toBeInTheDocument();
|
|
expect(screen.getByText('Werkwijze')).toBeInTheDocument();
|
|
expect(screen.getByText('Over')).toBeInTheDocument();
|
|
expect(screen.getByTestId('nav-cta-link')).toHaveTextContent('Start project');
|
|
});
|
|
|
|
it('renders the theme toggle with a Dutch accessible label', () => {
|
|
renderNav();
|
|
expect(screen.getByRole('button', { name: 'Wissel kleurthema' })).toBeInTheDocument();
|
|
});
|
|
|
|
it('toggles the theme when the toggle button is clicked', () => {
|
|
renderNav();
|
|
const toggle = screen.getByTestId('theme-toggle-button');
|
|
expect(toggle).toHaveAttribute('aria-pressed', 'false');
|
|
fireEvent.click(toggle);
|
|
expect(toggle).toHaveAttribute('aria-pressed', 'true');
|
|
});
|
|
});
|