@eureca/eureca-ui/src/components/Avatar/__tests__/avatar.test.js

UI component library of Eureca's user and admin apps

import React from 'react';
import { render } from '@testing-library/react';

import { Avatar } from '..';

const customSize = 152;
const customColor = '#f00';
const customSrc =
  'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS02uVBnVcDeHRC4ucQNHvOEWVgKDN_VRJDtQpzsivg54ri30ty';

function renderAvatar({ src, color, size }) {
  return render(
    <Avatar name="avatar-name" src={src} color={color} size={size} data-testid="avatar-testid" />
  );
}

describe('Avatar component', () => {
  it('renders with default border and placeholder', async () => {
    const { getByTestId, getByAltText } = renderAvatar({});
    const avatar = getByTestId('avatar-testid');
    const { borderColor } = window.getComputedStyle(avatar);
    const avatar_src = getByAltText('avatar-name avatar').getAttribute('src');

    expect(avatar).not.toBeNull();
    expect(avatar_src).toBe('avatar_placeholder.svg');
    expect(borderColor).toBe('transparent');
  });

  it('renders a custom src', async () => {
    const { getByAltText } = renderAvatar({ src: customSrc });
    const avatar = getByAltText('avatar-name avatar');
    const avatar_src = avatar.getAttribute('src');
    expect(avatar_src).toBe(customSrc);
  });

  it('renders a custom size', async () => {
    const { getByTestId } = renderAvatar({ size: customSize });
    const avatar = getByTestId('avatar-testid');
    const { width, height } = window.getComputedStyle(avatar);
    expect(width).toBe(`${customSize}px`);
    expect(height).toBe(`${customSize}px`);
  });

  it('renders a custom border color', async () => {
    const { getByTestId } = renderAvatar({ color: customColor });
    const avatar = getByTestId('avatar-testid');
    const { borderColor } = window.getComputedStyle(avatar);
    expect(borderColor).toBe(customColor);
  });
});