Support already expanded navigation

Signed-off-by: Crevil <bjoern.soerensen@gmail.com>

plugins/techdocs/src/reader/transformers/scrollIntoNavigation.test.ts

@@ -15,66 +15,70 @@
  */
 
 import { scrollIntoNavigation } from '.';
+import { createTestShadowDom, FIXTURES } from '../../test-utils';
 
 jest.useFakeTimers();
 
 describe('scrollIntoNavigation', () => {
-  const transformer = scrollIntoNavigation();
-  const dom = { querySelectorAll: jest.fn().mockReturnValue([]) };
-
   afterEach(() => {
     jest.clearAllMocks();
   });
 
   it('scroll to active navigation item', async () => {
-    const scrollNavIntoView1 = jest.fn();
-    const scrollNavIntoView2 = jest.fn();
+    await createTestShadowDom(FIXTURES.FIXTURE_STANDARD_PAGE, {
+      preTransformers: [],
+      postTransformers: [scrollIntoNavigation()],
+    });
 
-    dom.querySelectorAll.mockReturnValue([
-      {
-        scrollIntoView: scrollNavIntoView1,
-        querySelector: jest.fn(),
-        click: jest.fn(),
-      },
-      {
-        scrollIntoView: scrollNavIntoView2,
-        querySelector: jest.fn(),
-        click: jest.fn(),
-      },
-    ]);
+    // jsdom does not implement scrollIntoView so we attach a function to the
+    // prototype to be able to test the expected behaviour.
+    const scrollNavIntoView = jest.fn();
+    window.HTMLElement.prototype.scrollIntoView = scrollNavIntoView;
 
-    transformer(dom as unknown as Element);
     jest.advanceTimersByTime(200);
 
-    expect(dom.querySelectorAll).toHaveBeenCalledWith(
-      expect.stringMatching('li.md-nav__item--active'),
-    );
-    expect(scrollNavIntoView1).not.toHaveBeenCalled();
-    expect(scrollNavIntoView2).toHaveBeenCalledWith();
+    expect(scrollNavIntoView).toHaveBeenCalledWith();
   });
 
   it('expand active navigation items', async () => {
-    const navItemClick1 = jest.fn();
-    const navItemClick2 = jest.fn();
-
-    dom.querySelectorAll.mockReturnValue([
+    const shadowDom = await createTestShadowDom(
+      FIXTURES.FIXTURE_STANDARD_PAGE,
       {
-        scrollIntoView: jest.fn(),
-        querySelector: jest.fn().mockReturnValue({ click: navItemClick1 }),
+        preTransformers: [],
+        postTransformers: [scrollIntoNavigation()],
       },
-      {
-        scrollIntoView: jest.fn(),
-        querySelector: jest.fn().mockReturnValue({ click: navItemClick2 }),
-      },
-    ]);
+    );
+
+    // jsdom does not implement scrollIntoView so we attach an empty function to
+    // support the behaviour.
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+
+    const click = jest.fn();
+    shadowDom.addEventListener('click', click);
 
-    transformer(dom as unknown as Element);
     jest.advanceTimersByTime(200);
 
-    expect(dom.querySelectorAll).toHaveBeenCalledWith(
-      expect.stringMatching('li.md-nav__item--active'),
+    expect(click).toHaveBeenCalled();
+  });
+
+  it('does not expand already expanded active navigation items', async () => {
+    const shadowDom = await createTestShadowDom(
+      FIXTURES.FIXTURE_STANDARD_PAGE_EXPANDED_NAVIGATION,
+      {
+        preTransformers: [],
+        postTransformers: [scrollIntoNavigation()],
+      },
     );
-    expect(navItemClick1).toHaveBeenCalledWith();
-    expect(navItemClick2).toHaveBeenCalledWith();
+
+    // jsdom does not implement scrollIntoView so we attach an empty function to
+    // support the behaviour.
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+
+    const click = jest.fn();
+    shadowDom.addEventListener('click', click);
+
+    jest.advanceTimersByTime(200);
+
+    expect(click).not.toHaveBeenCalled();
   });
 });

plugins/techdocs/src/reader/transformers/scrollIntoNavigation.ts

@@ -23,10 +23,14 @@ export const scrollIntoNavigation = (): Transformer => {
       if (activeNavItems.length !== 0) {
         // expand all navigation items that are active
         activeNavItems.forEach(activeNavItem => {
-          activeNavItem?.querySelector('input')?.click();
+          const input = activeNavItem?.querySelector('input');
+          if (input && !input?.checked) {
+            input.click();
+          }
         });
-        // scroll to the last active navigation item
-        activeNavItems[activeNavItems.length - 1].scrollIntoView();
+
+        const lastItem = activeNavItems[activeNavItems.length - 1];
+        lastItem.scrollIntoView();
       }
     }, 200);
     return dom;

plugins/techdocs/src/test-utils/index.ts

@@ -15,9 +15,11 @@
  */
 
 import FIXTURE_STANDARD_PAGE from './fixtures/mkdocs-index';
+import FIXTURE_STANDARD_PAGE_EXPANDED_NAVIGATION from './fixtures/mkdocs-expanded-index';
 
 export const FIXTURES = {
   FIXTURE_STANDARD_PAGE,
+  FIXTURE_STANDARD_PAGE_EXPANDED_NAVIGATION,
 };
 
 export * from './shadowDom';