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/avatar-base/avatar-base.test.js
Garrett Bear 79b2deb194
update text component color to use box color (#18246)
snapshot updates

fix snapshots

add background colors

fix snapshots
2023-03-23 13:00:37 -07:00

125 lines
3.9 KiB
JavaScript

/* eslint-disable jest/require-top-level-describe */
import { render, screen } from '@testing-library/react';
import React from 'react';
import { Color, TextColor } from '../../../helpers/constants/design-system';
import { AvatarBase } from './avatar-base';
describe('AvatarBase', () => {
it('should render correctly', () => {
const { getByTestId, container } = render(
<AvatarBase data-testid="avatar-base" />,
);
expect(getByTestId('avatar-base')).toBeDefined();
expect(container).toMatchSnapshot();
});
it('should render with different size classes', () => {
const { getByTestId } = render(
<>
<AvatarBase size="xs" data-testid="avatar-base-xs" />
<AvatarBase size="sm" data-testid="avatar-base-sm" />
<AvatarBase size="md" data-testid="avatar-base-md" />
<AvatarBase size="lg" data-testid="avatar-base-lg" />
<AvatarBase size="xl" data-testid="avatar-base-xl" />
</>,
);
expect(getByTestId('avatar-base-xs')).toHaveClass(
'mm-avatar-base--size-xs mm-text--body-xs',
);
expect(getByTestId('avatar-base-sm')).toHaveClass(
'mm-avatar-base--size-sm mm-text--body-sm',
);
expect(getByTestId('avatar-base-md')).toHaveClass(
'mm-avatar-base--size-md mm-text--body-sm',
);
expect(getByTestId('avatar-base-lg')).toHaveClass(
'mm-avatar-base--size-lg mm-text--body-lg-medium',
);
expect(getByTestId('avatar-base-xl')).toHaveClass(
'mm-avatar-base--size-xl mm-text--body-lg-medium',
);
});
// className
it('should render with custom className', () => {
const { getByTestId } = render(
<AvatarBase data-testid="avatar-base" className="test-class" />,
);
expect(getByTestId('avatar-base')).toHaveClass('test-class');
});
// children
it('should render children', () => {
render(
<AvatarBase data-testid="avatar-base">
<img width="100%" src="./images/arbitrum.svg" />
</AvatarBase>,
);
const image = screen.getByRole('img');
expect(image).toBeDefined();
expect(image).toHaveAttribute('src', './images/arbitrum.svg');
});
// color
it('should render with different colors', () => {
const { getByTestId } = render(
<>
<AvatarBase
color={TextColor.successDefault}
data-testid={TextColor.successDefault}
/>
<AvatarBase
color={TextColor.errorDefault}
data-testid={TextColor.errorDefault}
/>
</>,
);
expect(getByTestId(TextColor.successDefault)).toHaveClass(
`box--color-${TextColor.successDefault}`,
);
expect(getByTestId(TextColor.errorDefault)).toHaveClass(
`box--color-${TextColor.errorDefault}`,
);
});
// background color
it('should render with different background colors', () => {
const { getByTestId } = render(
<>
<AvatarBase
backgroundColor={TextColor.successDefault}
data-testid={Color.successDefault}
/>
<AvatarBase
backgroundColor={TextColor.errorDefault}
data-testid={Color.errorDefault}
/>
</>,
);
expect(getByTestId(Color.successDefault)).toHaveClass(
`box--background-color-${Color.successDefault}`,
);
expect(getByTestId(Color.errorDefault)).toHaveClass(
`box--background-color-${Color.errorDefault}`,
);
});
// border color
it('should render with different border colors', () => {
const { getByTestId } = render(
<>
<AvatarBase
borderColor={Color.successDefault}
data-testid={Color.successDefault}
/>
<AvatarBase
borderColor={Color.errorDefault}
data-testid={Color.errorDefault}
/>
</>,
);
expect(getByTestId(Color.successDefault)).toHaveClass(
`box--border-color-${Color.successDefault}`,
);
expect(getByTestId(Color.errorDefault)).toHaveClass(
`box--border-color-${Color.errorDefault}`,
);
});
});