test: write tests for role management (#1396)

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

@@ -0,0 +1,106 @@
+const { AuthenticatedPage } = require('../authenticated-page');
+const { RoleConditionsModal } = require('./role-conditions-modal');
+
+export class AdminCreateRolePage extends AuthenticatedPage {
+  screenshotPath = '/admin/create-role'
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor (page) {
+    super(page);
+    this.nameInput = page.getByTestId('name-input');
+    this.descriptionInput = page.getByTestId('description-input');
+    this.createButton = page.getByTestId('create-button');
+    this.connectionRow = page.getByTestId('Connection-permission-row');
+    this.executionRow = page.getByTestId('Execution-permission-row');
+    this.flowRow = page.getByTestId('Flow-permission-row');
+  }
+
+  /**
+   * @param {('Connection'|'Execution'|'Flow')} subject 
+   */
+  getRoleConditionsModal (subject) {
+    return new RoleConditionsModal(this.page, subject);
+  }
+
+  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 => {
+        permissionConfigs.push({
+          action,
+          locator: actionInputs[action],
+          subject,
+          row
+        });
+      });
+    }
+    return permissionConfigs;
+  }
+
+  /**
+   * 
+   * @param {(
+   *   'Connection' | 'Flow' | 'Execution'
+   * )} subject 
+   */
+  getSubjectRow (subject) {
+    const k = `${subject.toLowerCase()}Row`
+    if (this[k]) {
+      return this[k]
+    } else {
+      throw 'Unknown row'
+    }
+  }
+
+  /**
+   * @param {import('@playwright/test').Locator} 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) {
+        inputs[input] = row.getByTestId(testId).locator('input');
+      }
+    }
+    return inputs
+  }
+
+  /**
+   * @param {import('@playwright/test').Locator} row 
+   */
+  async clickPermissionSettings (row) {
+    await row.getByTestId('permission-settings-button').click();
+  }
+
+  /**
+   * 
+   * @param {string} subject 
+   * @param {'create'|'read'|'update'|'delete'|'publish'} action
+   * @param {boolean} val 
+   */
+  async updateAction (subject, action, val) {
+    const row = await this.getSubjectRow(subject);
+    const inputs = await this.getRowInputs(row);
+    if (inputs[action]) {
+      if (await inputs[action].isChecked()) {
+        if (!val) {
+          await inputs[action].click();
+        }
+      } else {
+        if (val) {
+          await inputs[action].click();
+        }
+      }
+    } else {
+      throw new Error(`${subject} does not have action ${action}`)
+    }
+  }
+}

packages/e2e-tests/fixtures/admin/delete-role-modal.js

@@ -0,0 +1,19 @@
+export class DeleteRoleModal {
+  screenshotPath = '/admin/delete-role-modal';
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor (page) {
+    this.page = page;
+    this.modal = page.getByTestId('delete-role-modal');
+    this.cancelButton = this.modal.getByTestId('confirmation-cancel-button');
+    this.deleteButton = this.modal.getByTestId('confirmation-confirm-button');
+  }
+
+  async close () {
+    await this.page.click('body', {
+      position: { x: 10, y: 10 }
+    });
+  }
+}

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

@@ -0,0 +1,9 @@
+const { AdminCreateRolePage } = require('./create-role-page')
+
+export class AdminEditRolePage extends AdminCreateRolePage {
+  constructor (page) {
+    super(page);
+    delete this.createButton;
+    this.updateButton = page.getByTestId('update-button');
+  }
+}

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

@@ -13,6 +13,7 @@ export class AdminEditUserPage extends AuthenticatedPage {
     super(page);
     this.fullNameInput = page.getByTestId('full-name-input');
     this.emailInput = page.getByTestId('email-input');
+    this.roleInput = page.getByTestId('role.id-autocomplete');
     this.updateButton = page.getByTestId('update-button');
   }
 

packages/e2e-tests/fixtures/admin/index.js

@@ -2,6 +2,10 @@ const { AdminCreateUserPage } = require('./create-user-page');
 const { AdminEditUserPage } = require('./edit-user-page');
 const { AdminUsersPage } = require('./users-page');
 
+const { AdminRolesPage } = require('./roles-page');
+const { AdminCreateRolePage } = require('./create-role-page');
+const { AdminEditRolePage } = require('./edit-role-page');
+
 export const adminFixtures = {
   adminUsersPage: async ({ page }, use) => {
     await use(new AdminUsersPage(page));
@@ -11,5 +15,15 @@ export const adminFixtures = {
   },
   adminEditUserPage: async ({page}, use) => {
     await use(new AdminEditUserPage(page));
-  }
-}
+  },
+  adminRolesPage: async ({ page}, use) => {
+    await use(new AdminRolesPage(page));
+  },
+  adminEditRolePage: async ({ page}, use) => {
+    await use(new AdminEditRolePage(page));
+  },
+  adminCreateRolePage: async ({ page}, use) => {
+    await use(new AdminCreateRolePage(page));
+  },
+}
+

packages/e2e-tests/fixtures/admin/role-conditions-modal.js

@@ -0,0 +1,47 @@
+export class RoleConditionsModal {
+
+  /**
+   * @param {import('@playwright/test').Page} page 
+   * @param {('Connection'|'Execution'|'Flow')} subject
+   */
+  constructor (page, subject) {
+    this.page = page;
+    this.modal = page.getByTestId(`${subject}-role-conditions-modal`);
+    this.modalBody = this.modal.getByTestId('role-conditions-modal-body');
+    this.createCheckbox = this.modal.getByTestId(
+      'isCreator-create-checkbox'
+    ).locator('input');
+    this.readCheckbox = this.modal.getByTestId(
+      'isCreator-read-checkbox'
+    ).locator('input');
+    this.updateCheckbox = this.modal.getByTestId(
+      'isCreator-update-checkbox'
+    ).locator('input');
+    this.deleteCheckbox = this.modal.getByTestId(
+      'isCreator-delete-checkbox'
+    ).locator('input');
+    this.publishCheckbox = this.modal.getByTestId(
+      'isCreator-publish-checkbox'
+    ).locator('input');
+    this.applyButton = this.modal.getByTestId('confirmation-confirm-button');
+    this.cancelButton = this.modal.getByTestId('confirmation-cancel-button');
+  }
+
+  async getAvailableConditions () {
+    let conditions = {};
+    const actions = ['create', 'read', 'update', 'delete', 'publish'];
+    for (let action of actions) {
+      const locator = this[`${action}Checkbox`];
+      if (locator && await locator.count() > 0) {
+        conditions[action] = locator;
+      }
+    }
+    return conditions;
+  }
+
+  async close () {
+    await this.page.click('body', {
+      position: { x: 10, y: 10 }
+    });
+  }
+}

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

@@ -0,0 +1,79 @@
+const { AuthenticatedPage } = require('../authenticated-page');
+const { DeleteRoleModal } = require('./delete-role-modal')
+
+export class AdminRolesPage extends AuthenticatedPage {
+  screenshotPath = '/admin-roles';
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor (page) {
+    super(page);
+    this.roleDrawerLink = page.getByTestId('roles-drawer-link');
+    this.createRoleButton = page.getByTestId('create-role');
+    this.deleteRoleModal = new DeleteRoleModal(page);
+    this.roleRow = page.getByTestId('role-row');
+    this.rolesLoader = page.getByTestId('roles-list-loader');
+  }
+
+  /**
+   * 
+   * @param {boolean} isMobile - navigation on smaller devices requires the
+   * user to open up the drawer menu 
+   */
+  async navigateTo (isMobile=false) {
+    await this.profileMenuButton.click();
+    await this.adminMenuItem.click();
+    if (isMobile) {
+      await this.drawerMenuButton.click();
+    }
+    await this.roleDrawerLink.click();
+  }
+
+  /**
+   * @param {string} name 
+   */
+  async getRoleRowByName (name) {
+    return this.roleRow.filter({
+      has: this.page.getByTestId('role-name').filter({
+        hasText: name
+      })
+    });
+  }
+
+  /**
+   * @param {import('@playwright/test').Locator} row 
+   */
+  async getRowData (row) {
+    return {
+      role: await row.getByTestId('role-name').textContent(),
+      description: await row.getByTestId('role-description').textContent(),
+      canEdit: await row.getByTestId(
+          'role-edit'
+        ).isEnabled(),
+      canDelete: await row.getByTestId(
+          'role-delete'
+        ).isEnabled()
+    }
+  }
+
+  /**
+   * @param {import('@playwright/test').Locator} row 
+   */
+  async clickEditRole (row) {
+    await row.getByTestId('role-edit').click();
+  }
+
+  /**
+   * @param {import('@playwright/test').Locator} row 
+   */
+  async clickDeleteRole (row) {
+    await row.getByTestId('role-delete').click();
+    return this.deleteRoleModal;
+  }
+
+  async editRole (subject) {
+    const row = await this.getRoleRowByName(subject);
+    await this.clickEditRole(row);
+  }
+}

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

@@ -25,6 +25,11 @@ export class AdminUsersPage extends AuthenticatedPage {
   async navigateTo () {
     await this.profileMenuButton.click();
     await this.adminMenuItem.click();
+    if (await this.usersLoader.isVisible()) {
+      await this.usersLoader.waitFor({
+        state: 'detached'
+      });
+    }
   }
 
   /**
@@ -66,8 +71,14 @@ export class AdminUsersPage extends AuthenticatedPage {
 
   /**
    * @param {string} email 
+   * @returns {import('@playwright/test').Locator | null}
    */
   async findUserPageWithEmail (email) {
+    if (await this.usersLoader.isVisible()) {
+      await this.usersLoader.waitFor({
+        state: 'detached'
+      });
+    }
     // start at the first page
     const firstPageDisabled = await this.firstPageButton.isDisabled();
     if (!firstPageDisabled) {
@@ -75,6 +86,11 @@ export class AdminUsersPage extends AuthenticatedPage {
     }
 
     while (true) {
+      if (await this.usersLoader.isVisible()) {
+        await this.usersLoader.waitFor({
+          state: 'detached'
+        });
+      }
       const rowLocator = await this.getUserRowByEmail(email);
       if ((await rowLocator.count()) === 1) {
         return rowLocator;