From 127dbc036a201ae2baeec13bede38253245475ea Mon Sep 17 00:00:00 2001
From: Lam Nguyen <la.nguyen@f5.com>
Date: Tue, 30 Sep 2025 11:52:35 -0700
Subject: [PATCH] Tests: Add tests to mermaid grid

---
 tests/src/mermaid.spec.js | 53 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 tests/src/mermaid.spec.js

diff --git a/tests/src/mermaid.spec.js b/tests/src/mermaid.spec.js
new file mode 100644
index 00000000..ea158631
--- /dev/null
+++ b/tests/src/mermaid.spec.js
@@ -0,0 +1,53 @@
+import { expect, test } from '@playwright/test';
+import { handleConsentPopup, waitFor } from './util';
+
+async function getPropertyValue(element, property) {
+  return element.evaluate(
+    (el, property) => window.getComputedStyle(el).getPropertyValue(property),
+    property
+  );
+}
+
+async function validateDiagramsGrid(diagrams, expectedGridColumn) {
+  for (const diagram of diagrams) {
+    const gridColumn = await getPropertyValue(diagram, 'grid-column');
+    expect(gridColumn.trim()).toBe(expectedGridColumn);
+  }
+}
+
+test.describe('Testing for mermaid', () => {
+  test.beforeEach(async ({ page }) => {
+    const mermaidUrl = 'test-product/mermaid/mermaid-grid';
+    await page.goto(`/${mermaidUrl}`);
+    await page.waitForLoadState('load');
+    await waitFor(async () => await handleConsentPopup(page));
+  });
+
+  test('options', async ({ page }) => {
+    // Wide
+    let expectedGridColumn = '1 / -1';
+    const wideDiagrams = await page.locator('[data-grid="wide"]').all();
+    await validateDiagramsGrid(wideDiagrams, expectedGridColumn);
+
+    // Last third
+    expectedGridColumn = '8 / -1';
+    const lastThirdDiagrams = await page
+      .locator('[data-grid="last-third"]')
+      .all();
+    await validateDiagramsGrid(lastThirdDiagrams, expectedGridColumn);
+
+    // First third
+    expectedGridColumn = '1 / 4';
+    const firstThirdDiagrams = await page
+      .locator('[data-grid="first-third"]')
+      .all();
+    await validateDiagramsGrid(firstThirdDiagrams, expectedGridColumn);
+
+    // First two thirds
+    expectedGridColumn = '1 / 8';
+    const firstTwoThirdsDiagrams = await page
+      .locator('[data-grid="first-two-third"]')
+      .all();
+    await validateDiagramsGrid(firstTwoThirdsDiagrams, expectedGridColumn);
+  });
+});