Merge pull request #317 from pulibrary/menubar-main-menu-event

[LuxMenuBar] Emit menu-item-clicked event even when type=main-menu
pulibrary · Aug 6, 2024 · 1e9a4ea · 1e9a4ea
2 parents a84daa1 + 8d481ba
commit 1e9a4ea
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git 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
@@ -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/" },
+      ])
+    })
+  })
 })