Update retries in playwright config and refactor account settings

This update changes the number of retries in the Playwright configuration. Additionally, solid improvements have been made in the account settings, including better data semantics for testing, changes to email confirmation, and adding a new E2E test suite for accounts. The sign-up flow was updated and problems with multi-language support logic were fixed.

apps/e2e/playwright.config.ts

@@ -15,8 +15,7 @@ export default defineConfig({
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 3 : 1,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */

apps/e2e/tests/account/account.po.ts

@@ -0,0 +1,35 @@
+import { Page } from '@playwright/test';
+import { AuthPageObject } from '../authentication/auth.po';
+
+export class AccountPageObject {
+  private readonly page: Page;
+  public auth: AuthPageObject;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.auth = new AuthPageObject(page);
+  }
+
+  async setup() {
+    return this.auth.signUpFlow('/home/settings');
+  }
+
+  async updateProfileName(name: string) {
+    await this.page.locator('[data-test="update-account-name-form"] input').fill(name);
+    await this.page.locator('[data-test="update-account-name-form"] button').click();
+  }
+
+  async updateProfileEmail(email: string) {
+    await this.page.locator('[data-test="account-email-form-email-input"]').fill(email);
+    await this.page.locator('[data-test="account-email-form-repeat-email-input"]').fill(email);
+    await this.page.locator('[data-test="account-email-form"] button').click();
+  }
+
+  getProfileName() {
+    return this.page.locator('[data-test="account-dropdown-display-name"]');
+  }
+
+  getProfileEmail() {
+    return this.page.locator('[data-test="account-dropdown-email"]');
+  }
+}

apps/e2e/tests/account/account.spec.ts

@@ -0,0 +1,38 @@
+import { expect, Page, test } from '@playwright/test';
+import { AccountPageObject } from './account.po';
+
+test.describe('Account Settings', () => {
+  let page: Page;
+  let account: AccountPageObject;
+
+  test.beforeAll(async ({ browser }) => {
+    page = await browser.newPage();
+    account = new AccountPageObject(page);
+
+    await account.setup();
+  })
+
+  test('user can update their profile name', async () => {
+    const name = 'John Doe';
+
+    await account.updateProfileName(name);
+
+    await page.waitForResponse((resp) => {
+      return resp.url().includes('accounts');
+    });
+
+    await expect(account.getProfileName()).toHaveText(name);
+  });
+
+  test('user can update their email', async () => {
+    const email = account.auth.createRandomEmail();
+
+    await account.updateProfileEmail(email);
+
+    const req = await page.waitForResponse((resp) => {
+      return resp.url().includes('auth/v1/user');
+    });
+
+    expect(req.status()).toBe(200);
+  });
+});

apps/e2e/tests/authentication/auth.po.ts

@@ -43,7 +43,7 @@ export class AuthPageObject {
   async visitConfirmEmailLink(email: string) {
     await this.page.waitForTimeout(300);
 
-    return this.mailbox.visitMailbox(email);
+    await this.mailbox.visitMailbox(email);
   }
 
   createRandomEmail() {
@@ -51,4 +51,20 @@ export class AuthPageObject {
 
     return `${value.toFixed(0)}@makerkit.dev`;
   }
+
+  async signUpFlow(path: string) {
+    const email = this.createRandomEmail();
+
+    await this.page.goto(`/auth/sign-up?next=${path}`, {
+      waitUntil: 'networkidle',
+    });
+
+    await this.signUp({
+      email,
+      password: 'password',
+      repeatPassword: 'password',
+    });
+
+    await this.visitConfirmEmailLink(email);
+  }
 }

apps/e2e/tests/utils/mailbox.ts

@@ -18,6 +18,12 @@ export class Mailbox {
 
     const json = await this.getInviteEmail(mailbox);
 
+    if (!json.body) {
+      console.log(json);
+
+      throw new Error('Email body was not found');
+    }
+
     const html = (json.body as { html: string }).html;
     const el = parse(html);