Ilia Mashkov
63 lines
2.5 KiB
TypeScript
63 lines
2.5 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import type { NavItem } from '../model/types';
|
|
import { MobileNav } from './MobileNav';
|
|
|
|
vi.mock('next/navigation', () => ({ usePathname: vi.fn(() => '/') }));
|
|
|
|
const ITEMS: NavItem[] = [
|
|
{ id: 'intro', label: 'Intro', number: '01' },
|
|
{ id: 'bio', label: 'Bio', number: '02' },
|
|
];
|
|
|
|
describe('MobileNav', () => {
|
|
describe('rendering', () => {
|
|
it('renders title "allmy.work"', () => {
|
|
render(<MobileNav items={ITEMS} />);
|
|
expect(screen.getByText('allmy.work')).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders toggle button with text "Menu" initially', () => {
|
|
render(<MobileNav items={ITEMS} />);
|
|
expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument();
|
|
});
|
|
|
|
it('menu items are hidden initially', () => {
|
|
render(<MobileNav items={ITEMS} />);
|
|
expect(screen.queryByRole('link', { name: /intro/i })).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('navigation items', () => {
|
|
it('shows items as links with correct hrefs when open', async () => {
|
|
render(<MobileNav items={ITEMS} />);
|
|
await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
|
|
expect(screen.getByRole('link', { name: /01.*Intro/i })).toHaveAttribute('href', '/intro');
|
|
expect(screen.getByRole('link', { name: /02.*Bio/i })).toHaveAttribute('href', '/bio');
|
|
});
|
|
});
|
|
|
|
describe('interactions', () => {
|
|
it('click toggle shows links and changes label to "Close"', async () => {
|
|
render(<MobileNav items={ITEMS} />);
|
|
await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
|
|
expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
|
|
expect(screen.getByText('Intro')).toBeInTheDocument();
|
|
});
|
|
|
|
it('closes menu when pathname changes', async () => {
|
|
const { usePathname } = await import('next/navigation');
|
|
vi.mocked(usePathname).mockReturnValue('/');
|
|
const { rerender } = render(<MobileNav items={ITEMS} />);
|
|
await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
|
|
expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
|
|
|
|
vi.mocked(usePathname).mockReturnValue('/bio');
|
|
rerender(<MobileNav items={ITEMS} />);
|
|
|
|
expect(screen.getByRole('button', { name: 'Menu' })).toBeInTheDocument();
|
|
expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|