diff --git a/app/soapbox/components/ui/button/__tests__/button.test.tsx b/app/soapbox/components/ui/button/__tests__/button.test.tsx index 0f2798491..ca1867cfe 100644 --- a/app/soapbox/components/ui/button/__tests__/button.test.tsx +++ b/app/soapbox/components/ui/button/__tests__/button.test.tsx @@ -11,6 +11,21 @@ describe('', () => { expect(screen.getByRole('button')).toHaveTextContent(text); }); + it('renders the children', () => { + render(); + + expect(screen.getByRole('button')).toHaveTextContent('children'); + }); + + it('renders the props.text instead of children', () => { + const text = 'foo'; + const children =
children
; + render(); + + 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(); @@ -33,21 +48,6 @@ describe('', () => { expect(screen.getByRole('button')).toBeDisabled(); }); - it('renders the children', () => { - render(); - - expect(screen.getByRole('button')).toHaveTextContent('children'); - }); - - it('renders the props.text instead of children', () => { - const text = 'foo'; - const children =children
; - render(); - - expect(screen.getByRole('button')).toHaveTextContent('foo'); - expect(screen.getByRole('button')).not.toHaveTextContent('children'); - }); - it('render full-width button if block prop given', () => { render(); @@ -59,4 +59,32 @@ describe('', () => { expect(screen.getByRole('button')).toHaveClass('bg-primary-100'); }); + + describe('to prop', () => { + it('renders a link', () => { + render(); + + expect(screen.getByRole('link')).toBeInTheDocument(); + }); + + it('does not render a link', () => { + render(); + + expect(screen.queryAllByRole('link')).toHaveLength(0); + }); + }); + + describe('icon prop', () => { + it('renders an icon', () => { + render(); + + expect(screen.getByTestId('icon')).toBeInTheDocument(); + }); + + it('does not render an icon', () => { + render(); + + expect(screen.queryAllByTestId('icon')).toHaveLength(0); + }); + }); }); diff --git a/app/soapbox/components/ui/button/button.tsx b/app/soapbox/components/ui/button/button.tsx index 5d0db28bf..c88d228f5 100644 --- a/app/soapbox/components/ui/button/button.tsx +++ b/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