Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MWPW-162711][NALA] Update Table block tests to validate tooltip information #3267

Merged
merged 1 commit into from
Dec 5, 2024
Merged

[MWPW-162711][NALA] Update Table block tests to validate tooltip information #3267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 73 additions & 44 deletions nala/blocks/table/table.page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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();
}
}
}
}
}
Loading
Loading