[MWPW-162711][NALA] Update Table block tests to validate tooltip info…

…rmation (#3267) update table tests with tooltip Co-authored-by: Santoshkumar Sharanappa Nateekar <nateekar@santoshumarsmbp.corp.adobe.com>
adobecom · Dec 5, 2024 · 11b61cc · 11b61cc
1 parent 44ee6f1
commit 11b61cc
Show file tree

Hide file tree

Showing 3 changed files with 628 additions and 200 deletions.
diff --git a/nala/blocks/table/table.page.js b/nala/blocks/table/table.page.js
@@ -1,4 +1,7 @@
 /* eslint-disable no-return-await */
+
+import { expect } from '@playwright/test';
+
 export default class Table {
   constructor(page, nth = 0) {
     this.page = page;
@@ -9,67 +12,93 @@ export default class Table {
     this.collapseStickyTable = this.page.locator('.table.highlight.collapse.sticky').nth(nth);
     this.merchTable = this.page.locator('.table.merch').nth(nth);
     this.merchHighlightStickyTable = this.page.locator('.table.merch.highlight.sticky').nth(nth);
+    this.merchPricingBottom = this.page.locator('.table.merch.pricing-bottom').nth(nth);
+    this.merchButtonRight = this.page.locator('.table.merch.button-right').nth(nth);
 
     this.highlightRow = this.table.locator('.row-highlight');
+    this.highlightRowColumns = this.highlightRow.locator('.col');
+
     this.headingRow = this.table.locator('.row-heading');
+    this.headingRowColumns = this.headingRow.locator('.col');
+
     this.stickyRow = this.table.locator('.row-heading');
 
-    this.headingRowColumns = this.headingRow.locator('.col');
     this.rows = this.table.locator('.row');
     this.sectionRows = this.table.locator('.section-row');
   }
 
-  async getHighlightRowColumnTitle(colIndex) {
-    return await this.highlightRow.locator('.col-highlight').nth(colIndex);
+  // Verify Table Highlight Row
+  async verifyHighlightRow(data) {
+    for (const { colIndex, visibility, style, text } of data.highlightRow) {
+      const highlightRowColumn = await this.highlightRow.locator('.col-highlight').nth(colIndex);
+      if (visibility) {
+        await expect(await highlightRowColumn).toContainText(text);
+        if (style) {
+          await expect(await highlightRowColumn).toHaveAttribute('style', style);
+        }
+      }
+    }
   }
 
-  async getHeaderColumnTitle(colIndex) {
-    const headerColumn = await this.headingRow.locator(`.col-${colIndex}`);
-    return headerColumn.locator('.tracking-header');
-  }
+  // Verify Table Header Row
+  async verifyHeaderRow(data, tableType = '') {
+    for (const headerCell of data.headerRow) {
+      const {
+        colIndex, heading, pricingText, additionalText, tooltip, buttons,
+      } = headerCell;
 
-  async getHeaderColumnPricing(colIndex) {
-    const headerColumn = await this.headingRow.locator(`.col-${colIndex}`);
-    return headerColumn.locator('.pricing');
-  }
+      const headerColumn = await this.headingRow.locator(`.col-${colIndex}`);
 
-  async getHeaderColumnImg(colIndex) {
-    const headerColumn = await this.headingRow.locator(`.col-${colIndex}`);
-    return headerColumn.locator('img');
-  }
+      await expect(await headerColumn.locator('.tracking-header')).toContainText(heading);
+      await expect(await headerColumn.locator('.pricing')).toContainText(pricingText);
 
-  async getHeaderColumnAdditionalText(colIndex) {
-    const headerColumn = await this.headingRow.locator(`.col-${colIndex}`);
-    return headerColumn.locator('p').nth(3);
-  }
-
-  async getHeaderColumnOutlineButton(colIndex) {
-    const headerColumn = await this.headingRow.locator(`.col-${colIndex}`);
-    return headerColumn.locator('.con-button.outline');
-  }
-
-  async getHeaderColumnBlueButton(colIndex) {
-    const headerColumn = await this.headingRow.locator(`.col-${colIndex}`);
-    return headerColumn.locator('.con-button.blue');
-  }
-
-  async getSectionRowTitle(index) {
-    const sectionRow = await this.table.locator('.section-row').nth(index);
-    return sectionRow.locator('.section-row-title');
-  }
+      // verify the additional text based on table type
+      if (additionalText) {
+        if (tableType === 'bottom-pricing') {
+          await expect(await headerColumn.locator('p').nth(2)).toContainText(additionalText);
+        } else {
+          await expect(await headerColumn.locator('p').nth(3)).toContainText(additionalText);
+        }
+      }
+      // verify tooltip information
+      if (tooltip) {
+        const headerColumnTooltip = await headerColumn.locator('.milo-tooltip');
+        await expect(await headerColumnTooltip.locator('.icon-milo-info')).toBeVisible();
+        await expect(await headerColumnTooltip).toHaveAttribute('data-tooltip', tooltip.tooltipText);
+        await headerColumnTooltip.hover();
+      }
 
-  async getSectionRowMerchContent(index) {
-    const sectionRow = await this.table.locator('.section-row').nth(index);
-    return sectionRow.locator('.col-merch-content').nth(0);
+      // verify buttons
+      if (buttons && buttons.length > 0) {
+        for (const button of buttons) {
+          await expect(await headerColumn.locator(`.con-button.${button.type}`).nth(0)).toContainText(button.text);
+          if (button.justifycontent) {
+            await expect(await headerColumn.locator('.buttons-wrapper')).toHaveCSS('justify-content', button.justifycontent);
+          }
+        }
+      }
+    }
   }
 
-  async getSectionRowMerchContentImg(index) {
-    const sectionRow = await this.table.locator('.section-row').nth(index);
-    return sectionRow.locator('.col-merch-content img');
-  }
+  // Verify Table Section Rows
+  async verifySectionRow(data) {
+    for (const sectionRow of data.sectionRows) {
+      const { rowIndex, columns } = sectionRow;
+      const secRow = await this.table.locator('.section-row').nth(rowIndex);
+      for (const column of columns) {
+        const sectionRowColumn = await secRow.locator(`.col-${column.colIndex}`);
+        await expect(await sectionRowColumn).toContainText(column.text);
 
-  async getSectionRowCell(rowIndex, colIndex) {
-    const sectionRow = await this.table.locator('.section-row').nth(rowIndex);
-    return sectionRow.locator(`.col-${colIndex}`);
+        if (column.imageVisible) {
+          await expect(await sectionRowColumn.locator('.col-merch-content img')).toBeVisible();
+        }
+        if (column.tooltip) {
+          const tooltip = await sectionRowColumn.locator('.milo-tooltip');
+          await expect(await tooltip.locator('.icon-milo-info')).toBeVisible();
+          await expect(await tooltip).toHaveAttribute('data-tooltip', column.tooltipText);
+          await tooltip.hover();
+        }
+      }
+    }
   }
 }