Refactor E2E tests, update utils, and modify plan-picker validation

Several changes have been made to optimize the testing and validation workflows. The end-to-end tests for user billing, invitations, account, team billing, and team accounts have been retouched for improved performance and better accuracy. There has been a minor modification in the validation rules for plan-picker in the billing component. Furthermore, modifications are made to several utility functions to fine-tune their operations.

apps/e2e/tests/team-accounts/team-accounts.po.ts

@@ -13,19 +13,14 @@ export class TeamAccountsPageObject {
 
   async setup(params = this.createTeamName()) {
     await this.auth.signUpFlow('/home');
+
     await this.createTeam(params);
   }
 
-  getTeamFromSelector(teamSlug: string) {
-    return this.page.locator(
-      `[data-test="account-selector-team"][data-value="${teamSlug}"]`,
-    );
-  }
-
-  selectAccount(teamName: string) {
-    return this.page.click(
-      `[data-test="account-selector-team"][data-name="${teamName}"]`,
-    );
+  getTeamFromSelector(teamName: string) {
+    return this.page.locator(`[data-test="account-selector-team"]`, {
+      hasText: teamName,
+    });
   }
 
   getTeams() {
@@ -48,8 +43,14 @@ export class TeamAccountsPageObject {
       .click();
   }
 
-  openAccountsSelector() {
-    return this.page.click('[data-test="account-selector-trigger"]');
+  async openAccountsSelector() {
+    await expect(async () => {
+      await this.page.click('[data-test="account-selector-trigger"]');
+
+      return expect(
+        this.page.locator('[data-test="account-selector-content"]'),
+      ).toBeVisible();
+    }).toPass();
   }
 
   async createTeam({ teamName, slug } = this.createTeamName()) {
@@ -62,29 +63,41 @@ export class TeamAccountsPageObject {
     await this.page.waitForURL(`/home/${slug}`);
   }
 
-  async updateName(name: string) {
-    await this.page.fill(
-      '[data-test="update-team-account-name-form"] input',
-      name,
-    );
+  async updateName(name: string, slug: string) {
+    await expect(async () => {
+      await this.page.fill(
+        '[data-test="update-team-account-name-form"] input',
+        name,
+      );
 
-    await this.page.click('[data-test="update-team-account-name-form"] button');
+      await this.page.click(
+        '[data-test="update-team-account-name-form"] button',
+      );
+
+      // the slug should be updated to match the new team name
+      await expect(this.page).toHaveURL(
+        `http://localhost:3000/home/${slug}/settings`,
+      );
+    }).toPass();
   }
 
   async deleteAccount(teamName: string) {
-    await this.page.click('[data-test="delete-team-trigger"]');
+    await expect(async () => {
+      await this.page.click('[data-test="delete-team-trigger"]');
 
-    expect(
-      await this.page
-        .locator('[data-test="delete-team-form-confirm-input"]')
-        .isVisible(),
-    ).toBeTruthy();
+      await expect(
+        this.page.locator('[data-test="delete-team-form-confirm-input"]'),
+      ).toBeVisible();
 
-    await this.page.fill(
-      '[data-test="delete-team-form-confirm-input"]',
-      teamName,
-    );
-    await this.page.click('[data-test="delete-team-form-confirm-button"]');
+      await this.page.fill(
+        '[data-test="delete-team-form-confirm-input"]',
+        teamName,
+      );
+
+      await this.page.click('[data-test="delete-team-form-confirm-button"]');
+
+      await this.page.waitForURL('http://localhost:3000/home');
+    }).toPass();
   }
 
   createTeamName() {

apps/e2e/tests/team-accounts/team-accounts.spec.ts

@@ -17,14 +17,14 @@ test.describe('Team Accounts', () => {
     const { teamName, slug } = teamAccounts.createTeamName();
 
     await teamAccounts.goToSettings();
-    await teamAccounts.updateName(teamName);
+    await teamAccounts.updateName(teamName, slug);
 
     // the slug should be updated to match the new team name
     await page.waitForURL(`http://localhost:3000/home/${slug}/settings`);
 
     await teamAccounts.openAccountsSelector();
 
-    await expect(teamAccounts.getTeamFromSelector(slug)).toBeVisible();
+    await expect(teamAccounts.getTeamFromSelector(teamName)).toBeVisible();
   });
 });
 
@@ -40,7 +40,7 @@ test.describe('Account Deletion', () => {
     await teamAccounts.openAccountsSelector();
 
     await expect(
-      teamAccounts.getTeamFromSelector(params.slug),
+      teamAccounts.getTeamFromSelector(params.teamName),
     ).not.toBeVisible();
   });
 });