2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import { mount, shallow } from "enzyme";
|
|
|
|
import GroupButton from ".";
|
2019-09-08 13:13:41 +00:00
|
|
|
|
2019-11-01 08:32:30 +00:00
|
|
|
const baseProps = {
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "test",
|
2019-11-01 08:32:30 +00:00
|
|
|
disabled: false,
|
|
|
|
opened: false,
|
|
|
|
isDropdown: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
};
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
describe("<GroupButton />", () => {
|
|
|
|
it("renders without error", () => {
|
2019-11-01 08:32:30 +00:00
|
|
|
const wrapper = mount(<GroupButton {...baseProps} />);
|
|
|
|
|
|
|
|
expect(wrapper).toExist();
|
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("renders with child", () => {
|
2019-11-01 08:32:30 +00:00
|
|
|
const wrapper = mount(
|
2020-10-16 13:16:01 +00:00
|
|
|
<GroupButton {...baseProps} isDropdown>
|
|
|
|
<div key="demo" label="demo">
|
2020-01-31 13:42:36 +00:00
|
|
|
Test
|
|
|
|
</div>
|
2020-10-16 13:16:01 +00:00
|
|
|
</GroupButton>
|
|
|
|
);
|
2020-01-31 13:42:36 +00:00
|
|
|
|
|
|
|
expect(wrapper).toExist();
|
|
|
|
expect(wrapper.instance().props.isDropdown).toBe(true);
|
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("renders with child and open first item", () => {
|
2020-01-31 13:42:36 +00:00
|
|
|
const wrapper = mount(
|
2020-10-16 13:16:01 +00:00
|
|
|
<GroupButton {...baseProps} isDropdown opened>
|
|
|
|
<div key="demo" label="demo">
|
2020-01-31 13:42:36 +00:00
|
|
|
Test
|
|
|
|
</div>
|
2020-10-16 13:16:01 +00:00
|
|
|
</GroupButton>
|
|
|
|
);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
|
|
|
expect(wrapper).toExist();
|
2020-01-31 13:42:36 +00:00
|
|
|
expect(wrapper.instance().props.isDropdown).toBe(true);
|
|
|
|
expect(wrapper.instance().props.opened).toBe(true);
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("applies disabled prop", () => {
|
|
|
|
const wrapper = mount(<GroupButton {...baseProps} disabled={true} />);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("disabled")).toEqual(true);
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("applies opened prop", () => {
|
|
|
|
const wrapper = mount(<GroupButton {...baseProps} opened={true} />);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("opened")).toEqual(true);
|
|
|
|
expect(wrapper.state("isOpen")).toEqual(true);
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("applies isDropdown prop", () => {
|
|
|
|
const wrapper = mount(<GroupButton {...baseProps} isDropdown={true} />);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("isDropdown")).toEqual(true);
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("applies activated prop", () => {
|
|
|
|
const wrapper = mount(<GroupButton {...baseProps} activated={true} />);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("activated")).toEqual(true);
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("applies hovered prop", () => {
|
|
|
|
const wrapper = mount(<GroupButton {...baseProps} hovered={true} />);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("hovered")).toEqual(true);
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("applies isSeparator prop", () => {
|
|
|
|
const wrapper = mount(<GroupButton {...baseProps} isSeparator={true} />);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("isSeparator")).toEqual(true);
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("applies isSelect prop", () => {
|
|
|
|
const wrapper = mount(<GroupButton {...baseProps} isSelect={true} />);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("isSelect")).toEqual(true);
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("applies checked prop", () => {
|
|
|
|
const wrapper = mount(<GroupButton {...baseProps} checked={true} />);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("checked")).toEqual(true);
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("applies isIndeterminate prop", () => {
|
2020-01-31 13:42:36 +00:00
|
|
|
const wrapper = mount(
|
2020-10-16 13:16:01 +00:00
|
|
|
<GroupButton {...baseProps} isIndeterminate={true} />
|
|
|
|
);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("isIndeterminate")).toEqual(true);
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("applies dropDownMaxHeight prop", () => {
|
2020-01-31 13:42:36 +00:00
|
|
|
const wrapper = mount(
|
2020-10-16 13:16:01 +00:00
|
|
|
<GroupButton {...baseProps} dropDownMaxHeight={100} />
|
|
|
|
);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("dropDownMaxHeight")).toEqual(100);
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("applies id", () => {
|
|
|
|
const wrapper = mount(<GroupButton {...baseProps} id="testId" />);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("id")).toEqual("testId");
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("applies className", () => {
|
|
|
|
const wrapper = mount(<GroupButton {...baseProps} className="test" />);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("className")).toEqual("test");
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("applies style", () => {
|
2020-01-31 13:42:36 +00:00
|
|
|
const wrapper = mount(
|
2020-10-16 13:16:01 +00:00
|
|
|
<GroupButton {...baseProps} style={{ color: "red" }} />
|
2020-01-31 13:42:36 +00:00
|
|
|
);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("causes function dropDownItemClick()", () => {
|
2020-01-31 13:42:36 +00:00
|
|
|
const onSelect = jest.fn();
|
2020-10-16 13:16:01 +00:00
|
|
|
const child = <div data-index={0}>test</div>;
|
2019-11-01 08:32:30 +00:00
|
|
|
const wrapper = shallow(
|
2020-01-31 13:42:36 +00:00
|
|
|
<GroupButton
|
|
|
|
{...baseProps}
|
|
|
|
opened={true}
|
2020-08-11 08:03:09 +00:00
|
|
|
isDropdown={true}
|
2020-01-31 13:42:36 +00:00
|
|
|
onSelect={onSelect}
|
|
|
|
>
|
2019-11-01 08:32:30 +00:00
|
|
|
{child}
|
2020-10-16 13:16:01 +00:00
|
|
|
</GroupButton>
|
|
|
|
);
|
2019-11-01 08:32:30 +00:00
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
2020-08-11 08:03:09 +00:00
|
|
|
instance.dropDownItemClick({
|
|
|
|
currentTarget: {
|
|
|
|
dataset: {
|
2020-10-16 13:16:01 +00:00
|
|
|
index: 0,
|
|
|
|
},
|
|
|
|
},
|
2020-08-11 08:03:09 +00:00
|
|
|
});
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-08-11 08:03:09 +00:00
|
|
|
expect(onSelect).toBeCalled();
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.state("isOpen")).toBe(false);
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("causes function dropDownToggleClick()", () => {
|
|
|
|
const child = <div>test</div>;
|
2019-11-01 08:32:30 +00:00
|
|
|
const wrapper = shallow(
|
2020-10-16 13:16:01 +00:00
|
|
|
<GroupButton {...baseProps} opened isDropdown>
|
2020-01-31 13:42:36 +00:00
|
|
|
{child}
|
2020-10-16 13:16:01 +00:00
|
|
|
</GroupButton>
|
|
|
|
);
|
2019-11-01 08:32:30 +00:00
|
|
|
const instance = wrapper.instance();
|
|
|
|
|
|
|
|
instance.dropDownToggleClick();
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.state("isOpen")).toBe(false);
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("causes function checkboxChange(e)", () => {
|
|
|
|
const child = <div>test</div>;
|
2020-01-31 13:42:36 +00:00
|
|
|
const onChange = jest.fn();
|
|
|
|
const wrapper = mount(
|
|
|
|
<GroupButton
|
|
|
|
{...baseProps}
|
|
|
|
opened
|
|
|
|
isSelect
|
|
|
|
isDropdown
|
|
|
|
onChange={onChange}
|
2020-10-16 13:16:01 +00:00
|
|
|
selected="test"
|
2020-01-31 13:42:36 +00:00
|
|
|
>
|
|
|
|
{child}
|
2020-10-16 13:16:01 +00:00
|
|
|
</GroupButton>
|
|
|
|
);
|
2019-11-01 08:32:30 +00:00
|
|
|
const instance = wrapper.instance();
|
2020-10-16 13:16:01 +00:00
|
|
|
const event = new Event("click", { target: { checked: true } });
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-01-31 13:42:36 +00:00
|
|
|
instance.checkboxChange(event);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-01-31 13:42:36 +00:00
|
|
|
/* TODO: Way of normal simulation
|
|
|
|
wrapper.find('input[type="checkbox"]').simulate('change', {target:{checked:true}}) */
|
|
|
|
|
|
|
|
expect(onChange).toBeCalled();
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.state("selected")).toBe("test");
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("causes function clickOutsideAction(e)", () => {
|
|
|
|
const child = <div>test</div>;
|
2020-01-31 13:42:36 +00:00
|
|
|
const wrapper = mount(
|
2020-10-16 13:16:01 +00:00
|
|
|
<GroupButton {...baseProps} opened isSelect isDropdown selected="test">
|
2020-01-31 13:42:36 +00:00
|
|
|
{child}
|
2020-10-16 13:16:01 +00:00
|
|
|
</GroupButton>
|
|
|
|
);
|
2019-11-01 08:32:30 +00:00
|
|
|
const instance = wrapper.instance();
|
2020-10-16 13:16:01 +00:00
|
|
|
const event = new Event("click", { target: {} });
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-01-31 13:42:36 +00:00
|
|
|
instance.clickOutsideAction(event);
|
2019-11-01 08:32:30 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.state("selected")).toBe("test");
|
|
|
|
expect(wrapper.state("isOpen")).toBe(false);
|
2019-11-01 08:32:30 +00:00
|
|
|
});
|
2019-09-08 13:13:41 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("calling componentDidUpdate()", () => {
|
|
|
|
const child = <div>test</div>;
|
2019-11-28 07:57:50 +00:00
|
|
|
const wrapper = mount(
|
2020-10-16 13:16:01 +00:00
|
|
|
<GroupButton {...baseProps} opened isSelect isDropdown selected="test">
|
2020-01-31 13:42:36 +00:00
|
|
|
{child}
|
2020-10-16 13:16:01 +00:00
|
|
|
</GroupButton>
|
|
|
|
);
|
2019-11-28 07:57:50 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.state("selected")).toBe("test");
|
|
|
|
expect(wrapper.state("isOpen")).toBe(true);
|
2019-11-28 07:57:50 +00:00
|
|
|
|
2020-01-31 13:42:36 +00:00
|
|
|
wrapper.setProps({
|
2020-10-16 13:16:01 +00:00
|
|
|
opened: false,
|
2020-01-31 13:42:36 +00:00
|
|
|
});
|
2019-11-28 07:57:50 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.state("selected")).toBe("test");
|
|
|
|
expect(wrapper.state("isOpen")).toBe(false);
|
2019-11-28 07:57:50 +00:00
|
|
|
|
2020-01-31 13:42:36 +00:00
|
|
|
wrapper.setProps({
|
2020-10-16 13:16:01 +00:00
|
|
|
selected: "new test",
|
2020-01-31 13:42:36 +00:00
|
|
|
});
|
2019-11-28 07:57:50 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.state("selected")).toBe("new test");
|
|
|
|
expect(wrapper.state("isOpen")).toBe(false);
|
2019-11-28 07:57:50 +00:00
|
|
|
});
|
2019-09-08 13:13:41 +00:00
|
|
|
});
|