refactor(test): remove dropdown modal waitForTimeout (#5439)

* refactor(test): remove dropdown modal waitForTimeout

remove dropdown modal waitForTimeout

* fix(test): fix typo

fix typo

* fix(test): fix the "not applicable" sign-up option not found issue

fix the "not applicable" sign-up option not found issue

packages/integration-tests/src/tests/console/sign-in-experience/helpers.ts

@@ -5,6 +5,7 @@ import {
   expectConfirmModalAndAct,
   waitForToast,
 } from '#src/ui-helpers/index.js';
+import { selectDropdownMenuItem } from '#src/ui-helpers/select-dropdown-menu-item.js';
 
 export const waitForFormCard = async (page: Page, title: string) => {
   await expect(page).toMatchElement('div[class$=tabContent] div[class$=card] div[class$=title]', {
@@ -65,14 +66,5 @@ export const expectToSelectPreviewLanguage = async (page: Page, language: string
   // Click on the language selector
   await expect(page).toClick('div[class$=preview] div[class*=select][class*=language]');
 
-  // Wait for the dropdown menu to render in the correct position
-  await page.waitForTimeout(500);
-
-  await expect(page).toClick('.ReactModalPortal div[class$=dropdownContainer] div[role=menuitem]', {
-    text: language,
-  });
-
-  await page.waitForSelector('.ReactModalPortal div[class$=dropdownContainer]', {
-    hidden: true,
-  });
+  await selectDropdownMenuItem(page, 'div[role=menuitem]', language);
 };

packages/integration-tests/src/tests/console/sign-in-experience/sign-in-preview.test.ts

@@ -56,8 +56,11 @@ describe('sign-in experience: sign-in preview', () => {
       'form div[class$=field] label[class$=switch]:has(input[name="color.isDarkModeEnabled"])'
     );
 
-    // Wait for the preview to update since we don't have a reliable way to match the dark mode icon
-    await page.waitForTimeout(500);
+    await page.evaluate(() => {
+      return document.querySelector<HTMLInputElement>(
+        'form div[class$=field] input[name="color.isDarkModeEnabled"]'
+      )?.checked;
+    });
 
     // Switch to dark mode
     await expect(page).toClick(

packages/integration-tests/src/tests/console/sign-in-experience/sign-up-and-sign-in/happy-path.test.ts

@@ -486,7 +486,10 @@ describe('sign-in experience(happy path): sign-up and sign-in', () => {
     });
 
     it('select not applicable as sign-up identifier', async () => {
-      await expectToSelectSignUpIdentifier(page, 'Not applicable');
+      await expectToSelectSignUpIdentifier(
+        page,
+        'Not applicable(This apply to social only account creation)'
+      );
       await expectToRemoveSignInMethod(page, 'Username');
       await expectToSaveSignInExperience(page, { needToConfirmChanges: true });
     });

packages/integration-tests/src/tests/console/sign-in-experience/sign-up-and-sign-in/helpers.ts

@@ -1,5 +1,7 @@
 import { type Page } from 'puppeteer';
 
+import { selectDropdownMenuItem } from '#src/ui-helpers/select-dropdown-menu-item.js';
+
 import { expectToSaveSignInExperience } from '../helpers.js';
 
 export const expectToSelectSignUpIdentifier = async (page: Page, identifier: string) => {
@@ -13,14 +15,7 @@ export const expectToSelectSignUpIdentifier = async (page: Page, identifier: str
   await expect(signUpIdentifierField).toClick('div[role=button][class*=select]');
 
   // Wait for the dropdown to be rendered in the correct position
-  await page.waitForTimeout(500);
-
-  await expect(page).toClick(
-    '.ReactModalPortal div[class$=dropdownContainer] div[role=menuitem] div',
-    {
-      text: identifier,
-    }
-  );
+  await selectDropdownMenuItem(page, 'div[role=menuitem] div', identifier);
 
   await page.waitForSelector('.ReactModalPortal div[class$=dropdownContainer]', {
     hidden: true,
@@ -188,15 +183,7 @@ export const expectToAddSocialSignInConnector = async (page: Page, name: string)
     text: 'Add Social Connector',
   });
 
-  // Wait for the dropdown to be rendered in the correct position
-  await page.waitForTimeout(500);
-
-  await expect(page).toClick(
-    '.ReactModalPortal div[class$=dropdownContainer] div[role=menuitem] span[class$=name]',
-    {
-      text: name,
-    }
-  );
+  await selectDropdownMenuItem(page, 'div[role=menuitem] span[class$=name]', name);
 
   await page.waitForSelector('.ReactModalPortal div[class$=dropdownContainer]', {
     hidden: true,

packages/integration-tests/src/ui-helpers/index.ts

@@ -11,6 +11,8 @@ import {
 import { clearConnectorsByTypes, setEmailConnector } from '#src/helpers/connector.js';
 import { dcls, expectNavigation, waitFor } from '#src/utils.js';
 
+import { selectDropdownMenuItem } from './select-dropdown-menu-item.js';
+
 export const goToAdminConsole = async () => {
   const logtoConsoleUrl = new URL(logtoConsoleUrlString);
   await expectNavigation(page.goto(logtoConsoleUrl.href));
@@ -66,6 +68,7 @@ export const expectToDiscardChanges = async (page: Page) => {
 
 export const expectToClickDetailsPageOption = async (page: Page, optionText: string) => {
   await expect(page).toClick('div[class$=header] div[class$=operations] div button span:has(svg)');
+
   await expect(page).toMatchElement(
     '.ReactModalPortal div[class$=dropdownContainer] div[class$=dropdownTitle]',
     {
@@ -73,12 +76,7 @@ export const expectToClickDetailsPageOption = async (page: Page, optionText: str
     }
   );
 
-  // Wait for the dropdown menu to be rendered in the correct position
-  await waitFor(500);
-
-  await expect(page).toClick('.ReactModalPortal div[class$=dropdownContainer] div[role=menuitem]', {
-    text: optionText,
-  });
+  await selectDropdownMenuItem(page, 'div[role=menuitem]', optionText);
 
   await page.waitForSelector(
     '.ReactModalPortal div[class$=dropdownContainer] div[class$=dropdownTitle]',

packages/integration-tests/src/ui-helpers/select-dropdown-menu-item.ts

@@ -0,0 +1,30 @@
+import { type Page } from 'puppeteer';
+
+import { dcls } from '#src/utils.js';
+
+export const selectDropdownMenuItem = async (page: Page, itemSelector: string, text: string) => {
+  // Wait for the dropdown menu to appear
+  const dropdownMenu = await page.waitForSelector(
+    ['.ReactModalPortal', dcls('dropdownContainer')].join(' ')
+  );
+
+  // Click on the dropdown menu item
+  await page.evaluate(
+    (dropdownMenu, itemSelector, text) => {
+      if (dropdownMenu) {
+        const optionElements = dropdownMenu.querySelectorAll(itemSelector);
+        const targetOption = Array.from(optionElements).find(
+          (element) => element.textContent === text
+        );
+
+        if (targetOption) {
+          const clickEvent = new MouseEvent('click', { bubbles: true });
+          targetOption.dispatchEvent(clickEvent);
+        }
+      }
+    },
+    dropdownMenu,
+    itemSelector,
+    text
+  );
+};