2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import { mount } from "enzyme";
|
|
|
|
import Button from ".";
|
2019-09-06 09:44:31 +00:00
|
|
|
|
2019-11-26 11:01:00 +00:00
|
|
|
const baseProps = {
|
2022-05-27 19:01:14 +00:00
|
|
|
size: "extraSmall",
|
2019-11-26 11:01:00 +00:00
|
|
|
isDisabled: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
label: "OK",
|
|
|
|
};
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
describe("<Button />", () => {
|
|
|
|
it("renders without error", () => {
|
|
|
|
const wrapper = mount(<Button {...baseProps} />);
|
2019-09-06 09:44:31 +00:00
|
|
|
|
|
|
|
expect(wrapper).toExist();
|
|
|
|
});
|
2019-09-17 11:19:45 +00:00
|
|
|
|
2020-02-02 11:01:43 +00:00
|
|
|
/* it('not re-render test', () => {
|
2019-11-26 11:01:00 +00:00
|
|
|
const onClick = () => alert('Button clicked');
|
2019-09-17 11:19:45 +00:00
|
|
|
|
2019-11-26 11:01:00 +00:00
|
|
|
const wrapper = shallow(<Button {...baseProps} onClick={onClick} />).instance();
|
2019-09-17 11:19:45 +00:00
|
|
|
|
|
|
|
const shouldUpdate = wrapper.shouldComponentUpdate(wrapper.props);
|
|
|
|
|
|
|
|
expect(shouldUpdate).toBe(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('re-render test by value', () => {
|
2019-11-26 11:01:00 +00:00
|
|
|
const onClick = () => alert('Button clicked');
|
2019-09-17 11:19:45 +00:00
|
|
|
|
2019-11-26 11:01:00 +00:00
|
|
|
const wrapper = shallow(<Button {...baseProps} onClick={onClick} />).instance();
|
2019-09-17 11:19:45 +00:00
|
|
|
|
|
|
|
const shouldUpdate = wrapper.shouldComponentUpdate({
|
|
|
|
...wrapper.props,
|
|
|
|
label: "Cancel"
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(shouldUpdate).toBe(true);
|
2020-02-02 11:01:43 +00:00
|
|
|
}); */
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts id", () => {
|
|
|
|
const wrapper = mount(<Button {...baseProps} id="testId" />);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("id")).toEqual("testId");
|
2019-11-26 11:01:00 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts className", () => {
|
|
|
|
const wrapper = mount(<Button {...baseProps} className="test" />);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("className")).toEqual("test");
|
2019-11-26 11:01:00 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts style", () => {
|
|
|
|
const wrapper = mount(<Button {...baseProps} style={{ color: "red" }} />);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
|
2019-11-26 11:01:00 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("render with isHovered prop", () => {
|
|
|
|
const wrapper = mount(<Button {...baseProps} isHovered />);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("isHovered")).toEqual(true);
|
2019-11-26 11:01:00 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("render with isClicked prop", () => {
|
|
|
|
const wrapper = mount(<Button {...baseProps} isClicked />);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("isClicked")).toEqual(true);
|
2019-11-26 11:01:00 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("render with isDisabled prop", () => {
|
|
|
|
const wrapper = mount(<Button {...baseProps} isDisabled />);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("isDisabled")).toEqual(true);
|
2019-11-26 11:01:00 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("render with isLoading prop", () => {
|
|
|
|
const wrapper = mount(<Button {...baseProps} isLoading />);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("isLoading")).toEqual(true);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
wrapper.setProps({ primary: true });
|
|
|
|
expect(wrapper.prop("primary")).toEqual(true);
|
|
|
|
expect(wrapper.prop("isLoading")).toEqual(true);
|
2019-11-26 11:01:00 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("render with various size", () => {
|
|
|
|
const wrapper = mount(<Button {...baseProps} />);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2022-05-27 19:01:14 +00:00
|
|
|
wrapper.setProps({ size: "extraSmall" });
|
|
|
|
expect(wrapper.prop("size")).toEqual("extraSmall");
|
|
|
|
|
|
|
|
wrapper.setProps({ size: "small" });
|
|
|
|
expect(wrapper.prop("size")).toEqual("small");
|
|
|
|
|
|
|
|
wrapper.setProps({ size: "normal" });
|
|
|
|
expect(wrapper.prop("size")).toEqual("normal");
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
wrapper.setProps({ size: "medium" });
|
|
|
|
expect(wrapper.prop("size")).toEqual("medium");
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2022-05-27 19:01:14 +00:00
|
|
|
wrapper.setProps({ size: "normalDesktop" });
|
|
|
|
expect(wrapper.prop("size")).toEqual("normalDesktop");
|
|
|
|
|
|
|
|
wrapper.setProps({ size: "normalTouchscreen" });
|
|
|
|
expect(wrapper.prop("size")).toEqual("normalTouchscreen");
|
|
|
|
|
|
|
|
wrapper.setProps({ size: "extraSmall", primary: true });
|
|
|
|
expect(wrapper.prop("size")).toEqual("extraSmall");
|
|
|
|
expect(wrapper.prop("primary")).toEqual(true);
|
|
|
|
|
|
|
|
wrapper.setProps({ size: "normal", primary: true });
|
|
|
|
expect(wrapper.prop("size")).toEqual("normal");
|
|
|
|
expect(wrapper.prop("primary")).toEqual(true);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
wrapper.setProps({ size: "medium", primary: true });
|
|
|
|
expect(wrapper.prop("size")).toEqual("medium");
|
|
|
|
expect(wrapper.prop("primary")).toEqual(true);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2022-05-27 19:01:14 +00:00
|
|
|
wrapper.setProps({ size: "normalDesktop", primary: true });
|
|
|
|
expect(wrapper.prop("size")).toEqual("normalDesktop");
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("primary")).toEqual(true);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2022-05-27 19:01:14 +00:00
|
|
|
wrapper.setProps({ size: "normalTouchscreen", primary: true });
|
|
|
|
expect(wrapper.prop("size")).toEqual("normalTouchscreen");
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("primary")).toEqual(true);
|
2020-07-15 16:14:00 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
wrapper.setProps({ scale: true });
|
|
|
|
expect(wrapper.prop("scale")).toEqual(true);
|
2019-11-26 11:01:00 +00:00
|
|
|
});
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("render with icon", () => {
|
|
|
|
const icon = <>1</>;
|
|
|
|
const wrapper = mount(<Button {...baseProps} icon={icon} />);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("icon")).toEqual(icon);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2022-05-27 19:01:14 +00:00
|
|
|
wrapper.setProps({ size: "extraSmall", primary: true });
|
|
|
|
expect(wrapper.prop("size")).toEqual("extraSmall");
|
|
|
|
expect(wrapper.prop("primary")).toEqual(true);
|
|
|
|
|
|
|
|
wrapper.setProps({ size: "normal", primary: true });
|
|
|
|
expect(wrapper.prop("size")).toEqual("normal");
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("primary")).toEqual(true);
|
2019-11-26 11:01:00 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
wrapper.setProps({ size: "medium", primary: true });
|
|
|
|
expect(wrapper.prop("size")).toEqual("medium");
|
|
|
|
expect(wrapper.prop("primary")).toEqual(true);
|
2020-07-15 16:14:00 +00:00
|
|
|
|
2022-05-27 19:01:14 +00:00
|
|
|
wrapper.setProps({ size: "normalDesktop", primary: true });
|
|
|
|
expect(wrapper.prop("size")).toEqual("normalDesktop");
|
|
|
|
expect(wrapper.prop("primary")).toEqual(true);
|
|
|
|
|
|
|
|
wrapper.setProps({ size: "normalTouchscreen", primary: true });
|
|
|
|
expect(wrapper.prop("size")).toEqual("normalTouchscreen");
|
2020-10-16 13:16:01 +00:00
|
|
|
expect(wrapper.prop("primary")).toEqual(true);
|
2019-11-26 11:01:00 +00:00
|
|
|
});
|
2020-07-29 08:32:57 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
it("accepts minWidth", () => {
|
|
|
|
const wrapper = mount(<Button {...baseProps} />);
|
2020-07-29 08:32:57 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
wrapper.setProps({ minWidth: "40px" });
|
|
|
|
expect(wrapper.prop("minWidth")).toEqual("40px");
|
2020-07-29 08:32:57 +00:00
|
|
|
});
|
2019-09-06 09:44:31 +00:00
|
|
|
});
|