Merge pull request #33 from jbpratt/root-navigation

k8s-ci-robot · web-flow · commit cde3eff8a2d3 · 2025-08-08T11:01:43.000-07:00
fix: resolve navigation bug and set title
diff --git a/web/index.html b/web/index.html
@@ -17,7 +17,7 @@
       background-color: #ededed;
     }
   </style>
-  <title>List Reader</title>
+  <title>TestGrid</title>
 </head>
 
 <body>
diff --git a/web/src/testgrid-data-content.ts b/web/src/testgrid-data-content.ts
@@ -82,16 +82,6 @@ export class TestgridDataContent extends LitElement {
       this.highlightIndex(this.tabName);
       navigateTab(this.dashboardName, this.tabName!);
     });
-    window.addEventListener('popstate', () => {
-      console.log(window.location.pathname);
-      console.log(window.location.pathname.split('/'));
-      if (location.pathname.split('/').length === 2) {
-        this.showTab = false;
-        this.tabName = undefined;
-        this.highlightIndex(this.tabName);
-        navigateTab(this.dashboardName, this.tabName!);
-      }
-    });
   }
 
   /**
diff --git a/web/src/testgrid-router.ts b/web/src/testgrid-router.ts
@@ -46,15 +46,28 @@ export class TestgridRouter extends LitElement {
     },
   ]);
 
+  private goToCurrentPath = () => this.router.goto(window.location.pathname);
+
   /**
    * Lit-element lifecycle method.
    * Invoked when a component is added to the document's DOM.
    */
   connectedCallback() {
     super.connectedCallback();
-    window.addEventListener('location-changed', () => {
-      this.router.goto(window.location.pathname);
-    });
+    window.addEventListener('location-changed', this.goToCurrentPath);
+    window.addEventListener('popstate', this.goToCurrentPath);
+    // Ensure initial render reflects current URL (including direct loads on nested paths)
+    this.goToCurrentPath();
+  }
+
+  /**
+   * Lit-element lifecycle method.
+   * Invoked when a component is removed from the document's DOM.
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('location-changed', this.goToCurrentPath);
+    window.removeEventListener('popstate', this.goToCurrentPath);
   }
 
   /**
diff --git a/web/src/utils/navigation.ts b/web/src/utils/navigation.ts
@@ -15,12 +15,13 @@ export function navigate(name: string) {
  * @param {string} dashboard
  * @param {string} tab
  */
-export function navigateTab(dashboard: string, tab: string) {
+export function navigateTab(dashboard: string, tab?: string) {
   const url = new URL(window.location.href);
   if (tab === 'Summary' || tab === undefined) {
     url.pathname = `${dashboard}`;
   } else {
     url.pathname = `${dashboard}/${tab}`;
   }
   window.history.pushState(null, '', url);
+  window.dispatchEvent(new CustomEvent('location-changed'));
 }
diff --git a/web/test/testgrid-router.test.ts b/web/test/testgrid-router.test.ts
@@ -0,0 +1,55 @@
+import {
+  html,
+  fixture,
+  defineCE,
+  unsafeStatic,
+  expect,
+  waitUntil,
+  aTimeout,
+} from '@open-wc/testing';
+
+import { TestgridRouter } from '../src/testgrid-router.js';
+import { navigate } from '../src/utils/navigation.js';
+
+describe('Testgrid Router navigation', () => {
+  let element: TestgridRouter;
+
+  beforeEach(async () => {
+    // Ensure we start from root
+    window.history.replaceState(null, '', '/');
+
+    const tagName = defineCE(class extends TestgridRouter {});
+    const tag = unsafeStatic(tagName);
+    element = await fixture(html`<${tag}></${tag}>`);
+  });
+
+  it('renders the index at root and returns to it with history.back()', async () => {
+    await waitUntil(
+      () => element.shadowRoot!.querySelector('testgrid-index'),
+      'Router did not render the index at root',
+      { timeout: 4000 }
+    );
+    expect(window.location.pathname).to.equal('/');
+
+    navigate('fake-dashboard-1');
+
+    await waitUntil(
+      () => element.shadowRoot!.querySelector('testgrid-data-content'),
+      'Router did not navigate to dashboard route',
+      { timeout: 4000 }
+    );
+    expect(window.location.pathname).to.equal('/fake-dashboard-1');
+
+    window.history.back();
+    await aTimeout(0);
+
+    await waitUntil(
+      () =>
+        window.location.pathname === '/' &&
+        !!element.shadowRoot!.querySelector('testgrid-index'),
+      'Router did not navigate back to root and render index',
+      { timeout: 4000 }
+    );
+  });
+});
+

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`background-color: #ededed;`
`18`	`18`	`}`
`19`	`19`	`</style>`
`20`		`- <title>List Reader</title>`
	`20`	`+ <title>TestGrid</title>`
`21`	`21`	`</head>`
`22`	`22`
`23`	`23`	`<body>`