test: add switching render unit test and fix type check

e2e/visual-comparison/sheets/sheets-switching-render-unit.spec.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { chromium, expect, test } from '@playwright/test';
+import { generateSnapshotName } from '../const';
+
+const isCI = !!process.env.CI;
+
+test('ensure switching render unit successful with no errors', async () => {
+    const browser = await chromium.launch({
+        headless: isCI, // Set to false to see the browser window
+    });
+    const context = await browser.newContext({
+        viewport: { width: 1280, height: 720 },
+        deviceScaleFactor: 2, // Set your desired DPR
+    });
+    const page = await context.newPage();
+
+    await page.goto('http://localhost:3000/sheets/');
+    await page.waitForTimeout(2000);
+
+    await page.evaluate(() => window.E2EControllerAPI.loadDemoSheet());
+    await page.waitForTimeout(1000);
+
+    await page.evaluate(() => window.E2EControllerAPI.loadDefaultSheet());
+    const filename = generateSnapshotName('switching-render-unit');
+    const firstScreenshot = await page.screenshot({
+        mask: [
+            page.locator('.univer-headerbar'),
+            page.locator('.univer-defined-name'),
+        ],
+        fullPage: true,
+    });
+    expect(firstScreenshot).toMatchSnapshot(filename, { maxDiffPixels: 50 });
+});

e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts

@@ -43,7 +43,7 @@ test('diff default sheet toolbar', async () => {
         ],
         fullPage: true,
     });
-    await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 100 });
+    expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 100 });
 });
 
 test('diff default sheet content', async ({ page }) => {

packages/docs-ui/src/commands/commands/__tests__/create-command-test-bed.ts

@@ -150,6 +150,9 @@ export function createCommandTestBed(docData?: IDocumentData, dependencies?: Dep
         mainComponent: null as any,
         components: null as any,
         isMainScene: true,
+        activated$: new BehaviorSubject(true),
+        activate: () => {},
+        deactivate: () => {},
     }, univerInstanceService);
 
     injector.add([DocSkeletonManagerService, { useValue: fakeDocSkeletonManager as unknown as DocSkeletonManagerService }]);

packages/docs-ui/src/controllers/render-controllers/doc.render-controller.ts

@@ -125,9 +125,16 @@ export class DocRenderController extends RxDisposable implements IRenderModule {
 
         this._addComponent();
 
-        engine.runRenderLoop(() => {
-            scene.render();
-        });
+        const frameFn = () => scene.render();
+        this.disposeWithMe(this._context.activated$.subscribe((activated) => {
+            if (activated) {
+                // TODO: we should attach the context object to the RenderContext object on scene.canvas.
+                engine.runRenderLoop(frameFn);
+            } else {
+                // Stop the render loop when the render unit is deactivated.
+                engine.stopRenderLoop(frameFn);
+            }
+        }));
 
         // Attach scroll event after main viewport created.
         this._docSelectionRenderService.__attachScrollEvent();

packages/sheets-ui/src/commands/commands/__tests__/create-command-test-bed.ts

@@ -15,6 +15,7 @@
  */
 
 import type { Dependency, IWorkbookData, Workbook } from '@univerjs/core';
+import type { IRenderContext } from '@univerjs/engine-render';
 import {
     BooleanNumber,
     DisposableCollection,
@@ -30,6 +31,8 @@ import {
     Univer,
     UniverInstanceType,
 } from '@univerjs/core';
+
+import { LexerTreeBuilder } from '@univerjs/engine-formula';
 import {
     BorderStyleManagerService,
     IRefSelectionsService,
@@ -38,9 +41,7 @@ import {
 
     SheetsSelectionsService, WorkbookPermissionService, WorksheetPermissionService, WorksheetProtectionPointModel, WorksheetProtectionRuleModel,
 } from '@univerjs/sheets';
-
-import { LexerTreeBuilder } from '@univerjs/engine-formula';
-import type { IRenderContext } from '@univerjs/engine-render';
+import { BehaviorSubject } from 'rxjs';
 import enUS from '../../../locale/en-US';
 import { ISheetSelectionRenderService } from '../../../services/selection/base-selection-render.service';
 import { SheetSelectionRenderService } from '../../../services/selection/selection-render.service';
@@ -139,6 +140,9 @@ export function createCommandTestBed(
             mainComponent: null as any,
             components: new Map(),
             isMainScene: true,
+            activated$: new BehaviorSubject(true),
+            activate: () => { },
+            deactivate: () => { },
         };
 
         injector.add([ISheetSelectionRenderService, { useFactory: () => injector.createInstance(SheetSelectionRenderService, context) }]);

packages/sheets-ui/src/commands/commands/__tests__/create-selection-command-test-bed.ts

@@ -19,6 +19,7 @@ import { Disposable, DisposableCollection, ICommandService, LocaleType, UniverIn
 import { IRenderManagerService, RenderManagerService } from '@univerjs/engine-render';
 import { CancelFrozenCommand, SetFrozenMutation, SetSelectionsOperation } from '@univerjs/sheets';
 
+import { BehaviorSubject } from 'rxjs';
 import { SheetScrollManagerService } from '../../../services/scroll-manager.service';
 import { SelectAllService } from '../../../services/select-all/select-all.service';
 import { SheetSkeletonManagerService } from '../../../services/sheet-skeleton-manager.service';
@@ -203,6 +204,9 @@ export function createFrozenCommandTestBed(workbookData?: IWorkbookData) {
         mainComponent: null as any,
         components: null as any,
         isMainScene: true,
+        activated$: new BehaviorSubject(true),
+        activate: () => {},
+        deactivate: () => {},
     }, injector);
 
     injector.add([SheetSkeletonManagerService, { useValue: fakeSheetSkeletonManagerService }]);
@@ -215,6 +219,9 @@ export function createFrozenCommandTestBed(workbookData?: IWorkbookData) {
         components: new Map(),
         isMainScene: true,
         with: injector.get.bind(injector),
+        activated$: new BehaviorSubject(true),
+        activate: () => {},
+        deactivate: () => {},
     });
 
     return {