diff --git a/src/components/dashboard/dashboard.ts b/src/components/dashboard/dashboard.ts index a54b218d57..0c75d78172 100644 --- a/src/components/dashboard/dashboard.ts +++ b/src/components/dashboard/dashboard.ts @@ -125,4 +125,9 @@ export class SpreadsheetDashboard extends Component ...this.env.model.getters.getSheetViewDimensionWithHeaders(), }; } + + get dashboardStyle() { + const zoomLevel = this.env.model.getters.getViewportZoomLevel(); + return cssPropertiesToCss({ zoom: `${zoomLevel}` }); + } } diff --git a/src/components/dashboard/dashboard.xml b/src/components/dashboard/dashboard.xml index d07c9eb7f8..ad8a8e25e2 100644 --- a/src/components/dashboard/dashboard.xml +++ b/src/components/dashboard/dashboard.xml @@ -1,6 +1,11 @@ -
+
canvas.style.height = `${height}px`; canvas.width = width * dpr; canvas.height = height * dpr; - canvas.setAttribute("style", `width:${width}px;height:${height}px;zoom:${1 / zoom}`); + canvas.setAttribute("style", `width:${width}px;height:${height}px;zoom:${1 / zoom};`); if (width === 0 || height === 0) { return; } diff --git a/tests/grid/__snapshots__/dashboard_grid_component.test.ts.snap b/tests/grid/__snapshots__/dashboard_grid_component.test.ts.snap index 772dd6ee82..bc79547393 100644 --- a/tests/grid/__snapshots__/dashboard_grid_component.test.ts.snap +++ b/tests/grid/__snapshots__/dashboard_grid_component.test.ts.snap @@ -2,7 +2,8 @@ exports[`Grid component in dashboard mode simple dashboard rendering snapshot 1`] = `
diff --git a/tests/grid/__snapshots__/grid_component.test.ts.snap b/tests/grid/__snapshots__/grid_component.test.ts.snap index a2c61dac32..643ffeed41 100644 --- a/tests/grid/__snapshots__/grid_component.test.ts.snap +++ b/tests/grid/__snapshots__/grid_component.test.ts.snap @@ -101,7 +101,7 @@ exports[`Grid component simple rendering snapshot 1`] = ` diff --git a/tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap b/tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap index 067468e7e9..7e6f7348b7 100644 --- a/tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap +++ b/tests/spreadsheet/__snapshots__/spreadsheet_component.test.ts.snap @@ -872,7 +872,7 @@ exports[`Simple Spreadsheet Component simple rendering snapshot 1`] = ` @@ -1844,7 +1844,7 @@ exports[`components take the small screen into account 1`] = ` diff --git a/tests/test_helpers/dom_helper.ts b/tests/test_helpers/dom_helper.ts index eae9b65bd5..bfd6dcc536 100644 --- a/tests/test_helpers/dom_helper.ts +++ b/tests/test_helpers/dom_helper.ts @@ -133,11 +133,14 @@ export async function pointerUp(target: DOMTarget) { */ export async function hoverCell(model: Model, xc: string, delay: number) { const zone = toZone(xc); - let { x, y } = model.getters.getVisibleRect(zone); + const zoom = model.getters.getViewportZoomLevel(); + let { x, y, width, height } = model.getters.getVisibleRectWithZoom(zone); if (!model.getters.isDashboard()) { - x -= HEADER_WIDTH; - y -= HEADER_HEIGHT; + x -= HEADER_WIDTH * zoom; + y -= HEADER_HEIGHT * zoom; } + x += width / 2; + y += height / 2; triggerMouseEvent(".o-grid-overlay", "pointermove", x, y); jest.advanceTimersByTime(delay); await nextTick(); diff --git a/tests/zoom.test.ts b/tests/zoom.test.ts index aa89a82625..b2ccc13a89 100644 --- a/tests/zoom.test.ts +++ b/tests/zoom.test.ts @@ -5,55 +5,92 @@ import { ZOOM_VALUES, } from "@odoo/o-spreadsheet-engine/constants"; import { setCellContent } from "./test_helpers/commands_helpers"; -import { clickCell, clickHeader } from "./test_helpers/dom_helper"; +import { clickCell, clickHeader, hoverCell } from "./test_helpers/dom_helper"; import { getSelectionAnchorCellXc } from "./test_helpers/getters_helpers"; -import { mountSpreadsheet } from "./test_helpers/helpers"; +import { mountSpreadsheet, nextTick } from "./test_helpers/helpers"; let fixture: HTMLElement; let model: Model; -describe.each(ZOOM_VALUES.map((zoom) => zoom / 100))("Zoom tests selection %s", (zoom) => { - beforeEach(async () => { - ({ model, fixture } = await mountSpreadsheet()); - model.dispatch("SET_ZOOM", { zoom }); - }); - test("can render a sheet with zoom", async () => { - expect(fixture.querySelector(".o-grid-overlay")).not.toBeNull(); - }); +jest.useFakeTimers(); - test("can click on a cell to select it", async () => { - setCellContent(model, "B2", "b2"); - setCellContent(model, "B3", "b3"); - await clickCell(model, "C8", {}, { clickInMiddle: true }); - expect(getSelectionAnchorCellXc(model)).toBe("C8"); - }); +afterAll(() => { + jest.useRealTimers(); +}); - test("can click on the edge of a cell to select it", async () => { - setCellContent(model, "B2", "b2"); - setCellContent(model, "B3", "b3"); - // by default we click on top left - await clickCell(model, "C8"); - expect(getSelectionAnchorCellXc(model)).toBe("C8"); - await clickCell( - model, - "C8", - {}, - { offsetX: DEFAULT_CELL_WIDTH * zoom - 1, offsetY: DEFAULT_CELL_HEIGHT * zoom - 1 } - ); - expect(getSelectionAnchorCellXc(model)).toBe("C8"); - }); +describe("Spreadsheet zoom tests", () => { + describe.each(ZOOM_VALUES.map((zoom) => zoom / 100))("Zoom tests selection %s", (zoom) => { + beforeEach(async () => { + ({ model, fixture } = await mountSpreadsheet()); + model.dispatch("SET_ZOOM", { zoom }); + await nextTick(); + }); + test("can render a sheet with zoom", async () => { + expect(fixture.querySelector(".o-grid-overlay")).not.toBeNull(); + }); + + test("can click on a cell to select it", async () => { + setCellContent(model, "B2", "b2"); + setCellContent(model, "B3", "b3"); + await clickCell(model, "C8", {}, { clickInMiddle: true }); + expect(getSelectionAnchorCellXc(model)).toBe("C8"); + }); - test("can select a COL header", async () => { - setCellContent(model, "B2", "b2"); - setCellContent(model, "B3", "b3"); - await clickHeader(model, "COL", 2, {}); - expect(getSelectionAnchorCellXc(model)).toBe("C1"); + test("can click on the edge of a cell to select it", async () => { + setCellContent(model, "B2", "b2"); + setCellContent(model, "B3", "b3"); + // by default we click on top left + await clickCell(model, "C8"); + expect(getSelectionAnchorCellXc(model)).toBe("C8"); + await clickCell( + model, + "C8", + {}, + { offsetX: DEFAULT_CELL_WIDTH * zoom - 1, offsetY: DEFAULT_CELL_HEIGHT * zoom - 1 } + ); + expect(getSelectionAnchorCellXc(model)).toBe("C8"); + }); + + test("can select a COL header", async () => { + setCellContent(model, "B2", "b2"); + setCellContent(model, "B3", "b3"); + await clickHeader(model, "COL", 2, {}); + expect(getSelectionAnchorCellXc(model)).toBe("C1"); + }); + + test("can select a ROW header", async () => { + setCellContent(model, "B2", "b2"); + setCellContent(model, "B3", "b3"); + await clickHeader(model, "ROW", 2, {}); + expect(getSelectionAnchorCellXc(model)).toBe("A4"); + }); + + test("can hover a cell to show its error", async () => { + setCellContent(model, "A10", "=1/0"); + expect(fixture.querySelector(".o-error-tooltip")).toBeFalsy(); + await hoverCell(model, "A10", 400); + expect(fixture.querySelector(".o-error-tooltip")).toBeTruthy(); + }); }); +}); + +describe("Dashboard zoom tests", () => { + describe.each(ZOOM_VALUES.map((zoom) => zoom / 100))("Zoom tests selection %s", (zoom) => { + beforeEach(async () => { + ({ model, fixture } = await mountSpreadsheet()); + model.dispatch("SET_ZOOM", { zoom }); + setCellContent(model, "C8", "=1/0"); + model.updateMode("dashboard"); + await nextTick(); + }); + test("can render a sheet with zoom", async () => { + expect(fixture.querySelector(".o-grid-overlay")).not.toBeNull(); + }); - test("can select a ROW header", async () => { - setCellContent(model, "B2", "b2"); - setCellContent(model, "B3", "b3"); - await clickHeader(model, "ROW", 2, {}); - expect(getSelectionAnchorCellXc(model)).toBe("A4"); + test("can hover a cell to show its error", async () => { + expect(fixture.querySelector(".o-error-tooltip")).toBeNull(); + await hoverCell(model, "C8", 400); + expect(fixture.querySelector(".o-error-tooltip")).toBeTruthy(); + }); }); });