import { cleanup } from '@testing-library/react';
import { render } from '../../utils/theme-render-wrapper';

import { ASSETS_URL } from '../../consts/common';
import { TableTextGroup } from './table-text-group';

afterEach(cleanup);

describe('<TableTextGroup />', () => {
  it('Should render successfully', () => {
    const { baseElement } = render(<TableTextGroup title="" />);
    expect(baseElement).toBeTruthy();
  });

  it(`Should render date and time`, () => {
    const { baseElement } = render(<TableTextGroup title="Dec 18, 2018" subtitle="6:40AM" />);
    expect(baseElement).toBeTruthy();
  });

  it(`Should render user initials`, () => {
    const { baseElement } = render(
      <TableTextGroup
        title="Name Surname"
        subtitle="Subtitle"
        avatarProps={{
          backgroundColor: '#6BB9D7',
          initials: 'NS',
          size: 'small'
        }}
      />
    );
    expect(baseElement).toBeTruthy();
  });

  it(`Should render not verified`, () => {
    const { baseElement } = render(
      <TableTextGroup
        title="Name Surname"
        subtitle="Subtitle"
        avatarProps={{
          emailVerified: false,
          size: 'small'
        }}
      />
    );
    expect(baseElement).toBeTruthy();
  });

  it(`Should render dot badge`, () => {
    const statusText = 'Online';
    const { queryByText } = render(
      <TableTextGroup
        title={statusText}
        avatarProps={{
          'aria-label': 'Austria',
          size: 'small',
          src: `${ASSETS_URL}/flags/austria.svg`
        }}
        badgeProps={{
          color: 'primary'
        }}
      />
    );
    expect(queryByText(statusText)).toBeTruthy();
  });
});