Browse Source

Update button tests

Adjust tests for icons.
master
TheoryOfNekomata 1 year ago
parent
commit
67e987648c
4 changed files with 48 additions and 11 deletions
  1. +23
    -0
      categories/web/action/react/src/components/ActionButton/ActionButton.test.tsx
  2. +1
    -0
      categories/web/action/react/src/components/ActionButton/index.tsx
  3. +23
    -11
      categories/web/navigation/react/src/components/LinkButton/LinkButton.test.tsx
  4. +1
    -0
      categories/web/navigation/react/src/components/LinkButton/index.tsx

+ 23
- 0
categories/web/action/react/src/components/ActionButton/ActionButton.test.tsx View File

@@ -93,6 +93,29 @@ describe('ActionButton', () => {
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`
size | className
${'small'} | ${'h-10'}


+ 1
- 0
categories/web/action/react/src/components/ActionButton/index.tsx View File

@@ -110,6 +110,7 @@ export const ActionButton = React.forwardRef<ActionButtonDerivedElement, ActionB
)}
>
<span
data-testid="childrenParent"
className={clsx(
'flex-auto min-w-0 flex items-center gap-2',
iconAfterChildren ? 'flex-row-reverse' : 'flex-row',


+ 23
- 11
categories/web/navigation/react/src/components/LinkButton/LinkButton.test.tsx View File

@@ -99,6 +99,29 @@ describe('LinkButton', () => {
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`
size | className
${'small'} | ${'h-10'}
@@ -179,17 +202,6 @@ describe('LinkButton', () => {
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', () => {
render(
<LinkButton


+ 1
- 0
categories/web/navigation/react/src/components/LinkButton/index.tsx View File

@@ -124,6 +124,7 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
style={style}
>
<span
data-testid="childrenParent"
className={clsx(
'flex-auto min-w-0 flex items-center gap-2',
iconAfterChildren ? 'flex-row-reverse' : 'flex-row',


Loading…
Cancel
Save