Initial commit

src/lib/components/Header.test.ts

@@ -0,0 +1,43 @@
+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);
+  });
+});