/* 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( , ); expect(getByTestId('avatar-base')).toBeDefined(); expect(container).toMatchSnapshot(); }); it('should render with different size classes', () => { const { getByTestId } = render( <> , ); 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( , ); expect(getByTestId('avatar-base')).toHaveClass('test-class'); }); // children it('should render children', () => { render( , ); 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( <> , ); 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( <> , ); 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( <> , ); expect(getByTestId(Color.successDefault)).toHaveClass( `box--border-color-${Color.successDefault}`, ); expect(getByTestId(Color.errorDefault)).toHaveClass( `box--border-color-${Color.errorDefault}`, ); }); });