test(editor): add tests for turbo renderer state machine (#11659)

blocksuite/affine/gfx/turbo-renderer/src/turbo-renderer.ts

@@ -83,6 +83,10 @@ export class ViewportTurboRendererExtension extends GfxExtension {
   private viewportElement: GfxViewportElement | null = null;
   private readonly refresh$ = new Subject<void>();
 
+  public get currentState(): RenderingState {
+    return this.state$.value;
+  }
+
   constructor(gfx: GfxController) {
     super(gfx);
 

blocksuite/integration-test/README.md

@@ -1,3 +1,30 @@
 # `@blocksuite/integration-test`
 
 Integration test for BlockSuite.
+
+## Running Tests
+
+You can run all integration tests using:
+
+```bash
+cd blocksuite/integration-test
+yarn test:unit
+```
+
+To run a specific test or test file, use the `-t` flag with a test name pattern:
+
+```bash
+# Run a specific test
+yarn test:unit -t "should access turbo renderer instance"
+
+# Run all tests in a specific file
+yarn test:unit src/__tests__/edgeless/viewport-renderer.spec.ts
+```
+
+For debugging tests with the Playwright debugger:
+
+```bash
+yarn test:debug
+
+yarn test:debug -t "should access turbo renderer instance"
+```

blocksuite/integration-test/src/__tests__/edgeless/viewport-renderer.spec.ts

@@ -1,3 +1,6 @@
+/**
+ * Please refer to integration-test/README.md for commands to run tests.
+ */
 import { ParagraphLayoutHandlerExtension } from '@blocksuite/affine/blocks/paragraph';
 import {
   TurboRendererConfigFactory,
@@ -7,7 +10,11 @@ import { beforeEach, describe, expect, test } from 'vitest';
 
 import { wait } from '../utils/common.js';
 import { addSampleNotes } from '../utils/doc-generator.js';
-import { createPainterWorker, setupEditor } from '../utils/setup.js';
+import {
+  createPainterWorker,
+  getRenderer,
+  setupEditor,
+} from '../utils/setup.js';
 
 describe('viewport turbo renderer', () => {
   beforeEach(async () => {
@@ -28,4 +35,50 @@ describe('viewport turbo renderer', () => {
     const notes = document.querySelectorAll('affine-edgeless-note');
     expect(notes.length).toBe(6);
   });
+
+  test('should access turbo renderer instance', async () => {
+    const renderer = getRenderer();
+    expect(renderer).toBeDefined();
+    expect(renderer instanceof ViewportTurboRendererExtension).toBe(true);
+    expect(renderer.canvas).toBeInstanceOf(HTMLCanvasElement);
+  });
+
+  test('initial state should be pending', async () => {
+    const renderer = getRenderer();
+    expect(renderer.currentState).toBe('pending');
+  });
+
+  test('zooming should change state to zooming', async () => {
+    const renderer = getRenderer();
+    renderer.viewport.zooming$.next(true);
+    await wait();
+    expect(renderer.currentState).toBe('zooming');
+    renderer.viewport.zooming$.next(false);
+    await wait();
+    expect(renderer.currentState).not.toBe('zooming');
+  });
+
+  test('state should become ready after rendering', async () => {
+    addSampleNotes(doc, 1);
+    await wait(100);
+    const renderer = getRenderer();
+    renderer.viewport.zooming$.next(false);
+    await wait(renderer.options.debounceTime + 100);
+    if (renderer.viewport.zoom <= renderer.options.zoomThreshold) {
+      expect(renderer.currentState).toBe('ready');
+    } else {
+      expect(renderer.currentState).toBe('pending');
+    }
+  });
+
+  test('invalidation should reset state to pending', async () => {
+    const renderer = getRenderer();
+    addSampleNotes(doc, 1);
+    expect(renderer.currentState).toBe('pending');
+    await wait(renderer.options.debounceTime + 500);
+    expect(renderer.currentState).toBe('ready');
+    addSampleNotes(doc, 1);
+    await wait(100);
+    expect(renderer.currentState).toBe('pending');
+  });
 });

blocksuite/integration-test/src/__tests__/utils/setup.ts

@@ -8,29 +8,36 @@ import {
   registerStoreSpecs,
   StoreExtensions,
 } from '@blocksuite/affine/extensions';
-import type { ExtensionType, Store, Transformer } from '@blocksuite/store';
-
-import { effects } from '../../effects.js';
-
-registerStoreSpecs();
-blocksEffects();
-effects();
-
 import type { DocMode } from '@blocksuite/affine/model';
 import { AffineSchemas } from '@blocksuite/affine/schemas';
 import {
   CommunityCanvasTextFonts,
   FontConfigExtension,
 } from '@blocksuite/affine/shared/services';
-import type { ViewportTurboRendererExtension } from '@blocksuite/affine-gfx-turbo-renderer';
+import {
+  type ViewportTurboRendererExtension,
+  ViewportTurboRendererIdentifier,
+} from '@blocksuite/affine-gfx-turbo-renderer';
+import type { ExtensionType, Store, Transformer } from '@blocksuite/store';
 import { Schema, Text } from '@blocksuite/store';
 import {
   createAutoIncrementIdGenerator,
   TestWorkspace,
 } from '@blocksuite/store/test';
 
+import { effects } from '../../effects.js';
 import { TestAffineEditorContainer } from '../../index.js';
 
+registerStoreSpecs();
+blocksEffects();
+effects();
+
+export function getRenderer() {
+  return editor.std.get(
+    ViewportTurboRendererIdentifier
+  ) as ViewportTurboRendererExtension;
+}
+
 function createCollectionOptions() {
   const schema = new Schema();
   const room = Math.random().toString(16).slice(2, 8);