Tests: Added test for header

Author: lamATnginx

layouts/partials/header.html

@@ -18,7 +18,7 @@
         </label>
     </div>
 
-    <div class="header__product-selector">
+    <div class="header__product-selector" data-testid="header__product-selector">
         {{ $nginxProducts := slice
             (dict "title" "NGINX One Console" "url" "/nginx-one" "type" "nginx-one")
             (dict "title" "NGINX Plus" "url" "/nginx" "type" "nginx-one")
@@ -43,7 +43,7 @@
         {{ $productIdentifier := index ((split $relPermalink "/")) 1 }}
         {{ $productName := index $productMap $productIdentifier | default "Product Documentation" }}
 
-        <button class="product-selector__button" id="product-selector-button">
+        <button class="product-selector__button" id="product-selector-button" data-testid="product-selector__button">
             {{/* product name and selector */}}
             <span class="product-name">{{ $productName }}</span>
             <span class="product-selector-button-icon">
@@ -52,7 +52,7 @@
                 </svg>
             </span>
         </button>
-        <div class="product-selector" id="product-selector">
+        <div class="product-selector" id="product-selector" data-testid="product-selector">
             {{ $groupedProducts := dict
                 "nginx-one" (where $nginxProducts "type" "nginx-one")
                 "nginx-app-protect" (where $nginxProducts "type" "nginx-app-protect")
@@ -63,7 +63,7 @@
             {{ range $orderedKeys }}
             {{ $type := . }}
             {{ $products := index $groupedProducts $type }}
-                <div class="product-selector-content" id="product-selector-content">
+                <div class="product-selector-content" id="product-selector-content" data-testid="product-selector-content">
                     <p>{{ $type | humanize | title | upper }}</p>
                     <ul>
                     {{ range $products }}
@@ -78,13 +78,13 @@
     </div>
 
     {{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
-      <div class="header__search">
+      <div class="header__search" data-testid="header__search">
         <!-- Standalone search box. -->
         {{ partial "coveo-atomic-search.html" }}
       </div>
     {{ end }}
 
-    <div class="header__f5sites">
+    <div class="header__f5sites" data-testid="header__f5sites">
     {{ $f5Sites := slice
       (dict "title" "DevCentral" "url" "https://community.f5.com/" "description" "Connect & learn in our hosted community")
       (dict "title" "MyF5" "url" "https://my.f5.com/" "description" "Your key to everything F5, including support, registration keys, and subscriptions")

tests/src/header-smoke.spec.js

@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Smoke test for header', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('should test header renders', async ({ page }) => {
+    await expect(
+      await page.locator('data-testid=header__product-selector').count()
+    ).toBeTruthy();
+    await expect(
+      await page.locator('data-testid=header__search').count()
+    ).toBeTruthy();
+    await expect(
+      await page.locator('data-testid=header__f5sites').count()
+    ).toBeTruthy();
+  });
+
+  test('should test product selector renders', async ({ page }) => {
+    // Check it renders
+    const productSelectorButton = await page.locator(
+      'data-testid=product-selector__button'
+    );
+    await productSelectorButton.click();
+    const productSelector = await page.locator('data-testid=product-selector');
+    await expect(productSelector.count()).toBeTruthy();
+
+    // Check it has four product groups. Usually this is frowned upon but is fine since it is a static number of groups for a while.
+    const productSelectorContent = productSelector.locator(
+      'data-testid=product-selector-content'
+    );
+    expect((await productSelectorContent.all()).length).toBe(4);
+  });
+});

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

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

tests/src/sidebar-smoke.spec.js

@@ -1,5 +1,5 @@
-import { test, expect } from '@playwright/test';
-import { runSmokeTest } from './util';
+import { test } from '@playwright/test';
+import { runSmokeTestOnPage } from './util';
 
 async function openPage(page, sidebarPage) {
   // Find all toggles
@@ -41,7 +41,7 @@ async function openPage(page, sidebarPage) {
   await content.waitFor();
 }
 
-test.describe('Smoke test', () => {
+test.describe('Smoke test for sidebar', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(`/test-product/`);
   });
@@ -51,7 +51,7 @@ test.describe('Smoke test', () => {
     const sidebarPages = await page.locator('data-testid=sidebar__page').all();
     for (const sidebarPage of sidebarPages) {
       await openPage(page, sidebarPage);
-      await runSmokeTest(page);
+      await runSmokeTestOnPage(page);
     }
   });
 });

tests/src/util.js

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test';
 
-export async function runSmokeTest(page) {
+export async function runSmokeTestOnPage(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();