[QE] Automate Scenario - Add timestamps to templates (#1261)

janus-idp · May 17, 2024 · e3654a5 · e3654a5
1 parent 905d9c9
commit e3654a5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 50 deletions.
diff --git 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
@@ -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
@@ -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<boolean> {
     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() {