Tests: Added new UI smoke tests

Author: lamATnginx

layouts/404.html

@@ -1,7 +1,7 @@
 {{ define "main"}}
 
-<div class="content">
-    <div class="not-found-container">
+<div class="content" data-testid="content">
+    <div class="not-found-container" data-testid="not-found-container">
         <h1 class="info-header">
           HTTP 404 - Page not found
         </h1>

layouts/_default/baseof.html

@@ -43,17 +43,17 @@
     {{ end }}
     <input type="checkbox" id="sidebar-panel" class="sidebar-panel" hidden/>
     <div class="grid-container">
-        <aside class="sidebar">
+        <aside class="sidebar" data-testid="sidebar">
             {{ partial "sidebar-v2.html" . }}
         </aside>
 
-        <header class="header">
+        <header class="header" data-testid="header">
             {{ block "header" . }}{{end}}
         </header>
 
         {{ block "main" . }}{{ end }}
 
-        <footer class="footer">
+        <footer class="footer" data-testid="footer">
             {{ block "footer-v2" . }}
             {{ partial "footer-v2.html" . }}
             {{ end }}

layouts/_default/list.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<main class="content " role="main">
+<main class="content " role="main" data-testid="content">
 <section class="main-layout">
     <section id="maincontent" class="content-layout">
     <div data-cms-edit="content" class="text-content list-page">

layouts/_default/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<main class="content">
+<main class="content" data-testid="content">
     <!-- Replace icons -->
     {{ $content := partial "icon-replacement.html" (dict "content" .Content) }}
 

layouts/partials/api.html

@@ -1,6 +1,6 @@
 <!--Use wide page layout for the API reference pages-->
   <div class="nginx-docs-api-container">     
-    <div id="api-component" class="content">
+    <div id="api-component" class="content" data-testid="content">
       {{ .Content}}
     </div>
   </div>

layouts/partials/sidebar-list.html

@@ -3,7 +3,7 @@
 {{ $firstSection := .firstSection }}
 {{ $idPrefix := .idPrefix }}
 {{ with $firstSection }}
-<ul class="sidebar__ul">
+<ul class="sidebar__ul" data-testid="sidebar__ul">
   {{ $pages := .Pages.ByWeight }}
   {{ range $index, $p := $pages }}
     {{- $onPage := eq $currentUrl $p.Permalink -}}
@@ -14,10 +14,11 @@
     {{- $nextIndex := add $index 1 -}}
     {{- $nextLink := index $pages $nextIndex -}}
     {{ if eq $p.Kind "section" }}
-      <li class="sidebar__section">
+      <li class="sidebar__section" data-testid="sidebar__section">
         <button
           id="{{ $linkID }}"
           class="sidebar__toggle {{ if $isAncestor }}sidebar__toggle--ancestor{{ end }}"
+          data-testid="sidebar__section__toggle"
           aria-expanded="{{ $shouldExpand }}"
           aria-controls="{{ $sectionID }}"
         >
@@ -33,7 +34,7 @@
         >
         {{ if and .Content (gt (len .Pages) 0) }}
             <ul>
-              <li class="sidebar__page">
+              <li class="sidebar__page" data-testid="sidebar__page">
                 <a
                   href="{{ $p.Permalink }}"
                   class="sidebar__link {{ if $onPage }}sidebar__link--current{{ end }}"
@@ -57,7 +58,7 @@
       {{- $tocHasItems := (in $p.TableOfContents "<li>") -}}
       {{- $pageHasTOC := (and $onPage $tocHasItems $p.Params.toc) -}}
       {{- $tocID := printf "%stoc-%s" $idPrefix (urlize $p.Permalink) -}}
-      <li class="sidebar__page">
+      <li class="sidebar__page"  data-testid="sidebar__page">
         {{ if $pageHasTOC }}
           <button
             class="sidebar__toggle sidebar__link sidebar__link--current"

layouts/partials/sidebar-v2.html

@@ -34,7 +34,7 @@
             </label>
         </div>
     </div>
-    <div class="sidebar__content">
+    <div class="sidebar__content" data-testid="sidebar__content">
         <a class="skip-link" href="#maincontent">Skip Navigation</a>
         {{ partial "sidebar-list.html" (dict
         "firstSection" .FirstSection

layouts/redoc/single.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<main class="content content__redocly">
+<main class="content content__redocly" data-testid="content">
     <div id="api-component">{{ .Content}}</div>
 </main>
 

tests/playwright.config.js

@@ -21,14 +21,6 @@ export default defineConfig({
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
     },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-    {
-      name: 'Mobile Chrome',
-      use: { ...devices['Pixel 5'] },
-    },
   ],
   webServer: {
     command: `cd ../exampleSite && hugo mod get && hugo --gc --config hugo.toml,hugo.test.toml && hugo serve --port ${PORT} --config hugo.toml,hugo.test.toml`,

tests/src/product-landing-smoke.spec.js

@@ -0,0 +1,15 @@
+import { test } from '@playwright/test';
+import { runSmokeTest } from './util';
+
+test.describe('Smoke test', () => {
+  test('should test each product landing page renders correctly', async ({
+    page,
+  }) => {
+    const products = ['test-products', 'nginx'];
+
+    for (const product of products) {
+      await page.goto(`/${product}/`);
+      await runSmokeTest(page);
+    }
+  });
+});

tests/src/sidebar-smoke.spec.js

@@ -0,0 +1,57 @@
+import { test, expect } from '@playwright/test';
+import { runSmokeTest } from './util';
+
+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.locator(
+        'data-testid=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 = await page.locator('data-testid=content');
+  await content.waitFor();
+}
+
+test.describe('Smoke test', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`/test-product/`);
+  });
+
+  test('should test each section page on sidebar renders', async ({ page }) => {
+    /* Click on each link */
+    const sidebarPages = await page.locator('data-testid=sidebar__page').all();
+    for (const sidebarPage of sidebarPages) {
+      await openPage(page, sidebarPage);
+      await runSmokeTest(page);
+    }
+  });
+});

tests/src/util.js

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+
+export async function runSmokeTest(page) {
+  /* Ensure each page follows the following dom structure */
+  await expect(await page.locator('data-testid=content').count()).toBeTruthy();
+  await expect(await page.locator('data-testid=header').count()).toBeTruthy();
+  await expect(await page.locator('data-testid=sidebar').count()).toBeTruthy();
+  await expect(await page.locator('data-testid=footer').count()).toBeTruthy();
+  await expect(
+    await page.locator('data-testid=not-found-container').count()
+  ).toBe(0);
+}