From 8d481bac493e12a3ad0c8e2c75eef4150b48c6f8 Mon Sep 17 00:00:00 2001
From: Jane Sandberg <js7389@princeton.edu>
Date: Tue, 6 Aug 2024 09:24:00 -0700
Subject: [PATCH] [LuxMenuBar] Emit menu-item-clicked event even when
 type=main-menu

Prior to this commit, we only emitted this event when the
type was links or buttons.
---
 src/components/LuxMenuBar.vue                  |  3 +++
 tests/unit/specs/components/luxMenuBar.spec.js | 13 +++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/components/LuxMenuBar.vue b/src/components/LuxMenuBar.vue
index c2fd72a..42c3296 100644
--- a/src/components/LuxMenuBar.vue
+++ b/src/components/LuxMenuBar.vue
@@ -100,6 +100,7 @@
                 :target="child.target"
                 :data-method="child.method"
                 class="lux-nav-item"
+                @click="menuItemClicked(child)"
                 >{{ child.name }}</a
               >
             </li>
@@ -112,6 +113,7 @@
             :title="item.name"
             :data-method="item.method"
             class="lux-nav-item"
+            @click="menuItemClicked(item)"
           >
             {{ item.name }}
           </a>
@@ -231,6 +233,7 @@ export default {
       },
     },
   },
+  emits: ["input", "menu-item-clicked"],
 }
 </script>
 
diff --git a/tests/unit/specs/components/luxMenuBar.spec.js b/tests/unit/specs/components/luxMenuBar.spec.js
index 164725e..7f27088 100644
--- a/tests/unit/specs/components/luxMenuBar.spec.js
+++ b/tests/unit/specs/components/luxMenuBar.spec.js
@@ -93,4 +93,17 @@ describe("LuxMenuBar.vue", () => {
   it("has the expected html structure", () => {
     expect(wrapper.element).toMatchSnapshot()
   })
+
+  describe("when type is main-menu", () => {
+    it("emits menu-item-clicked with metadata about the clicked menu item", async () => {
+      wrapper.setProps({ type: "main-menu" })
+      await nextTick()
+      wrapper.findAll(".lux-nav-item")[1].trigger("click")
+
+      expect(wrapper.emitted()["menu-item-clicked"].length).toEqual(1)
+      expect(wrapper.emitted()["menu-item-clicked"][0]).toEqual([
+        { name: "Bar", component: "Bar", href: "/example/" },
+      ])
+    })
+  })
 })