1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/component-library/avatar-with-badge/avatar-with-badge.test.js
Nidhi Kumari 0fe3633e4d
Added AvatarBadge component (#15676)
* avatar badge component added

* resolved conflicts

* added badge prop

* updated avatar badge children/badge props

* updated badge token size to be 16px

* added AvatarBadge Test component

* added avatar badge test

* updated avatarBadge props

* added Readme and test files to AvatarWithBadge Component

* resolved conflicts

* removed unused change

* updated badge and badge props

* updated avatar badge stories

* updated constants for avatar badge

* updated avatar badge test

* replaced avatar-badge with avatar-with-badge

* updated avatar badge tests

* updated test for badgeProps
2022-10-12 23:49:12 +05:30

91 lines
2.6 KiB
JavaScript

/* eslint-disable jest/require-top-level-describe */
import { render } from '@testing-library/react';
import React from 'react';
import { AvatarNetwork } from '../avatar-network/avatar-network';
import { COLORS } from '../../../helpers/constants/design-system';
import { AvatarWithBadge } from './avatar-with-badge';
import { BADGE_POSITIONS } from './avatar-with-badge.constants';
describe('AvatarWithBadge', () => {
it('should render correctly', () => {
const { getByTestId } = render(
<AvatarWithBadge
badgePosition={BADGE_POSITIONS.BOTTOM}
data-testid="avatar-with-badge"
badge={
<AvatarNetwork
networkName="Arbitrum One"
networkImageUrl="./images/arbitrum.svg"
data-testid="badge"
/>
}
/>,
);
expect(getByTestId('avatar-with-badge')).toBeDefined();
expect(getByTestId('badge')).toBeDefined();
});
it('should render badge network with bottom right position correctly', () => {
const { container } = render(
<AvatarWithBadge
data-testid="avatar-with-badge"
badgePosition={BADGE_POSITIONS.BOTTOM}
badge={
<AvatarNetwork
networkName="Arbitrum One"
networkImageUrl="./images/arbitrum.svg"
data-testid="badge"
/>
}
/>,
);
expect(
container.getElementsByClassName(
'avatar-with-badge__badge-wrapper--position-bottom',
),
).toHaveLength(1);
});
it('should render badge network with top right position correctly', () => {
const { container } = render(
<AvatarWithBadge
data-testid="avatar-with-badge"
badgePosition={BADGE_POSITIONS.TOP}
badge={
<AvatarNetwork
networkName="Arbitrum One"
networkImageUrl="./images/arbitrum.svg"
data-testid="badge"
/>
}
/>,
);
expect(
container.getElementsByClassName(
'avatar-with-badge__badge-wrapper--position-top',
),
).toHaveLength(1);
});
it('should render badge network with badgeWrapperProps', () => {
const container = (
<AvatarWithBadge
data-testid="avatar-with-badge"
badgePosition={BADGE_POSITIONS.TOP}
badgeWrapperProps={{ borderColor: COLORS.ERROR_DEFAULT }}
badge={
<AvatarNetwork
networkName="Arbitrum One"
networkImageUrl="./images/arbitrum.svg"
data-testid="badge"
/>
}
/>
);
expect(container.props.badgeWrapperProps.borderColor).toStrictEqual(
'error-default',
);
});
});