From ad144206dd5d5ec32957c1d6d37558a0a99e0fb5 Mon Sep 17 00:00:00 2001
From: QAComet <lucas@qacomet.com>
Date: Mon, 18 Mar 2024 10:32:56 -0600
Subject: [PATCH] fix(e2e): update expect to web-first assertion, wait for edit
 form to load

---
 .../e2e-tests/fixtures/admin/edit-user-page.js | 18 ++++++++++++++----
 packages/e2e-tests/fixtures/login-page.js      |  1 +
 .../e2e-tests/tests/admin/manage-roles.spec.js | 15 +++++----------
 .../e2e-tests/tests/admin/manage-users.spec.js |  3 ++-
 4 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/packages/e2e-tests/fixtures/admin/edit-user-page.js b/packages/e2e-tests/fixtures/admin/edit-user-page.js
index 3dbd79ed..9308294b 100644
--- a/packages/e2e-tests/fixtures/admin/edit-user-page.js
+++ b/packages/e2e-tests/fixtures/admin/edit-user-page.js
@@ -9,7 +9,7 @@ export class AdminEditUserPage extends AuthenticatedPage {
   /**
    * @param {import('@playwright/test').Page} page
    */
-  constructor (page) {
+  constructor(page) {
     super(page);
     this.fullNameInput = page.getByTestId('full-name-input');
     this.emailInput = page.getByTestId('email-input');
@@ -18,10 +18,20 @@ export class AdminEditUserPage extends AuthenticatedPage {
     this.pageTitle = page.getByTestId('edit-user-title');
   }
 
-  generateUser () {
+  /**
+   * @param {string} fullName
+   */
+  async waitForLoad(fullName) {
+    return await this.page.waitForFunction((fullName) => {
+      const el = document.querySelector("[data-test='full-name-input']");
+      return el && el.value === fullName;
+    }, fullName);
+  }
+
+  generateUser() {
     return {
       fullName: faker.person.fullName(),
       email: faker.internet.email(),
-    }
+    };
   }
-}
\ No newline at end of file
+}
diff --git a/packages/e2e-tests/fixtures/login-page.js b/packages/e2e-tests/fixtures/login-page.js
index d56905d1..a2e9128a 100644
--- a/packages/e2e-tests/fixtures/login-page.js
+++ b/packages/e2e-tests/fixtures/login-page.js
@@ -37,6 +37,7 @@ export class LoginPage extends BasePage {
     password = LoginPage.defaultPassword
   ) {
     await this.page.goto(this.path);
+    await this.emailTextField.waitFor({ state: 'visible' });
     await this.emailTextField.fill(email);
     await this.passwordTextField.fill(password);
 
diff --git a/packages/e2e-tests/tests/admin/manage-roles.spec.js b/packages/e2e-tests/tests/admin/manage-roles.spec.js
index 1cf01aec..c823645b 100644
--- a/packages/e2e-tests/tests/admin/manage-roles.spec.js
+++ b/packages/e2e-tests/tests/admin/manage-roles.spec.js
@@ -5,8 +5,7 @@ test.describe('Role management page', () => {
   test('Admin role is not deletable', async ({ adminRolesPage }) => {
     await adminRolesPage.navigateTo();
     const adminRow = await adminRolesPage.getRoleRowByName('Admin');
-    const rowCount = await adminRow.count();
-    await expect(rowCount).toBe(1);
+    await expect(adminRow).toHaveCount(1);
     const data = await adminRolesPage.getRowData(adminRow);
     await expect(data.role).toBe('Admin');
     await expect(data.canEdit).toBe(true);
@@ -42,8 +41,7 @@ test.describe('Role management page', () => {
         const roleRow = await adminRolesPage.getRoleRowByName(
           'Create Edit Test'
         );
-        const rowCount = await roleRow.count();
-        await expect(rowCount).toBe(1);
+        await expect(roleRow).toHaveCount(1);
         const roleData = await adminRolesPage.getRowData(roleRow);
         await expect(roleData.role).toBe('Create Edit Test');
         await expect(roleData.description).toBe('Test description');
@@ -76,8 +74,7 @@ test.describe('Role management page', () => {
         const roleRow = await adminRolesPage.getRoleRowByName(
           'Create Update Test'
         );
-        const rowCount = await roleRow.count();
-        await expect(rowCount).toBe(1);
+        await expect(roleRow).toHaveCount(1);
         const roleData = await adminRolesPage.getRowData(roleRow);
         await expect(roleData.role).toBe('Create Update Test');
         await expect(roleData.description).toBe('Update test description');
@@ -105,8 +102,7 @@ test.describe('Role management page', () => {
       await deleteModal.modal.waitFor({
         state: 'detached',
       });
-      const rowCount = await roleRow.count();
-      await expect(rowCount).toBe(0);
+      await expect(roleRow).toHaveCount(0);
     });
   });
 
@@ -468,7 +464,6 @@ test('Accessibility of role management page', async ({
     await deleteModal.modal.waitFor({
       state: 'detached',
     });
-    const rowCount = await roleRow.count();
-    await expect(rowCount).toBe(0);
+    await expect(roleRow).toHaveCount(0);
   });
 });
diff --git a/packages/e2e-tests/tests/admin/manage-users.spec.js b/packages/e2e-tests/tests/admin/manage-users.spec.js
index 97870c75..7e6dab7d 100644
--- a/packages/e2e-tests/tests/admin/manage-users.spec.js
+++ b/packages/e2e-tests/tests/admin/manage-users.spec.js
@@ -60,6 +60,7 @@ test.describe('User management page', () => {
           
           let userRow = await adminUsersPage.getUserRowByEmail(user.email);
           await adminUsersPage.clickEditUser(userRow);
+          await adminEditUserPage.waitForLoad(user.fullName);
           const newUserInfo = adminEditUserPage.generateUser();
           await adminEditUserPage.fullNameInput.fill(newUserInfo.fullName);
           await adminEditUserPage.updateButton.click();
@@ -269,7 +270,7 @@ test.describe('User management page', () => {
           await adminUsersPage.findUserPageWithEmail(user2.email);
           let userRow = await adminUsersPage.getUserRowByEmail(user2.email);
           await adminUsersPage.clickEditUser(userRow);
-          
+          await adminEditUserPage.waitForLoad(user2.fullName);
           await adminEditUserPage.emailInput.fill(user1.email);
           const editPageUrl = page.url();
           await adminEditUserPage.updateButton.click();