Tests: Add test for tabs

Author: lamATnginx

Makefile

@@ -6,13 +6,13 @@ WRITE_FLAG := --write
 list help::
 	$(info Available Make targets:)
 	@echo "<COMMON>"
-	@echo "		  list | help:  		Print these available make targets"
+	@echo "		  list | help:  	Print these available make targets"
 	@echo "<LINTING AND FORMATTING>"
 	@echo "		 biome-format: 		Runs the biome formatter."
 	@echo "		   biome-lint: 		Runs the biome linter."
 	@echo "		    biome-all:		Runs both the lint and formatting commands."
 	@echo "	   build-example-site:		Builds hugo exampleSite."
-	@echo "  (Set BIOME_ARGS to add additional arguments to biome command (ex: make biome-all BIOME_ARGS=write))"
+	@echo "(Set BIOME_ARGS to add additional arguments to biome command (ex: make biome-all BIOME_ARGS=write))"
 	@echo "<PRE-COMMIT>"
 	@echo "	     setup-pre-commit:		Sets up pre-commit (assuming it is installed)"
 	@echo "<PLAYWRIGHT TESTS>"

exampleSite/content/test-product/tab-group/tab-group.md

@@ -6,6 +6,7 @@ weight: 200
 
 ## tab-group
 
+<div data-testid="tabs-test__basic">
 {{<tabs name="common_steps_for_nginx_oss_and_plus">}}
 
 {{%tab name="Call Outs"%}}
@@ -65,6 +66,7 @@ nginx -s reload
 
 
 {{</tabs>}}
+</div>
 
 
 ## Much nested tab group

layouts/shortcodes/tabs.html

@@ -2,18 +2,18 @@
 {{- $tab_set_id := .Get "name" | default (printf "tabset-%s-%d" (.Page.RelPermalink) (.Page.Scratch.Get "tabset-counter") ) | anchorize -}}
 {{- $tabs := .Scratch.Get "tabs" -}}
 {{- if .Inner -}}
-  <div class="tabs-container" id="{{ $tab_set_id }}">
+  <div class="tabs-container" id="{{ $tab_set_id }}" data-testid="tabs-container">
     {{- range $i, $e := $tabs -}}
-	  {{- $id := printf "%s-tab%d" $tab_set_id $i -}}
+	  {{- $id := printf "%s-tab-%d" $tab_set_id $i -}}
       {{- if eq $i 0 -}}
         <input type="radio" name="{{$tab_set_id}}" id="{{$id}}" aria-hidden="true" checked="checked">
       {{- else -}}
         <input type="radio" name="{{$tab_set_id}}" id="{{$id}}" aria-hidden="true">
       {{- end -}}
 	{{- end -}}
-	<ul class="tab-labels" role="tablist" id="{{ $tab_set_id }}" data-testid="labels-{{ $tab_set_id }}">
+	<ul class="tab-labels" role="tablist" id="{{ $tab_set_id }}" data-testid="tab-labels">
 	  {{- range $i, $e := $tabs -}}
-	  	{{- $id := printf "%s-tab%d" $tab_set_id $i -}}
+	  	{{- $id := printf "%s-tab-%d" $tab_set_id $i -}}
 		<li>
 		  {{- if eq $i 0 -}}
 			<label class="tab-label" role="tab" id="{{$id}}" for="{{$id}}" aria-controls="{{ $id }}" aria-selected="true" tabindex="0" data-testid="tab-label">
@@ -27,10 +27,10 @@
 		</li>
 	  {{- end -}}
 	</ul>
-	<div class="tab-contents" data-testid="contents-{{ $tab_set_id }}">
+	<div class="tab-contents" data-testid="tab-contents">
 	  {{- range $i, $e := $tabs -}}
 	    {{- $id := printf "%s-panel%d" $tab_set_id $i -}}
-		<div class="tab-content" role="tabpanel" id="{{ $tab_set_id }}-panel{{ $i }}" aria-labelledby="{{ $id }}">
+		<div class="tab-content" role="tabpanel" id="{{ $tab_set_id }}-panel-{{ $i }}" aria-labelledby="{{ $id }}" data-testid="tab-content">
 		  {{ with .content }}
 			{{ . }}
 		  {{ end }}

tests/src/tabs.spec.js

@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test';
+import { handleConsentPopup, waitFor } from './util';
+
+test.describe('Testing for tabs shortcode', () => {
+  test.beforeEach(async ({ page }) => {
+    const tabsUrl = 'test-product/tab-group/tab-group/';
+    await page.goto(`/${tabsUrl}`);
+    await waitFor(async () => await handleConsentPopup(page));
+  });
+
+  test('tabs render', async ({ page }) => {
+    const section = await page.getByTestId('tabs-test__basic');
+    const tabsContainer = await section.getByTestId('tabs-container');
+    const tabLabels = await tabsContainer.getByTestId('tab-labels');
+    const tabContents = await tabsContainer.getByTestId('tab-contents');
+
+    expect(await tabsContainer.count()).toBeTruthy();
+    expect(await tabLabels.count()).toBeTruthy();
+    expect(await tabContents.count()).toBeTruthy();
+  });
+
+  test('tabs shift content when clicked', async ({ page }) => {
+    const section = await page.getByTestId('tabs-test__basic');
+    const tabsContainer = await section.getByTestId('tabs-container');
+    const tabLabels = await tabsContainer.getByTestId('tab-labels');
+    const tabContents = await tabsContainer.getByTestId('tab-contents');
+
+    const tabsList = await tabLabels.locator('li').all();
+    for (const tab of tabsList) {
+      const label = tab.getByTestId('tab-label');
+      const labelId = await label.getAttribute('id');
+      const title = labelId.substring(0, labelId.lastIndexOf('tab') - 1);
+      const labelIndex = Number.parseInt(
+        labelId.substring(labelId.lastIndexOf('-') + 1)
+      );
+
+      await label.click();
+      const content = tabContents.locator(`#${title}-panel-${labelIndex}`);
+      await expect(content).toBeVisible();
+    }
+  });
+});