test: enable chat block e2e test (#10111)

packages/frontend/core/src/blocksuite/presets/ai/peek-view/chat-block-input.ts

@@ -202,6 +202,7 @@ export class ChatBlockInput extends LitElement {
               }
             }
           }}
+          data-testid="chat-block-input"
         ></textarea>
         <div class="chat-panel-input-actions">
           <div

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

@@ -4,6 +4,7 @@ import {
   loginUser,
   loginUserDirectly,
 } from '@affine-test/kit/utils/cloud';
+import { getPageMode } from '@affine-test/kit/utils/editor';
 import { openHomePage, setCoreUrl } from '@affine-test/kit/utils/load-page';
 import {
   clickNewPageButton,
@@ -299,23 +300,115 @@ test.describe('chat panel', () => {
     expect(editorContent).toBe(content);
   });
 
-  // feature not launched yet
+  test.describe('chat block', () => {
-  test.skip('can be save chat to block', async ({ page }) => {
+    const collectNewMessages = async (page: Page) => {
-    await page.reload();
+      // wait ai response
-    await clickSideBarAllPageButton(page);
+      const newMessagesContainer = await page.waitForSelector(
-    await page.waitForTimeout(200);
+        '.new-chat-messages-container'
-    await createLocalWorkspace({ name: 'test' }, page);
+      );
-    await clickNewPageButton(page);
+      await page.waitForSelector(
-    await makeChat(page, 'hello');
+        '.new-chat-messages-container .assistant-message-container chat-copy-more'
-    const contents = (await collectChat(page)).map(m => m.content);
+      );
-    await switchToEdgelessMode(page);
+      const lastMessage = await newMessagesContainer
-    await page.getByTestId('action-save-chat-to-block').click();
+        .$$('.assistant-message-container')
-    const chatBlock = await page.waitForSelector('affine-edgeless-ai-chat');
+        .then(m => m[m.length - 1]);
-    expect(
+      await lastMessage.waitForSelector('chat-copy-more');
-      await Promise.all(
+      await page.waitForTimeout(ONE_SECOND);
-        (await chatBlock.$$('.ai-chat-user-message')).map(m => m.innerText())
+      return Promise.all(
-      )
+        Array.from(await newMessagesContainer.$$('.ai-chat-message')).map(
-    ).toBe(contents);
+          async m => ({
+            name: await m.$('.user-name').then(i => i?.innerText()),
+            content: await m
+              .$('.ai-answer-text-editor')
+              .then(t => t?.$('editor-host'))
+              .then(e => e?.innerText()),
+          })
+        )
+      );
+    };
+
+    // make chat before each test
+    test.beforeEach(async ({ page }) => {
+      await page.reload();
+      await clickSideBarAllPageButton(page);
+      await page.waitForTimeout(200);
+      await createLocalWorkspace({ name: 'test' }, page);
+      await clickNewPageButton(page);
+      await makeChat(page, 'hello');
+    });
+
+    test('can be save chat to block when page mode', async ({ page }) => {
+      const contents = (await collectChat(page)).map(m => m.content);
+      expect(await getPageMode(page)).toBe('page');
+      await page.getByTestId('action-save-chat-to-block').click();
+      const chatBlock = await page.waitForSelector('affine-edgeless-ai-chat');
+      // should switch to edgeless mode
+      expect(await getPageMode(page)).toBe('edgeless');
+      expect(
+        await Promise.all(
+          (await chatBlock.$$('.ai-chat-message .ai-answer-text-editor')).map(
+            m => m.innerText()
+          )
+        )
+      ).toStrictEqual(contents);
+    });
+
+    test('can be save chat to block when edgeless mode', async ({ page }) => {
+      const contents = (await collectChat(page)).map(m => m.content);
+      await switchToEdgelessMode(page);
+      expect(await getPageMode(page)).toBe('edgeless');
+      await page.getByTestId('action-save-chat-to-block').click();
+      const chatBlock = await page.waitForSelector('affine-edgeless-ai-chat');
+      expect(
+        await Promise.all(
+          (await chatBlock.$$('.ai-chat-message .ai-answer-text-editor')).map(
+            m => m.innerText()
+          )
+        )
+      ).toStrictEqual(contents);
+    });
+
+    test('chat in center peek', async ({ page }) => {
+      const contents = (await collectChat(page)).map(m => m.content);
+      await page.getByTestId('action-save-chat-to-block').click();
+      const chatBlock = await page.waitForSelector('affine-edgeless-ai-chat');
+      // open chat in center peek
+      await chatBlock.dblclick();
+      const chatBlockPeekView = await page.waitForSelector(
+        'ai-chat-block-peek-view'
+      );
+      expect(await chatBlockPeekView.isVisible()).toBe(true);
+      expect(
+        await Promise.all(
+          (
+            await chatBlockPeekView.$$(
+              '.ai-chat-message .ai-answer-text-editor'
+            )
+          ).map(m => m.innerText())
+        )
+      ).toStrictEqual(contents);
+
+      // chat in center peek
+      await page.getByTestId('chat-block-input').focus();
+      await page.keyboard.type('hi');
+      await page.keyboard.press('Enter');
+
+      // collect new messages
+      const newMessages = await collectNewMessages(page);
+      expect(newMessages[0].content).toEqual('hi');
+      expect(newMessages[1].name).toBe('AFFiNE AI');
+      expect(newMessages[1].content?.length).toBeGreaterThan(0);
+
+      // close peek view
+      await page.getByTestId('peek-view-control').click();
+      await page.waitForSelector('ai-chat-block-peek-view', {
+        state: 'hidden',
+      });
+
+      // there should be two chat block
+      const chatBlocks = await page.$$('affine-edgeless-ai-chat');
+      expect(chatBlocks.length).toBe(2);
+    });
   });
 
   test('can be chat and insert below in page mode', async ({ page }) => {