68 lines
2.4 KiB
TypeScript
68 lines
2.4 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 mobileMenuShell = container.querySelector('.mobile-menu-shell') 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(mobileMenuShell.classList.contains('open')).toBe(true);
|
|
|
|
await fireEvent.click(firstMobileLink);
|
|
expect(menuToggle).toHaveAttribute('aria-expanded', 'false');
|
|
expect(mobileMenuShell.classList.contains('open')).toBe(false);
|
|
});
|
|
|
|
it('closes the mobile menu when tapping outside the menu panel', 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 mobileMenuShell = container.querySelector('.mobile-menu-shell') as HTMLDivElement;
|
|
|
|
await fireEvent.click(menuToggle);
|
|
expect(menuToggle).toHaveAttribute('aria-expanded', 'true');
|
|
expect(mobileMenuShell.classList.contains('open')).toBe(true);
|
|
|
|
await fireEvent.click(mobileMenuShell);
|
|
expect(menuToggle).toHaveAttribute('aria-expanded', 'false');
|
|
expect(mobileMenuShell.classList.contains('open')).toBe(false);
|
|
});
|
|
});
|