IconButton.tsx: add unit test and fix icon resolve

Author: clairep94

.eslintrc

@@ -131,7 +131,8 @@
       "rules": {
         "no-use-before-define": "off",
         "import/no-extraneous-dependencies": "off",
-        "no-unused-vars": "off"
+        "no-unused-vars": "off",
+        "react/require-default-props": "off"
       }
     },
     {

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

@@ -22,18 +22,14 @@ type IconButtonProps = Omit<
   icon?: ComponentType<IconProps> | null
 };
 
-const IconButton = ({ icon = null, ...otherProps }: IconButtonProps) => {
-  const Icon = icon;
-
-  return (
-    <ButtonWrapper
-      iconBefore={icon && <Icon />}
-      iconOnly
-      display={Button.displays.inline}
-      focusable="false"
-      {...otherProps}
-    />
-  );
-};
+const IconButton = ({ icon: Icon, ...otherProps }: IconButtonProps) => (
+  <ButtonWrapper
+    iconBefore={Icon ? <Icon /> : undefined}
+    iconOnly
+    display={Button.displays.inline}
+    focusable="false"
+    {...otherProps}
+  />
+);
 
 export default IconButton;