Tests: Refactor sidebar test (#451)

Author: lamATnginx

assets/js/product-selector.js

@@ -60,10 +60,6 @@
 
 {{ end }}
 
-<!-- Load Product Selector javascript -->
-{{ $jsProductSelector := resources.Get "js/product-selector.js" | minify | fingerprint "sha512" }}
-<script src="{{ $jsProductSelector.RelPermalink }}" type="text/javascript" integrity="{{ $jsProductSelector.Data.Integrity }}"></script>
-
 <!-- Load Sidebar v2 javascript -->
 {{ $jsSidebarV2 := resources.Get "js/sidebar-v2.js" | minify | fingerprint "sha512" }}
 <script src="{{ $jsSidebarV2.RelPermalink }}" type="text/javascript" integrity="{{ $jsSidebarV2.Data.Integrity }}"></script>

layouts/partials/scripts.html

@@ -23,7 +23,7 @@
           aria-controls="{{ $sectionID }}"
         >
           <span class="sidebar__toggle-text">{{ $p.LinkTitle }}</span>
-          <span class="sidebar__chevron {{ if $shouldExpand }}sidebar__chevron--open{{ end }}">
+          <span class="sidebar__chevron {{ if $shouldExpand }}sidebar__chevron--open{{ end }}" data-testid="sidebar__chevron">
             {{ partial "lucide" (dict "context" . "icon" "chevron-right") }}
           </span>
         </button>
@@ -38,6 +38,7 @@
                 <a
                   href="{{ $p.Permalink }}"
                   class="sidebar__link {{ if $onPage }}sidebar__link--current{{ end }}"
+                  data-testid="sidebar__link"
                   {{ if $onPage }}aria-current="page"{{ end }}
                 >
                   Overview
@@ -62,12 +63,13 @@
         {{ if $pageHasTOC }}
           <button
             class="sidebar__toggle sidebar__link sidebar__link--current"
+            data-testid="sidebar__section__toggle"
             aria-expanded="true"
             aria-controls="{{ $tocID }}"
             id="{{ $linkID }}"
           >
             <span>{{ $p.LinkTitle }} {{ partial "commercial-feature.html" $p }}</span>
-            <span class="sidebar__chevron sidebar__chevron--open">
+            <span class="sidebar__chevron sidebar__chevron--open" data-testid="sidebar__chevron">
               {{ partial "lucide" (dict "context" . "icon" "chevron-right") }}
             </span>
           </button>
@@ -86,6 +88,7 @@
             id="{{ $linkID }}"
             class="sidebar__link {{ if $onPage }}sidebar__link--current{{ end }}"
             {{ if $onPage }}aria-current="page"{{ end }}
+            data-testid="sidebar__link"
           >
               <span>{{ $p.LinkTitle }} {{ partial "commercial-feature.html" $p }}</span>
           </a>

layouts/partials/sidebar-list.html

@@ -51,15 +51,15 @@
                       {{ partial "lucide" (dict "context" . "icon" "chevron-right") }}
                     </span>
                 </summary>
-                <div class="product-selector__content">
+                <div class="product-selector__content" data-testid="product-selector__content">
                 {{ with index .Site.Data "product-selector" }}
                   {{ $groups := . }}
                   {{ range $group := $groups }}
                     <h3 class="product-selector__product-group">{{ $group.productGroup }}</h3>
                     <ul>
                       {{ $products := sort $group.products "productOrder" }}
                       {{ range $product := $products }}
-                        <li class="product-selector__product">
+                        <li class="product-selector__product" data-testid="product-selector__product">
                           <a
                             href="{{ absURL $product.url }}"
                             aria-label="{{ $product.title }} documentation"

layouts/partials/sidebar-v2.html

@@ -1,69 +1,94 @@
 import { expect, test } from '@playwright/test';
 import { handleConsentPopup, runSmokeTestOnPage, waitFor } from './utils';
 
-async function openPage(page, sidebarPage) {
-  // Find all toggles
-  let currentElement = sidebarPage;
-  const toggles = [];
-
-  while (currentElement) {
-    const parentElement = await currentElement.locator('..');
-    const isSuperParent = await parentElement.evaluate(
-      (el) => el.getAttribute('data-testid') === 'sidebar__content'
-    );
-    if (isSuperParent) break;
-
-    const parentElementClass = await parentElement.getAttribute('class');
-    if (parentElementClass === 'sidebar__section') {
-      const toggle = parentElement.getByTestId('sidebar__section__toggle');
-      if ((await toggle.count()) > 0) {
-        toggles.unshift(toggle.first());
-      }
-    }
-
-    currentElement = parentElement;
-  }
-
-  // Click all toggles found top-down
-  for (const toggle of toggles) {
-    const isCollapsed =
-      (await toggle.first().getAttribute('aria-expanded')) === 'false';
-    if (isCollapsed) {
-      await toggle.first().click();
-    }
-  }
-
-  // Click on the page
-  await sidebarPage.click();
-  const content = page.getByTestId('content');
-  await content.waitFor();
-}
-
 test.describe('Smoke test for sidebar', () => {
   // Slow test
   test.setTimeout(100_000);
 
   test.beforeEach(async ({ page }) => {
     await page.goto('/test-product/');
     await page.waitForLoadState('load');
+    await waitFor(async () => await handleConsentPopup(page));
   });
 
   test('sidebar renders', async ({ page }) => {
-    await expect(
-      await page.getByTestId('sidebar__header').count()
-    ).toBeTruthy();
-    await expect(
-      await page.getByTestId('sidebar__content').count()
-    ).toBeTruthy();
+    await expect(page.getByTestId('sidebar__header')).toBeVisible();
+    await expect(page.getByTestId('product-selector')).toBeVisible();
+    await expect(page.getByTestId('sidebar__content')).toBeVisible();
   });
 
-  test('each section page on sidebar renders', async ({ page }) => {
-    /* Click on each link */
-    const sidebarPages = await page.getByTestId('sidebar__page').all();
-    for (const sidebarPage of sidebarPages) {
-      await waitFor(async () => await handleConsentPopup(page));
-      await openPage(page, sidebarPage);
-      await runSmokeTestOnPage(page);
+  test('product selector renders when clicked', async ({ page }) => {
+    // Click on product selector
+    const productSelector = page.getByTestId('product-selector');
+    await productSelector.click();
+
+    // Ensure the product selector has items visible
+    const productSelectorContent = productSelector.getByTestId(
+      'product-selector__content'
+    );
+    const products = await productSelectorContent
+      .getByTestId('product-selector__product')
+      .all();
+
+    expect(products.length).toBeGreaterThan(0);
+    for (const product of products) {
+      await expect(product).toBeVisible();
     }
   });
+
+  test('clicking on a link', async ({ page }) => {
+    // Greedy logic assumes there is at least one link without having to open a dropdown.
+
+    // Fetch only visible links (aka ones not nested in a dropdown)
+    const sidebarContent = page.getByTestId('sidebar__content');
+    const pages = await sidebarContent.getByTestId('sidebar__page').all();
+    const visibleResults = await Promise.all(
+      pages.map(async (page) => await page.isVisible())
+    );
+    const visiblePages = pages.filter((_, index) => visibleResults[index]);
+    expect(visiblePages.length).toBeGreaterThan(0);
+
+    // Click on link
+    const firstPage = visiblePages.at(0);
+    await firstPage.click();
+    await waitFor(async () => await handleConsentPopup(page));
+    const content = page.getByTestId('content');
+    await content.waitFor();
+
+    // Run smoke test to validate page is not 404
+    await runSmokeTestOnPage(page);
+  });
+
+  test('clicking on a dropdown', async ({ page }) => {
+    // Greedy logic assumes there is at least one dropdown at the first level.
+
+    // Fetch only visible dropdowns (aka ones not nested in a dropdown)
+    const sidebarContent = page.getByTestId('sidebar__content');
+    const dropdowns = await sidebarContent
+      .getByTestId('sidebar__section__toggle')
+      .all();
+    const visibleResults = await Promise.all(
+      dropdowns.map(async (dropdown) => await dropdown.isVisible())
+    );
+    const visibleDropdowns = dropdowns.filter(
+      (_, index) => visibleResults[index]
+    );
+
+    // Since it is not guaranteed there will be any links under a dropdown, we should check the chevron changes.
+    // Also this should not check if links work. That is the job of the 'clicking on a link' test.
+    const firstDropdown = visibleDropdowns.at(0);
+    const chevron = (
+      await firstDropdown.getByTestId('sidebar__chevron').all()
+    ).at(0);
+    const openClassName = 'sidebar__chevron--open';
+    expect(await chevron.getAttribute('class')).not.toContain(openClassName);
+
+    // Open the dropdown
+    await firstDropdown.click();
+    expect(await chevron.getAttribute('class')).toContain(openClassName);
+
+    // Close the dropdown
+    await firstDropdown.click();
+    expect(await chevron.getAttribute('class')).not.toContain(openClassName);
+  });
 });