fix: dispatch internal routing events for the defaultItem for items w…

…ith a url attribute
inventage · Dec 17, 2023 · c3eb176 · c3eb176
1 parent 439052c
commit c3eb176
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 4 deletions.
diff --git a/.changeset/fluffy-adults-invite.md b/.changeset/fluffy-adults-invite.md
@@ -0,0 +1,5 @@
+---
+'@inventage-web-components/portal-navigation': patch
+---
+
+The internal routing events should be dispatched for the `defaultItem` for menu items with a `url` attribute.
diff --git a/packages/portal-navigation/data/test-data.json b/packages/portal-navigation/data/test-data.json
@@ -107,6 +107,26 @@
           "application": "app2",
           "internalRouting": true,
           "expanded": false
+        },
+        {
+          "id": "parent10",
+          "label": "Parent 10",
+          "url": "/some/path/parent10",
+          "application": "app1",
+          "internalRouting": true,
+          "defaultItem": "item10.2",
+          "items": [
+            {
+              "id": "item10.1",
+              "label": "Child 10.1",
+              "url": "/some/parent10/child-path"
+            },
+            {
+              "id": "item10.2",
+              "label": "Child 10.2",
+              "url": "/some/parent10/child-path#2"
+            }
+          ]
         }
       ]
     },

diff --git a/packages/portal-navigation/src/Configuration.ts b/packages/portal-navigation/src/Configuration.ts
@@ -129,6 +129,10 @@ export const hasUrl = (item: CommonMenuItem): boolean => {
   return isFirstLevelMenuItemOrMenuItem(item) && !!item.url;
 };
 
+export const hasDefaultItem = (item: CommonMenuItem): boolean => {
+  return isFirstLevelMenuItemOrMenuItem(item) && !!item.defaultItem;
+};
+
 /**
  * Wraps the json structured configuration of a portal navigation, does some basic sanitizing of the received data
  * (e.g. generating missing ids), and provides convenience functions to access menus and items with the data.

diff --git a/packages/portal-navigation/src/PortalNavigation.ts b/packages/portal-navigation/src/PortalNavigation.ts
@@ -6,7 +6,16 @@ import '@inventage-web-components/hamburger-menu/lib/src/hamburger-menu.js';
 
 import { IdPath } from './IdPath.js';
 import { styles } from './styles-css.js';
-import { CommonMenuItem, Configuration, FirstLevelMenuItem, hasUrl, isFirstLevelMenuItemOrMenuItem, MenuItem, MenuLabel } from './Configuration.js';
+import {
+  CommonMenuItem,
+  Configuration,
+  FirstLevelMenuItem,
+  hasDefaultItem,
+  hasUrl,
+  isFirstLevelMenuItemOrMenuItem,
+  MenuItem,
+  MenuLabel,
+} from './Configuration.js';
 
 /**
  * A listing of key menu ids that are handled specifically by the portal navigation component.
@@ -1064,7 +1073,7 @@ export class PortalNavigation extends LitElement {
     let dispatchEvent = true;
     let closeHamburgerExpanded = true;
     if (hasItems) {
-      refItem = hasUrl(selectedItem) ? selectedItem : this.__getDefaultItemOf(selectedItem!);
+      refItem = hasUrl(selectedItem) && !hasDefaultItem(selectedItem) ? selectedItem : this.__getDefaultItemOf(selectedItem!);
       dispatchEvent = !this.isMobileBreakpoint && !!refItem && isFirstLevelMenuItemOrMenuItem(refItem) && refItem.destination !== 'extern';
 
       // Expanded hamburger should be closed only when the clicked item does not have an internal default item

diff --git a/packages/portal-navigation/test/Configuration.test.ts b/packages/portal-navigation/test/Configuration.test.ts
@@ -21,13 +21,14 @@ describe('Configuration', () => {
     const configuration = new Configuration(configurationData);
     const result = configuration.getMenu('main');
 
-    expect(result!.items!.length).to.equal(6);
+    expect(result!.items!.length).to.equal(7);
     expect(result!.items![0].id).to.equal('parent1');
     expect(result!.items![1].id).to.equal('parent2');
     expect(result!.items![2].id).to.equal('parent6');
     expect(result!.items![3].id).to.equal('parent7');
     expect(result!.items![4].id).to.equal('parent8');
     expect(result!.items![5].id).to.equal('parent9');
+    expect(result!.items![6].id).to.equal('parent10');
   });
 
   it('getMenu should return undefined when menu is a valid object but was not found', () => {

diff --git a/packages/portal-navigation/test/PortalNavigation.test.ts b/packages/portal-navigation/test/PortalNavigation.test.ts
@@ -207,7 +207,7 @@ describe('<portal-navigation>', () => {
       await childrenRendered(el);
       expect(<HTMLElement>el.shadowRoot!.querySelector('[part~="label-parent2"]')!).not.to.be.null;
       expect(el.shadowRoot!.querySelectorAll('[part~="label-menu-meta"]').length, 'Renders part="label-menu-meta"').to.eq(3);
-      expect(el.shadowRoot!.querySelectorAll('[part~="label-menu-main"]').length, 'Renders part="label-menu-main"').to.eq(6);
+      expect(el.shadowRoot!.querySelectorAll('[part~="label-menu-main"]').length, 'Renders part="label-menu-main"').to.eq(7);
       expect(el.shadowRoot!.querySelectorAll('[part~="label-parent2"]').length, 'Renders part="label-parent2"').to.eq(1);
     });
 
@@ -743,6 +743,17 @@ describe('<portal-navigation>', () => {
       expect(window.location.pathname, 'window.location.pathname').to.equal('/');
       expect(detail.url, 'detail.url').to.equal('/some/path/parent8?foo=bar');
     });
+
+    it('dispatches the "routeTo" event of the default item for items with an url', async () => {
+      const el: PortalNavigation = await fixture(html` <portal-navigation src="${TEST_DATA_JSON_PATH}" currentapplication="app1"></portal-navigation>`);
+      await childrenRendered(el);
+
+      setTimeout(() => (<HTMLAnchorElement>el.shadowRoot!.querySelector('[part~="item-parent10"]')).click());
+      const { detail } = await oneEvent(el, 'portal-navigation.routeTo');
+
+      expect(window.location.pathname, 'window.location.pathname').to.equal('/');
+      expect(detail.url, 'detail.url').to.equal('/some/parent10/child-path#2');
+    });
   });
 
   describe('Translations', () => {