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;
+    });
+  }
+}