mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
139 lines
4.6 KiB
JavaScript
139 lines
4.6 KiB
JavaScript
/* eslint-disable jest/require-top-level-describe */
|
|
import { render } from '@testing-library/react';
|
|
import React from 'react';
|
|
import { IconName } from '..';
|
|
import { BUTTON_BASE_SIZES } from './button-base.constants';
|
|
import { ButtonBase } from './button-base';
|
|
|
|
describe('ButtonBase', () => {
|
|
it('should render button element correctly and match snapshot', () => {
|
|
const { getByTestId, getByText, container } = render(
|
|
<ButtonBase data-testid="button-base">Button base</ButtonBase>,
|
|
);
|
|
expect(getByText('Button base')).toBeDefined();
|
|
expect(container.querySelector('button')).toBeDefined();
|
|
expect(getByTestId('button-base')).toHaveClass('mm-button-base');
|
|
expect(container).toMatchSnapshot();
|
|
});
|
|
|
|
it('should render anchor element correctly', () => {
|
|
const { getByTestId, container } = render(
|
|
<ButtonBase as="a" data-testid="button-base" />,
|
|
);
|
|
expect(getByTestId('button-base')).toHaveClass('mm-button-base');
|
|
const anchor = container.getElementsByTagName('a').length;
|
|
expect(anchor).toBe(1);
|
|
});
|
|
|
|
it('should render anchor element correctly by href only being passed and href exists', () => {
|
|
const { getByTestId, container } = render(
|
|
<ButtonBase href="/metamask" data-testid="button-base">
|
|
Button Base
|
|
</ButtonBase>,
|
|
);
|
|
expect(getByTestId('button-base')).toHaveClass('mm-button-base');
|
|
expect(getByTestId('button-base')).toHaveAttribute('href', '/metamask');
|
|
const anchor = container.getElementsByTagName('a').length;
|
|
expect(anchor).toBe(1);
|
|
});
|
|
|
|
it('should render anchor element correctly by href and externalLink, href target and rel exist', () => {
|
|
const { getByTestId, container } = render(
|
|
<ButtonBase
|
|
href="https://www.test.com/"
|
|
externalLink
|
|
data-testid="button-base"
|
|
>
|
|
Button Base
|
|
</ButtonBase>,
|
|
);
|
|
expect(getByTestId('button-base')).toHaveClass('mm-button-base');
|
|
expect(getByTestId('button-base')).toHaveAttribute(
|
|
'href',
|
|
'https://www.test.com/',
|
|
'target',
|
|
'_blank',
|
|
'rel',
|
|
'noopener noreferrer',
|
|
);
|
|
expect(getByTestId('button-base')).toHaveAttribute(
|
|
'target',
|
|
'_blank',
|
|
'rel',
|
|
'noopener noreferrer',
|
|
);
|
|
expect(getByTestId('button-base')).toHaveAttribute(
|
|
'rel',
|
|
'noopener noreferrer',
|
|
);
|
|
const anchor = container.getElementsByTagName('a').length;
|
|
expect(anchor).toBe(1);
|
|
expect(container).toMatchSnapshot();
|
|
});
|
|
|
|
it('should render button as block', () => {
|
|
const { getByTestId } = render(<ButtonBase block data-testid="block" />);
|
|
expect(getByTestId('block')).toHaveClass(`mm-button-base--block`);
|
|
});
|
|
|
|
it('should render with different size classes', () => {
|
|
const { getByTestId } = render(
|
|
<>
|
|
<ButtonBase
|
|
size={BUTTON_BASE_SIZES.SM}
|
|
data-testid={BUTTON_BASE_SIZES.SM}
|
|
/>
|
|
<ButtonBase
|
|
size={BUTTON_BASE_SIZES.MD}
|
|
data-testid={BUTTON_BASE_SIZES.MD}
|
|
/>
|
|
<ButtonBase
|
|
size={BUTTON_BASE_SIZES.LG}
|
|
data-testid={BUTTON_BASE_SIZES.LG}
|
|
/>
|
|
</>,
|
|
);
|
|
expect(getByTestId(BUTTON_BASE_SIZES.SM)).toHaveClass(
|
|
`mm-button-base--size-${BUTTON_BASE_SIZES.SM}`,
|
|
);
|
|
expect(getByTestId(BUTTON_BASE_SIZES.MD)).toHaveClass(
|
|
`mm-button-base--size-${BUTTON_BASE_SIZES.MD}`,
|
|
);
|
|
expect(getByTestId(BUTTON_BASE_SIZES.LG)).toHaveClass(
|
|
`mm-button-base--size-${BUTTON_BASE_SIZES.LG}`,
|
|
);
|
|
});
|
|
|
|
it('should render with added classname', () => {
|
|
const { getByTestId } = render(
|
|
<ButtonBase data-testid="classname" className="mm-button-base--test" />,
|
|
);
|
|
expect(getByTestId('classname')).toHaveClass('mm-button-base--test');
|
|
});
|
|
|
|
it('should render with different button states', () => {
|
|
const { getByTestId } = render(
|
|
<>
|
|
<ButtonBase loading data-testid="loading" />
|
|
<ButtonBase disabled data-testid="disabled" />
|
|
</>,
|
|
);
|
|
expect(getByTestId('loading')).toHaveClass(`mm-button-base--loading`);
|
|
expect(getByTestId('disabled')).toHaveClass(`mm-button-base--disabled`);
|
|
});
|
|
it('should render with icon', () => {
|
|
const { getByTestId } = render(
|
|
<ButtonBase
|
|
data-testid="icon"
|
|
startIconName={IconName.AddSquare}
|
|
startIconProps={{ 'data-testid': 'start-button-icon' }}
|
|
endIconName={IconName.AddSquare}
|
|
endIconProps={{ 'data-testid': 'end-button-icon' }}
|
|
/>,
|
|
);
|
|
|
|
expect(getByTestId('start-button-icon')).toBeDefined();
|
|
expect(getByTestId('end-button-icon')).toBeDefined();
|
|
});
|
|
});
|