@odoo/o-spreadsheet 14.0.1 → 15.0.0

package/tests/components/context_menu_test.ts

@@ -1,825 +0,0 @@
-import { Component, hooks, tags } from "@odoo/owl";
-import { Menu } from "../../src/components/menu";
-import { toXC } from "../../src/helpers";
-import { Model } from "../../src/model";
-import { createFullMenuItem, FullMenuItem } from "../../src/registries";
-import { cellMenuRegistry } from "../../src/registries/menus/cell_menu_registry";
-import { ConditionalFormat, SpreadsheetEnv } from "../../src/types";
-import { simulateClick, triggerMouseEvent } from "../dom_helper";
-import { getCell, GridParent, makeTestFixture, nextTick, Touch } from "../helpers";
-
-const { xml } = tags;
-const { useSubEnv } = hooks;
-
-let fixture: HTMLElement;
-
-beforeEach(() => {
-  fixture = makeTestFixture();
-});
-
-afterEach(() => {
-  fixture.remove();
-});
-
-jest.spyOn(HTMLDivElement.prototype, "clientWidth", "get").mockImplementation(() => 1000);
-jest.spyOn(HTMLDivElement.prototype, "clientHeight", "get").mockImplementation(() => 1000);
-
-function getActiveXc(model: Model): string {
-  return toXC(...model.getters.getPosition());
-}
-
-function getPosition(selector: string): { top: number; left: number } {
-  const menu = fixture.querySelector(selector);
-  const { top, left } = window.getComputedStyle(menu!);
-  return {
-    top: parseInt(top.replace("px", "")),
-    left: parseInt(left.replace("px", "")),
-  };
-}
-
-function getMenuPosition() {
-  return getPosition(".o-menu");
-}
-
-function getSubMenuPosition() {
-  return getPosition(".o-menu + div .o-menu");
-}
-
-function getItemSize() {
-  return 32;
-}
-
-function getSize(menuItemsCount: number): { width: number; height: number } {
-  return {
-    width: 200,
-    height: getItemSize() * menuItemsCount,
-  };
-}
-
-function getMenuSize() {
-  const menu = fixture.querySelector(".o-menu");
-  const menuItems = menu!.querySelectorAll(".o-menu-item");
-  return getSize(menuItems.length);
-}
-
-function getSubMenuSize() {
-  const menu = fixture.querySelector(".o-menu + div .o-menu");
-  const menuItems = menu!.querySelectorAll(".o-menu-item");
-  return getSize(menuItems.length);
-}
-
-interface ContextMenuTestConfig {
-  onClose?: () => void;
-  menuItems?: FullMenuItem[];
-}
-
-async function renderContextMenu(
-  x: number,
-  y: number,
-  testConfig: ContextMenuTestConfig = {},
-  width = 1000,
-  height = 1000
-): Promise<[number, number]> {
-  const parent = new ContextMenuParent(x, y, width, height, new Model(), testConfig);
-  await parent.mount(fixture);
-  await nextTick();
-  return [x, y];
-}
-
-const subMenu: FullMenuItem[] = [
-  createFullMenuItem("root", {
-    name: "root",
-    sequence: 1,
-    children: () => [
-      createFullMenuItem("subMenu1", {
-        name: "subMenu1",
-        sequence: 1,
-        action() {},
-      }),
-      createFullMenuItem("subMenu2", {
-        name: "subMenu2",
-        sequence: 1,
-        action() {},
-      }),
-    ],
-  }),
-];
-
-class ContextMenuParent extends Component<any, SpreadsheetEnv> {
-  static template = xml/* xml */ `
-      <Menu
-        t-on-close="onClose"
-        position="position"
-        menuItems="menus"
-      />
-  `;
-  static components = { Menu };
-  menus: FullMenuItem[];
-  position: { x: number; y: number; width: number; height: number };
-  onClose: () => void;
-
-  constructor(
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    model: Model,
-    { onClose, menuItems }: ContextMenuTestConfig = {}
-  ) {
-    super();
-    useSubEnv({
-      getters: model.getters,
-    });
-    this.onClose = onClose || (() => {});
-    this.position = { x, y, width, height };
-    this.menus = menuItems || [
-      createFullMenuItem("Action", {
-        name: "Action",
-        sequence: 1,
-        action() {},
-      }),
-    ];
-  }
-}
-
-function simulateContextMenu(x, y) {
-  triggerMouseEvent("canvas", "mousedown", x, y, { button: 1, bubbles: true });
-  triggerMouseEvent("canvas", "mouseup", x, y, { button: 1, bubbles: true });
-  triggerMouseEvent("canvas", "contextmenu", x, y, { button: 1, bubbles: true });
-}
-
-describe("Context Menu", () => {
-  test("context menu simple rendering", async () => {
-    const model = new Model();
-    const parent = new GridParent(model);
-    await parent.mount(fixture);
-    simulateContextMenu(300, 200);
-    await nextTick();
-    expect(fixture.querySelector(".o-menu")).toMatchSnapshot();
-  });
-
-  test("right click on a cell opens a context menu", async () => {
-    const model = new Model();
-
-    const parent = new GridParent(model);
-    await parent.mount(fixture);
-
-    expect(getActiveXc(model)).toBe("A1");
-    expect(fixture.querySelector(".o-menu")).toBeFalsy();
-    simulateContextMenu(300, 200);
-    expect(getActiveXc(model)).toBe("C8");
-    await nextTick();
-    expect(fixture.querySelector(".o-menu")).toBeTruthy();
-  });
-
-  test("right click on a cell, then left click elsewhere closes a context menu", async () => {
-    const model = new Model();
-
-    const parent = new GridParent(model);
-    await parent.mount(fixture);
-
-    simulateContextMenu(300, 200);
-    expect(getActiveXc(model)).toBe("C8");
-    await nextTick();
-    expect(fixture.querySelector(".o-menu")).toBeTruthy();
-
-    await simulateClick("canvas", 50, 50);
-    expect(fixture.querySelector(".o-menu")).toBeFalsy();
-  });
-
-  test("can copy/paste with context menu", async () => {
-    const model = new Model();
-    model.dispatch("SET_VALUE", { xc: "B1", text: "b1" });
-
-    const parent = new GridParent(model);
-    await parent.mount(fixture);
-
-    // right click on B1
-    simulateContextMenu(230, 30);
-    expect(getActiveXc(model)).toBe("B1");
-    await nextTick();
-
-    // click on 'copy' menu item
-    await simulateClick(".o-menu div[data-name='copy']");
-
-    // right click on B2
-    simulateContextMenu(230, 50);
-    await nextTick();
-    expect(getActiveXc(model)).toBe("B2");
-
-    // click on 'paste' menu item
-    await simulateClick(".o-menu div[data-name='paste']");
-    expect(getCell(model, "B1")!.content).toBe("b1");
-    expect(getCell(model, "B2")!.content).toBe("b1");
-  });
-
-  test("can cut/paste with context menu", async () => {
-    const model = new Model();
-    model.dispatch("SET_VALUE", { xc: "B1", text: "b1" });
-
-    const parent = new GridParent(model);
-    await parent.mount(fixture);
-
-    // right click on B1
-    simulateContextMenu(230, 30);
-    expect(getActiveXc(model)).toBe("B1");
-    await nextTick();
-
-    // click on 'cut' menu item
-    await simulateClick(".o-menu div[data-name='cut']");
-
-    // right click on B2
-    simulateContextMenu(230, 50);
-    await nextTick();
-    expect(getActiveXc(model)).toBe("B2");
-
-    // click on 'paste' menu item
-    await simulateClick(".o-menu div[data-name='paste']");
-
-    expect(getCell(model, "B1")).toBeNull();
-    expect(getCell(model, "B2")!.content).toBe("b1");
-  });
-
-  test("menu does not close when right click elsewhere", async () => {
-    const model = new Model();
-
-    const parent = new GridParent(model);
-    await parent.mount(fixture);
-    simulateContextMenu(100, 100);
-    await nextTick();
-    expect(fixture.querySelector(".o-menu")).toBeTruthy();
-    simulateContextMenu(300, 300);
-    await nextTick();
-    expect(fixture.querySelector(".o-menu")).toBeTruthy();
-  });
-
-  test("close contextmenu when clicking on menubar", async () => {
-    const model = new Model();
-    const parent = new GridParent(model);
-    await parent.mount(fixture);
-    simulateContextMenu(100, 100);
-    await nextTick();
-    expect(fixture.querySelector(".o-menu .o-menu-item[data-name='cut']")).toBeTruthy();
-    triggerMouseEvent(".o-topbar-topleft", "click");
-    await nextTick();
-    expect(fixture.querySelector(".o-menu")).toBeFalsy();
-  });
-
-  test("close contextmenu when clicking on menubar item", async () => {
-    const model = new Model();
-    const parent = new GridParent(model);
-    await parent.mount(fixture);
-    simulateContextMenu(100, 100);
-    await nextTick();
-    expect(fixture.querySelector(".o-menu .o-menu-item[data-name='cut']")).toBeTruthy();
-    triggerMouseEvent(".o-topbar-menu[data-id='insert']", "click");
-    await nextTick();
-    expect(fixture.querySelector(".o-menu .o-menu-item[data-name='cut']")).toBeFalsy();
-  });
-  test("close contextmenu when clicking on tools bar", async () => {
-    const model = new Model();
-    const parent = new GridParent(model);
-    await parent.mount(fixture);
-    simulateContextMenu(100, 100);
-    await nextTick();
-    expect(fixture.querySelector(".o-menu .o-menu-item[data-name='cut']")).toBeTruthy();
-    const fontSizeTool = fixture.querySelector('.o-tool[title="Font Size"]')!;
-    triggerMouseEvent(fontSizeTool, "click");
-    await nextTick();
-    expect(fixture.querySelector(".o-menu .o-menu-item[data-name='cut']")).toBeFalsy();
-  });
-
-  test("menu can be hidden/displayed based on the env", async () => {
-    const menuDefinitions = Object.assign({}, cellMenuRegistry.content);
-    cellMenuRegistry
-      .add("visible_action", {
-        name: "visible_action",
-        sequence: 1,
-        isVisible: (env) => env.getters.getCell(1, 0)!.value === "b1",
-        action() {},
-      })
-      .add("hidden_action", {
-        name: "hidden_action",
-        sequence: 2,
-        isVisible: (env) => env.getters.getCell(1, 0)!.value !== "b1",
-        action() {},
-      });
-    const model = new Model();
-    model.dispatch("SET_VALUE", { xc: "B1", text: "b1" });
-    const parent = new GridParent(model);
-    await parent.mount(fixture);
-    simulateContextMenu(230, 30);
-    await nextTick();
-    expect(fixture.querySelector(".o-menu div[data-name='visible_action']")).toBeTruthy();
-    expect(fixture.querySelector(".o-menu div[data-name='hidden_action']")).toBeFalsy();
-    cellMenuRegistry.content = menuDefinitions;
-  });
-
-  test("submenu opens and close when (un)overed", async () => {
-    const menuItems: FullMenuItem[] = [
-      createFullMenuItem("action", {
-        name: "action",
-        sequence: 1,
-        action() {},
-      }),
-      createFullMenuItem("root", {
-        name: "root",
-        sequence: 2,
-        children: () => [
-          createFullMenuItem("subMenu", {
-            name: "subMenu",
-            sequence: 1,
-            action() {},
-          }),
-        ],
-      }),
-    ];
-    await renderContextMenu(300, 300, { menuItems });
-    triggerMouseEvent(".o-menu div[data-name='root']", "mouseover");
-    await nextTick();
-    expect(fixture.querySelector(".o-menu div[data-name='subMenu']")).toBeTruthy();
-    triggerMouseEvent(".o-menu div[data-name='action']", "mouseover");
-    await nextTick();
-    expect(fixture.querySelector(".o-menu div[data-name='subMenu']")).toBeFalsy();
-  });
-
-  test("submenu does not open when disabled", async () => {
-    const menuItems: FullMenuItem[] = [
-      createFullMenuItem("root", {
-        name: "root",
-        sequence: 1,
-        isEnabled: () => false,
-        children: () => [
-          createFullMenuItem("subMenu", {
-            name: "subMenu",
-            sequence: 1,
-            action() {},
-          }),
-        ],
-      }),
-    ];
-    await renderContextMenu(300, 300, { menuItems });
-    expect(fixture.querySelector(".o-menu div[data-name='root']")!.classList).toContain("disabled");
-    await simulateClick(".o-menu div[data-name='root']");
-    expect(fixture.querySelector(".o-menu div[data-name='subMenu']")).toBeFalsy();
-  });
-
-  test("submenu does not close when sub item overed", async () => {
-    await renderContextMenu(300, 300, { menuItems: subMenu });
-    triggerMouseEvent(".o-menu div[data-name='root']", "mouseover");
-    await nextTick();
-    expect(fixture.querySelector(".o-menu div[data-name='subMenu1']")).toBeTruthy();
-    triggerMouseEvent(".o-menu div[data-name='subMenu1']", "mouseover");
-    await nextTick();
-    expect(fixture.querySelector(".o-menu div[data-name='subMenu1']")).toBeTruthy();
-  });
-
-  test("menu does not close when root menu is clicked", async () => {
-    await renderContextMenu(300, 300, { menuItems: subMenu });
-    await simulateClick(".o-menu div[data-name='root']");
-    expect(fixture.querySelector(".o-menu div[data-name='subMenu1']")).toBeTruthy();
-    expect(fixture.querySelector(".o-menu div[data-name='root']")).toBeTruthy();
-  });
-
-  test("menu closed when sub menu item is clicked", async () => {
-    const mockCallback = jest.fn(() => {});
-    await renderContextMenu(300, 300, {
-      onClose: mockCallback,
-      menuItems: subMenu,
-    });
-    await simulateClick(".o-menu div[data-name='root']");
-    await simulateClick(".o-menu div[data-name='subMenu1']");
-    expect(fixture.querySelector(".o-menu div[data-name='subMenu1']")).toBeFalsy();
-    expect(mockCallback).toHaveBeenCalled();
-  });
-
-  test("it renders subsubmenus", async () => {
-    const menuItems: FullMenuItem[] = [
-      createFullMenuItem("root1", {
-        name: "root1",
-        sequence: 1,
-        children: () => [
-          createFullMenuItem("root2", {
-            name: "root2",
-            sequence: 1,
-            children: () => [
-              createFullMenuItem("subMenu", {
-                name: "subMenu",
-                sequence: 1,
-                action() {},
-              }),
-            ],
-          }),
-        ],
-      }),
-    ];
-    await renderContextMenu(300, 990, { menuItems });
-    await simulateClick("div[data-name='root1']");
-    await simulateClick("div[data-name='root2']");
-    expect(fixture.querySelector(".o-menu div[data-name='subMenu']")).toBeTruthy();
-  });
-
-  test("Submenus are correctly hidden", async () => {
-    const menuItems: FullMenuItem[] = [
-      createFullMenuItem("root_1", {
-        name: "root_1",
-        sequence: 1,
-        children: () => [
-          createFullMenuItem("root_1_1", {
-            name: "root_1_1",
-            sequence: 1,
-            children: () => [
-              createFullMenuItem("subMenu_1", {
-                name: "subMenu_1",
-                sequence: 1,
-                action() {},
-              }),
-            ],
-          }),
-        ],
-      }),
-      createFullMenuItem("root_2", {
-        name: "root_2",
-        sequence: 2,
-        children: () => [
-          createFullMenuItem("root_2_1", {
-            name: "root_2_1",
-            sequence: 1,
-            children: () => [
-              createFullMenuItem("subMenu_2", {
-                name: "subMenu_2",
-                sequence: 1,
-                action() {},
-              }),
-            ],
-          }),
-        ],
-      }),
-    ];
-    await renderContextMenu(300, 300, { menuItems });
-
-    triggerMouseEvent(".o-menu div[data-name='root_1']", "mouseover");
-    await nextTick();
-    triggerMouseEvent(".o-menu div[data-name='root_1_1']", "mouseover");
-    await nextTick();
-    expect(fixture.querySelector(".o-menu div[data-name='subMenu_1']")).toBeTruthy();
-    triggerMouseEvent(".o-menu div[data-name='root_2']", "mouseover");
-    await nextTick();
-    expect(fixture.querySelector(".o-menu div[data-name='subMenu_1']")).toBeFalsy();
-  });
-
-  test("scroll through the menu with the wheel / scrollbar prevents the grid from scrolling", async () => {
-    const model = new Model();
-    const parent = new GridParent(model);
-    await parent.mount(fixture);
-
-    // grid initially at (0, 0) scroll position
-    expect(parent.grid.comp.vScrollbar.scroll).toBe(0);
-    expect(parent.grid.comp.hScrollbar.scroll).toBe(0);
-
-    simulateContextMenu(300, 200);
-    await nextTick();
-
-    const menu = fixture.querySelector(".o-menu")!;
-    // scroll
-    menu.dispatchEvent(
-      new WheelEvent("wheel", { deltaY: 300, deltaX: 300, deltaMode: 0, bubbles: true })
-    );
-    menu.dispatchEvent(new Event("scroll", { bubbles: true }));
-    await nextTick();
-
-    // grid always at (0, 0) scroll position
-    expect(parent.grid.comp.vScrollbar.scroll).toBe(0);
-    expect(parent.grid.comp.hScrollbar.scroll).toBe(0);
-  });
-
-  test("scroll through the menu with the touch device prevents the grid from scrolling", async () => {
-    const model = new Model();
-    const parent = new GridParent(model);
-    await parent.mount(fixture);
-
-    // grid initially at (0, 0) scroll position
-    expect(parent.grid.comp.vScrollbar.scroll).toBe(0);
-    expect(parent.grid.comp.hScrollbar.scroll).toBe(0);
-
-    simulateContextMenu(300, 200);
-    await nextTick();
-
-    const menu = fixture.querySelector(".o-menu")!;
-
-    // start move at (310, 210) touch position
-    menu.dispatchEvent(
-      new TouchEvent("touchstart", {
-        bubbles: true,
-        cancelable: true,
-        touches: [
-          new Touch({
-            clientX: 310,
-            clientY: 210,
-            identifier: 1,
-            target: menu,
-          }),
-        ],
-      })
-    );
-    // move down;
-    menu.dispatchEvent(
-      new TouchEvent("touchmove", {
-        bubbles: true,
-        cancelable: true,
-        touches: [
-          new Touch({
-            clientX: 310,
-            clientY: 180,
-            identifier: 2,
-            target: menu,
-          }),
-        ],
-      })
-    );
-
-    await nextTick();
-    // grid always at (0, 0) scroll position
-    expect(parent.grid.comp.vScrollbar.scroll).toBe(0);
-    expect(parent.grid.comp.hScrollbar.scroll).toBe(0);
-  });
-});
-
-describe("Context Menu position on large screen 1000px/1000px", () => {
-  test("it renders menu on the bottom right if enough space", async () => {
-    const [clickX, clickY] = await renderContextMenu(300, 300);
-    const { left, top } = getMenuPosition();
-    expect(left).toBe(clickX);
-    expect(top).toBe(clickY);
-  });
-
-  test("it renders menu on the top right if not enough space", async () => {
-    const [clickX, clickY] = await renderContextMenu(300, 990);
-    const { left, top } = getMenuPosition();
-    const { height } = getMenuSize();
-    expect(left).toBe(clickX);
-    expect(top).toBe(clickY - height);
-  });
-
-  test("it renders menu on the bottom left if not enough space", async () => {
-    const [clickX, clickY] = await renderContextMenu(990, 300);
-    const { left, top } = getMenuPosition();
-    const { width } = getMenuSize();
-    expect(left).toBe(clickX - width);
-    expect(top).toBe(clickY);
-  });
-
-  test("it renders menu on the top left if not enough space", async () => {
-    const [clickX, clickY] = await renderContextMenu(990, 990);
-    const { left, top } = getMenuPosition();
-    const { width, height } = getMenuSize();
-    expect(left).toBe(clickX - width);
-    expect(top).toBe(clickY - height);
-  });
-
-  test("it renders submenu on the bottom right if enough space", async () => {
-    const [clickX, clickY] = await renderContextMenu(300, 300, { menuItems: subMenu });
-    await simulateClick("div[data-name='root']");
-    const { left, top } = getSubMenuPosition();
-    const { width } = getMenuSize();
-    expect(left).toBe(clickX + width);
-    expect(top).toBe(clickY);
-  });
-
-  test("it renders submenu on the bottom left if not enough space", async () => {
-    const [clickX, clickY] = await renderContextMenu(780, 300, { menuItems: subMenu });
-    await simulateClick("div[data-name='root']");
-    const { left, top } = getSubMenuPosition();
-    const { width } = getMenuSize();
-    const { left: rootLeft } = getMenuPosition();
-    expect(rootLeft).toBe(clickX);
-    expect(left).toBe(clickX - width);
-    expect(top).toBe(clickY);
-  });
-
-  test("it renders all menus on the bottom left if not enough space", async () => {
-    const [clickX, clickY] = await renderContextMenu(990, 300, { menuItems: subMenu });
-    await simulateClick("div[data-name='root']");
-    const { left, top } = getSubMenuPosition();
-    const { width } = getMenuSize();
-    const { left: rootLeft } = getMenuPosition();
-    expect(rootLeft).toBe(clickX - width);
-    expect(left).toBe(clickX - 2 * width);
-    expect(top).toBe(clickY);
-  });
-
-  test("it renders submenu on the top right if not enough space", async () => {
-    const [clickX, clickY] = await renderContextMenu(300, 960, { menuItems: subMenu });
-    await simulateClick("div[data-name='root']");
-    const { left, top } = getSubMenuPosition();
-    const { height } = getSubMenuSize();
-    const { width } = getMenuSize();
-    expect(top).toBe(clickY - height + getItemSize());
-    expect(left).toBe(clickX + width);
-  });
-
-  test("it renders all menus on the top right if not enough space", async () => {
-    const [clickX, clickY] = await renderContextMenu(300, 990, { menuItems: subMenu });
-    await simulateClick("div[data-name='root']");
-    const { left, top } = getSubMenuPosition();
-    const { top: rootTop } = getMenuPosition();
-    const { height } = getSubMenuSize();
-    const { height: rootHeight } = getMenuSize();
-    const { width } = getSubMenuSize();
-    expect(rootTop).toBe(clickY - rootHeight);
-    expect(top).toBe(clickY - height);
-    expect(left).toBe(clickX + width);
-  });
-});
-
-describe("Context Menu position on small screen 1000px/300px", () => {
-  // prettier-ignore
-  const longMenuItems: FullMenuItem[] = [ // menu height 6*32 => 192
-    createFullMenuItem("root_1", {name: "root_1", sequence: 1, action() {},}),
-    createFullMenuItem("root_2", {name: "root_2", sequence: 2, action() {},}),
-    createFullMenuItem("root_3", {name: "root_3", sequence: 3, action() {},}),
-    createFullMenuItem("root_4", {name: "root_4", sequence: 4,
-    children: () => [ // sub menu height 6*32 => 192
-      createFullMenuItem("subMenu_1", {name: "subMenu_1", sequence: 1, action() {},}),
-      createFullMenuItem("subMenu_2", {name: "subMenu_2", sequence: 2, action() {},}),
-      createFullMenuItem("subMenu_3", {name: "subMenu_3", sequence: 3, action() {},}),
-      createFullMenuItem("subMenu_4", {name: "subMenu_4", sequence: 4, action() {},}),
-      createFullMenuItem("subMenu_5", {name: "subMenu_5", sequence: 5, action() {},}),
-      createFullMenuItem("subMenu_6", {name: "subMenu_6", sequence: 6, action() {},}),
-    ],
-  }),
-    createFullMenuItem("root_5", {name: "root_5", sequence: 5, action() {},}),
-    createFullMenuItem("root_6", {name: "root_6", sequence: 6, action() {},}),
-  ];
-
-  test("it renders menu at the top of the screen on the right, if not enough space above and below", async () => {
-    const [clickX] = await renderContextMenu(300, 150, { menuItems: longMenuItems }, 1000, 300);
-    const { left, top } = getMenuPosition();
-    expect(left).toBe(clickX);
-    expect(top).toBe(32);
-  });
-
-  test("it renders menu at the top of the screen on the left, if not enough space above, below and on the right", async () => {
-    const [clickX] = await renderContextMenu(990, 150, { menuItems: longMenuItems }, 1000, 300);
-    const { left, top } = getMenuPosition();
-    const { width } = getMenuSize();
-    expect(left).toBe(clickX - width);
-    expect(top).toBe(32);
-  });
-
-  test("it renders submenu at the top of the screen on the right, if not enough space above and below", async () => {
-    const [clickX] = await renderContextMenu(300, 150, { menuItems: longMenuItems }, 1000, 300);
-    await simulateClick("div[data-name='root_4']");
-    const { left, top } = getSubMenuPosition();
-    const { width } = getMenuSize();
-    expect(left).toBe(clickX + width);
-    expect(top).toBe(32);
-  });
-
-  test("it renders submenu at the top of the screen on the left, if not enough space above, below and on the right", async () => {
-    const [clickX] = await renderContextMenu(780, 150, { menuItems: longMenuItems }, 1000, 300);
-    await simulateClick("div[data-name='root_4']");
-    const { left, top } = getSubMenuPosition();
-    const { width } = getMenuSize();
-    expect(left).toBe(clickX - width);
-    expect(top).toBe(32);
-  });
-});
-
-describe("Context Menu - CF", () => {
-  test("open sidepanel with no CF in selected zone", async () => {
-    const model = new Model();
-    const parent = new GridParent(model);
-    await parent.mount(fixture);
-    simulateContextMenu(240, 110);
-    await nextTick();
-    await simulateClick(".o-menu div[data-name='conditional_formatting']");
-    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] });
-    simulateContextMenu(240, 110); //click on C5
-    await nextTick();
-    await simulateClick(".o-menu div[data-name='conditional_formatting']");
-    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 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] });
-    simulateContextMenu(240, 110); //click on C5
-    await nextTick();
-    await simulateClick(".o-menu div[data-name='conditional_formatting']");
-    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("will update sidepanel if we reopen it from other cell", async () => {
-    const model = new Model();
-    const parent = new GridParent(model);
-    await parent.mount(fixture);
-
-    const cfRule1: ConditionalFormat = {
-      ranges: ["A1:A10"],
-      id: "1",
-      rule: {
-        values: ["2"],
-        operator: "Equal",
-        type: "CellIsRule",
-        style: { fillColor: "#FF1200" },
-      },
-    };
-    model.dispatch("ADD_CONDITIONAL_FORMAT", {
-      cf: cfRule1,
-      sheet: model.getters.getActiveSheet(),
-    });
-    let zone = { left: 0, top: 0, bottom: 10, right: 0 };
-    model.dispatch("SET_SELECTION", { zones: [zone], anchor: [0, 0] });
-    simulateContextMenu(80, 90);
-    await nextTick();
-    await simulateClick(".o-menu div[data-name='conditional_formatting']");
-    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();
-
-    zone = { left: 5, top: 5, bottom: 5, right: 5 };
-    model.dispatch("SET_SELECTION", { zones: [zone], anchor: [5, 5] });
-    simulateContextMenu(530, 125);
-    await nextTick();
-    await simulateClick(".o-menu div[data-name='conditional_formatting']");
-    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();
-  });
-});