|
| 1 | +import React from 'react'; |
| 2 | +import { render, screen, fireEvent } from '../test-utils'; |
| 3 | +import { Button } from './Button'; |
| 4 | + |
| 5 | +const MockIcon = (props: React.SVGProps<SVGSVGElement>) => ( |
| 6 | + <svg data-testid="mock-icon" {...props} /> |
| 7 | +); |
| 8 | + |
| 9 | +describe('Button', () => { |
| 10 | + // Tag |
| 11 | + it('renders as an anchor when href is provided', () => { |
| 12 | + render(<Button href="https://example.com">Link</Button>); |
| 13 | + const anchor = screen.getByRole('link'); |
| 14 | + expect(anchor.tagName.toLowerCase()).toBe('a'); |
| 15 | + expect(anchor).toHaveAttribute('href', 'https://example.com'); |
| 16 | + }); |
| 17 | + |
| 18 | + it('renders as a React Router <Link> when `to` is provided', () => { |
| 19 | + render(<Button to="/dashboard">Go</Button>); |
| 20 | + const link = screen.getByRole('link'); |
| 21 | + expect(link.tagName.toLowerCase()).toBe('a'); // Link renders as <a> |
| 22 | + expect(link).toHaveAttribute('href', '/dashboard'); |
| 23 | + }); |
| 24 | + |
| 25 | + it('renders as a <button> with a type of "button" by default', () => { |
| 26 | + render(<Button>Click Me</Button>); |
| 27 | + const el = screen.getByRole('button'); |
| 28 | + expect(el.tagName.toLowerCase()).toBe('button'); |
| 29 | + expect(el).toHaveAttribute('type', 'button'); |
| 30 | + }); |
| 31 | + |
| 32 | + // Children & Icons |
| 33 | + it('renders children', () => { |
| 34 | + render(<Button>Click Me</Button>); |
| 35 | + expect(screen.getByText('Click Me')).toBeInTheDocument(); |
| 36 | + }); |
| 37 | + |
| 38 | + it('renders an iconBefore and button text', () => { |
| 39 | + render( |
| 40 | + <Button iconBefore={<MockIcon aria-label="iconbefore" />}> |
| 41 | + This has a before icon |
| 42 | + </Button> |
| 43 | + ); |
| 44 | + expect(screen.getByLabelText('iconbefore')).toBeInTheDocument(); |
| 45 | + expect(screen.getByRole('button')).toHaveTextContent( |
| 46 | + 'This has a before icon' |
| 47 | + ); |
| 48 | + }); |
| 49 | + |
| 50 | + it('renders with iconAfter', () => { |
| 51 | + render( |
| 52 | + <Button iconAfter={<MockIcon aria-label="iconafter" />}> |
| 53 | + This has an after icon |
| 54 | + </Button> |
| 55 | + ); |
| 56 | + expect(screen.getByLabelText('iconafter')).toBeInTheDocument(); |
| 57 | + expect(screen.getByRole('button')).toHaveTextContent( |
| 58 | + 'This has an after icon' |
| 59 | + ); |
| 60 | + }); |
| 61 | + |
| 62 | + it('renders only the icon if iconOnly', () => { |
| 63 | + render( |
| 64 | + <Button iconAfter={<MockIcon aria-label="iconafter" />} iconOnly> |
| 65 | + This has an after icon |
| 66 | + </Button> |
| 67 | + ); |
| 68 | + expect(screen.getByLabelText('iconafter')).toBeInTheDocument(); |
| 69 | + expect(screen.getByRole('button')).not.toHaveTextContent( |
| 70 | + 'This has an after icon' |
| 71 | + ); |
| 72 | + }); |
| 73 | + |
| 74 | + // HTML attributes |
| 75 | + it('calls onClick handler when clicked', () => { |
| 76 | + const handleClick = jest.fn(); |
| 77 | + render(<Button onClick={handleClick}>Click</Button>); |
| 78 | + fireEvent.click(screen.getByText('Click')); |
| 79 | + expect(handleClick).toHaveBeenCalledTimes(1); |
| 80 | + }); |
| 81 | + |
| 82 | + it('renders disabled state', () => { |
| 83 | + render(<Button disabled>Disabled</Button>); |
| 84 | + expect(screen.getByRole('button')).toBeDisabled(); |
| 85 | + }); |
| 86 | + |
| 87 | + it('uses aria-label when provided', () => { |
| 88 | + render(<Button aria-label="Upload" iconOnly />); |
| 89 | + expect(screen.getByLabelText('Upload')).toBeInTheDocument(); |
| 90 | + }); |
| 91 | +}); |
0 commit comments