Design language

src/lib/components/Header.test.ts

@@ -28,16 +28,40 @@ describe('Header', () => {
 
     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(mobileMenu.classList.contains('open')).toBe(true);
+    expect(mobileMenuShell.classList.contains('open')).toBe(true);
 
     await fireEvent.click(firstMobileLink);
     expect(menuToggle).toHaveAttribute('aria-expanded', 'false');
-    expect(mobileMenu.classList.contains('open')).toBe(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);
   });
 });