Button: update unit test and add iconOnly test

Author: clairep94

client/common/Button.test.tsx

@@ -8,35 +8,75 @@ const MockIcon = (props: React.SVGProps<SVGSVGElement>) => (
 );
 
 describe('Button', () => {
-  it('renders children', () => {
-    render(<Button>Click Me</Button>);
-    expect(screen.getByText('Click Me')).toBeInTheDocument();
-  });
-
-  it('calls onClick handler when clicked', () => {
-    const handleClick = jest.fn();
-    render(<Button onClick={handleClick}>Click</Button>);
-    fireEvent.click(screen.getByText('Click'));
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
+  // Tag
   it('renders as an anchor when href is provided', () => {
     render(<Button href="https://example.com">Link</Button>);
     const anchor = screen.getByRole('link');
+    expect(anchor.tagName.toLowerCase()).toBe('a');
     expect(anchor).toHaveAttribute('href', 'https://example.com');
   });
 
-  it('renders as a React Router link when `to` is provided', () => {
+  it('renders as a React Router <Link> when `to` is provided', () => {
     render(<Button to="/dashboard">Go</Button>);
     const link = screen.getByRole('link');
+    expect(link.tagName.toLowerCase()).toBe('a'); // Link renders as <a>
     expect(link).toHaveAttribute('href', '/dashboard');
   });
 
-  it('renders with iconBefore', () => {
+  it('renders as a <button> by default', () => {
+    render(<Button>Click Me</Button>);
+    const el = screen.getByRole('button');
+    expect(el.tagName.toLowerCase()).toBe('button');
+  });
+
+  // Children & Icons
+  it('renders children', () => {
+    render(<Button>Click Me</Button>);
+    expect(screen.getByText('Click Me')).toBeInTheDocument();
+  });
+
+  it('renders an iconBefore and button text', () => {
+    render(
+      <Button iconBefore={<MockIcon aria-label="iconbefore" />}>
+        This has a before icon
+      </Button>
+    );
+    expect(screen.getByLabelText('iconbefore')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent(
+      'This has a before icon'
+    );
+  });
+
+  it('renders with iconAfter', () => {
     render(
-      <Button iconBefore={<MockIcon aria-label="github" />}>Create</Button>
+      <Button iconAfter={<MockIcon aria-label="iconafter" />}>
+        This has an after icon
+      </Button>
+    );
+    expect(screen.getByLabelText('iconafter')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent(
+      'This has an after icon'
     );
-    expect(screen.getByLabelText('github')).toBeInTheDocument();
+  });
+
+  it('renders only the icon if iconOnly', () => {
+    render(
+      <Button iconAfter={<MockIcon aria-label="iconafter" />} iconOnly>
+        This has an after icon
+      </Button>
+    );
+    expect(screen.getByLabelText('iconafter')).toBeInTheDocument();
+    expect(screen.getByRole('button')).not.toHaveTextContent(
+      'This has an after icon'
+    );
+  });
+
+  // HTML attributes
+  it('calls onClick handler when clicked', () => {
+    const handleClick = jest.fn();
+    render(<Button onClick={handleClick}>Click</Button>);
+    fireEvent.click(screen.getByText('Click'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
   });
 
   it('renders disabled state', () => {

client/common/Button.tsx

@@ -201,7 +201,7 @@ const Button = ({
   const content = (
     <>
       {iconBefore}
-      {hasChildren && <span>{children}</span>}
+      {hasChildren && !iconOnly && <span>{children}</span>}
       {iconAfter}
     </>
   );