fix(editor): flaky import notion html image unit test (#12354)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Chores**
  - Added a new development dependency to improve testing capabilities.

- **Tests**
  - Refactored image handling tests to use enhanced HTTP request mocking, improving test reliability and maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/all/package.json

@@ -292,6 +292,7 @@
   "version": "0.21.0",
   "devDependencies": {
     "@vanilla-extract/vite-plugin": "^5.0.0",
+    "msw": "^2.8.4",
     "vitest": "3.1.3"
   }
 }

blocksuite/affine/all/src/__tests__/adapters/notion-html.unit.spec.ts

@@ -1,11 +1,14 @@
 import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model';
 import { NotionHtmlAdapter } from '@blocksuite/affine-shared/adapters';
+import { DEFAULT_IMAGE_PROXY_ENDPOINT } from '@blocksuite/affine-shared/consts';
 import {
   AssetsManager,
   type BlockSnapshot,
   MemoryBlobCRUD,
 } from '@blocksuite/store';
-import { describe, expect, test } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 
 import { createJob } from '../utils/create-job.js';
 import { getProvider } from '../utils/get-provider.js';
@@ -1195,43 +1198,71 @@ describe('notion html to snapshot', () => {
     expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
   });
 
-  test('image', async () => {
+  describe('image', () => {
-    const html = `<div class="page-body">
+    const originalUrl =
-      <figure id="ed3d2ae9-62f5-433a-9049-9ddbd1c81ac5" class="image"><a
+      'https://raw.githubusercontent.com/toeverything/blocksuite/master/assets/logo.svg';
-          href="https://raw.githubusercontent.com/toeverything/blocksuite/master/assets/logo.svg"><img src="https://raw.githubusercontent.com/toeverything/blocksuite/master/assets/logo.svg" /></a>
-      </figure>
-    </div>`;
 
-    const blockSnapshot: BlockSnapshot = {
+    const imageProxy = DEFAULT_IMAGE_PROXY_ENDPOINT;
-      type: 'block',
+    const imageUrl = `${imageProxy}?url=${encodeURIComponent(originalUrl)}`;
-      id: 'matchesReplaceMap[0]',
+
-      flavour: 'affine:note',
+    // Mock the image request
-      props: {
+    const imageRequestHandlers = [
-        xywh: '[0,0,800,95]',
+      http.get(imageUrl.toString(), async () => {
-        background: DefaultTheme.noteBackgrounColor,
+        // Return a mock image blob
-        index: 'a0',
+        const mockImageBlob = new Blob(['mock image data'], {
-        hidden: false,
+          type: 'image/svg+xml',
-        displayMode: NoteDisplayMode.DocAndEdgeless,
+        });
-      },
+        return new HttpResponse(mockImageBlob, {
-      children: [
+          headers: {
-        {
+            'Content-Type': 'image/svg+xml',
-          type: 'block',
-          id: 'matchesReplaceMap[1]',
-          flavour: 'affine:image',
-          props: {
-            sourceId: 'matchesReplaceMap[2]',
           },
-          children: [],
+        });
-        },
+      }),
-      ],
+    ];
-    };
 
-    const adapter = new NotionHtmlAdapter(createJob(), provider);
+    const server = setupServer(...imageRequestHandlers);
-    const rawBlockSnapshot = await adapter.toBlockSnapshot({
+    beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
-      file: html,
+    afterAll(() => server.close());
-      assets: new AssetsManager({ blob: new MemoryBlobCRUD() }),
+    afterEach(() => server.resetHandlers());
+
+    test('network image resource', async () => {
+      const html = `<div class="page-body">
+        <figure id="ed3d2ae9-62f5-433a-9049-9ddbd1c81ac5" class="image"><a
+            href="${originalUrl}"><img src="${originalUrl}" /></a>
+        </figure>
+      </div>`;
+
+      const blockSnapshot: BlockSnapshot = {
+        type: 'block',
+        id: 'matchesReplaceMap[0]',
+        flavour: 'affine:note',
+        props: {
+          xywh: '[0,0,800,95]',
+          background: DefaultTheme.noteBackgrounColor,
+          index: 'a0',
+          hidden: false,
+          displayMode: NoteDisplayMode.DocAndEdgeless,
+        },
+        children: [
+          {
+            type: 'block',
+            id: 'matchesReplaceMap[1]',
+            flavour: 'affine:image',
+            props: {
+              sourceId: 'matchesReplaceMap[2]',
+            },
+            children: [],
+          },
+        ],
+      };
+
+      const adapter = new NotionHtmlAdapter(createJob(), provider);
+      const rawBlockSnapshot = await adapter.toBlockSnapshot({
+        file: html,
+        assets: new AssetsManager({ blob: new MemoryBlobCRUD() }),
+      });
+      expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
     });
-    expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
   });
 
   test('bookmark', async () => {

yarn.lock

@@ -4193,6 +4193,7 @@ __metadata:
     "@blocksuite/store": "workspace:*"
     "@blocksuite/sync": "workspace:*"
     "@vanilla-extract/vite-plugin": "npm:^5.0.0"
+    msw: "npm:^2.8.4"
     rxjs: "npm:^7.8.1"
     vitest: "npm:3.1.3"
   languageName: unknown
@@ -27098,9 +27099,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"msw@npm:^2.6.8":
+"msw@npm:^2.6.8, msw@npm:^2.8.4":
-  version: 2.8.2
+  version: 2.8.4
-  resolution: "msw@npm:2.8.2"
+  resolution: "msw@npm:2.8.4"
   dependencies:
     "@bundled-es-modules/cookie": "npm:^2.0.1"
     "@bundled-es-modules/statuses": "npm:^1.0.1"
@@ -27127,7 +27128,7 @@ __metadata:
       optional: true
   bin:
     msw: cli/index.js
-  checksum: 10/7579a8dccb8cc8eb0f13d0bf3a232a3d50a478511d95bc2a4b70778e78ffa28fd0949a855fbceb6ec381bbf76f6331a6d36fcb4a3197ff5bf55d0f14a7f3b35c
+  checksum: 10/f94108a15dc64c37edd949cf1f321142940e3032367d977e79faab57fb3fd559988fadc1d491cb933441c23300796dd2a64fb7d886d537485f1e607d28a64536
   languageName: node
   linkType: hard