test: add name change test (#4125)

apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -50,7 +50,11 @@ export const UserInfo = ({
 }: UserInfoProps): ReactElement => {
   const user = useCurrentUser();
   return (
-    <div className={accountButton} onClick={onAccountSettingClick}>
+    <div
+      data-testid="user-info-card"
+      className={accountButton}
+      onClick={onAccountSettingClick}
+    >
       <UserAvatar
         size={28}
         name={user.name}

tests/affine-cloud/e2e/basic.spec.ts

@@ -6,6 +6,7 @@ import {
   loginUser,
 } from '@affine-test/kit/utils/cloud';
 import { waitForEditorLoad } from '@affine-test/kit/utils/page-logic';
+import { clickSideBarSettingButton } from '@affine-test/kit/utils/sidebar';
 import { expect } from '@playwright/test';
 
 let user: {
@@ -18,18 +19,7 @@ test.beforeEach(async () => {
   user = await createRandomUser();
 });
 
-test.afterEach(async () => {
-  // if you want to keep the user in the database for debugging,
-  // comment this line
-  await deleteUser(user.email);
-});
-
-test('server exist', async () => {
-  const json = await (await fetch('http://localhost:3010')).json();
-  expect(json.compatibility).toMatch(/[0-9]+\.[0-9]+\.[0-9]+(-[a-z]+)?/);
-});
-
-test('enable cloud success', async ({ page, context }) => {
+test.beforeEach(async ({ page, context }) => {
   await loginUser(page, user, {
     beforeLogin: async () => {
       expect(await getLoginCookie(context)).toBeUndefined();
@@ -42,3 +32,41 @@ test('enable cloud success', async ({ page, context }) => {
     },
   });
 });
+
+test.afterEach(async () => {
+  // if you want to keep the user in the database for debugging,
+  // comment this line
+  await deleteUser(user.email);
+});
+
+test.describe('basic', () => {
+  test('can see and change email and password in setting panel', async ({
+    page,
+  }) => {
+    const newName = 'test name';
+    {
+      await clickSideBarSettingButton(page);
+      const locator = page.getByTestId('user-info-card');
+      expect(locator.getByText(user.email)).toBeTruthy();
+      expect(locator.getByText(user.name)).toBeTruthy();
+      await locator.click({
+        delay: 50,
+      });
+      const nameInput = page.getByPlaceholder('Input account name');
+      await nameInput.clear();
+      await nameInput.type(newName, {
+        delay: 50,
+      });
+      await page.getByTestId('save-user-name').click({
+        delay: 50,
+      });
+    }
+    await page.reload();
+    {
+      await clickSideBarSettingButton(page);
+      const locator = page.getByTestId('user-info-card');
+      expect(locator.getByText(user.email)).toBeTruthy();
+      expect(locator.getByText(newName)).toBeTruthy();
+    }
+  });
+});