test: add e2e test for group profile

web/e2e/playwright/package.json

@@ -11,7 +11,8 @@
     "test:debug": "playwright test --debug",
     "test:watch": "playwright-watch exec yarn test",
     "open": "playwright open --load-storage auth.json http://localhost:11011",
-    "codegen": "playwright codegen --load-storage auth.json http://localhost:11011"
+    "codegen": "playwright codegen --load-storage auth.json http://localhost:11011",
+    "trace": "playwright show-trace"
   },
   "devDependencies": {
     "@playwright/test": "^1.19.2",

web/e2e/playwright/playwright.config.ts

@@ -35,11 +35,9 @@ const config: PlaywrightTestConfig = {
     baseURL: 'http://localhost:11011',
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://localhost:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: process.env.CI ? 'on-first-retry' : 'retain-on-failure',
   },
 
   /* Configure projects for major browsers */

web/e2e/playwright/tests/main.spec.ts

@@ -64,7 +64,7 @@ test.describe('Main Process', () => {
      */
     async function deleteGroup(page: Page) {
       // Click text=Test
-      await page.locator('text=Test').click();
+      await page.locator('[data-testid="group-header"]').click();
       // Click text=退出群组
       await page.locator('text=退出群组').click();
       // Click button:has-text("OK")
@@ -74,9 +74,51 @@ test.describe('Main Process', () => {
       ]);
     }
 
-    test.only('Create Group', async ({ page }) => {
+    test('Create Group', async ({ page }) => {
       await createGroup(page);
       await deleteGroup(page);
     });
+
+    test('Group Profile', async ({ page }) => {
+      await createGroup(page);
+
+      await page.locator('[data-testid="group-header"]').click();
+      // Click text=查看详情
+      await page.locator('text=查看详情').click();
+      // Click text=群组名称Test >> button
+      await page.locator('text=群组名称Test >> button').click();
+      // Click text=T群组名称 >> input[type="text"]
+      await page.locator('text=T群组名称 >> input[type="text"]').click();
+      // Fill text=T群组名称 >> input[type="text"]
+      await page
+        .locator('text=T群组名称 >> input[type="text"]')
+        .fill('Test123');
+      // Click button >> nth=4
+      await page.locator('button').nth(4).click();
+      await expect(page.locator('[data-testid="toast"]')).toHaveText(
+        '修改群组名成功'
+      );
+
+      // Click text=面板
+      await page.locator('text=面板').click();
+      // Click button:has-text("创建面板")
+      await page.locator('button:has-text("创建面板")').click();
+      // Click input[name="name"]
+      await page.locator('input[name="name"]').click();
+      // Fill input[name="name"]
+      await page.locator('input[name="name"]').fill('Test');
+      // Click button:has-text("提 交")
+      await page.locator('button:has-text("提 交")').click();
+      // Click .ant-tree-treenode.ant-tree-treenode-switcher-open
+      await page
+        .locator('.ant-tree-treenode.ant-tree-treenode-switcher-open')
+        .click();
+      // Click [data-testid="full-modal-close"] svg[role="img"]
+      await page
+        .locator('[data-testid="full-modal-close"] svg[role="img"]')
+        .click();
+
+      await deleteGroup(page);
+    });
   });
 });

web/src/components/SectionHeader.tsx

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 
 interface SectionHeaderProps {
   menu?: React.ReactElement;
+  'data-testid'?: string;
 }
 
 export const SectionHeader: React.FC<SectionHeaderProps> = React.memo(
@@ -20,7 +21,10 @@ export const SectionHeader: React.FC<SectionHeaderProps> = React.memo(
             placement="topRight"
             trigger={['click']}
           >
-            <div className="cursor-pointer flex flex-1">
+            <div
+              className="cursor-pointer flex flex-1"
+              data-testid={props['data-testid']}
+            >
               <header className="flex-1 truncate px-4">{props.children}</header>
               <Icon
                 className={clsx('text-2xl transition-transform transform', {
@@ -33,7 +37,12 @@ export const SectionHeader: React.FC<SectionHeaderProps> = React.memo(
             </div>
           </Dropdown>
         ) : (
-          <header className="flex-1 truncate px-4">{props.children}</header>
+          <header
+            className="flex-1 truncate px-4"
+            data-testid={props['data-testid']}
+          >
+            {props.children}
+          </header>
         )}
       </div>
     );

web/src/init.tsx

@@ -1,4 +1,5 @@
 import { message, Modal } from 'antd';
+import React from 'react';
 import {
   buildStorage,
   setAlert,
@@ -28,7 +29,7 @@ setToasts((msg, type = 'info') => {
   message.open({
     type,
     duration: 3,
-    content: String(msg),
+    content: <div data-testid="toast">{String(msg)}</div>,
   });
 });
 

web/src/routes/Main/Content/Group/GroupHeader.tsx

@@ -41,6 +41,10 @@ export const GroupHeader: React.FC<GroupHeaderProps> = React.memo((props) => {
     </Menu>
   );
 
-  return <SectionHeader menu={menu}>{groupInfo?.name}</SectionHeader>;
+  return (
+    <SectionHeader menu={menu} data-testid="group-header">
+      {groupInfo?.name}
+    </SectionHeader>
+  );
 });
 GroupHeader.displayName = 'GroupHeader';