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({

packages/e2e-tests/package.json

@@ -24,10 +24,17 @@
     "url": "https://github.com/automatisch/automatisch/issues"
   },
   "devDependencies": {
+    "@faker-js/faker": "^8.2.0",
     "@playwright/test": "^1.36.2"
   },
   "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.9.1",
+    "@typescript-eslint/parser": "^5.9.1",
     "dotenv": "^16.3.1",
-    "micro": "^10.0.1"
+    "eslint": "^8.13.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "micro": "^10.0.1",
+    "prettier": "^2.5.1"
   }
 }

packages/e2e-tests/tests/admin/manage-users.spec.js

@@ -0,0 +1,296 @@
+const { test, expect } = require('../../fixtures/index');
+
+/**
+ * NOTE: Make sure to delete all users generated between test runs,
+ * otherwise tests will fail since users are only *soft*-deleted
+ */
+test.describe('User management page', () => {
+
+  test.beforeEach(async ({ adminUsersPage }) => {
+    await adminUsersPage.navigateTo();
+    await adminUsersPage.closeSnackbar();
+  });
+
+  test(
+    'User creation and deletion process',
+    async ({ adminCreateUserPage, adminEditUserPage, adminUsersPage }) => {
+      adminCreateUserPage.seed(9000);
+      const user = adminCreateUserPage.generateUser();
+      await adminUsersPage.usersLoader.waitFor({
+        state: 'detached' /* Note: state: 'visible' introduces flakiness
+        because visibility: hidden is used as part of the state transition in
+        notistack, see
+        https://github.com/iamhosseindhv/notistack/blob/122f47057eb7ce5a1abfe923316cf8475303e99a/src/transitions/Collapse/Collapse.tsx#L110
+        */
+      });
+      await test.step(
+        'Create a user',
+        async () => {
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(user.fullName);
+          await adminCreateUserPage.emailInput.fill(user.email);
+          await adminCreateUserPage.passwordInput.fill(user.password);
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          await adminUsersPage.snackbar.waitFor({
+            state: 'attached'
+          });
+          const snackbar = await adminUsersPage.getSnackbarData();
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+      await test.step(
+        'Check the user exists with the expected properties',
+        async () => {
+          await adminUsersPage.findUserPageWithEmail(user.email);
+          const userRow = await adminUsersPage.getUserRowByEmail(user.email);
+          const data = await adminUsersPage.getRowData(userRow);
+          await expect(data.email).toBe(user.email);
+          await expect(data.fullName).toBe(user.fullName);
+          await expect(data.role).toBe('Admin');
+        }
+      );
+      await test.step(
+        'Edit user info and make sure the edit works correctly',
+        async () => {
+          await adminUsersPage.findUserPageWithEmail(user.email);
+          
+          let userRow = await adminUsersPage.getUserRowByEmail(user.email);
+          await adminUsersPage.clickEditUser(userRow);
+          const newUserInfo = adminEditUserPage.generateUser();
+          await adminEditUserPage.fullNameInput.fill(newUserInfo.fullName);
+          await adminEditUserPage.updateButton.click();
+
+          await adminUsersPage.snackbar.waitFor({
+            state: 'attached'
+          });
+          const snackbar = await adminUsersPage.getSnackbarData();
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+
+          await adminUsersPage.findUserPageWithEmail(user.email);
+          userRow = await adminUsersPage.getUserRowByEmail(user.email);
+          const rowData = await adminUsersPage.getRowData(userRow);
+          await expect(rowData.fullName).toBe(newUserInfo.fullName);
+        }
+      );
+      await test.step(
+        'Delete user and check the page confirms this deletion',
+        async () => {
+          await adminUsersPage.findUserPageWithEmail(user.email);
+          const userRow = await adminUsersPage.getUserRowByEmail(user.email);
+          await adminUsersPage.clickDeleteUser(userRow);
+          const modal = adminUsersPage.deleteUserModal;
+          await modal.deleteButton.click();
+          await adminUsersPage.snackbar.waitFor({
+            state: 'attached'
+          });          
+          const snackbar = await adminUsersPage.getSnackbarData();
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+          await expect(userRow).not.toBeVisible(false);
+        }
+      );
+  });
+
+  test(
+    'Creating a user which has been deleted',
+    async ({ adminCreateUserPage, adminUsersPage }) => {
+      adminCreateUserPage.seed(9100);
+      const testUser = adminCreateUserPage.generateUser();
+
+      await test.step(
+        'Create the test user',
+        async () => {
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
+          await adminCreateUserPage.emailInput.fill(testUser.email);
+          await adminCreateUserPage.passwordInput.fill(testUser.password);
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          await adminUsersPage.snackbar.waitFor({
+            state: 'attached'
+          });
+          const snackbar = await adminUsersPage.getSnackbarData();
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+
+      await test.step(
+        'Delete the created user',
+        async () => {
+          await adminUsersPage.findUserPageWithEmail(testUser.email);
+          const userRow = await adminUsersPage.getUserRowByEmail(testUser.email);
+          await adminUsersPage.clickDeleteUser(userRow);
+          const modal = adminUsersPage.deleteUserModal;
+          await modal.deleteButton.click();
+          await adminUsersPage.snackbar.waitFor({
+            state: 'attached'
+          });
+          const snackbar = await adminUsersPage.getSnackbarData();
+          await expect(snackbar).not.toBeNull();
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+          await expect(userRow).not.toBeVisible(false);
+        }
+      );
+
+      await test.step(
+        'Create the user again',
+        async () => {
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
+          await adminCreateUserPage.emailInput.fill(testUser.email);
+          await adminCreateUserPage.passwordInput.fill(testUser.password);
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          await adminUsersPage.snackbar.waitFor({
+            state: 'attached'
+          });
+          /*
+            TODO: assert snackbar behavior after deciding what should
+            happen here, i.e. if this should create a new user, stay the
+            same, un-delete the user, or something else
+          */
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+    }
+  );
+
+  test(
+    'Creating a user which already exists',
+    async ({ adminCreateUserPage, adminUsersPage, page }) => {
+      adminCreateUserPage.seed(9200);
+      const testUser = adminCreateUserPage.generateUser();
+
+      await test.step(
+        'Create the test user',
+        async () => {
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
+          await adminCreateUserPage.emailInput.fill(testUser.email);
+          await adminCreateUserPage.passwordInput.fill(testUser.password);
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          await adminUsersPage.snackbar.waitFor({
+            state: 'attached'
+          });
+          const snackbar = await adminUsersPage.getSnackbarData();
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+
+      await test.step(
+        'Create the user again',
+        async () => {
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
+          await adminCreateUserPage.emailInput.fill(testUser.email);
+          await adminCreateUserPage.passwordInput.fill(testUser.password);
+          const createUserPageUrl = page.url();
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          await adminCreateUserPage.snackbar.waitFor({
+            state: 'attached'
+          });
+          await expect(page.url()).toBe(createUserPageUrl);
+          const snackbar = await adminUsersPage.getSnackbarData();
+          await expect(snackbar.variant).toBe('error');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+    }
+  );
+
+  test(
+    'Editing a user to have the same email as another user should not be allowed',
+    async ({
+      adminCreateUserPage, adminEditUserPage, adminUsersPage, page
+    }) => {
+      adminCreateUserPage.seed(9300);
+      const user1 = adminCreateUserPage.generateUser();
+      const user2 = adminCreateUserPage.generateUser();
+      await test.step(
+        'Create the first user',
+        async () => {
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(user1.fullName);
+          await adminCreateUserPage.emailInput.fill(user1.email);
+          await adminCreateUserPage.passwordInput.fill(user1.password);
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          await adminUsersPage.snackbar.waitFor({
+            state: 'attached'
+          });
+          const snackbar = await adminUsersPage.getSnackbarData();
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+
+      await test.step(
+        'Create the second user',
+        async () => {
+          await adminUsersPage.createUserButton.click();
+          await adminCreateUserPage.fullNameInput.fill(user2.fullName);
+          await adminCreateUserPage.emailInput.fill(user2.email);
+          await adminCreateUserPage.passwordInput.fill(user2.password);
+          await adminCreateUserPage.roleInput.click();
+          await adminCreateUserPage.page.getByRole(
+            'option', { name: 'Admin' }
+          ).click();
+          await adminCreateUserPage.createButton.click();
+          await adminUsersPage.snackbar.waitFor({
+            state: 'attached'
+          });
+          const snackbar = await adminUsersPage.getSnackbarData();
+          await expect(snackbar.variant).toBe('success');
+          await adminUsersPage.closeSnackbar();
+        }
+      );
+
+      await test.step(
+        'Try editing the second user to have the email of the first user',
+        async () => {
+          await adminUsersPage.findUserPageWithEmail(user2.email);
+          let userRow = await adminUsersPage.getUserRowByEmail(user2.email);
+          await adminUsersPage.clickEditUser(userRow);
+          
+          await adminEditUserPage.emailInput.fill(user1.email);
+          const editPageUrl = page.url();
+          await adminEditUserPage.updateButton.click();
+
+          await adminUsersPage.snackbar.waitFor({
+            state: 'attached'
+          });
+          const snackbar = await adminUsersPage.getSnackbarData();
+          await expect(snackbar.variant).toBe('error');
+          await adminUsersPage.closeSnackbar();
+          await expect(page.url()).toBe(editPageUrl);
+        }
+      );
+    }
+  );
+});