2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import { mount, shallow } from "enzyme";
|
|
|
|
import DropDown from ".";
|
2019-09-07 10:27:54 +00:00
|
|
|
|
2019-09-20 06:03:55 +00:00
|
|
|
const baseProps = {
|
2019-12-17 14:27:06 +00:00
|
|
|
open: false,
|
2019-09-20 06:03:55 +00:00
|
|
|
isOpen: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
directionX: "left",
|
|
|
|
directionY: "bottom",
|
|
|
|
manualWidth: "100%",
|
2020-12-10 16:41:42 +00:00
|
|
|
showDisabledItems: true,
|
|
|
|
withBackdrop: false,
|
2019-09-20 06:03:55 +00:00
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const baseChildren = <div label="1"></div>;
|
2019-09-20 06:03:55 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
describe("<DropDown />", () => {
|
|
|
|
it("rendered without error", () => {
|
2019-09-20 06:03:55 +00:00
|
|
|
const wrapper = mount(<DropDown {...baseProps} />);
|
|
|
|
|
|
|
|
expect(wrapper).toExist();
|
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("opened/isOpen", () => {
|
2019-12-17 14:27:06 +00:00
|
|
|
const wrapper = mount(<DropDown {...baseProps} open />);
|
2019-09-20 06:03:55 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("open")).toEqual(true);
|
2019-09-20 06:03:55 +00:00
|
|
|
});
|
|
|
|
|
2020-12-10 16:41:42 +00:00
|
|
|
it("showDisabledItems", () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<DropDown {...baseProps} open showDisabledItems={false} />
|
|
|
|
);
|
|
|
|
|
|
|
|
expect(wrapper.prop("showDisabledItems")).toEqual(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it("render with backdrop", () => {
|
|
|
|
const wrapper = mount(<DropDown {...baseProps} open withBackdrop={true} />);
|
|
|
|
|
|
|
|
expect(wrapper.prop("withBackdrop")).toEqual(true);
|
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("directionX right", () => {
|
|
|
|
const wrapper = mount(<DropDown {...baseProps} directionX="right" />);
|
2019-09-20 06:03:55 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("directionX")).toEqual("right");
|
2019-09-20 06:03:55 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("directionX right manualX", () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<DropDown {...baseProps} directionX="right" manualX="100px" />
|
|
|
|
);
|
2019-11-01 06:21:43 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("directionX")).toEqual("right");
|
2019-11-01 06:21:43 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("directionY top", () => {
|
|
|
|
const wrapper = mount(<DropDown {...baseProps} directionY="top" />);
|
2019-09-20 06:03:55 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("directionY")).toEqual("top");
|
2019-09-20 06:03:55 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("directionY top manualY", () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<DropDown {...baseProps} directionY="top" manualY="100%" />
|
|
|
|
);
|
2019-11-01 06:21:43 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("directionY")).toEqual("top");
|
2019-11-01 06:21:43 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("withArrow", () => {
|
2019-09-20 06:03:55 +00:00
|
|
|
const wrapper = mount(<DropDown {...baseProps} withArrow />);
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("withArrow")).toEqual(true);
|
2019-09-20 06:03:55 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("manualY", () => {
|
|
|
|
const wrapper = mount(<DropDown {...baseProps} manualY="100%" />);
|
2019-09-20 06:03:55 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("manualY")).toEqual("100%");
|
2019-09-20 06:03:55 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("manualX", () => {
|
|
|
|
const wrapper = mount(<DropDown {...baseProps} manualX="100%" />);
|
2019-09-20 06:03:55 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("manualX")).toEqual("100%");
|
2019-09-20 06:03:55 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("isUserPreview", () => {
|
2019-09-20 06:03:55 +00:00
|
|
|
const wrapper = mount(<DropDown {...baseProps} isUserPreview />);
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("isUserPreview")).toEqual(true);
|
2019-09-20 06:03:55 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("with children", () => {
|
|
|
|
const wrapper = mount(<DropDown {...baseProps}>{baseChildren}</DropDown>);
|
2019-09-07 10:27:54 +00:00
|
|
|
|
2019-09-20 06:03:55 +00:00
|
|
|
expect(wrapper.children()).toHaveLength(1);
|
|
|
|
});
|
2019-11-01 06:21:43 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("with maxHeight and children", () => {
|
|
|
|
const child = <div>1</div>;
|
|
|
|
const wrapper = shallow(
|
|
|
|
<DropDown maxHeight={0}>{child}</DropDown>
|
|
|
|
).instance();
|
2019-09-20 06:03:55 +00:00
|
|
|
|
2019-11-01 06:21:43 +00:00
|
|
|
expect(wrapper.props.children).toEqual(child);
|
2019-09-07 10:27:54 +00:00
|
|
|
});
|
2019-11-01 06:21:43 +00:00
|
|
|
|
2020-01-09 13:27:49 +00:00
|
|
|
//TODO: Fix final condition checks
|
|
|
|
/* it('componentDidUpdate() state lifecycle test', () => {
|
2019-11-01 06:21:43 +00:00
|
|
|
const wrapper = shallow(<DropDown {...baseProps} />);
|
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
2019-12-17 14:27:06 +00:00
|
|
|
wrapper.setState({ opened: true });
|
2019-11-01 06:21:43 +00:00
|
|
|
|
|
|
|
instance.componentDidUpdate(wrapper.props(), wrapper.state());
|
|
|
|
|
|
|
|
expect(wrapper.state()).toBe(wrapper.state());
|
2020-01-09 13:27:49 +00:00
|
|
|
}); */
|
2019-11-01 06:21:43 +00:00
|
|
|
|
2020-01-09 13:27:49 +00:00
|
|
|
//TODO: Fix final condition checks
|
|
|
|
/* it('componentDidUpdate() props lifecycle test', () => {
|
2019-11-01 06:21:43 +00:00
|
|
|
const wrapper = shallow(<DropDown {...baseProps} />);
|
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
2019-12-17 14:27:06 +00:00
|
|
|
instance.componentDidUpdate({ open: true }, wrapper.state());
|
2019-11-01 06:21:43 +00:00
|
|
|
|
|
|
|
expect(wrapper.props()).toBe(wrapper.props());
|
2020-01-09 13:27:49 +00:00
|
|
|
}); */
|
2019-11-01 06:21:43 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts id", () => {
|
|
|
|
const wrapper = mount(<DropDown {...baseProps} id="testId" />);
|
2019-11-27 13:08:22 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("id")).toEqual("testId");
|
2019-11-27 13:08:22 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts className", () => {
|
|
|
|
const wrapper = mount(<DropDown {...baseProps} className="test" />);
|
2019-11-27 13:08:22 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("className")).toEqual("test");
|
2019-11-27 13:08:22 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts style", () => {
|
2019-11-27 13:08:22 +00:00
|
|
|
const wrapper = mount(
|
2020-10-16 13:16:01 +00:00
|
|
|
<DropDown {...baseProps} open style={{ color: "red" }} />
|
2019-11-27 13:08:22 +00:00
|
|
|
);
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
|
2019-11-27 13:08:22 +00:00
|
|
|
});
|
2019-09-07 10:27:54 +00:00
|
|
|
});
|