44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
|
import { fireEvent, render } from '@testing-library/svelte';
|
||
|
|
import { describe, expect, it } from 'vitest';
|
||
|
|
import Header from './Header.svelte';
|
||
|
|
import { homepageContent } from '$lib/content/homepage';
|
||
|
|
import { setMockPage } from '../../test/mocks/app-stores';
|
||
|
|
|
||
|
|
describe('Header', () => {
|
||
|
|
it('marks the services link active for service detail pages', () => {
|
||
|
|
setMockPage('https://www.goodwalk.co.nz/pack-walks');
|
||
|
|
|
||
|
|
const { container } = render(Header, {
|
||
|
|
navigation: homepageContent.navigation
|
||
|
|
});
|
||
|
|
|
||
|
|
expect(container.querySelector('a.nav-link-active[href="#services"]')).toBeTruthy();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('opens and closes the mobile menu', async () => {
|
||
|
|
Object.defineProperty(window, 'innerWidth', {
|
||
|
|
configurable: true,
|
||
|
|
writable: true,
|
||
|
|
value: 390
|
||
|
|
});
|
||
|
|
|
||
|
|
const { container } = render(Header, {
|
||
|
|
navigation: homepageContent.navigation
|
||
|
|
});
|
||
|
|
|
||
|
|
const menuToggle = container.querySelector('.hamburger') as HTMLButtonElement;
|
||
|
|
const mobileMenu = container.querySelector('.mobile-menu') as HTMLDivElement;
|
||
|
|
const firstMobileLink = mobileMenu.querySelector('a') as HTMLAnchorElement;
|
||
|
|
|
||
|
|
expect(menuToggle).toHaveAttribute('aria-expanded', 'false');
|
||
|
|
|
||
|
|
await fireEvent.click(menuToggle);
|
||
|
|
expect(menuToggle).toHaveAttribute('aria-expanded', 'true');
|
||
|
|
expect(mobileMenu.classList.contains('open')).toBe(true);
|
||
|
|
|
||
|
|
await fireEvent.click(firstMobileLink);
|
||
|
|
expect(menuToggle).toHaveAttribute('aria-expanded', 'false');
|
||
|
|
expect(mobileMenu.classList.contains('open')).toBe(false);
|
||
|
|
});
|
||
|
|
});
|