Improve tests for Button

app/soapbox/components/ui/button/__tests__/button.test.tsx

@@ -11,6 +11,21 @@ describe('<Button />', () => {
     expect(screen.getByRole('button')).toHaveTextContent(text);
   });
 
+  it('renders the children', () => {
+    render(<Button><p>children</p></Button>);
+
+    expect(screen.getByRole('button')).toHaveTextContent('children');
+  });
+
+  it('renders the props.text instead of children', () => {
+    const text = 'foo';
+    const children = <p>children</p>;
+    render(<Button text={text}>{children}</Button>);
+
+    expect(screen.getByRole('button')).toHaveTextContent('foo');
+    expect(screen.getByRole('button')).not.toHaveTextContent('children');
+  });
+
   it('handles click events using the given handler', () => {
     const handler = jest.fn();
     render(<Button onClick={handler} />);
@@ -33,21 +48,6 @@ describe('<Button />', () => {
     expect(screen.getByRole('button')).toBeDisabled();
   });
 
-  it('renders the children', () => {
-    render(<Button><p>children</p></Button>);
-
-    expect(screen.getByRole('button')).toHaveTextContent('children');
-  });
-
-  it('renders the props.text instead of children', () => {
-    const text = 'foo';
-    const children = <p>children</p>;
-    render(<Button text={text}>{children}</Button>);
-
-    expect(screen.getByRole('button')).toHaveTextContent('foo');
-    expect(screen.getByRole('button')).not.toHaveTextContent('children');
-  });
-
   it('render full-width button if block prop given', () => {
     render(<Button block />);
 
@@ -59,4 +59,32 @@ describe('<Button />', () => {
 
     expect(screen.getByRole('button')).toHaveClass('bg-primary-100');
   });
+
+  describe('to prop', () => {
+    it('renders a link', () => {
+      render(<Button to='/'>link</Button>);
+
+      expect(screen.getByRole('link')).toBeInTheDocument();
+    });
+
+    it('does not render a link', () => {
+      render(<Button>link</Button>);
+
+      expect(screen.queryAllByRole('link')).toHaveLength(0);
+    });
+  });
+
+  describe('icon prop', () => {
+    it('renders an icon', () => {
+      render(<Button icon='icon.png'>button</Button>);
+
+      expect(screen.getByTestId('icon')).toBeInTheDocument();
+    });
+
+    it('does not render an icon', () => {
+      render(<Button>button</Button>);
+
+      expect(screen.queryAllByTestId('icon')).toHaveLength(0);
+    });
+  });
 });

app/soapbox/components/ui/button/button.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
-import Icon from 'soapbox/components/icon';
+import Icon from '../icon/icon';
 
 import { useButtonStyles } from './useButtonStyles';
 
@@ -48,7 +48,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
       return null;
     }
 
-    return <Icon src={icon} className='mr-2' />;
+    return <Icon src={icon} className='mr-2 w-4 h-4' />;
   };
 
   const handleClick = React.useCallback((event) => {

app/soapbox/components/ui/icon/icon.tsx

@@ -9,7 +9,7 @@ interface IIcon {
 }
 
 const Icon = ({ src, alt, count, ...filteredProps }: IIcon): JSX.Element => (
-  <div className='relative'>
+  <div className='relative' data-testid='icon'>
     {count ? (
       <span className='absolute -top-2 -right-3 block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
         {count}