Merge pull request #778 from barrymcgee/type-button

Convert Button to Typescript

src/components/Banner/Banner.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, HTMLProps } from "react";
+import { useState, useEffect, ReactElement } from "react";
 import classnames from "classnames";
 
 import "./_banner.scss";
@@ -7,13 +7,13 @@ type Props = {
   isActive: boolean;
   children: any;
   variant: "positive" | "caution" | "negative";
-} & HTMLProps<HTMLElement>;
+};
 
 export default function Banner({
   isActive,
   children,
   variant,
-}: Props): React.ReactElement {
+}: Props): ReactElement {
   const [bannerClosed, setBannerClosed] = useState(false);
 
   // Open banner every time banner variant changes

src/components/Button/Button.test.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { shallow } from "enzyme";
+
+import Button from "./Button";
+
+describe("Button", () => {
+  it("should display button text", () => {
+    const wrapper = shallow(
+      <Button onClick={() => jest.fn()}>Button text</Button>
+    );
+    expect(wrapper.find("button").text()).toStrictEqual("Button text");
+  });
+
+  it("should call handler when clicked", () => {
+    const handleClick = jest.fn();
+    const wrapper = shallow(
+      <Button onClick={() => handleClick()}>Button text</Button>
+    );
+    wrapper.find("button").simulate("click");
+    expect(handleClick).toBeCalledTimes(1);
+  });
+});

src/components/Button/Button.tsx

@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+
+import "./_button.scss";
+
+type Props = {
+  onClick: () => void;
+  children: string;
+};
+
+const Button = ({ onClick, children }: Props): ReactElement => {
+  return (
+    <button className="p-button--filter" onClick={onClick}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;

src/declarations/global.d.ts

@@ -0,0 +1 @@
+declare module "enzyme";