@odoo/o-spreadsheet 1.0.1

package/tests/components/grid_test.ts

@@ -0,0 +1,581 @@
+import { Grid } from "../../src/components/grid";
+import { toZone } from "../../src/helpers/index";
+import { Model } from "../../src/model";
+import { simulateClick, triggerMouseEvent } from "../dom_helper";
+import { getActiveXc, getCell, GridParent, makeTestFixture, nextTick, Touch } from "../helpers";
+jest.mock("../../src/components/composer/content_editable_helper");
+jest.mock("../../src/components/scrollbar", () => require("./__mocks__/scrollbar"));
+
+function getVerticalScroll(): number {
+  return (parent.grid as any).comp.vScrollbar.scroll;
+}
+
+function getHorizontalScroll(): number {
+  return (parent.grid as any).comp.hScrollbar.scroll;
+}
+
+jest.spyOn(HTMLDivElement.prototype, "clientWidth", "get").mockImplementation(() => 1000);
+jest.spyOn(HTMLDivElement.prototype, "clientHeight", "get").mockImplementation(() => 1000);
+
+let fixture: HTMLElement;
+let model: Model;
+let parent: GridParent;
+
+beforeEach(async () => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+describe("Grid component", () => {
+  beforeEach(async () => {
+    model = new Model();
+    parent = new GridParent(model);
+    await parent.mount(fixture);
+  });
+
+  test("simple rendering snapshot", async () => {
+    expect(fixture.querySelector(".o-grid")).toMatchSnapshot();
+  });
+
+  test("can render a sheet with a merge", async () => {
+    const sheet1 = model["workbook"].visibleSheets[0];
+
+    model.dispatch("ADD_MERGE", { sheet: sheet1, zone: toZone("B2:B3") });
+
+    expect(fixture.querySelector("canvas")).toBeDefined();
+  });
+
+  test("can click on a cell to select it", async () => {
+    model.dispatch("SET_VALUE", { xc: "B2", text: "b2" });
+    model.dispatch("SET_VALUE", { xc: "B3", text: "b3" });
+    triggerMouseEvent("canvas", "mousedown", 300, 200);
+    expect(getActiveXc(model)).toBe("C8");
+  });
+
+  test("can click on resizer, then move selection with keyboard", async () => {
+    model.dispatch("SET_VALUE", { xc: "B2", text: "b2" });
+    model.dispatch("SET_VALUE", { xc: "B3", text: "b3" });
+    triggerMouseEvent(".o-overlay", "click", 300, 20);
+    document.activeElement!.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true })
+    );
+    expect(getActiveXc(model)).toBe("A2");
+  });
+
+  test("can shift-click on a cell to update selection", async () => {
+    model.dispatch("SET_VALUE", { xc: "B2", text: "b2" });
+    model.dispatch("SET_VALUE", { xc: "B3", text: "b3" });
+    triggerMouseEvent("canvas", "mousedown", 300, 200, { shiftKey: true });
+    expect(model.getters.getSelectedZones()[0]).toEqual({
+      top: 0,
+      left: 0,
+      bottom: 7,
+      right: 2,
+    });
+  });
+
+  test("Can open the Conditional Format side panel", async () => {
+    parent.env.openSidePanel("ConditionalFormatting");
+    await nextTick();
+    expect(document.querySelectorAll(".o-sidePanel").length).toBe(1);
+  });
+
+  test("Can touch the canvas to move it", async () => {
+    const canvas = fixture.querySelector("canvas")!;
+    expect(getHorizontalScroll()).toBe(0);
+    expect(getVerticalScroll()).toBe(0);
+    canvas.dispatchEvent(
+      new TouchEvent("touchstart", {
+        touches: [
+          new Touch({
+            clientX: 150,
+            clientY: 150,
+            identifier: 1,
+            target: canvas,
+          }),
+        ],
+      })
+    );
+    canvas.dispatchEvent(
+      new TouchEvent("touchmove", {
+        touches: [
+          new Touch({
+            clientX: 100,
+            clientY: 120,
+            identifier: 2,
+            target: canvas,
+          }),
+        ],
+      })
+    );
+    expect(getHorizontalScroll()).toBe(50);
+    expect(getVerticalScroll()).toBe(30);
+    canvas.dispatchEvent(
+      new TouchEvent("touchmove", {
+        touches: [
+          new Touch({
+            clientX: 80,
+            clientY: 100,
+            identifier: 2,
+            target: canvas,
+          }),
+        ],
+      })
+    );
+    expect(getHorizontalScroll()).toBe(70);
+    expect(getVerticalScroll()).toBe(50);
+  });
+  test("Event is stopped if not at the top", async () => {
+    const canvas = fixture.querySelector("canvas")!;
+    expect(getHorizontalScroll()).toBe(0);
+    expect(getVerticalScroll()).toBe(0);
+
+    const mockCallback = jest.fn(() => {});
+    fixture.addEventListener("touchmove", mockCallback);
+
+    canvas.dispatchEvent(
+      new TouchEvent("touchstart", {
+        touches: [
+          new Touch({
+            clientX: 0,
+            clientY: 150,
+            identifier: 1,
+            target: canvas,
+          }),
+        ],
+      })
+    );
+    // move down; we are at the top: ev not prevented
+    canvas.dispatchEvent(
+      new TouchEvent("touchmove", {
+        cancelable: true,
+        bubbles: true,
+        touches: [
+          new Touch({
+            clientX: 0,
+            clientY: 120,
+            identifier: 2,
+            target: canvas,
+          }),
+        ],
+      })
+    );
+    expect(mockCallback).toBeCalledTimes(1);
+    // move up:; we are not at the top: ev prevented
+    canvas.dispatchEvent(
+      new TouchEvent("touchmove", {
+        cancelable: true,
+        bubbles: true,
+        touches: [
+          new Touch({
+            clientX: 0,
+            clientY: 150,
+            identifier: 3,
+            target: canvas,
+          }),
+        ],
+      })
+    );
+    expect(mockCallback).toBeCalledTimes(1);
+    // move up again but we are at the stop: ev not prevented
+    canvas.dispatchEvent(
+      new TouchEvent("touchmove", {
+        cancelable: true,
+        bubbles: true,
+        touches: [
+          new Touch({
+            clientX: 0,
+            clientY: 150,
+            identifier: 4,
+            target: canvas,
+          }),
+        ],
+      })
+    );
+    expect(mockCallback).toBeCalledTimes(2);
+  });
+
+  describe("keybindings", () => {
+    test("pressing ENTER put current cell in edit mode", async () => {
+      // note: this behavious is not like excel. Maybe someone will want to
+      // change this
+      parent.grid.el.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
+      expect(getActiveXc(model)).toBe("A1");
+      expect(model.getters.getEditionMode()).toBe("editing");
+    });
+
+    test("pressing ENTER in edit mode stop editing and move one cell down", async () => {
+      model.dispatch("START_EDITION", { text: "a" });
+      await nextTick();
+      fixture
+        .querySelector("div.o-composer")!
+        .dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
+      expect(getActiveXc(model)).toBe("A2");
+      expect(model.getters.getEditionMode()).toBe("inactive");
+      expect(getCell(model, "A1")!.content).toBe("a");
+    });
+
+    test("pressing shift+ENTER in edit mode stop editing and move one cell up", async () => {
+      model.dispatch("SELECT_CELL", { col: 0, row: 1 });
+      expect(getActiveXc(model)).toBe("A2");
+      model.dispatch("START_EDITION", { text: "a" });
+      await nextTick();
+      fixture
+        .querySelector("div.o-composer")!
+        .dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", shiftKey: true }));
+      expect(getActiveXc(model)).toBe("A1");
+      expect(model.getters.getEditionMode()).toBe("inactive");
+      expect(getCell(model, "A2")!.content).toBe("a");
+    });
+
+    test("pressing shift+ENTER in edit mode in top row stop editing and stay on same cell", async () => {
+      model.dispatch("START_EDITION", { text: "a" });
+      await nextTick();
+      fixture
+        .querySelector("div.o-composer")!
+        .dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", shiftKey: true }));
+      expect(getActiveXc(model)).toBe("A1");
+      expect(model.getters.getEditionMode()).toBe("inactive");
+      expect(getCell(model, "A1")!.content).toBe("a");
+    });
+
+    test("pressing TAB move to next cell", async () => {
+      parent.grid.el.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab" }));
+      expect(getActiveXc(model)).toBe("B1");
+    });
+
+    test("pressing shift+TAB move to previous cell", async () => {
+      model.dispatch("SELECT_CELL", { col: 1, row: 0 });
+      expect(getActiveXc(model)).toBe("B1");
+      parent.grid.el.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", shiftKey: true }));
+      expect(getActiveXc(model)).toBe("A1");
+    });
+
+    test("can undo/redo with keyboard", async () => {
+      model.dispatch("SET_FORMATTING", {
+        sheet: "Sheet1",
+        target: [{ left: 0, right: 0, top: 0, bottom: 0 }],
+        style: { fillColor: "red" },
+      });
+      expect(getCell(model, "A1")!.style).toBeDefined();
+      document.activeElement!.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "z", ctrlKey: true, bubbles: true })
+      );
+      expect(getCell(model, "A1")).toBeNull();
+      await nextTick();
+      document.activeElement!.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "y", ctrlKey: true, bubbles: true })
+      );
+      expect(getCell(model, "A1")!.style).toBeDefined();
+    });
+
+    test("can undo/redo with keyboard (uppercase version)", async () => {
+      model.dispatch("SET_FORMATTING", {
+        sheet: "Sheet1",
+        target: [{ left: 0, right: 0, top: 0, bottom: 0 }],
+        style: { fillColor: "red" },
+      });
+      expect(getCell(model, "A1")!.style).toBeDefined();
+      document.activeElement!.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Z", ctrlKey: true, bubbles: true })
+      );
+      expect(getCell(model, "A1")).toBeNull();
+      await nextTick();
+      document.activeElement!.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Y", ctrlKey: true, bubbles: true })
+      );
+      expect(getCell(model, "A1")!.style).toBeDefined();
+    });
+
+    test("can select all the sheet with CTRL+A", async () => {
+      document.activeElement!.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "A", ctrlKey: true, bubbles: true })
+      );
+      expect(getActiveXc(model)).toBe("A1");
+      expect(model.getters.getSelectedZones()[0]).toEqual({
+        left: 0,
+        top: 0,
+        right: 25,
+        bottom: 99,
+      });
+    });
+
+    test("can save the sheet with CTRL+S", async () => {
+      let saveContentCalled = false;
+      parent.el!.addEventListener("save-requested", () => {
+        saveContentCalled = true;
+      });
+      document.activeElement!.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "S", ctrlKey: true, bubbles: true })
+      );
+      expect(saveContentCalled).toBe(true);
+    });
+  });
+
+  describe("paint format tool with grid selection", () => {
+    test("can paste format with mouse", async () => {
+      model.dispatch("SET_VALUE", { xc: "B2", text: "b2" });
+      model.dispatch("SELECT_CELL", { col: 1, row: 1 });
+      model.dispatch("SET_FORMATTING", {
+        sheet: "Sheet1",
+        target: [{ left: 1, right: 1, top: 1, bottom: 1 }],
+        style: { bold: true },
+      });
+      const target = [{ left: 1, top: 1, bottom: 1, right: 1 }];
+      model.dispatch("ACTIVATE_PAINT_FORMAT", { target });
+      triggerMouseEvent("canvas", "mousedown", 300, 200);
+      expect(getCell(model, "C8")).toBeNull();
+      triggerMouseEvent("body", "mouseup", 300, 200);
+      expect(getCell(model, "C8")!.style).toBe(2);
+    });
+
+    test("can paste format with key", async () => {
+      model.dispatch("SET_VALUE", { xc: "B2", text: "b2" });
+      model.dispatch("SELECT_CELL", { col: 1, row: 1 });
+      model.dispatch("SET_FORMATTING", {
+        sheet: "Sheet1",
+        target: [{ left: 1, right: 1, top: 1, bottom: 1 }],
+        style: { bold: true },
+      });
+      const target = [{ left: 1, top: 1, bottom: 1, right: 1 }];
+      model.dispatch("ACTIVATE_PAINT_FORMAT", { target });
+      expect(getCell(model, "C2")).toBeNull();
+      document.activeElement!.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true })
+      );
+      expect(getCell(model, "C2")!.style).toBe(2);
+    });
+  });
+});
+
+describe("error tooltip", () => {
+  let intervalCb: Function;
+  let currentTime = 0;
+
+  beforeEach(async () => {
+    currentTime = 0;
+    model = new Model();
+    parent = new GridParent(model);
+
+    // mock setinterval and Date.now
+    parent.env.browser.setInterval = ((cb) => {
+      intervalCb = cb;
+    }) as any;
+    parent.env.browser.Date = {
+      now() {
+        return currentTime;
+      },
+    } as any;
+
+    await parent.mount(fixture);
+  });
+
+  test("can display error tooltip", async () => {
+    model.dispatch("SET_VALUE", { xc: "C8", text: "=1/0" });
+    await nextTick();
+    triggerMouseEvent("canvas", "mousemove", 300, 200);
+
+    currentTime = 250;
+    intervalCb();
+
+    await nextTick();
+    expect(document.querySelector(".o-error-tooltip")).toBeNull();
+
+    currentTime = 500;
+    intervalCb();
+    await nextTick();
+    expect(document.querySelector(".o-error-tooltip")).not.toBeNull();
+    expect(document.querySelector(".o-error-tooltip")).toMatchSnapshot();
+
+    // moving mouse await
+    triggerMouseEvent("canvas", "mousemove", 100, 200);
+    currentTime = 550;
+    intervalCb();
+    await nextTick();
+    expect(document.querySelector(".o-error-tooltip")).toBeNull();
+  });
+
+  test("can display error when move on merge", async () => {
+    const sheet = model.getters.getActiveSheet();
+    model.dispatch("ADD_MERGE", { sheet, zone: toZone("C1:C8") });
+    model.dispatch("SET_VALUE", { xc: "C1", text: "=1/0" });
+    await nextTick();
+    triggerMouseEvent("canvas", "mousemove", 300, 200); // C8
+
+    currentTime = 500;
+    intervalCb();
+    await nextTick();
+    expect(document.querySelector(".o-error-tooltip")).not.toBeNull();
+  });
+});
+
+describe("multi sheet with different sizes", function () {
+  beforeEach(async () => {
+    model = new Model({
+      sheets: [
+        {
+          name: "small",
+          id: "small",
+          colNumber: 2,
+          rowNumber: 2,
+          cells: {},
+        },
+        {
+          name: "big",
+          id: "big",
+          colNumber: 5,
+          rowNumber: 5,
+          cells: {},
+        },
+      ],
+    });
+    parent = new GridParent(model);
+    await parent.mount(fixture);
+  });
+
+  test("multiple sheets of different size render correctly", async () => {
+    expect(model["workbook"].activeSheet.name).toBe("small");
+    model.dispatch("SELECT_CELL", { col: 1, row: 1 });
+    model.dispatch("ACTIVATE_SHEET", { from: "small", to: "big" });
+    await nextTick();
+    model.dispatch("SELECT_CELL", { col: 4, row: 4 });
+    model.dispatch("ACTIVATE_SHEET", { from: "big", to: "small" });
+    await nextTick();
+    expect((parent.grid.comp! as Grid)["viewport"]).toMatchObject({
+      top: 0,
+      bottom: 1,
+      left: 0,
+      right: 1,
+      offsetX: 0,
+      offsetY: 0,
+    });
+    model.dispatch("SELECT_CELL", { col: 1, row: 1 });
+    model.dispatch("ACTIVATE_SHEET", { from: "small", to: "big" });
+    await nextTick();
+    expect((parent.grid.comp! as Grid)["viewport"]).toMatchObject({
+      top: 0,
+      bottom: 4,
+      left: 0,
+      right: 4,
+      offsetX: 0,
+      offsetY: 0,
+    });
+  });
+
+  test("deleting the row that has the active cell doesn't crash", async () => {
+    expect(model["workbook"].activeSheet.name).toBe("small");
+    model.dispatch("SELECT_CELL", { col: 1, row: 1 });
+    model.dispatch("REMOVE_COLUMNS", { columns: [1], sheet: model.getters.getActiveSheet() });
+    await nextTick();
+    expect((parent.grid.comp! as Grid)["viewport"]).toMatchObject({
+      top: 0,
+      bottom: 1,
+      left: 0,
+      right: 0,
+    });
+    expect(model.getters.getActiveCell()).toBeNull();
+  });
+});
+
+describe("figures", () => {
+  beforeEach(async () => {
+    model = new Model();
+    parent = new GridParent(model);
+    await parent.mount(fixture);
+  });
+
+  afterEach(() => {
+    parent.unmount();
+  });
+
+  test("focus a figure", async () => {
+    model.dispatch("CREATE_FIGURE", {
+      sheet: model.getters.getActiveSheet(),
+      figure: {
+        id: "someuuid",
+        tag: "text",
+        width: 100,
+        height: 100,
+        x: 100,
+        y: 100,
+        data: undefined,
+      },
+    });
+    await nextTick();
+    expect(fixture.querySelector(".o-figure")).toBeDefined();
+    await simulateClick(".o-figure");
+    expect(document.activeElement).toBe(fixture.querySelector(".o-figure"));
+  });
+
+  test("deleting a figure focuses the canvas", async () => {
+    model.dispatch("CREATE_FIGURE", {
+      sheet: model.getters.getActiveSheet(),
+      figure: {
+        id: "someuuid",
+        tag: "text",
+        width: 100,
+        height: 100,
+        x: 100,
+        y: 100,
+        data: undefined,
+      },
+    });
+    await nextTick();
+    const figure = fixture.querySelector(".o-figure")!;
+    await simulateClick(".o-figure");
+    expect(document.activeElement).toBe(figure);
+    figure.dispatchEvent(new KeyboardEvent("keydown", { key: "Delete" }));
+    await nextTick();
+    expect(fixture.querySelector(".o-figure")).toBeNull();
+    expect(document.activeElement).toBe(fixture.querySelector("canvas"));
+  });
+
+  test("deleting a figure doesn't delete selection", async () => {
+    model.dispatch("CREATE_FIGURE", {
+      sheet: model.getters.getActiveSheet(),
+      figure: {
+        id: "someuuid",
+        tag: "text",
+        width: 100,
+        height: 100,
+        x: 100,
+        y: 100,
+        data: undefined,
+      },
+    });
+    model.dispatch("SET_VALUE", { xc: "A1", text: "content" });
+    model.dispatch("SELECT_CELL", { col: 0, row: 0 });
+    await nextTick();
+    const figure = fixture.querySelector(".o-figure")!;
+    await simulateClick(".o-figure");
+    figure.dispatchEvent(new KeyboardEvent("keydown", { key: "Delete", bubbles: true }));
+    await nextTick();
+    expect(fixture.querySelector(".o-figure")).toBeNull();
+    expect(model.getters.getCell(0, 0)!.content).toBe("content");
+  });
+
+  test("Add a figure on sheet2, scroll down on sheet 1, switch to sheet 2, the figure should be displayed", async () => {
+    model.dispatch("CREATE_SHEET", { id: "42" });
+    model.dispatch("CREATE_FIGURE", {
+      sheet: "42",
+      figure: {
+        id: "someuuid",
+        tag: "text",
+        width: 100,
+        height: 100,
+        x: 1,
+        y: 1,
+        data: undefined,
+      },
+    });
+    fixture.querySelector(".o-grid")!.dispatchEvent(new WheelEvent("wheel", { deltaX: 1500 }));
+    fixture.querySelector(".o-scrollbar.vertical")!.dispatchEvent(new Event("scroll"));
+    await nextTick();
+    model.dispatch("ACTIVATE_SHEET", { from: model.getters.getActiveSheet(), to: "42" });
+    await nextTick();
+    expect(fixture.querySelectorAll(".o-figure")).toHaveLength(1);
+  });
+});