diff --git a/e2e/e2e.d.ts b/e2e/e2e.d.ts index 1bf6f05862fc..ab275d75f6f5 100644 --- 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; loadDefaultSheet(loadTimeout?: number): Promise; - loadDefaultDoc(loadTimeout?: number,): Promise; - loadDemoSheet(): Promise; + loadDefaultDoc(loadTimeout?: number): Promise; + loadDemoSheet(loadTimeout?: number): Promise; + loadMergeCellSheet(loadTimeout?: number): Promise; disposeUniver(): Promise; disposeCurrSheetUnit(disposeTimeout?: number): Promise; } diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts index ca76b196d673..659fed2f13ca 100644 --- 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/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/mergedCellsRendering-chromium-darwin.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/mergedCellsRendering-chromium-darwin.png new file mode 100644 index 000000000000..1a3c5b38f551 Binary files /dev/null and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/mergedCellsRendering-chromium-darwin.png differ diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/mergedCellsRenderingScrolling-chromium-darwin.png b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/mergedCellsRenderingScrolling-chromium-darwin.png new file mode 100644 index 000000000000..1a3c5b38f551 Binary files /dev/null and b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts-snapshots/mergedCellsRenderingScrolling-chromium-darwin.png differ diff --git a/packages-experimental/debugger/src/controllers/e2e/e2e.controller.ts b/packages-experimental/debugger/src/controllers/e2e/e2e.controller.ts index 2b112baa4ef0..d88787e78392 100644 --- 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; loadDefaultSheet(loadTimeout?: number): Promise; - loadDemoSheet(): Promise; + loadDemoSheet(loadTimeout?: number): Promise; + loadMergeCellSheet(loadTimeout?: number): Promise; loadDefaultDoc(loadTimeout?: number,): Promise; disposeUniver(): Promise; disposeCurrSheetUnit(disposeTimeout?: number): Promise; @@ -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 { + 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 { this._univerInstanceService.createUnit(UniverInstanceType.UNIVER_DOC, getDefaultDocData()); await awaitTime(loadingTimeout);