saagie-ui/src/react/core/molecules/avatarStack/AvatarStack.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 { AvatarStack } from './AvatarStack';
import { Avatar } from '../../../core';

function render({ children = <Avatar />, ...props }) {
  return trender(<AvatarStack {...props}>{children}</AvatarStack>);
}

afterEach(cleanup);

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

  test('should have one avatar', async () => {
    const { getAllByTestId } = render({});

    const avatar = getAllByTestId('sui-a-avatar');
    expect(avatar).toHaveLength(1);
  });

  test('should have two avatars', async () => {
    const { getAllByTestId } = trender(
      <AvatarStack>
        <Avatar />
        <Avatar />
      </AvatarStack>
    );

    const avatar = getAllByTestId('sui-a-avatar');
    expect(avatar).toHaveLength(2);
  });

  test('should have three avatars', async () => {
    const { getAllByTestId } = trender(
      <AvatarStack>
        <Avatar />
        <Avatar />
        <Avatar />
      </AvatarStack>
    );

    const avatar = getAllByTestId('sui-a-avatar');
    expect(avatar).toHaveLength(3);
  });

  test('should have three avatars although it has 4 elements', async () => {
    const { getAllByTestId } = trender(
      <AvatarStack>
        <Avatar />
        <Avatar />
        <Avatar />
        <Avatar />
      </AvatarStack>
    );

    const avatar = getAllByTestId('sui-a-avatar');
    expect(avatar).toHaveLength(3);
  });

  test('should have three avatars and the third contains a plus value to 3 as there is 5 users', async () => {
    const { getAllByTestId } = trender(
      <AvatarStack>
        <Avatar />
        <Avatar />
        <Avatar />
        <Avatar />
        <Avatar />
      </AvatarStack>
    );

    const avatar = getAllByTestId('sui-a-avatar');
    expect(avatar).toHaveLength(3);
    expect(avatar[2]).toContainHTML('<span>+3</span>');
  });
});