DocSpace-client/packages/components/drop-down/drop-down.test.js

153 lines
3.9 KiB
JavaScript

import React from "react";
import { mount, shallow } from "enzyme";
import DropDown from ".";
const baseProps = {
open: false,
isOpen: false,
directionX: "left",
directionY: "bottom",
manualWidth: "100%",
showDisabledItems: true,
withBackdrop: false,
};
const baseChildren = <div label="1"></div>;
describe("<DropDown />", () => {
it("rendered without error", () => {
const wrapper = mount(<DropDown {...baseProps} />);
expect(wrapper).toExist();
});
it("opened/isOpen", () => {
const wrapper = mount(<DropDown {...baseProps} open />);
expect(wrapper.prop("open")).toEqual(true);
});
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);
});
it("directionX right", () => {
const wrapper = mount(<DropDown {...baseProps} directionX="right" />);
expect(wrapper.prop("directionX")).toEqual("right");
});
it("directionX right manualX", () => {
const wrapper = mount(
<DropDown {...baseProps} directionX="right" manualX="100px" />
);
expect(wrapper.prop("directionX")).toEqual("right");
});
it("directionY top", () => {
const wrapper = mount(<DropDown {...baseProps} directionY="top" />);
expect(wrapper.prop("directionY")).toEqual("top");
});
it("directionY top manualY", () => {
const wrapper = mount(
<DropDown {...baseProps} directionY="top" manualY="100%" />
);
expect(wrapper.prop("directionY")).toEqual("top");
});
it("withArrow", () => {
const wrapper = mount(<DropDown {...baseProps} withArrow />);
expect(wrapper.prop("withArrow")).toEqual(true);
});
it("manualY", () => {
const wrapper = mount(<DropDown {...baseProps} manualY="100%" />);
expect(wrapper.prop("manualY")).toEqual("100%");
});
it("manualX", () => {
const wrapper = mount(<DropDown {...baseProps} manualX="100%" />);
expect(wrapper.prop("manualX")).toEqual("100%");
});
it("isUserPreview", () => {
const wrapper = mount(<DropDown {...baseProps} isUserPreview />);
expect(wrapper.prop("isUserPreview")).toEqual(true);
});
it("with children", () => {
const wrapper = mount(<DropDown {...baseProps}>{baseChildren}</DropDown>);
expect(wrapper.children()).toHaveLength(1);
});
it("with maxHeight and children", () => {
const child = <div>1</div>;
const wrapper = shallow(
<DropDown maxHeight={0}>{child}</DropDown>
).instance();
expect(wrapper.props.children).toEqual(child);
});
//TODO: Fix final condition checks
/* it('componentDidUpdate() state lifecycle test', () => {
const wrapper = shallow(<DropDown {...baseProps} />);
const instance = wrapper.instance();
wrapper.setState({ opened: true });
instance.componentDidUpdate(wrapper.props(), wrapper.state());
expect(wrapper.state()).toBe(wrapper.state());
}); */
//TODO: Fix final condition checks
/* it('componentDidUpdate() props lifecycle test', () => {
const wrapper = shallow(<DropDown {...baseProps} />);
const instance = wrapper.instance();
instance.componentDidUpdate({ open: true }, wrapper.state());
expect(wrapper.props()).toBe(wrapper.props());
}); */
it("accepts id", () => {
const wrapper = mount(<DropDown {...baseProps} id="testId" />);
expect(wrapper.prop("id")).toEqual("testId");
});
it("accepts className", () => {
const wrapper = mount(<DropDown {...baseProps} className="test" />);
expect(wrapper.prop("className")).toEqual("test");
});
it("accepts style", () => {
const wrapper = mount(
<DropDown {...baseProps} open style={{ color: "red" }} />
);
expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
});
});