@odoo/o-spreadsheet 14.0.1 → 15.0.0

package/tests/components/selection_input_test.ts

@@ -1,259 +0,0 @@
-import { Component, hooks, tags } from "@odoo/owl";
-import { Model } from "../../src";
-import { SelectionInput } from "../../src/components/selection_input";
-import { simulateClick } from "../dom_helper";
-import { makeTestFixture, nextTick } from "../helpers";
-
-const { xml } = tags;
-const { useSubEnv, useRef } = hooks;
-
-let model: Model;
-let fixture: HTMLElement;
-
-function focus(index = 0) {
-  fixture.querySelectorAll("input")[index].dispatchEvent(new Event("focus"));
-}
-
-async function writeInput(index: number, text: string) {
-  focus(index);
-  await nextTick();
-  const input = fixture.querySelectorAll("input")[index];
-  input.value = text;
-  input.dispatchEvent(new Event("input"));
-  input.dispatchEvent(new Event("change"));
-}
-
-interface SelectionInputTestConfig {
-  initialRanges?: string[];
-  maximumRanges?: number;
-  onChanged?: jest.Mock<void, [any]>;
-}
-
-class Parent extends Component<any> {
-  static template = xml/* xml */ `
-    <SelectionInput
-      t-ref="selection-input"
-      ranges="initialRanges"
-      maximumRanges="maximumRanges"
-      t-on-selection-changed="onChanged"/>
-  `;
-  static components = { SelectionInput };
-  model: Model;
-  initialRanges: string[] | undefined;
-  maximumRanges: number | undefined;
-  ref = useRef("selection-input");
-  onChanged: jest.Mock<void, [any]>;
-
-  constructor(model: Model, config: SelectionInputTestConfig) {
-    super();
-    useSubEnv({
-      dispatch: model.dispatch,
-      getters: model.getters,
-    });
-    this.initialRanges = config.initialRanges;
-    this.maximumRanges = config.maximumRanges;
-    this.model = model;
-    this.onChanged = config.onChanged || jest.fn();
-  }
-
-  get id(): string {
-    return (this.ref.comp as any).id;
-  }
-
-  mounted() {
-    this.model.on("update", this, this.render);
-    this.render();
-  }
-
-  willUnmount() {
-    this.model.off("update", this);
-  }
-}
-
-class MutliParent extends Component<any> {
-  static template = xml/* xml */ `
-    <div>
-      <div class="input-1">
-        <SelectionInput/>
-      </div>
-      <div class="input-2">
-        <SelectionInput/>
-      </div>
-    </div>
-  `;
-  static components = { SelectionInput };
-  model: Model;
-
-  constructor(model: Model) {
-    super();
-    useSubEnv({
-      dispatch: model.dispatch,
-      getters: model.getters,
-    });
-    this.model = model;
-  }
-
-  mounted() {
-    this.model.on("update", this, this.render);
-    this.render();
-  }
-
-  willUnmount() {
-    this.model.off("update", this);
-  }
-}
-
-async function createSelectionInput(config: SelectionInputTestConfig = {}) {
-  model = new Model();
-  const parent = new Parent(model, config);
-  await parent.mount(fixture);
-  await nextTick();
-  const id = parent.id;
-  return { parent, model, id };
-}
-
-describe("Selection Input", () => {
-  beforeEach(async () => {
-    fixture = makeTestFixture();
-  });
-
-  afterEach(() => {
-    fixture.remove();
-  });
-
-  test("remove button is not displayed with a single input", async () => {
-    await createSelectionInput();
-    expect(fixture.querySelectorAll(".o-remove-selection").length).toBeFalsy();
-  });
-
-  test("remove button is displayed with more than one input", async () => {
-    await createSelectionInput();
-    await simulateClick(".o-add-selection");
-    expect(fixture.querySelectorAll(".o-remove-selection").length).toBe(2);
-  });
-
-  test("input is filled when new highlight is added", async () => {
-    const { model } = await createSelectionInput();
-    model.dispatch("ADD_HIGHLIGHTS", {
-      ranges: {
-        B4: "#454545",
-      },
-    });
-    await nextTick();
-    expect(fixture.querySelector("input")!.value).toBe("B4");
-    expect(fixture.querySelector("input")!.getAttribute("style")).toBe("color: #454545");
-    simulateClick(".o-add-selection");
-    model.dispatch("ADD_HIGHLIGHTS", {
-      ranges: {
-        B5: "#787878",
-      },
-    });
-    await nextTick();
-    expect(fixture.querySelectorAll("input")[0].value).toBe("B4");
-    expect(fixture.querySelectorAll("input")[0].getAttribute("style")).toBe("color: #454545");
-    expect(fixture.querySelectorAll("input")[1].value).toBe("B5");
-    expect(fixture.querySelectorAll("input")[1].getAttribute("style")).toBe("color: #787878");
-  });
-
-  test("input is not filled with highlight when maximum ranges reached", async () => {
-    const { model } = await createSelectionInput({ maximumRanges: 1 });
-    expect(fixture.querySelectorAll("input")).toHaveLength(1);
-    model.dispatch("PREPARE_SELECTION_EXPANSION");
-    model.dispatch("START_SELECTION_EXPANSION");
-    model.dispatch("SELECT_CELL", { col: 1, row: 1 });
-    await nextTick();
-    expect(fixture.querySelectorAll("input")).toHaveLength(1);
-    expect(fixture.querySelector("input")!.value).toBe("A1");
-    expect(fixture.querySelector(".o-add-selection")).toBeNull();
-  });
-
-  test("new range is added when button clicked", async () => {
-    await createSelectionInput();
-    expect(fixture.querySelectorAll("input").length).toBe(1);
-    await simulateClick(".o-add-selection");
-    expect(fixture.querySelectorAll("input").length).toBe(2);
-  });
-
-  test("cannot add more ranges than the maximum", async () => {
-    await createSelectionInput({ maximumRanges: 2 });
-    expect(fixture.querySelectorAll("input").length).toBe(1);
-    await simulateClick(".o-add-selection");
-    expect(fixture.querySelectorAll("input").length).toBe(2);
-    expect(fixture.querySelector(".o-add-selection")).toBeNull();
-    await simulateClick(".o-remove-selection");
-    expect(fixture.querySelector(".o-add-selection")).toBeDefined();
-  });
-
-  test("can set initial ranges", async () => {
-    await createSelectionInput({ initialRanges: ["C4", "A1"] });
-    expect(fixture.querySelectorAll("input").length).toBe(2);
-    expect(fixture.querySelectorAll("input")[0].value).toBe("C4");
-    expect(fixture.querySelectorAll("input")[1].value).toBe("A1");
-  });
-
-  test("can focus a range", async () => {
-    await createSelectionInput();
-    await simulateClick(".o-add-selection"); // last input is now focused
-    expect([...fixture.querySelectorAll("input")].map((i) => i.className)).toEqual([
-      "",
-      "o-focused",
-    ]);
-    await simulateClick("input"); // focus the first input
-    expect([...fixture.querySelectorAll("input")].map((i) => i.className)).toEqual([
-      "o-focused",
-      "",
-    ]);
-  });
-
-  test("unmounting deletes the state", async () => {
-    const { parent, model, id } = await createSelectionInput();
-    expect(model.getters.getSelectionInput(id).length).toBe(1);
-    parent.unmount();
-    expect(model.getters.getSelectionInput(id).length).toBe(0);
-  });
-
-  test("can unfocus all inputs with the OK button", async () => {
-    await createSelectionInput();
-    expect(fixture.querySelector(".o-focused")).toBeTruthy();
-    await simulateClick(".o-selection-ok");
-  });
-
-  test("changed event is triggered when input changed", async () => {
-    let newRanges;
-    const onChanged = jest.fn(({ detail }) => {
-      newRanges = detail.ranges;
-    });
-    await createSelectionInput({ onChanged });
-    await writeInput(0, "C2");
-    expect(onChanged).toHaveBeenCalled();
-    expect(newRanges).toStrictEqual(["C2"]);
-  });
-
-  test("changed event is triggered when highlight added", async () => {
-    let newRanges;
-    const onChanged = jest.fn(({ detail }) => {
-      newRanges = detail.ranges;
-    });
-    const { model } = await createSelectionInput({ onChanged });
-    model.dispatch("ADD_HIGHLIGHTS", {
-      ranges: {
-        B4: "#454545",
-      },
-    });
-    await nextTick();
-    expect(onChanged).toHaveBeenCalled();
-    expect(newRanges).toStrictEqual(["B4"]);
-  });
-
-  test("focus is transfered from one input to another", async () => {
-    model = new Model();
-    const parent = new MutliParent(model);
-    await parent.mount(fixture);
-    await nextTick();
-    expect(fixture.querySelector(".input-1 .o-focused")).toBeTruthy();
-    expect(fixture.querySelector(".input-2 .o-focused")).toBeFalsy();
-    await simulateClick(".input-2 input");
-    expect(fixture.querySelector(".input-1 .o-focused")).toBeFalsy();
-    expect(fixture.querySelector(".input-2 .o-focused")).toBeTruthy();
-  });
-});

package/tests/components/side_panel_test.ts

@@ -1,148 +0,0 @@
-import { Component, hooks, tags } from "@odoo/owl";
-import { Spreadsheet } from "../../src/components";
-import { Model } from "../../src/model";
-import { sidePanelRegistry } from "../../src/registries/index";
-import { SidePanelContent } from "../../src/registries/side_panel_registry";
-import { SpreadsheetEnv } from "../../src/types";
-import { simulateClick } from "../dom_helper";
-import { makeTestFixture, nextTick } from "../helpers";
-
-const { useRef } = hooks;
-const { xml } = tags;
-
-class Parent extends Component<any> {
-  static template = xml`<Spreadsheet t-ref="spreadsheet" data="data"/>`;
-  static components = { Spreadsheet };
-  private spreadsheet: any = useRef("spreadsheet");
-  get spreadsheetEnv(): SpreadsheetEnv {
-    return this.spreadsheet.comp.env;
-  }
-  get model(): Model {
-    return this.spreadsheet.comp.model;
-  }
-}
-
-let fixture: HTMLElement;
-let parent: Parent;
-let sidePanelContent: { [key: string]: SidePanelContent };
-
-class Body extends Component<any, any> {
-  static template = xml`
-    <div>
-      <div class="main_body">test</div>
-      <div class="props_body" t-if="props.text"><t t-esc="props.text"/></div>
-    </div>`;
-}
-
-class Body2 extends Component<any, any> {
-  static template = xml`
-    <div>
-      <div class="main_body_2">Hello</div>
-      <div class="props_body_2" t-if="props.field"><t t-esc="props.field"/></div>
-    </div>`;
-}
-
-beforeEach(async () => {
-  fixture = makeTestFixture();
-  parent = new Parent();
-  await parent.mount(fixture);
-  sidePanelContent = Object.assign({}, sidePanelRegistry.content);
-});
-
-afterEach(() => {
-  fixture.remove();
-  sidePanelRegistry.content = sidePanelContent;
-});
-
-describe("Side Panel", () => {
-  test("Can open a custom side panel", async () => {
-    sidePanelRegistry.add("CUSTOM_PANEL", {
-      title: "Custom Panel",
-      Body: Body,
-    });
-    parent.spreadsheetEnv.openSidePanel("CUSTOM_PANEL");
-    await nextTick();
-    expect(document.querySelectorAll(".o-sidePanel")).toHaveLength(1);
-    expect(document.querySelector(".o-sidePanelTitle")!.textContent).toBe("Custom Panel");
-    expect(document.querySelector(".main_body")!.textContent).toBe("test");
-    expect(document.querySelector(".props_body")).toBeNull();
-  });
-
-  test("Can close a side panel", async () => {
-    sidePanelRegistry.add("CUSTOM_PANEL", {
-      title: "Custom Panel",
-      Body: Body,
-    });
-    parent.spreadsheetEnv.openSidePanel("CUSTOM_PANEL");
-    await nextTick();
-    expect(document.querySelectorAll(".o-sidePanel")).toHaveLength(1);
-    simulateClick(".o-sidePanelClose");
-    await nextTick();
-    expect(document.querySelectorAll(".o-sidePanel")).toHaveLength(0);
-  });
-
-  test("Can toggle a side panel", async () => {
-    sidePanelRegistry.add("CUSTOM_PANEL", {
-      title: "Custom Panel",
-      Body: Body,
-    });
-    parent.spreadsheetEnv.toggleSidePanel("CUSTOM_PANEL");
-    await nextTick();
-    expect(document.querySelectorAll(".o-sidePanel")).toHaveLength(1);
-    parent.spreadsheetEnv.toggleSidePanel("CUSTOM_PANEL");
-    await nextTick();
-    expect(document.querySelectorAll(".o-sidePanel")).toHaveLength(0);
-  });
-
-  test("Can toggle a side panel when another is already opened", async () => {
-    sidePanelRegistry.add("CUSTOM_PANEL_1", {
-      title: "Custom Panel 1",
-      Body: Body,
-    });
-    sidePanelRegistry.add("CUSTOM_PANEL_2", {
-      title: "Custom Panel 2",
-      Body: Body,
-    });
-    parent.spreadsheetEnv.toggleSidePanel("CUSTOM_PANEL_1");
-    await nextTick();
-    expect(document.querySelector(".o-sidePanelTitle")!.textContent).toBe("Custom Panel 1");
-    parent.spreadsheetEnv.toggleSidePanel("CUSTOM_PANEL_2");
-    await nextTick();
-    expect(document.querySelector(".o-sidePanelTitle")!.textContent).toBe("Custom Panel 2");
-  });
-
-  test("Can open a custom side panel with custom title and panelProps", async () => {
-    sidePanelRegistry.add("CUSTOM_PANEL", {
-      title: () => "Computed Title",
-      Body: Body,
-    });
-    parent.spreadsheetEnv.openSidePanel("CUSTOM_PANEL", { text: "context" });
-    await nextTick();
-    expect(document.querySelectorAll(".o-sidePanel")).toHaveLength(1);
-    expect(document.querySelector(".o-sidePanelTitle")!.textContent).toBe("Computed Title");
-    expect(document.querySelector(".main_body")!.textContent).toBe("test");
-    expect(document.querySelector(".props_body")).toBeDefined();
-    expect(document.querySelector(".props_body")!.textContent).toBe("context");
-  });
-
-  test("Can open a side panel when another one is open", async () => {
-    sidePanelRegistry.add("PANEL_1", {
-      title: "PANEL_1",
-      Body: Body,
-    });
-    sidePanelRegistry.add("PANEL_2", {
-      title: "PANEL_2",
-      Body: Body2,
-    });
-    parent.spreadsheetEnv.openSidePanel("PANEL_1", { text: "test" });
-    await nextTick();
-    parent.spreadsheetEnv.openSidePanel("PANEL_2", { field: "field" });
-    await nextTick();
-    expect(document.querySelectorAll(".o-sidePanel")).toHaveLength(1);
-    expect(document.querySelector(".o-sidePanelTitle")!.textContent).toBe("PANEL_2");
-    expect(document.querySelector(".main_body_2")).toBeDefined();
-    expect(document.querySelector(".main_body_2")!.textContent).toBe("Hello");
-    expect(document.querySelector(".props_body_2")).toBeDefined();
-    expect(document.querySelector(".props_body_2")!.textContent).toBe("field");
-  });
-});

package/tests/components/spreadsheet_test.ts

@@ -1,194 +0,0 @@
-import { Component, hooks, tags } from "@odoo/owl";
-import { Model } from "../../src";
-import { Spreadsheet } from "../../src/components";
-import { args, functionRegistry } from "../../src/functions";
-import { DEBUG } from "../../src/helpers";
-import { SelectionMode } from "../../src/plugins/selection";
-import { simulateClick, triggerMouseEvent } from "../dom_helper";
-import { makeTestFixture, MockClipboard, nextTick } from "../helpers";
-
-const { xml } = tags;
-const { useRef } = hooks;
-
-let fixture: HTMLElement;
-let parent: Parent;
-const clipboard = new MockClipboard();
-
-Object.defineProperty(navigator, "clipboard", {
-  get() {
-    return clipboard;
-  },
-  configurable: true,
-});
-
-class Parent extends Component<any> {
-  static template = xml`<Spreadsheet t-ref="spreadsheet" data="data"/>`;
-  static components = { Spreadsheet };
-  private spreadsheet: any = useRef("spreadsheet");
-  readonly data: any;
-  get model(): Model {
-    return this.spreadsheet.comp.model;
-  }
-
-  constructor(data?) {
-    super();
-    this.data = data;
-  }
-}
-
-beforeEach(async () => {
-  fixture = makeTestFixture();
-  parent = new Parent({
-    sheets: [
-      {
-        id: 1,
-      },
-    ],
-  });
-  await parent.mount(fixture);
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-describe("Spreadsheet", () => {
-  test("simple rendering snapshot", async () => {
-    await nextTick();
-    expect(fixture.querySelector(".o-spreadsheet")).toMatchSnapshot();
-  });
-
-  test("focus is properly set, initially and after switching sheet", async () => {
-    expect(document.activeElement!.tagName).toEqual("CANVAS");
-    document.querySelector(".o-add-sheet")!.dispatchEvent(new Event("click"));
-    // simulate the fact that a user clicking on the add sheet button will
-    // move the focus to the document.body
-    (document.activeElement as any).blur();
-    await nextTick();
-    expect(document.querySelectorAll(".o-sheet").length).toBe(2);
-    expect(document.activeElement!.tagName).toEqual("CANVAS");
-  });
-
-  test("Can use the env in a function", () => {
-    let env;
-    functionRegistry.add("GETACTIVESHEET", {
-      description: "Get the name of the current sheet",
-      compute: function () {
-        env = this.env;
-        return "Sheet";
-      },
-      args: args(``),
-      returns: ["STRING"],
-    });
-    parent.model.dispatch("SET_VALUE", { xc: "A1", text: "=GETACTIVESHEET()" });
-    expect(env).toBeTruthy();
-  });
-
-  test("Can use the env in a function at model start", async () => {
-    let env;
-    functionRegistry.add("GETACTIVESHEET", {
-      description: "Get the name of the current sheet",
-      compute: function () {
-        env = this.env;
-        return "Sheet";
-      },
-      args: args(``),
-      returns: ["STRING"],
-    });
-    const parent = new Parent({
-      version: 2,
-      sheets: [
-        {
-          name: "Sheet1",
-          colNumber: 26,
-          rowNumber: 100,
-          cells: {
-            A1: { content: "=GETACTIVESHEET()" },
-          },
-          conditionalFormats: [],
-        },
-      ],
-      activeSheet: "Sheet1",
-    });
-    await parent.mount(fixture);
-    expect(env).toBeTruthy();
-  });
-
-  test("Clipboard is in spreadsheet env", () => {
-    expect((parent as any).spreadsheet.comp.env.clipboard).toBe(clipboard);
-  });
-
-  test("selection mode is changed with a simple select", async () => {
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.idle);
-    triggerMouseEvent("canvas", "mousedown", 300, 200);
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.selecting);
-    triggerMouseEvent(window, "mouseup", 300, 200);
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.idle);
-  });
-
-  test("selection mode is changed when selecting with CTRL pressed", async () => {
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.idle);
-    document.activeElement!.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "Control", ctrlKey: true, bubbles: true })
-    );
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.readyToExpand);
-    triggerMouseEvent("canvas", "mousedown", 300, 200, { ctrlKey: true });
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.expanding);
-    triggerMouseEvent(window, "mouseup", 300, 200, { ctrlKey: true });
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.readyToExpand);
-    document.activeElement!.dispatchEvent(
-      new KeyboardEvent("keyup", { key: "Control", bubbles: true })
-    );
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.idle);
-  });
-
-  test("selection mode is changed when releasing CTRL while selecting", async () => {
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.idle);
-    document.activeElement!.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "Control", ctrlKey: true, bubbles: true })
-    );
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.readyToExpand);
-    triggerMouseEvent("canvas", "mousedown", 300, 200, { ctrlKey: true });
-    document.activeElement!.dispatchEvent(
-      new KeyboardEvent("keyup", { key: "Control", bubbles: true })
-    );
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.expanding);
-    triggerMouseEvent(window, "mouseup", 300, 200);
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.idle);
-  });
-
-  test("selection mode is changed when pressing CTRL while selecting", async () => {
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.idle);
-    triggerMouseEvent("canvas", "mousedown", 300, 200);
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.selecting);
-    document.activeElement!.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "Control", ctrlKey: true, bubbles: true })
-    );
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.expanding);
-    triggerMouseEvent(window, "mouseup", 300, 200, { ctrlKey: true });
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.readyToExpand);
-  });
-
-  test("repeating CTRL keydown events does not trigger command", async () => {
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.idle);
-    document.activeElement!.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "Control", ctrlKey: true, bubbles: true, repeat: true })
-    );
-    expect(parent.model.getters.getSelectionMode()).toBe(SelectionMode.idle);
-  });
-
-  test("Debug informations are removed when Spreadsheet is destroyed", async () => {
-    parent["spreadsheet"].comp.destroy();
-    expect(Object.keys(DEBUG)).toHaveLength(0);
-  });
-
-  test("typing opens composer after toolbar clicked", async () => {
-    await simulateClick(`div[title="Bold"]`);
-    expect(document.activeElement).not.toBeNull();
-    document.activeElement?.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "d", bubbles: true })
-    );
-    expect(parent.model.getters.getEditionMode()).toBe("editing");
-    expect(parent.model.getters.getCurrentContent()).toBe("d");
-  });
-});