test(core): edgeless shape e2e (#11446)

### TL;DR

Add Edgeless shape ai e2e tests.

### What Changed

- Add Edgeless shape make it real e2e
- Add Edgeless shape generate image e2e
- Fix Edgeless generate headings e2e

tests/affine-cloud-copilot/e2e/ai-action/generate-an-image-with-text.spec.ts

@@ -51,6 +51,21 @@ test.describe('AIAction/GenerateAnImageWithText', () => {
     expect(responses).toEqual(new Set(['insert-below']));
   });
 
+  test('should generate an image for the selected shape in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { generateImage } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createShape(page, 'HelloWorld');
+      }
+    );
+    const { answer, responses } = await generateImage();
+    await expect(answer.getByTestId('ai-answer-image')).toBeVisible();
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
   test('should show chat history in chat panel', async ({ page, utils }) => {
     const { generateImage } = await utils.editor.askAIWithText(page, 'Panda');
     const { answer } = await generateImage();

tests/affine-cloud-copilot/e2e/ai-action/generate-headings.spec.ts

@@ -29,9 +29,10 @@ test.describe('AIAction/GenerateHeadings', () => {
     expect(responses).toEqual(new Set(['insert-above', 'replace-selection']));
   });
 
-  test.fixme(
+  test('should generate headings for selected text block in edgeless', async ({
-    'should generate headings for selected text block in edgeless',
+    page,
-    async ({ page, utils }) => {
+    utils,
+  }) => {
     const { generateHeadings } = await utils.editor.askAIWithEdgeless(
       page,
       async () => {
@@ -49,13 +50,13 @@ test.describe('AIAction/GenerateHeadings', () => {
       answer.locator('h3').isVisible(),
     ]);
     await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
-      expect(responses).toEqual(new Set(['insert-above']));
+    expect(responses).toEqual(new Set(['insert-below']));
-    }
+  });
-  );
 
-  test.fixme(
+  test('should generate headings for selected note block in edgeless', async ({
-    'should generate headings for selected note block in edgeless',
+    page,
-    async ({ page, utils }) => {
+    utils,
+  }) => {
     const { generateHeadings } = await utils.editor.askAIWithEdgeless(
       page,
       async () => {
@@ -73,9 +74,8 @@ test.describe('AIAction/GenerateHeadings', () => {
       answer.locator('h3').isVisible(),
     ]);
     await expect(answer).toHaveText(/AFFiNE/, { timeout: 10000 });
-      expect(responses).toEqual(new Set(['insert-above']));
+    expect(responses).toEqual(new Set(['insert-below']));
-    }
+  });
-  );
 
   test('should show chat history in chat panel', async ({ page, utils }) => {
     const { generateHeadings } = await utils.editor.askAIWithText(

tests/affine-cloud-copilot/e2e/ai-action/make-it-real.spec.ts

@@ -60,6 +60,22 @@ test.describe('AIAction/MakeItReal', () => {
     expect(responses).toEqual(new Set(['insert-below']));
   });
 
+  test('should support making the selected element to real in edgeless', async ({
+    page,
+    utils,
+  }) => {
+    const { makeItReal } = await utils.editor.askAIWithEdgeless(
+      page,
+      async () => {
+        await utils.editor.createShape(page, 'HelloWorld');
+      }
+    );
+
+    const { answer, responses } = await makeItReal();
+    await expect(answer.locator('iframe')).toBeVisible({ timeout: 30000 });
+    expect(responses).toEqual(new Set(['insert-below']));
+  });
+
   test('should show chat history in chat panel', async ({ page, utils }) => {
     const { makeItReal } = await utils.editor.askAIWithText(
       page,

tests/affine-cloud-copilot/e2e/chat-with/edgeless-shape.spec.ts

@@ -1,3 +0,0 @@
-import { test } from '../base/base-test';
-
-test.describe('AIChatWith/EdgelessShape', () => {});

tests/affine-cloud-copilot/e2e/utils/editor-utils.ts

@@ -160,6 +160,33 @@ export class EditorUtils {
     return id;
   }
 
+  public static async createShape(page: Page, text: string) {
+    // Create shape
+    await page.keyboard.press('s');
+    await page.mouse.click(400, 400);
+
+    const id = await page.evaluate(() => {
+      const edgelessBlock = document.querySelector(
+        'affine-edgeless-root'
+      ) as EdgelessRootBlockComponent;
+      if (!edgelessBlock) {
+        throw new Error('edgeless block not found');
+      }
+      const shapes = edgelessBlock.gfx.gfxElements.filter(
+        (el: GfxModel) => 'type' in el && el.type === 'shape'
+      );
+
+      return shapes[shapes.length - 1].id;
+    });
+
+    // Insert text inside shape
+    await page.mouse.dblclick(400, 400);
+    await page.keyboard.insertText(text);
+    // Prevent the shape from being dragged
+    await page.mouse.click(500, 500);
+    return id;
+  }
+
   public static async getMindMapNode(
     page: Page,
     mindmapId: string,