Merge pull request #21 from huwshimi/fix-button-click

Fix button click events

Author: huwshimi

CHANGELOG.md

@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Correctly pass click events to buttons.
+
 ### Removed
 
 ## [0.2.0] - 2019-11-03

src/components/Button/Button.js

@@ -10,6 +10,7 @@ const Button = ({
   element: Component = "button",
   hasIcon,
   inline,
+  onClick,
   ...props
 }) => {
   const classes = classNames(className, `p-button--${appearance}`, {
@@ -18,27 +19,22 @@ const Button = ({
     "is-inline": inline
   });
   const onClickDisabled = e => e.preventDefault();
+  const commonProps = {
+    ...props,
+    className: classes,
+    onClick: disabled ? onClickDisabled : onClick
+  };
 
   if (Component === "button") {
     return (
-      <button
-        className={classes}
-        disabled={disabled}
-        {...props}
-        onClick={disabled ? onClickDisabled : undefined}
-      >
+      <button {...commonProps} disabled={disabled}>
         {children}
       </button>
     );
   }
 
   return (
-    <Component
-      className={classes}
-      aria-disabled={disabled}
-      {...props}
-      onClick={disabled ? onClickDisabled : undefined}
-    >
+    <Component {...commonProps} aria-disabled={disabled}>
       {children}
     </Component>
   );
@@ -55,7 +51,8 @@ Button.propTypes = {
     PropTypes.string
   ]),
   hasIcon: PropTypes.bool,
-  inline: PropTypes.bool
+  inline: PropTypes.bool,
+  onClick: PropTypes.func
 };
 
 export default Button;

src/components/Button/Button.test.js

@@ -8,26 +8,49 @@ describe("Button ", () => {
     const wrapper = shallow(<Button>Test content</Button>);
     expect(wrapper).toMatchSnapshot();
   });
-
   it("renders as a link", () => {
     const wrapper = shallow(<Button element="a">Test content</Button>);
     expect(wrapper).toMatchSnapshot();
-    expect(wrapper.prop("onClick")).toBe(undefined);
+  });
+
+  it("can handle button click events", () => {
+    const onClick = jest.fn();
+    const wrapper = shallow(<Button onClick={onClick} />);
+    wrapper.simulate("click");
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it("can handle anchor click events", () => {
+    const onClick = jest.fn();
+    const wrapper = shallow(<Button element="a" onClick={onClick} />);
+    wrapper.simulate("click");
+    expect(onClick).toHaveBeenCalled();
   });
 
   it("correctly disables a button", () => {
-    const wrapper = shallow(<Button disabled={true} />);
+    const onClick = jest.fn();
+    const wrapper = shallow(<Button disabled={true} onClick={onClick} />);
     expect(wrapper.prop("disabled")).toBe(true);
     expect(wrapper.prop("className").includes("is-disabled")).toBe(false);
     expect(wrapper.prop("aria-disabled")).toBe(undefined);
+    const preventDefault = jest.fn();
+    wrapper.simulate("click", { preventDefault });
+    expect(preventDefault).toHaveBeenCalled();
+    expect(onClick).not.toHaveBeenCalled();
   });
 
   it("correctly disables a link", () => {
-    const wrapper = shallow(<Button element="a" disabled={true} />);
+    const onClick = jest.fn();
+    const wrapper = shallow(
+      <Button element="a" disabled={true} onClick={onClick} />
+    );
     expect(wrapper.prop("className").includes("is-disabled")).toBe(true);
     expect(wrapper.prop("aria-disabled")).toBe(true);
     expect(wrapper.prop("disabled")).toBe(undefined);
-    expect(wrapper.prop("onClick")).not.toBe(undefined);
+    const preventDefault = jest.fn();
+    wrapper.simulate("click", { preventDefault });
+    expect(preventDefault).toHaveBeenCalled();
+    expect(onClick).not.toHaveBeenCalled();
   });
 
   it("correctly handle icons", () => {