@@ -93,6 +93,29 @@ describe('ActionButton', () => { | |||||
expect(button).toHaveClass('pl-2 gap-2 pr-2'); | expect(button).toHaveClass('pl-2 gap-2 pr-2'); | ||||
}); | }); | ||||
it('renders an icon', () => { | |||||
render( | |||||
<ActionButton | |||||
icon={<span />} | |||||
/>, | |||||
); | |||||
const icon = screen.getByTestId('icon'); | |||||
expect(icon).toBeInTheDocument(); | |||||
}); | |||||
it('renders icon after children', () => { | |||||
render( | |||||
<ActionButton | |||||
iconAfterChildren | |||||
icon={<div />} | |||||
/>, | |||||
); | |||||
const childrenParent = screen.getByTestId('childrenParent'); | |||||
expect(childrenParent).toHaveClass('flex-row-reverse'); | |||||
}); | |||||
describe.each` | describe.each` | ||||
size | className | size | className | ||||
${'small'} | ${'h-10'} | ${'small'} | ${'h-10'} | ||||
@@ -110,6 +110,7 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB | |||||
)} | )} | ||||
> | > | ||||
<span | <span | ||||
data-testid="childrenParent" | |||||
className={clsx( | className={clsx( | ||||
'flex-auto min-w-0 flex items-center gap-2', | 'flex-auto min-w-0 flex items-center gap-2', | ||||
iconAfterChildren ? 'flex-row-reverse' : 'flex-row', | iconAfterChildren ? 'flex-row-reverse' : 'flex-row', | ||||
@@ -99,6 +99,29 @@ describe('LinkButton', () => { | |||||
expect(button).toHaveClass('pl-2 gap-2 pr-2'); | expect(button).toHaveClass('pl-2 gap-2 pr-2'); | ||||
}); | }); | ||||
it('renders an icon', () => { | |||||
render( | |||||
<LinkButton | |||||
icon={<div />} | |||||
/>, | |||||
); | |||||
const icon = screen.getByTestId('icon'); | |||||
expect(icon).toBeInTheDocument(); | |||||
}); | |||||
it('renders icon after children', () => { | |||||
render( | |||||
<LinkButton | |||||
iconAfterChildren | |||||
icon={<span />} | |||||
/>, | |||||
); | |||||
const childrenParent = screen.getByTestId('childrenParent'); | |||||
expect(childrenParent).toHaveClass('flex-row-reverse'); | |||||
}); | |||||
describe.each` | describe.each` | ||||
size | className | size | className | ||||
${'small'} | ${'h-10'} | ${'small'} | ${'h-10'} | ||||
@@ -179,17 +202,6 @@ describe('LinkButton', () => { | |||||
expect(children).toHaveTextContent('Foo'); | expect(children).toHaveTextContent('Foo'); | ||||
}); | }); | ||||
it.each(Button.AVAILABLE_TYPES)('renders a link with type %s', (buttonType) => { | |||||
render( | |||||
<LinkButton | |||||
href="#" | |||||
type={buttonType} | |||||
/>, | |||||
); | |||||
const button = screen.getByRole('link'); | |||||
expect(button).toHaveProperty('type', buttonType); | |||||
}); | |||||
it('renders a disabled link', () => { | it('renders a disabled link', () => { | ||||
render( | render( | ||||
<LinkButton | <LinkButton | ||||
@@ -124,6 +124,7 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP | |||||
style={style} | style={style} | ||||
> | > | ||||
<span | <span | ||||
data-testid="childrenParent" | |||||
className={clsx( | className={clsx( | ||||
'flex-auto min-w-0 flex items-center gap-2', | 'flex-auto min-w-0 flex items-center gap-2', | ||||
iconAfterChildren ? 'flex-row-reverse' : 'flex-row', | iconAfterChildren ? 'flex-row-reverse' : 'flex-row', | ||||