1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/component-library/banner-tip/banner-tip.test.js
Garrett Bear 2c2505be06
add banner-tip component (#17814)
* add banner-tip component

* set fixed width

* add banner tip props to logo

* fix logo type naming

* update test

* reduce png sizes

* upate type name and add image element test

* updates

* Update ui/components/component-library/banner-tip/banner-tip.js

Co-authored-by: George Marshall <george.marshall@consensys.net>

* update BannerTip

* fix text case banner tip

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>
2023-03-08 13:27:24 -08:00

106 lines
3.3 KiB
JavaScript

/* eslint-disable jest/require-top-level-describe */
import { render } from '@testing-library/react';
import React from 'react';
import { renderWithUserEvent } from '../../../../test/lib/render-helpers';
import { BannerTip, BannerTipLogoType } from '.';
describe('BannerTip', () => {
it('should render BannerTip element correctly', () => {
const { getByTestId, container } = render(
<BannerTip data-testid="bannerTip" title="BannerTip test">
should render BannerTip element correctly
</BannerTip>,
);
expect(getByTestId('bannerTip')).toHaveClass('mm-banner-tip');
expect(container).toMatchSnapshot();
});
it('should render with different logo types', () => {
const { getByTestId } = render(
<>
<BannerTip
logoType={BannerTipLogoType.Greeting}
logoProps={{ 'data-testid': 'banner-tip-greeting' }}
>
should render BannerTip element correctly
</BannerTip>
<BannerTip
logoType={BannerTipLogoType.Chat}
logoProps={{ 'data-testid': 'banner-tip-chat' }}
>
should render BannerTip element correctly
</BannerTip>
</>,
);
const imageElement = getByTestId('banner-tip-greeting');
expect(imageElement.tagName).toBe('IMG');
expect(getByTestId('banner-tip-greeting')).toHaveClass(
'mm-banner-tip--logo',
);
expect(getByTestId('banner-tip-chat')).toHaveClass('mm-banner-tip--logo');
});
it('should render with added classname', () => {
const { getByTestId } = render(
<BannerTip
className="mm-banner-tip--test"
data-testid="bannerTip"
title="BannerTip test"
>
should render BannerTip element correctly
</BannerTip>,
);
expect(getByTestId('bannerTip')).toHaveClass('mm-banner-tip--test');
});
it('should render BannerTip title', () => {
const { getByText } = render(<BannerTip title="BannerTip title test" />);
expect(getByText('BannerTip title test')).toHaveClass(
'mm-banner-base__title',
);
});
it('should render BannerTip description', () => {
const { getByText } = render(
<BannerTip description="BannerTip description test" />,
);
expect(getByText('BannerTip description test')).toBeDefined();
});
it('should render BannerTip action button', () => {
const { getByTestId } = render(
<BannerTip
title="Action prop demo"
actionButtonLabel="Action"
actionButtonProps={{
'data-testid': 'action',
className: 'mm-banner-base__action',
}}
actionButtonOnClick={() =>
console.log('ButtonLink actionButtonOnClick demo')
}
>
Use actionButtonLabel for action text, actionButtonOnClick for the
onClick handler, and actionButtonProps to pass any ButtonLink prop types
such as iconName
</BannerTip>,
);
expect(getByTestId('action')).toHaveClass('mm-banner-base__action');
});
it('should render and fire onClose event', async () => {
const onClose = jest.fn();
const { user, getByTestId } = renderWithUserEvent(
<BannerTip
title="onClose Test"
closeButtonProps={{ 'data-testid': 'close-button' }}
onClose={onClose}
/>,
);
await user.click(getByTestId('close-button'));
expect(onClose).toHaveBeenCalledTimes(1);
});
});