2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import { mount, shallow } from "enzyme";
|
|
|
|
import ContextMenuButton from ".";
|
2019-09-07 09:26:45 +00:00
|
|
|
|
2019-10-31 12:26:58 +00:00
|
|
|
const baseData = () => [
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
key: "key",
|
|
|
|
label: "label",
|
|
|
|
onClick: () => jest.fn(),
|
|
|
|
},
|
2019-10-31 12:26:58 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
const baseProps = {
|
2020-10-16 13:16:01 +00:00
|
|
|
title: "Actions",
|
2021-02-20 08:46:32 +00:00
|
|
|
iconName: "static/images/vertical-dots.react.svg",
|
2019-10-31 12:26:58 +00:00
|
|
|
size: 16,
|
2020-10-16 13:16:01 +00:00
|
|
|
color: "#A3A9AE",
|
2019-10-31 12:26:58 +00:00
|
|
|
getData: baseData,
|
2020-10-16 13:16:01 +00:00
|
|
|
isDisabled: false,
|
|
|
|
};
|
2019-10-31 12:26:58 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
describe("<ContextMenuButton />", () => {
|
|
|
|
it("renders without error", () => {
|
2019-10-31 12:26:58 +00:00
|
|
|
const wrapper = mount(<ContextMenuButton {...baseProps} />);
|
|
|
|
|
|
|
|
expect(wrapper).toExist();
|
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("render with full custom props", () => {
|
2019-09-07 09:26:45 +00:00
|
|
|
const wrapper = mount(
|
|
|
|
<ContextMenuButton
|
2020-10-16 13:16:01 +00:00
|
|
|
color="red"
|
|
|
|
hoverColor="red"
|
|
|
|
clickColor="red"
|
2019-10-31 12:26:58 +00:00
|
|
|
size={20}
|
2020-10-16 13:16:01 +00:00
|
|
|
iconName="CatalogFolderIcon"
|
|
|
|
iconHoverName="CatalogFolderIcon"
|
|
|
|
iconClickName="CatalogFolderIcon"
|
2019-10-31 12:26:58 +00:00
|
|
|
isFill={true}
|
|
|
|
isDisabled={true}
|
|
|
|
onClick={() => jest.fn()}
|
|
|
|
onMouseEnter={() => jest.fn()}
|
|
|
|
onMouseLeave={() => jest.fn()}
|
|
|
|
onMouseOver={() => jest.fn()}
|
|
|
|
onMouseOut={() => jest.fn()}
|
|
|
|
getData={() => [
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
key: "key",
|
|
|
|
icon: "CatalogFolderIcon",
|
|
|
|
onClick: () => jest.fn(),
|
2019-10-31 12:26:58 +00:00
|
|
|
},
|
|
|
|
{
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "CatalogFolderIcon",
|
|
|
|
onClick: () => jest.fn(),
|
2019-10-31 12:26:58 +00:00
|
|
|
},
|
2020-10-16 13:16:01 +00:00
|
|
|
{},
|
2019-10-31 12:26:58 +00:00
|
|
|
]}
|
2020-10-16 13:16:01 +00:00
|
|
|
directionX="right"
|
2019-10-31 12:26:58 +00:00
|
|
|
opened={true}
|
2020-10-16 13:16:01 +00:00
|
|
|
/>
|
|
|
|
);
|
2019-09-07 09:26:45 +00:00
|
|
|
|
|
|
|
expect(wrapper).toExist();
|
|
|
|
});
|
2019-10-31 12:26:58 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("disabled", () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<ContextMenuButton {...baseProps} isDisabled={true} />
|
|
|
|
);
|
2019-10-31 12:26:58 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("isDisabled")).toEqual(true);
|
2019-10-31 12:26:58 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("not re-render", () => {
|
2019-10-31 12:26:58 +00:00
|
|
|
const wrapper = shallow(<ContextMenuButton {...baseProps} />).instance();
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const shouldUpdate = wrapper.shouldComponentUpdate(
|
|
|
|
wrapper.props,
|
|
|
|
wrapper.state
|
|
|
|
);
|
2019-10-31 12:26:58 +00:00
|
|
|
|
|
|
|
expect(shouldUpdate).toBe(false);
|
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("re-render", () => {
|
2019-10-31 12:26:58 +00:00
|
|
|
const wrapper = shallow(<ContextMenuButton {...baseProps} />).instance();
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const shouldUpdate = wrapper.shouldComponentUpdate(
|
|
|
|
{ opened: true },
|
|
|
|
wrapper.state
|
|
|
|
);
|
2019-10-31 12:26:58 +00:00
|
|
|
|
|
|
|
expect(shouldUpdate).toBe(true);
|
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("causes function onDropDownItemClick()", () => {
|
2019-10-31 12:26:58 +00:00
|
|
|
const onClick = jest.fn();
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const wrapper = shallow(
|
|
|
|
<ContextMenuButton {...baseProps} opened={true} onClick={onClick} />
|
|
|
|
);
|
2019-10-31 12:26:58 +00:00
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.onDropDownItemClick({
|
2020-10-16 13:16:01 +00:00
|
|
|
key: "key",
|
|
|
|
label: "label",
|
|
|
|
onClick: onClick,
|
2019-10-31 12:26:58 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.state("isOpen")).toBe(false);
|
2019-10-31 12:26:58 +00:00
|
|
|
expect(onClick).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("causes function onIconButtonClick()", () => {
|
|
|
|
const wrapper = shallow(
|
|
|
|
<ContextMenuButton {...baseProps} isDisabled={false} opened={true} />
|
|
|
|
);
|
2019-10-31 12:26:58 +00:00
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.onIconButtonClick();
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.state("isOpen")).toBe(false);
|
2019-10-31 12:26:58 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("causes function onIconButtonClick() with isDisabled prop", () => {
|
|
|
|
const wrapper = shallow(
|
|
|
|
<ContextMenuButton {...baseProps} isDisabled={true} opened={true} />
|
|
|
|
);
|
2019-10-31 12:26:58 +00:00
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.onIconButtonClick();
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.state("isOpen")).toBe(true);
|
2019-10-31 12:26:58 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("componentDidUpdate() state lifecycle test", () => {
|
2019-10-31 12:26:58 +00:00
|
|
|
const wrapper = shallow(<ContextMenuButton {...baseProps} />);
|
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
wrapper.setState({ isOpen: false });
|
|
|
|
|
|
|
|
instance.componentDidUpdate(wrapper.props(), wrapper.state());
|
|
|
|
|
|
|
|
expect(wrapper.state()).toBe(wrapper.state());
|
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("componentDidUpdate() props lifecycle test", () => {
|
2019-10-31 12:26:58 +00:00
|
|
|
const wrapper = shallow(<ContextMenuButton {...baseProps} />);
|
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.componentDidUpdate({ opened: true }, wrapper.state());
|
|
|
|
|
|
|
|
expect(wrapper.props()).toBe(wrapper.props());
|
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts id", () => {
|
|
|
|
const wrapper = mount(<ContextMenuButton {...baseProps} id="testId" />);
|
2019-11-27 13:33:53 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("id")).toEqual("testId");
|
2019-11-27 13:33:53 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts className", () => {
|
2019-11-27 13:33:53 +00:00
|
|
|
const wrapper = mount(
|
|
|
|
<ContextMenuButton {...baseProps} className="test" />
|
|
|
|
);
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("className")).toEqual("test");
|
2019-11-27 13:33:53 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts style", () => {
|
2019-11-27 13:33:53 +00:00
|
|
|
const wrapper = mount(
|
2020-10-16 13:16:01 +00:00
|
|
|
<ContextMenuButton {...baseProps} style={{ color: "red" }} />
|
2019-11-27 13:33:53 +00:00
|
|
|
);
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
|
2019-11-27 13:33:53 +00:00
|
|
|
});
|
2019-09-07 09:26:45 +00:00
|
|
|
});
|