Initial test conversion and some flaky test fixing.

infor-design · May 21, 2024 · ddc1632 · ddc1632
1 parent 36ad35b
commit ddc1632
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 7 deletions.
diff --git a/tests/base-fixture.ts b/tests/base-fixture.ts
@@ -40,8 +40,7 @@ export const test = baseTest.extend<CustomParameters>({
     }
   },
   eventsTest: async ({ page }, use) => {
-    const eventTest = new CustomEventTest(page);
-    await eventTest.initialize();
+    const eventTest = await (new CustomEventTest(page)).initialize();
     await use(eventTest);
   }
 });

diff --git a/tests/helper-fixture.ts b/tests/helper-fixture.ts
@@ -15,12 +15,23 @@ export class CustomEventTest {
 
   /**
    * Initialize the window variable to be used.
+   * @returns {CustomEventTest} returns CustomeEventTest
    */
-  async initialize() {
+  async initialize(): Promise<CustomEventTest> {
     await this.page.evaluate(() => {
       (window as any).eventsList = [];
     });
     this.isInitialized = true;
+    return this;
+  }
+
+  /**
+   * Set the page object where the events list is stored and validated.
+   * @param {Page} page page object
+   */
+  async setPage(page: Page) {
+    this.page = page;
+    await this.initialize();
   }
 
   /**
@@ -108,7 +119,7 @@ export class CustomEventTest {
     triggeredCount: number; }[]> {
     if (!this.isInitialized) throw new Error('Initialize is not called');
     const eventList = await this.getAllEvents();
-    return eventList.filter((item) => item.selector === selectorString);
+    return eventList.filter((item) => item.selector === selectorString) ?? [];
   }
 
   /**

diff --git a/tests/ids-input/ids-input.spec.ts b/tests/ids-input/ids-input.spec.ts
@@ -925,6 +925,7 @@ test.describe('IdsInput tests', () => {
         document.querySelector<IdsInput>('ids-input')!.value = 'x';
         document.querySelector<IdsInput>('ids-input')!.value = '';
       });
+      await page.locator('#test-input-internal-error').waitFor({ state: 'attached' });
       await expect(await page.locator('#test-input-internal-error')).toBeVisible();
     });
   });

diff --git a/tests/ids-popup/ids-popup.spec.ts b/tests/ids-popup/ids-popup.spec.ts
@@ -1,6 +1,6 @@
 import AxeBuilder from '@axe-core/playwright';
 import percySnapshot from '@percy/playwright';
-import { expect } from '@playwright/test';
+import { Locator, expect } from '@playwright/test';
 import { test } from '../base-fixture';
 
 import IdsPopup from '../../src/components/ids-popup/ids-popup';
@@ -106,4 +106,98 @@ test.describe('IdsPopup tests', () => {
       expect(await locator.getAttribute('aria-hidden')).toBe('true');
     });
   });
+
+  test.describe('IdsPopUp functionality test', () => {
+    let idsPopup: Locator;
+
+    test.beforeEach(async ({ page }) => {
+      idsPopup = await page.locator('#popup-1');
+    });
+
+    test('can set/get alignTarget', async ({ page }) => {
+      const idsTextElement = await page.locator('ids-text').first().evaluateHandle((node) => node);
+      const idsButtonElement = await page.locator('#popup-trigger-btn').evaluateHandle((node) => node);
+
+      // default alignment at ids-button
+      expect(await idsPopup.evaluate((
+        element: IdsPopup,
+        handle
+      ) => element.alignTarget!.isSameNode(handle), idsButtonElement)).toBeTruthy();
+
+      // changed to ids-text
+      expect(await idsPopup.evaluate((
+        element: IdsPopup,
+        handle
+      ) => {
+        element.alignTarget = handle;
+        return element.alignTarget!.isSameNode(handle);
+      }, idsTextElement)).toBeTruthy();
+
+      // change again to button via selector string
+      expect(await idsPopup.evaluate((
+        element: IdsPopup,
+        handle
+      ) => {
+        element.alignTarget = '#popup-trigger-btn';
+        return element.alignTarget!.isSameNode(handle);
+      }, idsButtonElement)).toBeTruthy();
+    });
+
+    test('can set/get align', async () => {
+      const defAlign = 'center';
+      const testData = [
+        { data: 'bottom', expected: 'bottom' },
+        { data: 5, expected: defAlign },
+        { data: 'left, top', expected: 'left, top' },
+        { data: 'left, right', expected: 'left, top' }, // retains previous state
+        { data: null, expected: defAlign },
+        { data: 'right, left', expected: 'left' }
+      ];
+
+      expect(await idsPopup.evaluate((element: IdsPopup) => element.align)).toEqual('right');
+      await expect(idsPopup).toHaveAttribute('align', 'right');
+
+      for (const data of testData) {
+        expect(await idsPopup.evaluate((element: IdsPopup, tData) => {
+          element.align = tData as any;
+          return element.align;
+        }, data.data)).toEqual(data.expected);
+        await expect(idsPopup).toHaveAttribute('align', data.expected);
+      }
+    });
+
+    test('can set/get alignX', async () => {
+      expect(await idsPopup.evaluate((element: IdsPopup) => element.alignX)).toEqual('right');
+      await expect(idsPopup).not.toHaveAttribute('align-x');
+
+      expect(await idsPopup.evaluate((element: IdsPopup) => {
+        element.alignX = 'left';
+        return element.alignX;
+      })).toEqual('left');
+      await expect(idsPopup).not.toHaveAttribute('align-x');
+
+      expect(await idsPopup.evaluate((element: IdsPopup) => {
+        element.alignX = 'test';
+        return element.alignX;
+      })).toEqual('center');
+      await expect(idsPopup).not.toHaveAttribute('align-x');
+    });
+
+    test('can set/get alignY', async () => {
+      expect(await idsPopup.evaluate((element: IdsPopup) => element.alignY)).toEqual('center');
+      await expect(idsPopup).not.toHaveAttribute('align-y');
+
+      expect(await idsPopup.evaluate((element: IdsPopup) => {
+        element.alignY = 'top';
+        return element.alignY;
+      })).toEqual('top');
+      await expect(idsPopup).not.toHaveAttribute('align-y');
+
+      expect(await idsPopup.evaluate((element: IdsPopup) => {
+        element.alignY = 'test';
+        return element.alignY;
+      })).toEqual('center');
+      await expect(idsPopup).not.toHaveAttribute('align-y');
+    });
+  });
 });
diff --git a/tests/ids-splitter/ids-splitter.spec.ts b/tests/ids-splitter/ids-splitter.spec.ts
@@ -284,6 +284,7 @@ test.describe('IdsSplitter tests', () => {
         </ids-splitter>`;
       });
       await page.waitForLoadState();
+      await page.locator('#test').waitFor({ state: 'attached' });
 
       const splitterSizes = await page.evaluate(() => {
         const splitter = document.querySelector('#test')!;
@@ -350,6 +351,7 @@ test.describe('IdsSplitter tests', () => {
       });
 
       await page.waitForLoadState();
+      await page.locator('#test').waitFor({ state: 'attached' });
 
       const splitterSizes = await page.evaluate(() => {
         const splitter = document.querySelector('#test')!;
@@ -434,6 +436,7 @@ test.describe('IdsSplitter tests', () => {
           <ids-splitter-pane></ids-splitter-pane>
         </ids-splitter>`;
       });
+      await page.locator('#splitter-1').waitFor({ state: 'attached' });
 
       await page.evaluate(() => {
         const splitter = document.querySelector('#splitter-1') as any;
@@ -445,7 +448,7 @@ test.describe('IdsSplitter tests', () => {
     test.skip('should be able to set multiple splits', async ({ page }) => {
       await page.evaluate(() => {
         document.body.innerHTML = `
-        <ids-splitter>
+        <ids-splitter id="splitter">
           <ids-splitter-pane></ids-splitter-pane>
           <ids-splitter-pane></ids-splitter-pane>
           <ids-splitter-pane></ids-splitter-pane>
@@ -470,6 +473,7 @@ test.describe('IdsSplitter tests', () => {
       });
 
       await page.waitForLoadState();
+      await page.locator('#nested-splitter-pane').waitFor({ state: 'attached' });
 
       const values = await page.evaluate(() => {
         const elem = document.querySelector('ids-splitter')!.querySelector('#nested-splitter-pane ids-splitter') as any;
@@ -496,17 +500,19 @@ test.describe('IdsSplitter tests', () => {
         </ids-splitter>`;
       });
       await page.waitForLoadState();
+      await page.locator('#test').waitFor({ state: 'attached' });
 
       expect(await page.locator('#p1').first().getAttribute('collapsed')).toEqual('true');
     });
 
     test('should render collapsed and disabled', async ({ page }) => {
       await page.evaluate(() => {
-        document.body.innerHTML = `<ids-splitter disabled>
+        document.body.innerHTML = `<ids-splitter id="test" disabled>
           <ids-splitter-pane id="p1" collapsed></ids-splitter-pane>
           <ids-splitter-pane id="p2"></ids-splitter-pane>
         </ids-splitter>`;
       });
+      await page.locator('#test').waitFor({ state: 'attached' });
 
       await page.waitForLoadState();
       const value = await page.evaluate(() => {