saagie-ui/src/react/core/atoms/avatar/Avatar.test.js

Saagie UI from Saagie Design System

import React from 'react';
import { render as trender, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { axe } from 'jest-axe';
import { Avatar } from './Avatar';

function render(props) {
  return trender(<Avatar {...props} />);
}

afterEach(cleanup);

describe('Avatar', () => {
  test('should be well formed', async () => {
    const { container } = render({});
    expect(await axe(container)).toHaveNoViolations();
  });

  test('should by default display user icon', async () => {
    const { getByTestId } = render({});

    const avatar = getByTestId('sui-a-avatar');
    expect(avatar).toHaveClass('sui-a-avatar');
    const avatarIcon = getByTestId('sui-a-avatar__icon');
    expect(avatarIcon).toHaveClass('sui-a-icon');
    expect(avatarIcon).toHaveClass('as--user');
  });

  test('should display security icon', async () => {
    const { getByTestId } = render({
      iconName: 'security',
    });

    const avatar = getByTestId('sui-a-avatar');
    expect(avatar).toHaveClass('sui-a-avatar');
    const avatarIcon = getByTestId('sui-a-avatar__icon');
    expect(avatarIcon).toHaveClass('sui-a-icon');
    expect(avatarIcon).toHaveClass('as--security');
  });

  test('should display 1 initial letter', async () => {
    const { getByTestId } = render({
      name: 'This',
    });

    const avatar = getByTestId('sui-a-avatar');
    expect(avatar).toHaveClass('sui-a-avatar');
    expect(avatar).toHaveAttribute('title', 'This');
    expect(avatar).toContainHTML('<span>T</span>');
  });

  test('should display 2 initial letter', async () => {
    const { getByTestId } = render({
      name: 'This is',
    });

    const avatar = getByTestId('sui-a-avatar');
    expect(avatar).toHaveClass('sui-a-avatar');
    expect(avatar).toHaveAttribute('title', 'This is');
    expect(avatar).toContainHTML('<span>Ti</span>');
  });

  test('should display 3 initial letter', async () => {
    const { getByTestId } = render({
      name: 'This is a',
    });

    const avatar = getByTestId('sui-a-avatar');
    expect(avatar).toHaveClass('sui-a-avatar');
    expect(avatar).toHaveAttribute('title', 'This is a');
    expect(avatar).toContainHTML('<span>Tia</span>');
  });

  test('should display max 3 initial letter', async () => {
    const { getByTestId } = render({
      name: 'This is a Test',
    });

    const avatar = getByTestId('sui-a-avatar');
    expect(avatar).toHaveClass('sui-a-avatar');
    expect(avatar).toHaveAttribute('title', 'This is a Test');
    expect(avatar).toContainHTML('<span>Tia</span>');
  });

  test('should display image', async () => {
    const { getByTestId } = render({
      src: 'https://example.org/example.jpg',
      name: 'Example Alternative',
    });

    const avatar = getByTestId('sui-a-avatar');
    expect(avatar).toHaveClass('sui-a-avatar');
    expect(avatar).toHaveAttribute('title', 'Example Alternative');
    const avatarImage = getByTestId('sui-a-avatar__image');
    expect(avatarImage).toHaveAttribute('src', 'https://example.org/example.jpg');
    expect(avatarImage).toHaveAttribute('alt', 'Example Alternative');
  });

  test('should by default when group display users icon', async () => {
    const { getByTestId } = render({
      isGroup: true,
    });

    const avatar = getByTestId('sui-a-avatar');
    expect(avatar).toHaveClass('sui-a-avatar');
    const avatarIcon = getByTestId('sui-a-avatar__icon');
    expect(avatarIcon).toHaveClass('sui-a-icon');
    expect(avatarIcon).toHaveClass('as--users');
  });
});