Skip to content

Commit

Permalink
#2005 Use React Testing Library for context-menu test (#2007)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikieyx
mikieyx authored Jun 7, 2024
1 parent 6bdfbda commit bc9a891
Showing 1 changed file with 46 additions and 21 deletions.
67 changes: 46 additions & 21 deletions canvas_modules/common-canvas/__tests__/context-menu/common-context-menu-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@
*/

import React from "react";
import CommonContextMenu from "../../src/context-menu/common-context-menu.jsx";
import { mount } from "../_utils_/mount-utils.js";
import { createIntlCommonCanvas } from "../_utils_/common-canvas-utils.js";
import CommonContextMenu from "./../../src/context-menu/common-context-menu";
import { createIntlCommonCanvasRTL } from "../_utils_/common-canvas-utils.js";
import { expect } from "chai";
import { expect as expectJest } from "@jest/globals";
import sinon from "sinon";
import { fireEvent } from "@testing-library/react";
import CanvasController from "../../src/common-canvas/canvas-controller";
import getContextMenuDefiniton from "../../src/common-canvas/canvas-controller-menu-utils";
import supernodeFlow from "../../../harness/test_resources/diagrams/supernodeCanvas.json";
Expand All @@ -36,39 +37,58 @@ import manyNodesCommentsObj from "../test_resources/json/context-menu-test_manyN
import expSupernodeCommentObj from "../test_resources/json/context-menu-test_expSupernodePlusCommentObject.json";
import collSupernodeCommentObj from "../test_resources/json/context-menu-test_collSupernodePlusCommentObject.json";
import nonContiguousSelection from "../test_resources/json/context-menu-test_noncontiguous-selection.json";
import { renderWithIntl } from "../_utils_/intl-utils.js";


const mockContextMenu = jest.fn();
jest.mock("../../src/context-menu/common-context-menu",
() => (props) => mockContextMenu(props)
);

mockContextMenu.mockImplementation((props) => {
const ContextMenuComp = jest.requireActual(
"./../../src/context-menu/common-context-menu",
).default;
return <ContextMenuComp {...props} />;
});

describe("CommonContextMenu renders correctly", () => {

it("all required props should have been defined", () => {

const _contextHandler = sinon.spy();
const _menuDefinition = getMenuDefinition();
const _canvasRect = { width: 1000, height: 800, top: 0, bottom: 800, left: 0, right: 1000 };
const _mousePos = { x: 20, y: 20 };
const wrapper = mount(<CommonContextMenu contextHandler={_contextHandler} menuDefinition={_menuDefinition} canvasRect={_canvasRect} mousePos={_mousePos} />);
expect(wrapper.prop("contextHandler")).to.equal(_contextHandler);
expect(wrapper.prop("menuDefinition")).to.equal(_menuDefinition);
expect(wrapper.prop("canvasRect")).to.equal(_canvasRect);
expect(wrapper.prop("mousePos")).to.equal(_mousePos);
renderWithIntl(<CommonContextMenu contextHandler={_contextHandler} menuDefinition={_menuDefinition} canvasRect={_canvasRect} mousePos={_mousePos} />);
expectJest(mockContextMenu).toHaveBeenCalledWith({
"contextHandler": _contextHandler,
"menuDefinition": _menuDefinition,
"canvasRect": _canvasRect,
"mousePos": _mousePos
});
});

it("should render two context menu items and one divider components", () => {
const _contextHandler = sinon.spy();
const _menuDefinition = getMenuDefinition();
const _canvasRect = { width: 1000, height: 800, top: 0, bottom: 800, left: 0, right: 1000 };
const _mousePos = { x: 20, y: 20 };
const wrapper = mount(<CommonContextMenu contextHandler={_contextHandler} menuDefinition={_menuDefinition} canvasRect={_canvasRect} mousePos={_mousePos} />);
expect(wrapper.find(".context-menu-item")).to.have.length(2);
expect(wrapper.find(".context-menu-divider")).to.have.length(1);
const { container } = renderWithIntl(<CommonContextMenu contextHandler={_contextHandler} menuDefinition={_menuDefinition} canvasRect={_canvasRect} mousePos={_mousePos} />);

expect(container.getElementsByClassName("context-menu-item")).to.have.length(2);
expect(container.getElementsByClassName("context-menu-divider")).to.have.length(1);
});

it("simulates click events", () => {
const _contextHandler = sinon.spy();
const _menuDefinition = getMenuDefinition();
const _canvasRect = { width: 1000, height: 800, top: 0, bottom: 800, left: 0, right: 1000 };
const _mousePos = { x: 20, y: 20 };
const wrapper = mount(<CommonContextMenu contextHandler={_contextHandler} menuDefinition={_menuDefinition} canvasRect={_canvasRect} mousePos={_mousePos} />);
wrapper.find(".context-menu-item").at(0)
.simulate("click");
const wrapper = renderWithIntl(<CommonContextMenu contextHandler={_contextHandler} menuDefinition={_menuDefinition} canvasRect={_canvasRect} mousePos={_mousePos} />);
// To simulate click events, we want to click on the menu item, and one of the menu items has the text "Do something"
// so we use getByText to click the on that specific menu item
fireEvent.click(wrapper.getByText("Do something"));
expect(_contextHandler.calledOnce).to.equal(true);
});

Expand All @@ -77,13 +97,17 @@ describe("CommonContextMenu renders correctly", () => {
const _menuDefinition = getNestedMenuDefinition();
const _canvasRect = { width: 1000, height: 1000, left: 0, top: 0, right: 1000, bottom: 1000 };
const _mousePos = { x: 950, y: 100 };
const wrapper = mount(<CommonContextMenu contextHandler={_contextHandler} menuDefinition={_menuDefinition} canvasRect={_canvasRect} mousePos={_mousePos} />);
expect(wrapper.prop("contextHandler")).to.equal(_contextHandler);
expect(wrapper.prop("menuDefinition")).to.equal(_menuDefinition);
const wrapper = renderWithIntl(<CommonContextMenu contextHandler={_contextHandler} menuDefinition={_menuDefinition} canvasRect={_canvasRect} mousePos={_mousePos} />);
const { container } = wrapper;
expectJest(mockContextMenu).toHaveBeenCalledWith({
"contextHandler": _contextHandler,
"menuDefinition": _menuDefinition,
"canvasRect": _canvasRect,
"mousePos": _mousePos
});
const subMenuItem = container.getElementsByClassName("context-menu-submenu")[0];
const style = subMenuItem.style;

const subMenuItems = wrapper.find(".context-menu-submenu");
const subMenuItem = subMenuItems.at(0);
const style = subMenuItem.prop("style");
// If left property is negative, the submenu is on the left of the main menu.
expect(style.left).to.equal("-160px");
});
Expand Down Expand Up @@ -368,7 +392,7 @@ function createCommonCanvas(config, canvasController, canvasParams, contextMenuC
enable: true
};
const canvasParameters = canvasParams || {};
const wrapper = createIntlCommonCanvas(
const wrapper = createIntlCommonCanvasRTL(
config,
contextMenuHandler,
beforeEditActionHandler,
Expand Down Expand Up @@ -397,3 +421,4 @@ function isCreateSupernodeThere(defaultMenu) {
});
return isCreateSupernode;
}

0 comments on commit bc9a891

Please sign in to comment.