mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 07:24:56 +01:00
03af17747b
* 15088: add button icon * button icon story updates * add primary type * update button icon docs * add test * button icon updates * button icon and test updates * button icon border radius and test update * remove padding prop * button icon updates * Update ui/components/component-library/button-icon/button-icon.stories.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/button-icon/button-icon.stories.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/component-library/button-icon/button-icon.stories.js Co-authored-by: George Marshall <george.marshall@consensys.net> * add aria label for storybook demo Co-authored-by: George Marshall <george.marshall@consensys.net>
147 lines
4.1 KiB
JavaScript
147 lines
4.1 KiB
JavaScript
/* eslint-disable jest/require-top-level-describe */
|
|
import { render } from '@testing-library/react';
|
|
import React from 'react';
|
|
import { COLORS } from '../../../helpers/constants/design-system';
|
|
import { BUTTON_ICON_SIZES } from './button-icon.constants';
|
|
import { ButtonIcon } from './button-icon';
|
|
|
|
describe('ButtonIcon', () => {
|
|
it('should render button element correctly', () => {
|
|
const { getByTestId, container } = render(
|
|
<ButtonIcon
|
|
data-testid="button-icon"
|
|
icon="add-square-filled"
|
|
ariaLabel="add"
|
|
/>,
|
|
);
|
|
expect(container.querySelector('button')).toBeDefined();
|
|
expect(getByTestId('button-icon')).toHaveClass('mm-button-icon');
|
|
expect(container).toMatchSnapshot();
|
|
});
|
|
|
|
it('should render anchor element correctly', () => {
|
|
const { getByTestId, container } = render(
|
|
<ButtonIcon
|
|
as="a"
|
|
data-testid="button-icon"
|
|
icon="add-square-filled"
|
|
ariaLabel="add"
|
|
/>,
|
|
);
|
|
expect(getByTestId('button-icon')).toHaveClass('mm-button-icon');
|
|
const anchor = container.getElementsByTagName('a').length;
|
|
expect(anchor).toBe(1);
|
|
});
|
|
|
|
it('should render anchor element correctly using href', () => {
|
|
const { getByTestId, getByRole } = render(
|
|
<ButtonIcon
|
|
href="/metamask"
|
|
data-testid="button-icon"
|
|
icon="add-square-filled"
|
|
ariaLabel="add"
|
|
/>,
|
|
);
|
|
expect(getByTestId('button-icon')).toHaveClass('mm-button-icon');
|
|
expect(getByRole('link')).toBeDefined();
|
|
});
|
|
|
|
it('should render with different size classes', () => {
|
|
const { getByTestId } = render(
|
|
<>
|
|
<ButtonIcon
|
|
icon="add-square-filled"
|
|
ariaLabel="add"
|
|
size={BUTTON_ICON_SIZES.SM}
|
|
data-testid={BUTTON_ICON_SIZES.SM}
|
|
/>
|
|
<ButtonIcon
|
|
icon="add-square-filled"
|
|
ariaLabel="add"
|
|
size={BUTTON_ICON_SIZES.LG}
|
|
data-testid={BUTTON_ICON_SIZES.LG}
|
|
/>
|
|
</>,
|
|
);
|
|
expect(getByTestId(BUTTON_ICON_SIZES.SM)).toHaveClass(
|
|
`mm-button-icon--size-${BUTTON_ICON_SIZES.SM}`,
|
|
);
|
|
expect(getByTestId(BUTTON_ICON_SIZES.LG)).toHaveClass(
|
|
`mm-button-icon--size-${BUTTON_ICON_SIZES.LG}`,
|
|
);
|
|
});
|
|
|
|
it('should render with different colors', () => {
|
|
const { getByTestId } = render(
|
|
<>
|
|
<ButtonIcon
|
|
icon="add-square-filled"
|
|
ariaLabel="add"
|
|
color={COLORS.ICON_DEFAULT}
|
|
data-testid={COLORS.ICON_DEFAULT}
|
|
/>
|
|
<ButtonIcon
|
|
icon="add-square-filled"
|
|
ariaLabel="add"
|
|
color={COLORS.ERROR_DEFAULT}
|
|
data-testid={COLORS.ERROR_DEFAULT}
|
|
/>
|
|
</>,
|
|
);
|
|
expect(getByTestId(COLORS.ICON_DEFAULT)).toHaveClass(
|
|
`box--color-${COLORS.ICON_DEFAULT}`,
|
|
);
|
|
expect(getByTestId(COLORS.ERROR_DEFAULT)).toHaveClass(
|
|
`box--color-${COLORS.ERROR_DEFAULT}`,
|
|
);
|
|
});
|
|
|
|
it('should render with added classname', () => {
|
|
const { getByTestId } = render(
|
|
<ButtonIcon
|
|
data-testid="classname"
|
|
className="mm-button-icon--test"
|
|
icon="add-square-filled"
|
|
ariaLabel="add"
|
|
/>,
|
|
);
|
|
expect(getByTestId('classname')).toHaveClass('mm-button-icon--test');
|
|
});
|
|
|
|
it('should render with different button states', () => {
|
|
const { getByTestId } = render(
|
|
<>
|
|
<ButtonIcon
|
|
disabled
|
|
data-testid="disabled"
|
|
icon="add-square-filled"
|
|
ariaLabel="add"
|
|
/>
|
|
</>,
|
|
);
|
|
|
|
expect(getByTestId('disabled')).toHaveClass(`mm-button-icon--disabled`);
|
|
expect(getByTestId('disabled')).toBeDisabled();
|
|
});
|
|
it('should render with icon', () => {
|
|
const { getByTestId } = render(
|
|
<ButtonIcon
|
|
data-testid="icon"
|
|
icon="add-square-filled"
|
|
ariaLabel="add"
|
|
iconProps={{ 'data-testid': 'button-icon' }}
|
|
/>,
|
|
);
|
|
|
|
expect(getByTestId('button-icon')).toBeDefined();
|
|
});
|
|
|
|
it('should render with aria-label', () => {
|
|
const { getByLabelText } = render(
|
|
<ButtonIcon icon="add-square-filled" ariaLabel="add" />,
|
|
);
|
|
|
|
expect(getByLabelText('add')).toBeDefined();
|
|
});
|
|
});
|