test: use new alert in create role and create user tests

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

@@ -1,3 +1,5 @@
+const { expect } = require('@playwright/test');
+
 const { faker } = require('@faker-js/faker');
 const { AuthenticatedPage } = require('../authenticated-page');
 
@@ -11,11 +13,17 @@ export class AdminCreateUserPage 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.roleInput = page.getByTestId('roleId-autocomplete');
     this.createButton = page.getByTestId('create-button');
     this.pageTitle = page.getByTestId('create-user-title');
-    this.invitationEmailInfoAlert = page.getByTestId('invitation-email-info-alert');
+    this.invitationEmailInfoAlert = page.getByTestId(
-    this.acceptInvitationLink = page.getByTestId('invitation-email-info-alert').getByRole('link');
+      'invitation-email-info-alert'
+    );
+    this.acceptInvitationLink = page
+      .getByTestId('invitation-email-info-alert')
+      .getByRole('link');
+    this.createUserSuccessAlert = page.getByTestId('create-user-success-alert');
+    this.fieldError = page.locator('p[id$="-helper-text"]');
   }
 
   seed(seed) {
@@ -28,4 +36,8 @@ export class AdminCreateUserPage extends AuthenticatedPage {
       email: faker.internet.email().toLowerCase(),
     };
   }
+
+  async expectCreateUserSuccessAlertToBeVisible() {
+    await expect(this.createUserSuccessAlert).toBeVisible();
+  }
 }

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

@@ -35,9 +35,8 @@ test.describe('Role management page', () => {
       await adminCreateRolePage.closeSnackbar();
     });
 
-    let roleRow = await test.step(
+    let roleRow =
-      'Make sure role data is correct',
+      await test.step('Make sure role data is correct', async () => {
-      async () => {
         const roleRow = await adminRolesPage.getRoleRowByName(
           'Create Edit Test'
         );
@@ -48,8 +47,7 @@ test.describe('Role management page', () => {
         await expect(roleData.canEdit).toBe(true);
         await expect(roleData.canDelete).toBe(true);
         return roleRow;
-      }
+      });
-    );
 
     await test.step('Edit the role', async () => {
       await adminRolesPage.clickEditRole(roleRow);
@@ -67,9 +65,8 @@ test.describe('Role management page', () => {
       await adminEditRolePage.closeSnackbar();
     });
 
-    roleRow = await test.step(
+    roleRow =
-      'Make sure changes reflected on roles page',
+      await test.step('Make sure changes reflected on roles page', async () => {
-      async () => {
         await adminRolesPage.isMounted();
         const roleRow = await adminRolesPage.getRoleRowByName(
           'Create Update Test'
@@ -81,8 +78,7 @@ test.describe('Role management page', () => {
         await expect(roleData.canEdit).toBe(true);
         await expect(roleData.canDelete).toBe(true);
         return roleRow;
-      }
+      });
-    );
 
     await test.step('Delete the role', async () => {
       await adminRolesPage.clickDeleteRole(roleRow);
@@ -184,9 +180,7 @@ test.describe('Role management page', () => {
       await expect(snackbar.variant).toBe('success');
       await adminCreateRolePage.closeSnackbar();
     });
-    await test.step(
+    await test.step('Create a new user with the "Delete Role" role', async () => {
-      'Create a new user with the "Delete Role" role',
-      async () => {
       await adminUsersPage.navigateTo();
       await adminUsersPage.createUserButton.click();
       await adminCreateUserPage.fullNameInput.fill('User Role Test');
@@ -198,22 +192,13 @@ test.describe('Role management page', () => {
         .getByRole('option', { name: 'Delete Role', exact: true })
         .click();
       await adminCreateUserPage.createButton.click();
-        await adminCreateUserPage.snackbar.waitFor({
-          state: 'attached',
-        });
       await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
         state: 'attached',
       });
-        const snackbar = await adminUsersPage.getSnackbarData(
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
-          'snackbar-create-user-success'
+    });
-        );
+
-        await expect(snackbar.variant).toBe('success');
+    await test.step('Try to delete "Delete Role" role when new user has it', async () => {
-        await adminUsersPage.closeSnackbar();
-      }
-    );
-    await test.step(
-      'Try to delete "Delete Role" role when new user has it',
-      async () => {
       await adminRolesPage.navigateTo();
       const row = await adminRolesPage.getRoleRowByName('Delete Role');
       const modal = await adminRolesPage.clickDeleteRole(row);
@@ -221,12 +206,13 @@ test.describe('Role management page', () => {
       await adminRolesPage.snackbar.waitFor({
         state: 'attached',
       });
-        const snackbar = await adminRolesPage.getSnackbarData('snackbar-delete-role-error');
+      const snackbar = await adminRolesPage.getSnackbarData(
+        'snackbar-delete-role-error'
+      );
       await expect(snackbar.variant).toBe('error');
       await adminRolesPage.closeSnackbar();
       await modal.close();
-      }
+    });
-    );
     await test.step('Change the role the user has', async () => {
       await adminUsersPage.navigateTo();
       await adminUsersPage.usersLoader.waitFor({
@@ -301,24 +287,16 @@ test.describe('Role management page', () => {
         .getByRole('option', { name: 'Cannot Delete Role' })
         .click();
       await adminCreateUserPage.createButton.click();
-      await adminCreateUserPage.snackbar.waitFor({
-        state: 'attached',
-      });
       await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
         state: 'attached',
       });
-      const snackbar = await adminCreateUserPage.getSnackbarData(
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
-        'snackbar-create-user-success'
-      );
-      await expect(snackbar.variant).toBe('success');
-      await adminCreateUserPage.closeSnackbar();
     });
     await test.step('Delete this user', async () => {
       await adminUsersPage.navigateTo();
       const row = await adminUsersPage.findUserPageWithEmail(
         'user-delete-role-test@automatisch.io'
       );
-      // await test.waitForTimeout(10000);
       const modal = await adminUsersPage.clickDeleteUser(row);
       await modal.deleteButton.click();
       await adminUsersPage.snackbar.waitFor({
@@ -385,17 +363,10 @@ test('Accessibility of role management page', async ({
       .getByRole('option', { name: 'Basic Test' })
       .click();
     await adminCreateUserPage.createButton.click();
-    await adminCreateUserPage.snackbar.waitFor({
-      state: 'attached',
-    });
     await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
       state: 'attached',
     });
-    const snackbar = await adminCreateUserPage.getSnackbarData(
+    await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
-      'snackbar-create-user-success'
-    );
-    await expect(snackbar.variant).toBe('success');
-    await adminCreateUserPage.closeSnackbar();
   });
 
   await test.step('Logout and login to the basic role user', async () => {
@@ -409,22 +380,16 @@ test('Accessibility of role management page', async ({
     await page.getByTestId('logout-item').click();
 
     const acceptInvitationPage = new AcceptInvitation(page);
-
     await acceptInvitationPage.open(acceptInvitatonToken);
-
     await acceptInvitationPage.acceptInvitation('sample');
 
     const loginPage = new LoginPage(page);
-
-    // await loginPage.isMounted();
     await loginPage.login('basic-role-test@automatisch.io', 'sample');
     await expect(loginPage.loginButton).not.toBeVisible();
     await expect(page).toHaveURL('/flows');
   });
 
-  await test.step(
+  await test.step('Navigate to the admin settings page and make sure it is blank', async () => {
-    'Navigate to the admin settings page and make sure it is blank',
-    async () => {
     const pageUrl = new URL(page.url());
     const url = `${pageUrl.origin}/admin-settings/users`;
     await page.goto(url);
@@ -443,8 +408,7 @@ test('Accessibility of role management page', async ({
       return false;
     });
     await expect(isUnmounted).toBe(true);
-    }
+  });
-  );
 
   await test.step('Log back into the admin account', async () => {
     await page.goto('/');

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

@@ -5,15 +5,16 @@ const { test, expect } = require('../../fixtures/index');
  * 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(
+  test('User creation and deletion process', async ({
-    'User creation and deletion process',
+    adminCreateUserPage,
-    async ({ adminCreateUserPage, adminEditUserPage, adminUsersPage }) => {
+    adminEditUserPage,
+    adminUsersPage,
+  }) => {
     adminCreateUserPage.seed(9000);
     const user = adminCreateUserPage.generateUser();
     await adminUsersPage.usersLoader.waitFor({
@@ -21,45 +22,33 @@ test.describe('User management page', () => {
         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(
+    await test.step('Create a user', async () => {
-        'Create a user',
-        async () => {
       await adminUsersPage.createUserButton.click();
       await adminCreateUserPage.fullNameInput.fill(user.fullName);
       await adminCreateUserPage.emailInput.fill(user.email);
       await adminCreateUserPage.roleInput.click();
-          await adminCreateUserPage.page.getByRole(
+      await adminCreateUserPage.page
-            'option', { name: 'Admin' }
+        .getByRole('option', { name: 'Admin' })
-          ).click();
+        .click();
       await adminCreateUserPage.createButton.click();
       await adminCreateUserPage.invitationEmailInfoAlert.waitFor({
-            state: 'attached'
+        state: 'attached',
       });
 
-          const snackbar = await adminUsersPage.getSnackbarData(
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
-            'snackbar-create-user-success'
-          );
-          await expect(snackbar.variant).toBe('success');
       await adminUsersPage.navigateTo();
-          await adminUsersPage.closeSnackbar();
+    });
-        }
+    await test.step('Check the user exists with the expected properties', async () => {
-      );
-      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 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);
@@ -79,11 +68,8 @@ test.describe('User management page', () => {
       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 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);
@@ -96,39 +82,30 @@ test.describe('User management page', () => {
       await expect(snackbar.variant).toBe('success');
       await adminUsersPage.closeSnackbar();
       await expect(userRow).not.toBeVisible(false);
-        }
+    });
-      );
   });
 
-  test(
+  test('Creating a user which has been deleted', async ({
-    'Creating a user which has been deleted',
+    adminCreateUserPage,
-    async ({ adminCreateUserPage, adminUsersPage }) => {
+    adminUsersPage,
+  }) => {
     adminCreateUserPage.seed(9100);
     const testUser = adminCreateUserPage.generateUser();
 
-      await test.step(
+    await test.step('Create the test user', async () => {
-        'Create the test user',
-        async () => {
       await adminUsersPage.navigateTo();
       await adminUsersPage.createUserButton.click();
       await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
       await adminCreateUserPage.emailInput.fill(testUser.email);
       await adminCreateUserPage.roleInput.click();
-          await adminCreateUserPage.page.getByRole(
+      await adminCreateUserPage.page
-            'option', { name: 'Admin' }
+        .getByRole('option', { name: 'Admin' })
-          ).click();
+        .click();
       await adminCreateUserPage.createButton.click();
-          const snackbar = await adminUsersPage.getSnackbarData(
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
-            'snackbar-create-user-success'
+    });
-          );
-          await expect(snackbar.variant).toBe('success');
-          await adminUsersPage.closeSnackbar();
-        }
-      );
 
-      await test.step(
+    await test.step('Delete the created user', async () => {
-        'Delete the created user',
-        async () => {
       await adminUsersPage.navigateTo();
       await adminUsersPage.findUserPageWithEmail(testUser.email);
       const userRow = await adminUsersPage.getUserRowByEmail(testUser.email);
@@ -142,127 +119,94 @@ test.describe('User management page', () => {
       await expect(snackbar.variant).toBe('success');
       await adminUsersPage.closeSnackbar();
       await expect(userRow).not.toBeVisible(false);
-        }
+    });
-      );
 
-      await test.step(
+    await test.step('Create the user again', async () => {
-        'Create the user again',
-        async () => {
       await adminUsersPage.createUserButton.click();
       await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
       await adminCreateUserPage.emailInput.fill(testUser.email);
       await adminCreateUserPage.roleInput.click();
-          await adminCreateUserPage.page.getByRole(
+      await adminCreateUserPage.page
-            'option', { name: 'Admin' }
+        .getByRole('option', { name: 'Admin' })
-          ).click();
+        .click();
       await adminCreateUserPage.createButton.click();
-          const snackbar = await adminUsersPage.getSnackbarData('snackbar-error');
+      await expect(adminCreateUserPage.fieldError).toHaveCount(1);
-          await expect(snackbar.variant).toBe('error');
+    });
-          await adminUsersPage.closeSnackbar();
+  });
-        }
-      );
-    }
-  );
 
-  test(
+  test('Creating a user which already exists', async ({
-    'Creating a user which already exists',
+    adminCreateUserPage,
-    async ({ adminCreateUserPage, adminUsersPage, page }) => {
+    adminUsersPage,
+    page,
+  }) => {
     adminCreateUserPage.seed(9200);
     const testUser = adminCreateUserPage.generateUser();
 
-      await test.step(
+    await test.step('Create the test user', async () => {
-        'Create the test user',
-        async () => {
       await adminUsersPage.createUserButton.click();
       await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
       await adminCreateUserPage.emailInput.fill(testUser.email);
       await adminCreateUserPage.roleInput.click();
-          await adminCreateUserPage.page.getByRole(
+      await adminCreateUserPage.page
-            'option', { name: 'Admin' }
+        .getByRole('option', { name: 'Admin' })
-          ).click();
+        .click();
       await adminCreateUserPage.createButton.click();
-          const snackbar = await adminUsersPage.getSnackbarData(
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
-            'snackbar-create-user-success'
+    });
-          );
-          await expect(snackbar.variant).toBe('success');
-          await adminUsersPage.closeSnackbar();
-        }
-      );
 
-      await test.step(
+    await test.step('Create the user again', async () => {
-        'Create the user again',
-        async () => {
       await adminUsersPage.navigateTo();
       await adminUsersPage.createUserButton.click();
       await adminCreateUserPage.fullNameInput.fill(testUser.fullName);
       await adminCreateUserPage.emailInput.fill(testUser.email);
       const createUserPageUrl = page.url();
       await adminCreateUserPage.roleInput.click();
-          await adminCreateUserPage.page.getByRole(
+      await adminCreateUserPage.page
-            'option', { name: 'Admin' }
+        .getByRole('option', { name: 'Admin' })
-          ).click();
+        .click();
       await adminCreateUserPage.createButton.click();
 
       await expect(page.url()).toBe(createUserPageUrl);
-          const snackbar = await adminUsersPage.getSnackbarData('snackbar-error');
+      await expect(adminCreateUserPage.fieldError).toHaveCount(1);
-          await expect(snackbar.variant).toBe('error');
+    });
-          await adminUsersPage.closeSnackbar();
+  });
-        }
-      );
-    }
-  );
 
-  test(
+  test('Editing a user to have the same email as another user should not be allowed', async ({
-    'Editing a user to have the same email as another user should not be allowed',
+    adminCreateUserPage,
-    async ({
+    adminEditUserPage,
-      adminCreateUserPage, adminEditUserPage, adminUsersPage, page
+    adminUsersPage,
+    page,
   }) => {
     adminCreateUserPage.seed(9300);
     const user1 = adminCreateUserPage.generateUser();
     const user2 = adminCreateUserPage.generateUser();
-      await test.step(
+    await test.step('Create the first user', async () => {
-        'Create the first user',
-        async () => {
       await adminUsersPage.navigateTo();
       await adminUsersPage.createUserButton.click();
       await adminCreateUserPage.fullNameInput.fill(user1.fullName);
       await adminCreateUserPage.emailInput.fill(user1.email);
       await adminCreateUserPage.roleInput.click();
-          await adminCreateUserPage.page.getByRole(
+      await adminCreateUserPage.page
-            'option', { name: 'Admin' }
+        .getByRole('option', { name: 'Admin' })
-          ).click();
+        .click();
       await adminCreateUserPage.createButton.click();
-          const snackbar = await adminUsersPage.getSnackbarData(
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
-            'snackbar-create-user-success'
+    });
-          );
-          await expect(snackbar.variant).toBe('success');
-          await adminUsersPage.closeSnackbar();
-        }
-      );
 
-      await test.step(
+    await test.step('Create the second user', async () => {
-        'Create the second user',
-        async () => {
       await adminUsersPage.navigateTo();
       await adminUsersPage.createUserButton.click();
       await adminCreateUserPage.fullNameInput.fill(user2.fullName);
       await adminCreateUserPage.emailInput.fill(user2.email);
       await adminCreateUserPage.roleInput.click();
-          await adminCreateUserPage.page.getByRole(
+      await adminCreateUserPage.page
-            'option', { name: 'Admin' }
+        .getByRole('option', { name: 'Admin' })
-          ).click();
+        .click();
       await adminCreateUserPage.createButton.click();
-          const snackbar = await adminUsersPage.getSnackbarData(
+      await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
-            'snackbar-create-user-success'
+    });
-          );
-          await expect(snackbar.variant).toBe('success');
-          await adminUsersPage.closeSnackbar();
-        }
-      );
 
-      await test.step(
+    await test.step('Try editing the second user to have the email of the first user', async () => {
-        'Try editing the second user to have the email of the first user',
-        async () => {
       await adminUsersPage.navigateTo();
       await adminUsersPage.findUserPageWithEmail(user2.email);
       let userRow = await adminUsersPage.getUserRowByEmail(user2.email);
@@ -272,14 +216,10 @@ test.describe('User management page', () => {
       const editPageUrl = page.url();
       await adminEditUserPage.updateButton.click();
 
-          const snackbar = await adminUsersPage.getSnackbarData(
+      const snackbar = await adminUsersPage.getSnackbarData('snackbar-error');
-            'snackbar-error'
-          );
       await expect(snackbar.variant).toBe('error');
       await adminUsersPage.closeSnackbar();
       await expect(page.url()).toBe(editPageUrl);
-        }
+    });
-      );
+  });
-    }
-  );
 });

packages/e2e-tests/tests/flow-editor/create-flow.spec.js

@@ -7,9 +7,10 @@ test('Ensure creating a new flow works', async ({ page }) => {
   );
 });
 
-test(
+test('Create a new flow with a Scheduler step then an Ntfy step', async ({
-  'Create a new flow with a Scheduler step then an Ntfy step',
+  flowEditorPage,
-  async ({ flowEditorPage, page }) => {
+  page,
+}) => {
   await test.step('create flow', async () => {
     await test.step('navigate to new flow page', async () => {
       await page.getByTestId('create-flow-button').click();
@@ -27,17 +28,13 @@ test(
     await test.step('choose app and event substep', async () => {
       await test.step('choose application', async () => {
         await flowEditorPage.appAutocomplete.click();
-          await page
+        await page.getByRole('option', { name: 'Scheduler' }).click();
-            .getByRole('option', { name: 'Scheduler' })
-            .click();
       });
 
       await test.step('choose and event', async () => {
         await expect(flowEditorPage.eventAutocomplete).toBeVisible();
         await flowEditorPage.eventAutocomplete.click();
-          await page
+        await page.getByRole('option', { name: 'Every hour' }).click();
-            .getByRole('option', { name: 'Every hour' })
-            .click();
       });
 
       await test.step('continue to next step', async () => {
@@ -89,9 +86,7 @@ test(
       await test.step('choose an event', async () => {
         await expect(flowEditorPage.eventAutocomplete).toBeVisible();
         await flowEditorPage.eventAutocomplete.click();
-          await page
+        await page.getByRole('option', { name: 'Send message' }).click();
-            .getByRole('option', { name: 'Send message' })
-            .click();
       });
 
       await test.step('continue to next step', async () => {
@@ -107,14 +102,18 @@ test(
     await test.step('choose connection substep', async () => {
       await test.step('choose connection list item', async () => {
         await flowEditorPage.connectionAutocomplete.click();
-          await page.getByRole('option').first().click();
+        await page
+          .getByRole('option')
+          .filter({ hasText: 'Add new connection' })
+          .click();
       });
 
       await test.step('continue to next step', async () => {
-          await flowEditorPage.continueButton.click();
+        await page.getByTestId('create-connection-button').click();
       });
 
       await test.step('collapses the substep', async () => {
+        await flowEditorPage.continueButton.click();
         await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
       });
     });
@@ -143,10 +142,7 @@ test(
     await test.step('test trigger substep', async () => {
       await test.step('show sample output', async () => {
         await expect(flowEditorPage.testOutput).not.toBeVisible();
-          await page
+        await page.getByTestId('flow-substep-continue-button').first().click();
-            .getByTestId('flow-substep-continue-button')
-            .first()
-            .click();
         await expect(flowEditorPage.testOutput).toBeVisible();
         await flowEditorPage.screenshot({
           path: 'Ntfy action test output.png',
@@ -172,9 +168,7 @@ test(
     });
 
     await test.step('unpublish from snackbar', async () => {
-        await page
+      await page.getByTestId('unpublish-flow-from-snackbar').click();
-          .getByTestId('unpublish-flow-from-snackbar')
-          .click();
       await expect(flowEditorPage.infoSnackbar).not.toBeVisible();
     });
 
@@ -200,5 +194,4 @@ test(
       await expect(page).toHaveURL('/flows');
     });
   });
-  }
+});
-);

packages/e2e-tests/tests/my-profile/profile-updates.spec.js

@@ -33,10 +33,7 @@ publicTest.describe('My Profile', () => {
           .getByRole('option', { name: 'Admin' })
           .click();
         await adminCreateUserPage.createButton.click();
-        const snackbar = await adminUsersPage.getSnackbarData(
+        await adminCreateUserPage.expectCreateUserSuccessAlertToBeVisible();
-          'snackbar-create-user-success'
-        );
-        await expect(snackbar.variant).toBe('success');
       });
 
       await publicTest.step('copy invitation link', async () => {