Tests: Add test for tabs

Author: lamATnginx

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 = parseInt(
+				labelId.substring(labelId.lastIndexOf("-") + 1),
+			);
+
+			await label.click();
+			const content = tabContents.locator(`#${title}-panel-${labelIndex}`);
+			await expect(content).toBeVisible();
+		}
+	});
+});