fix: nav menu tests

Author: segunadebayo

e2e/models/navigation-menu.model.ts

@@ -27,7 +27,11 @@ export class NavigationMenuModel extends Model {
     return this.page.locator(`[data-scope="navigation-menu"][data-part="viewport"]`)
   }
 
-  getLink(value: string, text: string) {
+  getLink(value: string) {
+    return this.page.locator(`[data-scope="navigation-menu"][data-part="link"][data-value="${value}"]`)
+  }
+
+  getContentLink(value: string, text: string) {
     return this.getContent(value).locator("a", { hasText: text })
   }
 
@@ -52,6 +56,14 @@ export class NavigationMenuModel extends Model {
   }
 
   async dontSeeContent(value: string) {
-    await expect(this.getContent(value)).not.toBeVisible()
+    await expect(this.getContent(value)).toBeHidden()
+  }
+
+  async seeContentLinkIsFocused(value: string, text: string) {
+    await expect(this.getContentLink(value, text)).toBeFocused()
+  }
+
+  async seeLinkIsFocused(value: string) {
+    await expect(this.getLink(value)).toBeFocused()
   }
 }

e2e/navigation-menu.e2e.ts

@@ -17,4 +17,81 @@ test.describe("navigation-menu", () => {
     await I.hoverTrigger("products")
     await I.seeContent("products")
   })
+
+  test("should open on click", async () => {
+    await I.clickTrigger("products")
+    await I.seeContent("products")
+  })
+
+  test("should close when clicking outside", async () => {
+    await I.clickTrigger("products")
+    await I.seeContent("products")
+    await I.clickOutside()
+    await I.dontSeeContent("products")
+  })
+
+  test("should close when pressing escape", async () => {
+    await I.clickTrigger("products")
+    await I.seeContent("products")
+    await I.pressKey("Escape")
+    await I.dontSeeContent("products")
+  })
+
+  test("trigger switch, using hover", async () => {
+    await I.hoverTrigger("products")
+    await I.seeContent("products")
+    await I.hoverTrigger("company")
+    await I.seeContent("company")
+    await I.dontSeeContent("products")
+  })
+
+  test("trigger switch, using the keyboard", async () => {
+    await I.focusTrigger("products")
+    await I.pressKey("Enter")
+    await I.seeContent("products")
+    await I.pressKey("Enter")
+    await I.dontSeeContent("products")
+
+    await I.pressKey("Tab")
+    await I.pressKey("Enter")
+    await I.seeContent("company")
+    await I.dontSeeContent("products")
+  })
+
+  test("hover + focus should toggle content", async () => {
+    await I.hoverTrigger("products")
+    await I.seeContent("products")
+    await I.clickTrigger("products")
+    await I.dontSeeContent("products")
+
+    // hover again (nothing should happen)
+    await I.hoverTrigger("products")
+    await I.dontSeeContent("products")
+  })
+
+  test("focus link on tab", async () => {
+    await I.focusTrigger("products")
+    await I.pressKey("Enter")
+    await I.pressKey("Tab")
+    await I.seeContentLinkIsFocused("products", "Analytics Platform")
+  })
+
+  test("tab navigation", async () => {
+    await I.focusTrigger("products")
+    await I.pressKey("Enter")
+    await I.pressKey("Tab", 7)
+
+    await I.seeTriggerIsFocused("company")
+    await I.pressKey("Enter")
+    await I.seeContent("company")
+    await I.dontSeeContent("products")
+
+    await I.pressKey("Tab", 5)
+    await I.seeLinkIsFocused("pricing")
+
+    // focus outside
+    await I.pressKey("Tab")
+    await I.dontSeeContent("company")
+    await I.dontSeeContent("products")
+  })
 })

examples/next-ts/pages/navigation-menu.tsx

@@ -44,12 +44,12 @@ export default function Page() {
                 {renderLinks({
                   value: "products",
                   items: [
-                    "Fusce pellentesque",
-                    "Aliquam porttitor",
-                    "Pellentesque",
-                    "Fusce pellentesque",
-                    "Aliquam porttitor",
-                    "Pellentesque",
+                    "Analytics Platform",
+                    "Customer Engagement",
+                    "Marketing Automation",
+                    "Data Integration",
+                    "Enterprise Solutions",
+                    "API Documentation",
                   ],
                 })}
               </Presence>
@@ -66,7 +66,7 @@ export default function Page() {
                 </Presence>
                 {renderLinks({
                   value: "company",
-                  items: ["Fusce pellentesque", "Aliquam porttitor", "Pellentesque"],
+                  items: ["About Us", "Leadership Team", "Careers", "Press Releases"],
                 })}
               </Presence>
             </div>
@@ -82,7 +82,7 @@ export default function Page() {
                 </Presence>
                 {renderLinks({
                   value: "developers",
-                  items: ["Donec quis dui", "Vestibulum", "Fusce pellentesque", "Aliquam porttitor"],
+                  items: ["Investors", "Partners", "Corporate Responsibility"],
                 })}
               </Presence>
             </div>