1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/components/component-library/button-icon/button-icon.test.js
Garrett Bear 03af17747b
Feat/15088/add button icon (#16277)
* 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>
2022-11-09 13:57:21 -08:00

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();
});
});