mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 15:35:46 +01:00
0fe3633e4d
* 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
91 lines
2.6 KiB
JavaScript
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',
|
|
);
|
|
});
|
|
});
|