Update to integration tests - support mobile environment

playwright.config.ts

@@ -51,14 +51,14 @@ export default defineConfig({
     },
 
     /* Test against mobile viewports. */
-    // {
-    //   name: "Mobile Chrome",
-    //   use: { ...devices["Pixel 5"] },
-    // },
-    // {
-    //   name: "Mobile Safari",
-    //   use: { ...devices["iPhone 12"] },
-    // },
+    {
+      name: "Mobile Chrome",
+      use: { ...devices["Pixel 5"] },
+    },
+    {
+      name: "Mobile Safari",
+      use: { ...devices["iPhone 12"] },
+    },
 
     /* Test against branded browsers. */
     // {

src/app/contact/page.tsx

@@ -1,7 +1,6 @@
 import BgLayer from "@/components/layout/bg-layer";
 import ContactCard from "@/components/contact/card";
 import Container from "@/components/layout/container";
-import Header from "@/components/layout/header";
 import MainWrapper from "@/components/layout/main-wrapper";
 import { Metadata } from "next";
 
@@ -42,7 +41,6 @@ export const metadata: Metadata = {
 export default function ContactPage() {
   return (
     <div className="">
-      <Header />
       <MainWrapper>
         <BgLayer>
           <Container>

src/app/features/page.tsx

@@ -1,7 +1,6 @@
 import BgLayer from "@/components/layout/bg-layer";
 import Container from "@/components/layout/container";
 import FeatureList from "@/components/features/list";
-import Header from "@/components/layout/header";
 import Implementations from "@/components/features/implementations";
 import MainWrapper from "@/components/layout/main-wrapper";
 import { Metadata } from "next";
@@ -14,7 +13,6 @@ export const metadata: Metadata = {
 export default async function FeaturesPage() {
   return (
     <div className="">
-      <Header />
       <MainWrapper>
         <BgLayer>
           <PageHeader

src/app/getting-started/page.tsx

@@ -2,7 +2,6 @@ import BgLayer from "@/components/layout/bg-layer";
 import Container from "@/components/layout/container";
 import FaqList from "@/components/faq";
 import GettingStartedList from "@/components/getting-started/list";
-import Header from "@/components/layout/header";
 import HostedSolutions from "@/components/hosted-solutions";
 import MainWrapper from "@/components/layout/main-wrapper";
 import { Metadata } from "next";
@@ -15,7 +14,6 @@ export const metadata: Metadata = {
 export default function GettingStartedPage() {
   return (
     <div className="">
-      <Header />
       <BgLayer>
         <MainWrapper>
           <PageHeader

src/app/news/page.tsx

@@ -1,6 +1,5 @@
 import BgLayer from "@/components/layout/bg-layer";
 import Container from "@/components/layout/container";
-import Header from "@/components/layout/header";
 import MainWrapper from "@/components/layout/main-wrapper";
 import { Metadata } from "next";
 import NewsList from "@/components/news/list";
@@ -14,7 +13,6 @@ export const metadata: Metadata = {
 export default function Homepage() {
   return (
     <div className="">
-      <Header />
       <MainWrapper>
         <BgLayer>
           <PageHeader

src/app/presentations/page.tsx

@@ -1,6 +1,5 @@
 import BgLayer from "@/components/layout/bg-layer";
 import Container from "@/components/layout/container";
-import Header from "@/components/layout/header";
 import MainWrapper from "@/components/layout/main-wrapper";
 import { Metadata } from "next";
 import PageHeader from "@/components/page-header";
@@ -14,7 +13,6 @@ export const metadata: Metadata = {
 export default function PresentationsPage() {
   return (
     <div className="">
-      <Header />
       <MainWrapper>
         <BgLayer>
           <PageHeader

src/components/layout/header.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Dialog, DialogPanel } from "@headlessui/react";
+import React, { useEffect } from "react";
 
-import { Dialog } from "@headlessui/react";
 import Image from "next/image";
 import Link from "next/link";
-import React from "react";
 import hykuLogo from "../../../public/logo-hyku.png";
+import { usePathname } from "next/navigation";
 import { useState } from "react";
 
 export type NavItem = {
@@ -40,6 +41,13 @@ export const navigation: NavItem[] = [
 
 const Header = () => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (mobileMenuOpen) {
+      setMobileMenuOpen(false);
+    }
+  }, [pathname]);
 
   return (
     <header className="absolute inset-x-0 top-0 z-50">
@@ -94,9 +102,10 @@ const Header = () => {
         className="lg:hidden"
         open={mobileMenuOpen}
         onClose={setMobileMenuOpen}
+        data-testid="mobile-menu"
       >
         <div className="fixed inset-0 z-50" />
-        <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-background px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+        <DialogPanel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-background px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
           <div className="flex items-center justify-between">
             <a href="#" className="-m-1.5 p-1.5">
               <span className="sr-only">Your Company</span>
@@ -136,7 +145,7 @@ const Header = () => {
               </div>
             </div>
           </div>
-        </Dialog.Panel>
+        </DialogPanel>
       </Dialog>
     </header>
   );

tests/home.spec.ts

@@ -2,6 +2,8 @@ import { expect, test } from "@playwright/test";
 
 test("homepage elements", async ({ page }) => {
   await page.goto("/");
+  await page.waitForURL("**/");
+
   await expect(page.getByRole("heading")).toContainText(
     "The Next Generation Repository Solution",
   );