test: write tests for user management (#1316)

* chore: add data-test attributes

* test: add github connection test, add applications modal

* test: write tests for user management

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

@@ -0,0 +1,30 @@
+const { faker } = require('@faker-js/faker');
+const { AuthenticatedPage } = require('../authenticated-page');
+
+export class AdminCreateUserPage extends AuthenticatedPage {
+  screenshot = '/admin/create-user';
+
+  /**
+   * @param {import('@playwright/test').Page} 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');
+  }
+
+  seed (seed) {
+    faker.seed(seed || 0);
+  }
+
+  generateUser () {
+    return {
+      fullName: faker.person.fullName(),
+      email: faker.internet.email().toLowerCase(),
+      password: faker.internet.password()
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+export class DeleteUserModal {
+  screenshotPath = '/admin/delete-modal';
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor (page) {
+    this.page = page;
+    this.modal = page.getByTestId('delete-user-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-user-page.js

@@ -0,0 +1,25 @@
+const { faker } = require('@faker-js/faker');
+const { AuthenticatedPage } = require('../authenticated-page');
+
+faker.seed(9002);
+
+export class AdminEditUserPage extends AuthenticatedPage {
+  screenshot = '/admin/edit-user';
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor (page) {
+    super(page);
+    this.fullNameInput = page.getByTestId('full-name-input');
+    this.emailInput = page.getByTestId('email-input');
+    this.updateButton = page.getByTestId('update-button');
+  }
+
+  generateUser () {
+    return {
+      fullName: faker.person.fullName(),
+      email: faker.internet.email(),
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+const { AdminCreateUserPage } = require('./create-user-page');
+const { AdminEditUserPage } = require('./edit-user-page');
+const { AdminUsersPage } = require('./users-page');
+
+export const adminFixtures = {
+  adminUsersPage: async ({ page }, use) => {
+    await use(new AdminUsersPage(page));
+  },
+  adminCreateUserPage: async ({ page }, use) => {
+    await use(new AdminCreateUserPage(page));
+  },
+  adminEditUserPage: async ({page}, use) => {
+    await use(new AdminEditUserPage(page));
+  }
+}

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

@@ -0,0 +1,115 @@
+const { faker } = require('@faker-js/faker');
+const { AuthenticatedPage } = require('../authenticated-page');
+const { DeleteUserModal } = require('./delete-user-modal');
+
+faker.seed(9001);
+
+export class AdminUsersPage extends AuthenticatedPage {
+  screenshotPath = '/admin';
+
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor (page) {
+    super(page);
+    this.createUserButton = page.getByTestId('create-user');
+    this.userRow = page.getByTestId('user-row');
+    this.deleteUserModal = new DeleteUserModal(page);
+    this.firstPageButton = page.getByTestId('first-page-button');
+    this.previousPageButton = page.getByTestId('previous-page-button');
+    this.nextPageButton = page.getByTestId('next-page-button');
+    this.lastPageButton = page.getByTestId('last-page-button');
+    this.usersLoader = page.getByTestId('users-list-loader');
+  }
+
+  async navigateTo () {
+    await this.profileMenuButton.click();
+    await this.adminMenuItem.click();
+  }
+
+  /**
+   * @param {string} email
+   */
+  async getUserRowByEmail (email) {
+    return this.userRow.filter({
+      has: this.page.getByTestId('user-email').filter({
+        hasText: email
+      })
+    });
+  }
+
+  /**
+   * @param {import('@playwright/test').Locator} 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()
+    }
+  }
+
+  /**
+   * @param {import('@playwright/test').Locator} row 
+   */
+  async clickEditUser (row) {
+    await row.getByTestId('user-edit').click();
+  }
+
+  /**
+   * @param {import('@playwright/test').Locator} row 
+   */
+  async clickDeleteUser (row) {
+    await row.getByTestId('delete-button').click();
+    return this.deleteUserModal;
+  }
+
+  /**
+   * @param {string} email 
+   */
+  async findUserPageWithEmail (email) {
+    // start at the first page
+    const firstPageDisabled = await this.firstPageButton.isDisabled();
+    if (!firstPageDisabled) {
+      await this.firstPageButton.click();
+    }
+
+    while (true) {
+      const rowLocator = await this.getUserRowByEmail(email);
+      if ((await rowLocator.count()) === 1) {
+        return rowLocator;
+      }
+      if (await this.nextPageButton.isDisabled()) {
+        return null;
+      } else {
+        await this.nextPageButton.click();
+      }
+    }
+  }
+
+  async getTotalRows () {
+    return await this.page.evaluate(() => {
+      const node = document.querySelector('[data-total-count]');
+      if (node) {
+        const count = Number(node.dataset.totalCount);
+        if (!isNaN(count)) {
+          return count;
+        }
+      }
+      return 0;
+    });
+  }
+
+  async getRowsPerPage () {
+    return await this.page.evaluate(() => {
+      const node = document.querySelector('[data-rows-per-page]');
+      if (node) {
+        const count = Number(node.dataset.rowsPerPage);
+        if (!isNaN(count)) {
+          return count;
+        }
+      }
+      return 0;
+    });
+  }
+}

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

@@ -1,5 +1,11 @@
 const path = require('node:path');
 
+/**
+ * @typedef {(
+ *   'default' | 'success' | 'warning' | 'error' | 'info'
+ * )} SnackbarVariant - Snackbar variant types in notistack/v3, see https://notistack.com/api-reference
+ */
+
 export class BasePage {
   screenshotPath = '/';
 
@@ -8,7 +14,64 @@ export class BasePage {
    */
   constructor(page) {
     this.page = page;
-    this.snackbar = this.page.locator('#notistack-snackbar');
+    this.snackbar = this.page.locator('.notistack-MuiContent');
+  }
+
+  /**
+   * Finds the latest snackbar message and extracts relevant data
+   * @returns {(
+   *  null | {
+   *    variant: SnackbarVariant,
+   *    text: string,
+   *    dataset: { [key: string]: string }
+   *  }
+   * )} 
+   */
+  async getSnackbarData () {
+    if (await this.snackbar.count() === 0) {
+      return null;
+    }
+    const snack = this.snackbar.first(); // uses flex: column-reverse
+    const classList = await snack.evaluate(node => Array.from(node.classList));
+    /** @type SnackbarVariant */
+    let variant = 'default';
+    if (classList.includes('notistack-MuiContent-success')) {
+      variant = 'success'
+    } else if (classList.includes('notistack-MuiContent-warning')) {
+      variant = 'warning'
+    } else if (classList.includes('notistack-MuiContent-error')) {
+      variant = 'error'
+    } else if (classList.includes('notistack-MuiContent-info')) {
+      variant = 'info'
+    }
+    return {
+      variant,
+      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))
+          );
+        }
+        const datasets = getChildren(node).map(
+          n => Object.assign({}, n.dataset)
+        );
+        return Object.assign({}, ...datasets);
+      })
+    };
+  }
+
+  /**
+   * Closes all snackbars, should be replaced later
+   */
+  async closeSnackbar () {
+    const snackbars = await this.snackbar.all();
+    for (const snackbar of snackbars) {
+      await snackbar.click();
+    }
+    for (const snackbar of snackbars) {
+      await snackbar.waitFor({ state: 'detached' });
+    }
   }
 
   async clickAway() {

packages/e2e-tests/fixtures/index.js

@@ -5,6 +5,7 @@ const { ExecutionsPage } = require('./executions-page');
 const { FlowEditorPage } = require('./flow-editor-page');
 const { UserInterfacePage } = require('./user-interface-page');
 const { LoginPage } = require('./login-page');
+const { adminFixtures } = require('./admin');
 
 exports.test = test.extend({
   page: async ({ page }, use) => {
@@ -31,6 +32,7 @@ exports.test = test.extend({
   userInterfacePage: async ({ page }, use) => {
     await use(new UserInterfacePage(page));
   },
+  ...adminFixtures
 });
 
 exports.publicTest = test.extend({