IconButton: migrate to typescript & add unit test

Author: clairep94

client/common/IconButton.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '../test-utils';
+import IconButton from './IconButton';
+
+const MockIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg data-testid="mock-icon" {...props} />
+);
+
+describe('IconButton', () => {
+  test('renders with an icon', () => {
+    render(<IconButton icon={MockIcon} aria-label="test button" />);
+    expect(screen.getByTestId('mock-icon')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'test button' })
+    ).toBeInTheDocument();
+  });
+
+  test('renders without an icon', () => {
+    render(<IconButton />);
+    expect(screen.queryByTestId('mock-icon')).not.toBeInTheDocument();
+  });
+
+  test('passes other props to the button', () => {
+    render(<IconButton icon={MockIcon} id="my-button" />);
+    expect(screen.getByRole('button')).toHaveAttribute('id', 'my-button');
+  });
+});

client/common/IconButton.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ComponentType } from 'react';
 import styled from 'styled-components';
-import Button from './Button';
+import Button, { ButtonProps } from './Button';
 import { remSize } from '../theme';
 
 const ButtonWrapper = styled(Button)`
@@ -12,27 +11,21 @@ const ButtonWrapper = styled(Button)`
   }
 `;
 
-const IconButton = (props) => {
-  const { icon, ...otherProps } = props;
-  const Icon = icon;
-
-  return (
-    <ButtonWrapper
-      iconBefore={icon && <Icon />}
-      iconOnly
-      display={Button.displays.inline}
-      focusable="false"
-      {...otherProps}
-    />
-  );
-};
-
-IconButton.propTypes = {
-  icon: PropTypes.func
+export type IconButtonProps = Omit<
+  ButtonProps,
+  'iconBefore' | 'display' | 'focusable'
+> & {
+  icon?: ComponentType<{ 'aria-label'?: string }> | null;
 };
 
-IconButton.defaultProps = {
-  icon: null
-};
+const IconButton = ({ icon: Icon, ...otherProps }: IconButtonProps) => (
+  <ButtonWrapper
+    iconBefore={Icon ? <Icon /> : undefined}
+    iconOnly
+    display={Button.displays.inline}
+    focusable="false"
+    {...otherProps}
+  />
+);
 
 export default IconButton;