You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.6 KiB
91 lines
2.6 KiB
2 years ago
|
/* 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',
|
||
|
);
|
||
|
});
|
||
|
});
|