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);
 

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -88,9 +88,17 @@ export function PersonalAccountDropdown({
               'fade-in animate-in flex w-full flex-col truncate text-left'
             }
           >
-            <span className={'truncate text-sm'}>{displayName}</span>
+            <span
+              data-test={'account-dropdown-display-name'}
+              className={'truncate text-sm'}
+            >
+              {displayName}
+            </span>
 
-            <span className={'text-muted-foreground truncate text-xs'}>
+            <span
+              data-test={'account-dropdown-email'}
+              className={'text-muted-foreground truncate text-xs'}
+            >
               {signedInAsLabel}
             </span>
           </div>

packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx

@@ -156,5 +156,9 @@ export function PersonalAccountSettingsContainer(
 
 function useSupportMultiLanguage() {
   const { i18n } = useTranslation();
-  return i18n.options.supportedLngs && i18n.options.supportedLngs.length > 1;
+  const langs = (i18n.options.supportedLngs as string[]) ?? [];
+
+  const supportedLangs = langs.filter((lang) => lang !== 'cimode');
+
+  return supportedLangs.length > 1;
 }

packages/features/accounts/src/components/personal-account-settings/email/update-email-form.tsx

@@ -3,6 +3,7 @@
 import type { User } from '@supabase/supabase-js';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { CheckIcon } from '@radix-ui/react-icons';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
@@ -74,11 +75,13 @@ export function UpdateEmailForm({
     <Form {...form}>
       <form
         className={'flex flex-col space-y-4'}
-        data-test={'update-email-form'}
+        data-test={'account-email-form'}
         onSubmit={form.handleSubmit(updateEmail)}
       >
         <If condition={updateUserMutation.data}>
           <Alert variant={'success'}>
+            <CheckIcon className={'h-4'} />
+
             <AlertTitle>
               <Trans i18nKey={'account:updateEmailSuccess'} />
             </AlertTitle>
@@ -99,7 +102,7 @@ export function UpdateEmailForm({
 
                 <FormControl>
                   <Input
-                    data-test={'profile-new-email-input'}
+                    data-test={'account-email-form-email-input'}
                     required
                     type={'email'}
                     placeholder={''}
@@ -123,7 +126,7 @@ export function UpdateEmailForm({
                 <FormControl>
                   <Input
                     {...field}
-                    data-test={'profile-repeat-email-input'}
+                    data-test={'account-email-form-repeat-email-input'}
                     required
                     type={'email'}
                   />

packages/features/accounts/src/components/personal-account-settings/update-account-details-form.tsx

@@ -50,7 +50,7 @@ export function UpdateAccountDetailsForm({
     return toast.promise(() => promise, {
       success: t(`updateProfileSuccess`),
       error: t(`updateProfileError`),
-      loading: t(`:pdateProfileLoading`),
+      loading: t(`updateProfileLoading`),
     });
   };
 
@@ -58,7 +58,7 @@ export function UpdateAccountDetailsForm({
     <div className={'flex flex-col space-y-8'}>
       <Form {...form}>
         <form
-          data-test={'update-profile-form'}
+          data-test={'update-account-name-form'}
           className={'flex flex-col space-y-4'}
           onSubmit={form.handleSubmit(onSubmit)}
         >
@@ -72,7 +72,7 @@ export function UpdateAccountDetailsForm({
 
                 <FormControl>
                   <Input
-                    data-test={'profile-display-name'}
+                    data-test={'account-display-name'}
                     minLength={2}
                     placeholder={''}
                     maxLength={100}

packages/features/auth/src/components/password-sign-up-container.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useRef, useState } from 'react';
 
-import { Check } from 'lucide-react';
+import { CheckCircledIcon } from '@radix-ui/react-icons';
 
 import { useSignUpWithEmailAndPassword } from '@kit/supabase/hooks/use-sign-up-with-email-password';
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -71,7 +71,7 @@ export function EmailPasswordSignUpContainer({
 function SuccessAlert() {
   return (
     <Alert variant={'success'}>
-      <Check className={'w-4'} />
+      <CheckCircledIcon className={'w-4'} />
 
       <AlertTitle>
         <Trans i18nKey={'auth:emailConfirmationAlertHeading'} />

packages/features/auth/src/components/sign-up-methods-container.tsx

@@ -87,6 +87,13 @@ function getCallbackUrl(props: {
     url.searchParams.set('invite_token', props.inviteToken);
   }
 
+  const searchParams = new URLSearchParams(window.location.search);
+  const next = searchParams.get('next');
+
+  if (next) {
+    url.searchParams.set('next', next);
+  }
+
   return url.href;
 }