diff --git a/e2e-tests/playwright/e2e/catalog-timestamp.spec.ts b/e2e-tests/playwright/e2e/catalog-timestamp.spec.ts index 73b1e2d4d..3b85ef5ab 100644 --- a/e2e-tests/playwright/e2e/catalog-timestamp.spec.ts +++ b/e2e-tests/playwright/e2e/catalog-timestamp.spec.ts @@ -1,30 +1,56 @@ -import { expect, Page, test } from '@playwright/test'; - -import { UIhelperPO } from '../support/pageObjects/global-obj'; +import { Page, expect, test } from '@playwright/test'; import { UIhelper } from '../utils/UIhelper'; import { Common, setupBrowser } from '../utils/Common'; +import { CatalogImport } from '../support/pages/CatalogImport'; +import { UIhelperPO } from '../support/pageObjects/global-obj'; let page: Page; test.describe('Test timestamp column on Catalog', () => { let uiHelper: UIhelper; let common: Common; + let catalogImport: CatalogImport; + + const component = + 'https://github.com/janus-qe/custom-catalog-entities/blob/main/timestamp-catalog-info.yaml'; test.beforeAll(async ({ browser }, testInfo) => { page = (await setupBrowser(browser, testInfo)).page; common = new Common(page); uiHelper = new UIhelper(page); + catalogImport = new CatalogImport(page); await common.loginAsGithubUser(); }); - test('Verify `Created At` column in the Catalog Page', async () => { + test('Register an existing component', async () => { + await uiHelper.openSidebar('Catalog'); + await uiHelper.selectMuiBox('Kind', 'Component'); + await uiHelper.clickButton('Create'); + await uiHelper.clickButton('Register Existing Component'); + await catalogImport.registerExistingComponent(component); + }); + + test('Verify `Created At` column and value in the Catalog Page', async () => { await uiHelper.openSidebar('Catalog'); await uiHelper.verifyHeading('My Org Catalog'); + await uiHelper.selectMuiBox('Kind', 'Component'); + await uiHelper.verifyColumnHeading(['Created At'], true); + await uiHelper.verifyRowInTableByUniqueText('timestamp-test', [ + /^\d{1,2}\/\d{1,2}\/\d{1,4}, \d:\d{1,2}:\d{1,2} (AM|PM)$/g, + ]); + }); + + test('Toggle ‘CREATED AT’ to see if the component list can be sorted in ascending/decending order', async () => { + const createdAtFirstRow = + 'table > tbody > tr:nth-child(1) > td:nth-child(8)'; + //Verify by default Rows are in ascending + await expect(page.locator(createdAtFirstRow)).toBeEmpty(); const column = page .locator(`${UIhelperPO.MuiTableHead}`) .getByText('Created At', { exact: true }); - await expect(column).toBeVisible(); + await column.dblclick(); // Double click to Toggle into decending order. + await expect(page.locator(createdAtFirstRow)).not.toBeEmpty(); }); test.afterAll(async () => { diff --git a/e2e-tests/playwright/support/pages/CatalogImport.ts b/e2e-tests/playwright/support/pages/CatalogImport.ts index 3f416a292..e3cab0374 100644 --- a/e2e-tests/playwright/support/pages/CatalogImport.ts +++ b/e2e-tests/playwright/support/pages/CatalogImport.ts @@ -17,30 +17,12 @@ export class CatalogImport { await this.uiHelper.clickButton('Analyze'); // Wait for the visibility of either 'Refresh' or 'Import' button - try { - await this.page - .waitForSelector(this.uiHelper.getSelector('Refresh'), { - state: 'visible', - timeout: 10000, - }) - .then(async () => { - await this.uiHelper.clickButton('Refresh'); - expect( - await this.uiHelper.isBtnVisible('Register another'), - ).toBeTruthy(); - }) - .catch(async () => { - // If the 'Refresh' button does not appear, wait for the 'Import' button - await this.page.waitForSelector(this.uiHelper.getSelector('Import'), { - state: 'visible', - timeout: 10000, - }); - await this.uiHelper.clickButton('Import'); - await this.uiHelper.clickButton('View Component'); - }); - } catch (error) { - // Handle the general error if neither button can be located - console.error('Error while registering component:', error); + if (await this.uiHelper.isBtnVisible('Import')) { + await this.uiHelper.clickButton('Import'); + await this.uiHelper.clickButton('View Component'); + } else { + await this.uiHelper.clickButton('Refresh'); + expect(await this.uiHelper.isBtnVisible('Register another')).toBeTruthy(); } } } diff --git a/e2e-tests/playwright/utils/UIhelper.ts b/e2e-tests/playwright/utils/UIhelper.ts index e7c73c3d5..c46c5d000 100644 --- a/e2e-tests/playwright/utils/UIhelper.ts +++ b/e2e-tests/playwright/utils/UIhelper.ts @@ -7,22 +7,6 @@ export class UIhelper { constructor(page: Page) { this.page = page; - this.selectors = { - Analyze: 'button#analyze', - Refresh: 'button#refresh', - Import: 'button#import', - 'View Component': 'button#view-component', - 'Register another': 'button#register-another', - }; - } - - getSelector(buttonName: string): string { - /*eslint-disable-next-line no-prototype-builtins*/ - if (this.selectors.hasOwnProperty(buttonName)) { - return this.selectors[buttonName]; - } else { - throw new Error(`Selector not defined for button: ${buttonName}`); - } } async verifyComponentInCatalog(kind: string, expectedRows: string[]) { @@ -40,24 +24,26 @@ export class UIhelper { } async clickButton( - label: string, + label: string | RegExp, options: { exact?: boolean; force?: boolean } = { exact: true, force: false, }, ) { - const selector = `${UIhelperPO.MuiButtonLabel}:has-text("${label}")`; + const selector = `${UIhelperPO.MuiButtonLabel}`; const button = this.page .locator(selector) .getByText(label, { exact: options.exact }) .first(); await button.waitFor({ state: 'visible' }); + await button.waitFor({ state: 'attached' }); if (options?.force) { await button.click({ force: true }); } else { await button.click(); } + return button; } async verifyDivHasText(divText: string) { @@ -101,9 +87,16 @@ export class UIhelper { async isBtnVisible(text: string): Promise { const locator = `button:has-text("${text}")`; - await this.page.waitForSelector(locator); - const button = this.page.locator(locator); - return button.isVisible(); + try { + await this.page.waitForSelector(locator, { + state: 'visible', + timeout: 10000, + }); + const button = this.page.locator(locator); + return button.isVisible(); + } catch (error) { + return false; + } } async waitForSideBarVisible() {