test: visual e2e test after scrolling (aim for merged cells)

dream-num · Oct 10, 2024 · e36529a · e36529a
1 parent 16bf55f
commit e36529a
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 5 deletions.
diff --git a/e2e/e2e.d.ts b/e2e/e2e.d.ts
@@ -3,8 +3,9 @@
 export interface IE2EControllerAPI {
     loadAndRelease(id: number, loadTimeout?: number, disposeTimeout?: number): Promise<void>;
     loadDefaultSheet(loadTimeout?: number): Promise<void>;
-    loadDefaultDoc(loadTimeout?: number,): Promise<void>;
-    loadDemoSheet(): Promise<void>;
+    loadDefaultDoc(loadTimeout?: number): Promise<void>;
+    loadDemoSheet(loadTimeout?: number): Promise<void>;
+    loadMergeCellSheet(loadTimeout?: number): Promise<void>;
     disposeUniver(): Promise<void>;
     disposeCurrSheetUnit(disposeTimeout?: number): Promise<void>;
 }

diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { expect, test } from '@playwright/test';
+import { chromium, expect, test } from '@playwright/test';
 import { generateSnapshotName } from '../const';
 
 test('diff default sheet content', async ({ page }) => {
@@ -39,8 +39,93 @@ test('diff demo sheet content', async ({ page }) => {
     await page.waitForTimeout(2000);
 
     await page.evaluate(() => window.E2EControllerAPI.loadDemoSheet());
-    await page.waitForTimeout(5000);
+    await page.waitForTimeout(2000);
 
     await expect(page).toHaveScreenshot(generateSnapshotName('demo-sheet'), { maxDiffPixels: 5 });
     expect(errored).toBeFalsy();
 });
+
+/**
+ * Aim for merged cells rendering.
+ */
+test('diff merged cells rendering', async () => {
+    const browser = await chromium.launch({
+        headless: true, //!!CI, // Set to false to see the browser window
+    });
+    const context = await browser.newContext({
+        viewport: { width: 1280, height: 1280 },
+        deviceScaleFactor: 1, // 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.loadMergeCellSheet());
+    await page.waitForTimeout(2000);
+
+    await expect(page).toHaveScreenshot(generateSnapshotName('mergedCellsRendering'), { maxDiffPixels: 5 });
+
+    await browser.close();
+});
+const isCI = !!process.env.CI;
+test('diff merged cells rendering after scrolling', async ({}) => {
+    const browser = await chromium.launch({
+        headless: true, //!!isCI, // Set to false to see the browser window in local
+    });
+    const context = await browser.newContext({
+        viewport: { width: 1280, height: 1280 },
+        deviceScaleFactor: 1, // 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.loadMergeCellSheet());
+    await page.waitForTimeout(2000);
+
+    await page.evaluate(async () => {
+        const dispatchWheelEvent = (deltaX: number, deltaY: number, element: HTMLElement, interval: number = 30, lastFor: number = 1000) => {
+            // const canvasElements = document.querySelectorAll('canvas.univer-render-canvas') as unknown as HTMLElement[];
+            // const filteredCanvasElements = Array.from(canvasElements).filter((canvas) => canvas.offsetHeight > 500);
+
+            const dispatchSimulateWheelEvent = (element) => {
+                const event = new WheelEvent('wheel', {
+                    bubbles: true,
+                    cancelable: true,
+                    deltaY,
+                    deltaX,
+                    clientX: 580,
+                    clientY: 580,
+                });
+                element.dispatchEvent(event);
+            };
+
+            // mock wheel event.
+            let intervalID;
+            const continuousWheelSimulation = (element, interval) => {
+                intervalID = setInterval(function () {
+                    dispatchSimulateWheelEvent(element);
+                }, interval);
+            };
+
+            // start mock wheel event.
+            continuousWheelSimulation(element, interval);
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    clearInterval(intervalID);
+                    resolve(1);
+                }, lastFor);
+            });
+        };
+        const canvasElements = document.querySelectorAll('canvas.univer-render-canvas') as unknown as HTMLElement[];
+        const filteredCanvasElements = Array.from(canvasElements).filter((canvas) => canvas.offsetHeight > 500);
+        const element = filteredCanvasElements[0];
+        await dispatchWheelEvent(0, 100, element);
+        await dispatchWheelEvent(0, -100, element);
+    });
+    await page.waitForTimeout(4000);
+
+    await expect(page).toHaveScreenshot(generateSnapshotName('mergedCellsRenderingScrolling'), { maxDiffPixels: 5 });
+
+    await browser.close();
+});
diff --git a/...ts-visual-comparison.spec.ts-snapshots/mergedCellsRendering-chromium-darwin.png b/...ts-visual-comparison.spec.ts-snapshots/mergedCellsRendering-chromium-darwin.png
diff --git a/...-comparison.spec.ts-snapshots/mergedCellsRenderingScrolling-chromium-darwin.png b/...-comparison.spec.ts-snapshots/mergedCellsRenderingScrolling-chromium-darwin.png
diff --git a/packages-experimental/debugger/src/controllers/e2e/e2e.controller.ts b/packages-experimental/debugger/src/controllers/e2e/e2e.controller.ts
@@ -28,7 +28,8 @@ const AWAIT_DISPOSING_TIMEOUT = 5000;
 export interface IE2EControllerAPI {
     loadAndRelease(id: number, loadTimeout?: number, disposeTimeout?: number): Promise<void>;
     loadDefaultSheet(loadTimeout?: number): Promise<void>;
-    loadDemoSheet(): Promise<void>;
+    loadDemoSheet(loadTimeout?: number): Promise<void>;
+    loadMergeCellSheet(loadTimeout?: number): Promise<void>;
     loadDefaultDoc(loadTimeout?: number,): Promise<void>;
     disposeUniver(): Promise<void>;
     disposeCurrSheetUnit(disposeTimeout?: number): Promise<void>;
@@ -64,6 +65,7 @@ export class E2EController extends Disposable {
             loadAndRelease: (id, loadTimeout, disposeTimeout) => this._loadAndRelease(id, loadTimeout, disposeTimeout),
             loadDefaultSheet: (loadTimeout) => this._loadDefaultSheet(loadTimeout),
             loadDemoSheet: () => this._loadDemoSheet(),
+            loadMergeCellSheet: () => this._loadMergeCellSheet(2000),
             disposeCurrSheetUnit: (disposeTimeout?: number) => this._diposeDefaultSheetUnit(disposeTimeout),
             loadDefaultDoc: (loadTimeout) => this._loadDefaultDoc(loadTimeout),
             disposeUniver: () => this._disposeUniver(),
@@ -92,6 +94,16 @@ export class E2EController extends Disposable {
         await awaitTime(AWAIT_LOADING_TIMEOUT);
     }
 
+    /**
+     * sheet-003 in default data
+     */
+    private async _loadMergeCellSheet(loadingTimeout: number = AWAIT_LOADING_TIMEOUT): Promise<void> {
+        const data = { ...DEFAULT_WORKBOOK_DATA_DEMO };
+        data.sheetOrder = ['sheet-0003'];
+        this._univerInstanceService.createUnit(UniverInstanceType.UNIVER_SHEET, data);
+        await awaitTime(loadingTimeout);
+    }
+
     private async _loadDefaultDoc(loadingTimeout: number = AWAIT_LOADING_TIMEOUT): Promise<void> {
         this._univerInstanceService.createUnit(UniverInstanceType.UNIVER_DOC, getDefaultDocData());
         await awaitTime(loadingTimeout);