gw-svelte/src/lib/components/Header.test.ts

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);
  });
});