@odoo/o-spreadsheet 1.0.1

package/tests/components/top_bar_test.ts

@@ -0,0 +1,427 @@
+import { Component, hooks, tags } from "@odoo/owl";
+import { TopBar } from "../../src/components/top_bar";
+import { DEFAULT_FONT_SIZE } from "../../src/constants";
+import { Model } from "../../src/model";
+import { topbarComponentRegistry } from "../../src/registries";
+import { topbarMenuRegistry } from "../../src/registries/menus/topbar_menu_registry";
+import { ConditionalFormat } from "../../src/types";
+import { triggerMouseEvent } from "../dom_helper";
+import { getCell, GridParent, makeTestFixture, nextTick } from "../helpers";
+
+const { xml } = tags;
+const { useSubEnv } = hooks;
+
+let fixture: HTMLElement;
+
+class Parent extends Component<any, any> {
+  static template = xml`<TopBar model="model" t-on-ask-confirmation="askConfirmation"/>`;
+  static components = { TopBar };
+  model: Model;
+  constructor(model: Model) {
+    super();
+    useSubEnv({
+      openSidePanel: (panel: string) => {},
+      dispatch: model.dispatch,
+      getters: model.getters,
+      askConfirmation: jest.fn(),
+    });
+    this.model = model;
+  }
+  mounted() {
+    this.model.on("update", this, this.render);
+  }
+
+  willUnmount() {
+    this.model.off("update", this);
+  }
+}
+
+beforeEach(() => {
+  fixture = makeTestFixture();
+});
+
+afterEach(() => {
+  fixture.remove();
+});
+
+describe("TopBar component", () => {
+  test("simple rendering", async () => {
+    const parent = new Parent(new Model());
+    await parent.mount(fixture);
+
+    expect(fixture.querySelector(".o-spreadsheet-topbar")).toMatchSnapshot();
+  });
+
+  test("opening a second menu closes the first one", async () => {
+    const model = new Model();
+    model.dispatch("SET_VALUE", { xc: "B2", text: "b2" });
+    const parent = new Parent(model);
+    await parent.mount(fixture);
+
+    expect(fixture.querySelectorAll(".o-dropdown-content").length).toBe(0);
+    fixture.querySelector('span[title="Borders"]')!.dispatchEvent(new Event("click"));
+    await nextTick();
+    expect(fixture.querySelectorAll(".o-dropdown-content").length).toBe(1);
+    expect(fixture.querySelectorAll(".o-line-item").length).not.toBe(0);
+    fixture
+      .querySelector('.o-tool[title="Horizontal align"] span')!
+      .dispatchEvent(new Event("click"));
+    await nextTick();
+    expect(fixture.querySelectorAll(".o-dropdown-content").length).toBe(1);
+    expect(fixture.querySelectorAll(".o-color-line").length).toBe(0);
+  });
+
+  test("merging cell button state is correct", async () => {
+    const model = new Model({
+      sheets: [
+        {
+          colNumber: 10,
+          rowNumber: 10,
+          cells: { B2: { content: "b2" } },
+          merges: ["A1:B1"],
+        },
+      ],
+    });
+    const parent = new Parent(model);
+    await parent.mount(fixture);
+    const mergeTool = fixture.querySelector('.o-tool[title="Merge Cells"]')!;
+    expect(mergeTool.classList.contains("active")).toBeTruthy();
+
+    // increase the selection to A2 (so, it is now A1:B2) => merge tool
+    // shoul not be active
+    model.dispatch("ALTER_SELECTION", { cell: [0, 1] });
+    await nextTick();
+    expect(mergeTool.classList.contains("active")).toBeFalsy();
+  });
+
+  test("multiple selection zones => merge tools is disabled", async () => {
+    const model = new Model();
+    model.dispatch("SET_VALUE", { xc: "B2", text: "b2" });
+
+    const parent = new Parent(model);
+    await parent.mount(fixture);
+    const mergeTool = fixture.querySelector('.o-tool[title="Merge Cells"]')!;
+
+    // should be disabled, because the selection is just one cell
+    expect(mergeTool.classList.contains("o-disabled")).toBeTruthy();
+
+    model.dispatch("ALTER_SELECTION", { cell: [1, 0] });
+    await nextTick();
+    // should be enabled, because two cells are selected
+    expect(mergeTool.classList.contains("o-disabled")).toBeFalsy();
+
+    model.dispatch("START_SELECTION_EXPANSION");
+    model.dispatch("SELECT_CELL", { col: 3, row: 3 });
+
+    await nextTick();
+    // should be disabled, because multiple zones are selected
+    expect(mergeTool.classList.contains("o-disabled")).toBeTruthy();
+  });
+
+  test("undo/redo tools", async () => {
+    const model = new Model();
+
+    const parent = new Parent(model);
+    await parent.mount(fixture);
+    const undoTool = fixture.querySelector('.o-tool[title="Undo"]')!;
+    const redoTool = fixture.querySelector('.o-tool[title="Redo"]')!;
+
+    expect(undoTool.classList.contains("o-disabled")).toBeTruthy();
+    expect(redoTool.classList.contains("o-disabled")).toBeTruthy();
+
+    model.dispatch("SET_FORMATTING", {
+      sheet: "Sheet1",
+      target: [{ left: 0, right: 0, top: 0, bottom: 0 }],
+      style: { bold: true },
+    });
+    await nextTick();
+
+    expect(undoTool.classList.contains("o-disabled")).toBeFalsy();
+    expect(redoTool.classList.contains("o-disabled")).toBeTruthy();
+    expect(model["workbook"].activeSheet.cells.A1.style).toBeDefined();
+
+    undoTool.dispatchEvent(new Event("click"));
+    await nextTick();
+    expect(undoTool.classList.contains("o-disabled")).toBeTruthy();
+    expect(redoTool.classList.contains("o-disabled")).toBeFalsy();
+
+    expect(getCell(model, "A1")).toBeNull();
+  });
+
+  test("paint format tools", async () => {
+    const model = new Model();
+
+    const parent = new Parent(model);
+    await parent.mount(fixture);
+    const paintFormatTool = fixture.querySelector('.o-tool[title="Paint Format"]')!;
+
+    expect(paintFormatTool.classList.contains("active")).toBeFalsy();
+
+    paintFormatTool.dispatchEvent(new Event("click"));
+    await nextTick();
+
+    expect(paintFormatTool.classList.contains("active")).toBeTruthy();
+  });
+
+  test("can clear formatting", async () => {
+    const model = new Model();
+    model.dispatch("SELECT_CELL", { col: 1, row: 0 });
+    model.dispatch("SET_FORMATTING", {
+      sheet: model.getters.getActiveSheet(),
+      target: model.getters.getSelectedZones(),
+      border: "all",
+    });
+    expect(model["workbook"].activeSheet.cells.B1.border).toBeDefined();
+    const parent = new Parent(model);
+    await parent.mount(fixture);
+    const clearFormatTool = fixture.querySelector('.o-tool[title="Clear Format"]')!;
+    clearFormatTool.dispatchEvent(new Event("click"));
+    expect(getCell(model, "B1")).toBeNull();
+  });
+
+  test("can set cell format", async () => {
+    const model = new Model();
+    expect(getCell(model, "A1")).toBeNull();
+    const parent = new Parent(model);
+    await parent.mount(fixture);
+    const formatTool = fixture.querySelector('.o-tool[title="More formats"]')!;
+    formatTool.dispatchEvent(new Event("click"));
+    await nextTick();
+    expect(parent.el).toMatchSnapshot();
+    formatTool
+      .querySelector('[data-format="percent"]')!
+      .dispatchEvent(new Event("click", { bubbles: true }));
+    await nextTick();
+    expect(model["workbook"].activeSheet.cells.A1.format).toEqual("0.00%");
+  });
+
+  test("can set font size", async () => {
+    const model = new Model();
+    const parent = new Parent(model);
+    await parent.mount(fixture);
+    const fontSizeTool = fixture.querySelector('.o-tool[title="Font Size"]')!;
+    expect(fontSizeTool.textContent!.trim()).toBe(DEFAULT_FONT_SIZE.toString());
+    fontSizeTool.dispatchEvent(new Event("click"));
+    await nextTick();
+    fontSizeTool
+      .querySelector('[data-size="8"]')!
+      .dispatchEvent(new Event("click", { bubbles: true }));
+    await nextTick();
+    expect(fontSizeTool.textContent!.trim()).toBe("8");
+    const style = model.getters.getCellStyle(model["workbook"].activeSheet.cells.A1);
+    expect(style.fontSize).toBe(8);
+  });
+
+  test("opening, then closing same menu", async () => {
+    const model = new Model();
+    model.dispatch("SET_VALUE", { xc: "B2", text: "b2" });
+    const parent = new Parent(model);
+    await parent.mount(fixture);
+
+    expect(fixture.querySelectorAll(".o-dropdown-content").length).toBe(0);
+    fixture.querySelector('span[title="Borders"]')!.dispatchEvent(new Event("click"));
+    await nextTick();
+    expect(fixture.querySelectorAll(".o-dropdown-content").length).toBe(1);
+    fixture.querySelector('span[title="Borders"]')!.dispatchEvent(new Event("click"));
+    await nextTick();
+    expect(fixture.querySelectorAll(".o-dropdown-content").length).toBe(0);
+  });
+
+  test("Can open a Topbar menu", async () => {
+    const parent = new Parent(new Model());
+    await parent.mount(fixture);
+    expect(fixture.querySelectorAll(".o-menu")).toHaveLength(0);
+    const items = topbarMenuRegistry.getAll();
+    const number = items.filter((item) => item.children.length !== 0).length;
+    expect(fixture.querySelectorAll(".o-topbar-menu")).toHaveLength(number);
+    triggerMouseEvent(".o-topbar-menu[data-id='file']", "click");
+    await nextTick();
+    expect(fixture.querySelectorAll(".o-menu")).toHaveLength(1);
+    const file = topbarMenuRegistry.get("file");
+    const numberChild = topbarMenuRegistry
+      .getChildren(file, parent.env)
+      .filter((item) => item.children.length !== 0 || item.action).length;
+    expect(fixture.querySelectorAll(".o-menu-item")).toHaveLength(numberChild);
+    triggerMouseEvent(".o-spreadsheet-topbar", "click");
+    await nextTick();
+    expect(fixture.querySelectorAll(".o-menu")).toHaveLength(0);
+  });
+
+  test("Can open a Topbar menu with mousemove", async () => {
+    const parent = new Parent(new Model());
+    await parent.mount(fixture);
+    triggerMouseEvent(".o-topbar-menu[data-id='file']", "click");
+    await nextTick();
+    const file = topbarMenuRegistry.get("file");
+    let numberChild = topbarMenuRegistry
+      .getChildren(file, parent.env)
+      .filter((item) => item.children.length !== 0 || item.action).length;
+    expect(fixture.querySelectorAll(".o-menu-item")).toHaveLength(numberChild);
+    expect(fixture.querySelectorAll(".o-menu")).toHaveLength(1);
+    triggerMouseEvent(".o-topbar-menu[data-id='insert']", "mouseover");
+    await nextTick();
+    const insert = topbarMenuRegistry.get("insert");
+    numberChild = topbarMenuRegistry
+      .getChildren(insert, parent.env)
+      .filter((item) => item.children.length !== 0 || item.action).length;
+    expect(fixture.querySelectorAll(".o-menu-item")).toHaveLength(numberChild);
+    expect(fixture.querySelectorAll(".o-menu")).toHaveLength(1);
+  });
+
+  test("Can click on a menuItem do execute action and close menus", async () => {
+    const menuDefinitions = Object.assign({}, topbarMenuRegistry.content);
+    let number = 0;
+    topbarMenuRegistry.add("test", { name: "Test", sequence: 1 });
+    topbarMenuRegistry.addChild("testaction", ["test"], {
+      name: "TestAction",
+      sequence: 1,
+      action: () => {
+        number++;
+      },
+    });
+    const parent = new Parent(new Model());
+    await parent.mount(fixture);
+    triggerMouseEvent(".o-topbar-menu[data-id='test']", "click");
+    await nextTick();
+    triggerMouseEvent(".o-menu-item", "click");
+    await nextTick();
+    expect(fixture.querySelectorAll(".o-menu-dropdown-content")).toHaveLength(0);
+    expect(number).toBe(1);
+    topbarMenuRegistry.content = menuDefinitions;
+  });
+
+  test("Can add a custom component to topbar", async () => {
+    const compDefinitions = Object.assign({}, topbarComponentRegistry.content);
+    class Comp extends Component {
+      static template = xml`<div class="o-topbar-test">Test</div>`;
+    }
+    topbarComponentRegistry.add("1", { component: Comp });
+    const parent = new Parent(new Model());
+    await parent.mount(fixture);
+    expect(fixture.querySelectorAll(".o-topbar-test")).toHaveLength(1);
+    topbarComponentRegistry.content = compDefinitions;
+  });
+});
+
+test("Can show/hide a TopBarComponent based on condition", async () => {
+  const compDefinitions = Object.assign({}, topbarComponentRegistry.content);
+  class Comp1 extends Component {
+    static template = xml`<div class="o-topbar-test1">Test1</div>`;
+  }
+  class Comp2 extends Component {
+    static template = xml`<div class="o-topbar-test2">Test2</div>`;
+  }
+  topbarComponentRegistry.add("1", {
+    component: Comp1,
+    isVisible: (env) => true,
+  });
+  topbarComponentRegistry.add("2", {
+    component: Comp2,
+    isVisible: (env) => false,
+  });
+  const parent = new Parent(new Model());
+  await parent.mount(fixture);
+  expect(fixture.querySelectorAll(".o-topbar-test1")).toHaveLength(1);
+  expect(fixture.querySelectorAll(".o-topbar-test2")).toHaveLength(0);
+  topbarComponentRegistry.content = compDefinitions;
+});
+
+describe("TopBar - CF", () => {
+  test("open sidepanel with no CF in selected zone", async () => {
+    const model = new Model();
+    const parent = new GridParent(model);
+    await parent.mount(fixture);
+    triggerMouseEvent(".o-topbar-menu[data-id='format']", "click");
+    await nextTick();
+    triggerMouseEvent(".o-menu-item[data-name='format_cf']", "click");
+    await nextTick();
+    expect(
+      fixture.querySelector(".o-sidePanel .o-sidePanelBody .o-cf .o-cf-preview-list")
+    ).toBeTruthy();
+    expect(
+      fixture.querySelector(".o-sidePanel .o-sidePanelBody .o-cf .o-cf-ruleEditor")
+    ).toBeFalsy();
+  });
+
+  test("open sidepanel with one CF in selected zone", async () => {
+    const model = new Model();
+    const parent = new GridParent(model);
+    await parent.mount(fixture);
+
+    const cfRule: ConditionalFormat = {
+      ranges: ["A1:C7"],
+      id: "1",
+      rule: {
+        values: ["2"],
+        operator: "Equal",
+        type: "CellIsRule",
+        style: { fillColor: "#FF0000" },
+      },
+    };
+    model.dispatch("ADD_CONDITIONAL_FORMAT", {
+      cf: cfRule,
+      sheet: model.getters.getActiveSheet(),
+    });
+    const zone = { left: 0, top: 0, bottom: 10, right: 10 };
+    model.dispatch("SET_SELECTION", { zones: [zone], anchor: [0, 0] });
+
+    triggerMouseEvent(".o-topbar-menu[data-id='format']", "click");
+    await nextTick();
+    triggerMouseEvent(".o-menu-item[data-name='format_cf']", "click");
+    await nextTick();
+    expect(
+      fixture.querySelector(".o-sidePanel .o-sidePanelBody .o-cf .o-cf-preview-list")
+    ).toBeFalsy();
+    expect(
+      fixture.querySelector(".o-sidePanel .o-sidePanelBody .o-cf .o-cf-ruleEditor")
+    ).toBeTruthy();
+  });
+
+  test("open sidepanel with with more then one CF in selected zone", async () => {
+    const model = new Model();
+    const parent = new GridParent(model);
+    await parent.mount(fixture);
+
+    const cfRule1: ConditionalFormat = {
+      ranges: ["A1:C7"],
+      id: "1",
+      rule: {
+        values: ["2"],
+        operator: "Equal",
+        type: "CellIsRule",
+        style: { fillColor: "#FF0000" },
+      },
+    };
+    const cfRule2: ConditionalFormat = {
+      ranges: ["A1:C7"],
+      id: "2",
+      rule: {
+        values: ["3"],
+        operator: "Equal",
+        type: "CellIsRule",
+        style: { fillColor: "#FE0001" },
+      },
+    };
+    model.dispatch("ADD_CONDITIONAL_FORMAT", {
+      cf: cfRule1,
+      sheet: model.getters.getActiveSheet(),
+    });
+    model.dispatch("ADD_CONDITIONAL_FORMAT", {
+      cf: cfRule2,
+      sheet: model.getters.getActiveSheet(),
+    });
+    const zone = { left: 0, top: 0, bottom: 10, right: 10 };
+    model.dispatch("SET_SELECTION", { zones: [zone], anchor: [0, 0] });
+
+    triggerMouseEvent(".o-topbar-menu[data-id='format']", "click");
+    await nextTick();
+    triggerMouseEvent(".o-menu-item[data-name='format_cf']", "click");
+    await nextTick();
+    expect(
+      fixture.querySelector(".o-sidePanel .o-sidePanelBody .o-cf .o-cf-preview-list")
+    ).toBeTruthy();
+    expect(
+      fixture.querySelector(".o-sidePanel .o-sidePanelBody .o-cf .o-cf-ruleEditor")
+    ).toBeFalsy();
+  });
+});

package/tests/data_test.ts

@@ -0,0 +1,175 @@
+import { CURRENT_VERSION, load } from "../src/data";
+import { mockUuidV4To } from "./helpers";
+jest.mock("../src/helpers/uuid", () => require("./__mocks__/uuid"));
+
+describe("load data", () => {
+  test("create empty workbookdata when loading nothing", () => {
+    mockUuidV4To(123);
+    expect(load()).toEqual({
+      version: CURRENT_VERSION,
+      borders: {},
+      styles: {},
+      entities: {},
+      sheets: [
+        {
+          id: "123",
+          name: "Sheet1",
+          cells: {},
+          colNumber: 26,
+          rowNumber: 100,
+          cols: {},
+          rows: {},
+          merges: [],
+          conditionalFormats: [],
+          figures: [],
+        },
+      ],
+      activeSheet: "123",
+    });
+
+    expect(load({})).toEqual({
+      version: CURRENT_VERSION,
+      borders: {},
+      styles: {},
+      entities: {},
+      sheets: [
+        {
+          id: "124",
+          name: "Sheet1",
+          cells: {},
+          colNumber: 26,
+          rowNumber: 100,
+          cols: {},
+          rows: {},
+          merges: [],
+          conditionalFormats: [],
+          figures: [],
+        },
+      ],
+      activeSheet: "124",
+    });
+  });
+
+  test("assign sheet name if missing", () => {
+    expect(
+      load({
+        sheets: [{ id: "asdf", merges: ["A1:B2"] }],
+      })
+    ).toEqual({
+      version: CURRENT_VERSION,
+      borders: {},
+      styles: {},
+      entities: {},
+      sheets: [
+        {
+          id: "asdf",
+          name: "Sheet1",
+          cells: {},
+          colNumber: 26,
+          rowNumber: 100,
+          cols: {},
+          rows: {},
+          merges: ["A1:B2"],
+          conditionalFormats: [],
+          figures: [],
+        },
+      ],
+      activeSheet: "asdf",
+    });
+  });
+
+  test("assign sheet id if missing", () => {
+    mockUuidV4To(12);
+    expect(
+      load({
+        sheets: [{ name: "Sheet1", merges: ["A1:B2"] }],
+      })
+    ).toEqual({
+      version: CURRENT_VERSION,
+      borders: {},
+      styles: {},
+      entities: {},
+      sheets: [
+        {
+          id: "13",
+          name: "Sheet1",
+          cells: {},
+          colNumber: 26,
+          rowNumber: 100,
+          cols: {},
+          rows: {},
+          merges: ["A1:B2"],
+          conditionalFormats: [],
+          figures: [],
+        },
+      ],
+      activeSheet: "13",
+    });
+  });
+
+  test("assign two different sheet names if missing", () => {
+    expect(
+      load({
+        sheets: [
+          { id: "1", merges: ["A1:B2"] },
+          { id: "asdf", merges: ["C3:D4"] },
+        ],
+      }).sheets
+    ).toEqual([
+      {
+        id: "1",
+        name: "Sheet1",
+        cells: {},
+        colNumber: 26,
+        rowNumber: 100,
+        cols: {},
+        rows: {},
+        merges: ["A1:B2"],
+        conditionalFormats: [],
+        figures: [],
+      },
+      {
+        id: "asdf",
+        name: "Sheet2",
+        cells: {},
+        colNumber: 26,
+        rowNumber: 100,
+        cols: {},
+        rows: {},
+        merges: ["C3:D4"],
+        conditionalFormats: [],
+        figures: [],
+      },
+    ]);
+  });
+
+  test("sanitize input data, even if versioned", () => {
+    mockUuidV4To(133);
+    expect(
+      load({
+        version: 3,
+        sheets: [{ merges: ["A1:B2"] }],
+      })
+    ).toEqual({
+      version: CURRENT_VERSION,
+      borders: {},
+      styles: {},
+      entities: {},
+      sheets: [
+        {
+          id: "134",
+          name: "Sheet1",
+          cells: {},
+          colNumber: 26,
+          rowNumber: 100,
+          cols: {},
+          rows: {},
+          merges: ["A1:B2"],
+          conditionalFormats: [],
+          figures: [],
+        },
+      ],
+      activeSheet: "134",
+    });
+  });
+});

package/tests/dom_helper.ts

@@ -0,0 +1,42 @@
+import { nextTick } from "./helpers";
+
+export async function simulateClick(selector: string, x: number = 10, y: number = 10) {
+  const target = document.querySelector(selector)! as HTMLElement;
+  triggerMouseEvent(selector, "mousedown", x, y);
+  if (target !== document.activeElement) {
+    (document.activeElement as HTMLElement | null)?.blur();
+    target.focus();
+  }
+  triggerMouseEvent(selector, "mouseup", x, y);
+  triggerMouseEvent(selector, "click", x, y);
+  await nextTick();
+}
+
+export function triggerMouseEvent(
+  selector: string | any,
+  type: string,
+  x?: number,
+  y?: number,
+  extra: any = { bubbles: true }
+): void {
+  const ev = new MouseEvent(type, {
+    clientX: x,
+    clientY: y,
+    ...extra,
+  });
+  (ev as any).offsetX = x;
+  (ev as any).offsetY = y;
+  (ev as any).pageX = x;
+  (ev as any).pageY = y;
+  if (typeof selector === "string") {
+    document.querySelector(selector)!.dispatchEvent(ev);
+  } else {
+    selector!.dispatchEvent(ev);
+  }
+}
+
+export function setInputValueAndTrigger(selector: string, value: string, eventType: string): void {
+  const rangeInput = document.querySelector(selector) as HTMLInputElement;
+  rangeInput.value = value;
+  rangeInput.dispatchEvent(new Event(eventType));
+}