test: add page title test ids to await and await mounting loader components

packages/e2e-tests/fixtures/admin/create-role-page.js

@@ -2,12 +2,12 @@ const { AuthenticatedPage } = require('../authenticated-page');
 const { RoleConditionsModal } = require('./role-conditions-modal');
 
 export class AdminCreateRolePage extends AuthenticatedPage {
-  screenshotPath = '/admin/create-role'
+  screenshotPath = '/admin/create-role';
 
   /**
    * @param {import('@playwright/test').Page} page
    */
-  constructor (page) {
+  constructor(page) {
     super(page);
     this.nameInput = page.getByTestId('name-input');
     this.descriptionInput = page.getByTestId('description-input');
@@ -15,27 +15,28 @@ export class AdminCreateRolePage extends AuthenticatedPage {
     this.connectionRow = page.getByTestId('Connection-permission-row');
     this.executionRow = page.getByTestId('Execution-permission-row');
     this.flowRow = page.getByTestId('Flow-permission-row');
+    this.pageTitle = page.getByTestId('create-role-title');
   }
 
   /**
-   * @param {('Connection'|'Execution'|'Flow')} subject 
+   * @param {('Connection'|'Execution'|'Flow')} subject
    */
-  getRoleConditionsModal (subject) {
+  getRoleConditionsModal(subject) {
     return new RoleConditionsModal(this.page, subject);
   }
 
-  async getPermissionConfigs () {
+  async getPermissionConfigs() {
     const subjects = ['Connection', 'Flow', 'Execution'];
     const permissionConfigs = [];
     for (let subject of subjects) {
       const row = this.getSubjectRow(subject);
       const actionInputs = await this.getRowInputs(row);
-      Object.keys(actionInputs).forEach(action => {
+      Object.keys(actionInputs).forEach((action) => {
         permissionConfigs.push({
           action,
           locator: actionInputs[action],
           subject,
-          row
+          row,
         });
       });
     }
@@ -43,50 +44,50 @@ export class AdminCreateRolePage extends AuthenticatedPage {
   }
 
   /**
-   * 
+   *
    * @param {(
    *   'Connection' | 'Flow' | 'Execution'
-   * )} subject 
+   * )} subject
    */
-  getSubjectRow (subject) {
-    const k = `${subject.toLowerCase()}Row`
+  getSubjectRow(subject) {
+    const k = `${subject.toLowerCase()}Row`;
     if (this[k]) {
-      return this[k]
+      return this[k];
     } else {
-      throw 'Unknown row'
+      throw 'Unknown row';
     }
   }
 
   /**
-   * @param {import('@playwright/test').Locator} row 
+   * @param {import('@playwright/test').Locator} row
    */
-  async getRowInputs (row) {
+  async getRowInputs(row) {
     const inputs = {
       // settingsButton: row.getByTestId('permission-settings-button')
-    }
+    };
     for (let input of ['create', 'read', 'update', 'delete', 'publish']) {
-      const testId = `${input}-checkbox`
-      if (await row.getByTestId(testId).count() > 0) {
+      const testId = `${input}-checkbox`;
+      if ((await row.getByTestId(testId).count()) > 0) {
         inputs[input] = row.getByTestId(testId).locator('input');
       }
     }
-    return inputs
+    return inputs;
   }
 
   /**
-   * @param {import('@playwright/test').Locator} row 
+   * @param {import('@playwright/test').Locator} row
    */
-  async clickPermissionSettings (row) {
+  async clickPermissionSettings(row) {
     await row.getByTestId('permission-settings-button').click();
   }
 
   /**
-   * 
-   * @param {string} subject 
+   *
+   * @param {string} subject
    * @param {'create'|'read'|'update'|'delete'|'publish'} action
-   * @param {boolean} val 
+   * @param {boolean} val
    */
-  async updateAction (subject, action, val) {
+  async updateAction(subject, action, val) {
     const row = await this.getSubjectRow(subject);
     const inputs = await this.getRowInputs(row);
     if (inputs[action]) {
@@ -100,7 +101,7 @@ export class AdminCreateRolePage extends AuthenticatedPage {
         }
       }
     } else {
-      throw new Error(`${subject} does not have action ${action}`)
+      throw new Error(`${subject} does not have action ${action}`);
     }
   }
-}
+}

packages/e2e-tests/fixtures/admin/create-user-page.js

@@ -7,24 +7,25 @@ export class AdminCreateUserPage extends AuthenticatedPage {
   /**
    * @param {import('@playwright/test').Page} page
    */
-  constructor (page) {
+  constructor(page) {
     super(page);
     this.fullNameInput = page.getByTestId('full-name-input');
     this.emailInput = page.getByTestId('email-input');
     this.passwordInput = page.getByTestId('password-input');
     this.roleInput = page.getByTestId('role.id-autocomplete');
     this.createButton = page.getByTestId('create-button');
+    this.pageTitle = page.getByTestId('create-user-title');
   }
 
-  seed (seed) {
+  seed(seed) {
     faker.seed(seed || 0);
   }
 
-  generateUser () {
+  generateUser() {
     return {
       fullName: faker.person.fullName(),
       email: faker.internet.email().toLowerCase(),
-      password: faker.internet.password()
-    }
+      password: faker.internet.password(),
+    };
   }
-}
+}

packages/e2e-tests/fixtures/admin/edit-role-page.js

@@ -5,5 +5,6 @@ export class AdminEditRolePage extends AdminCreateRolePage {
     super(page);
     delete this.createButton;
     this.updateButton = page.getByTestId('update-button');
+    this.pageTitle = page.getByTestId('edit-role-title');
   }
 }

packages/e2e-tests/fixtures/admin/edit-user-page.js

@@ -15,6 +15,7 @@ export class AdminEditUserPage extends AuthenticatedPage {
     this.emailInput = page.getByTestId('email-input');
     this.roleInput = page.getByTestId('role.id-autocomplete');
     this.updateButton = page.getByTestId('update-button');
+    this.pageTitle = page.getByTestId('edit-user-title');
   }
 
   generateUser () {

packages/e2e-tests/fixtures/admin/roles-page.js

@@ -14,6 +14,7 @@ export class AdminRolesPage extends AuthenticatedPage {
     this.deleteRoleModal = new DeleteRoleModal(page);
     this.roleRow = page.getByTestId('role-row');
     this.rolesLoader = page.getByTestId('roles-list-loader');
+    this.pageTitle = page.getByTestId('roles-page-title');
   }
 
   /**
@@ -28,8 +29,9 @@ export class AdminRolesPage extends AuthenticatedPage {
       await this.drawerMenuButton.click();
     }
     await this.roleDrawerLink.click();
+    await this.isMounted();
     await this.rolesLoader.waitFor({
-      state: 'detached',
+      state: 'detached'
     });
   }
 

packages/e2e-tests/fixtures/admin/users-page.js

@@ -10,7 +10,7 @@ export class AdminUsersPage extends AuthenticatedPage {
   /**
    * @param {import('@playwright/test').Page} page
    */
-  constructor (page) {
+  constructor(page) {
     super(page);
     this.createUserButton = page.getByTestId('create-user');
     this.userRow = page.getByTestId('user-row');
@@ -20,14 +20,16 @@ export class AdminUsersPage extends AuthenticatedPage {
     this.nextPageButton = page.getByTestId('next-page-button');
     this.lastPageButton = page.getByTestId('last-page-button');
     this.usersLoader = page.getByTestId('users-list-loader');
+    this.pageTitle = page.getByTestId('users-page-title');
   }
 
-  async navigateTo () {
+  async navigateTo() {
     await this.profileMenuButton.click();
     await this.adminMenuItem.click();
+    await this.isMounted();
     if (await this.usersLoader.isVisible()) {
       await this.usersLoader.waitFor({
-        state: 'detached'
+        state: 'detached',
       });
     }
   }
@@ -35,48 +37,48 @@ export class AdminUsersPage extends AuthenticatedPage {
   /**
    * @param {string} email
    */
-  async getUserRowByEmail (email) {
+  async getUserRowByEmail(email) {
     return this.userRow.filter({
       has: this.page.getByTestId('user-email').filter({
-        hasText: email
-      })
+        hasText: email,
+      }),
     });
   }
 
   /**
-   * @param {import('@playwright/test').Locator} row 
+   * @param {import('@playwright/test').Locator} row
    */
-  async getRowData (row) {
+  async getRowData(row) {
     return {
       fullName: await row.getByTestId('user-full-name').textContent(),
       email: await row.getByTestId('user-email').textContent(),
-      role: await row.getByTestId('user-role').textContent()
-    }
+      role: await row.getByTestId('user-role').textContent(),
+    };
   }
 
   /**
-   * @param {import('@playwright/test').Locator} row 
+   * @param {import('@playwright/test').Locator} row
    */
-  async clickEditUser (row) {
+  async clickEditUser(row) {
     await row.getByTestId('user-edit').click();
   }
 
   /**
-   * @param {import('@playwright/test').Locator} row 
+   * @param {import('@playwright/test').Locator} row
    */
-  async clickDeleteUser (row) {
+  async clickDeleteUser(row) {
     await row.getByTestId('delete-button').click();
     return this.deleteUserModal;
   }
 
   /**
-   * @param {string} email 
+   * @param {string} email
    * @returns {import('@playwright/test').Locator | null}
    */
-  async findUserPageWithEmail (email) {
+  async findUserPageWithEmail(email) {
     if (await this.usersLoader.isVisible()) {
       await this.usersLoader.waitFor({
-        state: 'detached'
+        state: 'detached',
       });
     }
     // start at the first page
@@ -88,10 +90,11 @@ export class AdminUsersPage extends AuthenticatedPage {
     while (true) {
       if (await this.usersLoader.isVisible()) {
         await this.usersLoader.waitFor({
-          state: 'detached'
+          state: 'detached',
         });
       }
       const rowLocator = await this.getUserRowByEmail(email);
+      console.log('rowLocator.count', email, await rowLocator.count());
       if ((await rowLocator.count()) === 1) {
         return rowLocator;
       }
@@ -103,7 +106,7 @@ export class AdminUsersPage extends AuthenticatedPage {
     }
   }
 
-  async getTotalRows () {
+  async getTotalRows() {
     return await this.page.evaluate(() => {
       const node = document.querySelector('[data-total-count]');
       if (node) {
@@ -116,7 +119,7 @@ export class AdminUsersPage extends AuthenticatedPage {
     });
   }
 
-  async getRowsPerPage () {
+  async getRowsPerPage() {
     return await this.page.evaluate(() => {
       const node = document.querySelector('[data-rows-per-page]');
       if (node) {
@@ -128,4 +131,4 @@ export class AdminUsersPage extends AuthenticatedPage {
       return 0;
     });
   }
-}
+}

packages/e2e-tests/fixtures/authenticated-page.js

@@ -12,7 +12,9 @@ export class AuthenticatedPage extends BasePage {
 
     this.profileMenuButton = this.page.getByTestId('profile-menu-button');
     this.adminMenuItem = this.page.getByRole('menuitem', { name: 'Admin' });
-    this.userInterfaceDrawerItem = this.page.getByTestId('user-interface-drawer-link');
+    this.userInterfaceDrawerItem = this.page.getByTestId(
+      'user-interface-drawer-link'
+    );
     this.appBar = this.page.getByTestId('app-bar');
     this.drawerMenuButton = this.page.getByTestId('drawer-menu-button');
     this.goToDashboardButton = this.page.getByTestId('go-back-drawer-link');

packages/e2e-tests/fixtures/base-page.js

@@ -15,45 +15,46 @@ export class BasePage {
   constructor(page) {
     this.page = page;
     this.snackbar = page.locator('*[data-test^="snackbar"]');
+    this.pageTitle = this.page.getByTestId('page-title');
   }
 
   /**
    * Finds the latest snackbar message and extracts relevant data
-   * @param {string | undefined} testId 
+   * @param {string | undefined} testId
    * @returns {(
    *  null | {
    *    variant: SnackbarVariant,
    *    text: string,
    *    dataset: { [key: string]: string }
    *  }
-   * )} 
+   * )}
    */
-  async getSnackbarData (testId) {
+  async getSnackbarData(testId) {
     if (!testId) {
       testId = 'snackbar';
     }
     const snack = this.page.getByTestId(testId);
     return {
       variant: await snack.getAttribute('data-snackbar-variant'),
-      text: await snack.evaluate(node => node.innerText),
-      dataset: await snack.evaluate(node => {
-        function getChildren (n) {
+      text: await snack.evaluate((node) => node.innerText),
+      dataset: await snack.evaluate((node) => {
+        function getChildren(n) {
           return [n].concat(
-            ...Array.from(n.children).map(c => getChildren(c))
+            ...Array.from(n.children).map((c) => getChildren(c))
           );
         }
-        const datasets = getChildren(node).map(
-          n => Object.assign({}, n.dataset)
+        const datasets = getChildren(node).map((n) =>
+          Object.assign({}, n.dataset)
         );
         return Object.assign({}, ...datasets);
-      })
+      }),
     };
   }
 
   /**
    * Closes all snackbars, should be replaced later
    */
-  async closeSnackbar () {
+  async closeSnackbar() {
     const snackbars = await this.snackbar.all();
     for (const snackbar of snackbars) {
       await snackbar.click();
@@ -78,4 +79,8 @@ export class BasePage {
 
     return await this.page.screenshot({ path: computedPath, ...restOptions });
   }
+
+  async isMounted() {
+    await this.pageTitle.waitFor({ state: 'attached' });
+  }
 }

packages/e2e-tests/fixtures/login-page.js

@@ -5,12 +5,12 @@ export class LoginPage extends BasePage {
   static defaultEmail = process.env.LOGIN_EMAIL;
   static defaultPassword = process.env.LOGIN_PASSWORD;
 
-  static setDefaultLogin (email, password) {
+  static setDefaultLogin(email, password) {
     this.defaultEmail = email;
     this.defaultPassword = password;
   }
 
-  static resetDefaultLogin () {
+  static resetDefaultLogin() {
     this.defaultEmail = process.env.LOGIN_EMAIL;
     this.defaultPassword = process.env.LOGIN_PASSWORD;
   }
@@ -25,6 +25,7 @@ export class LoginPage extends BasePage {
     this.emailTextField = this.page.getByTestId('email-text-field');
     this.passwordTextField = this.page.getByTestId('password-text-field');
     this.loginButton = this.page.getByTestId('login-button');
+    this.pageTitle = this.page.getByTestId('login-form-title');
   }
 
   async open() {