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

import { ASSETS_URL } from '../../consts/common';
import { UserInfo } from './user-info';
import type { UserInfoProps } from './types';

afterEach(cleanup);

const mockUser: UserInfoProps = {
  name: 'Mock User',
  userRole: 'Developer',
  userEmail: 'mock@fake.com',
  avatarProps: {
    src: 'https://i.pinimg.com/originals/e5/a9/e8/e5a9e877bcacdc5713d2a8f98412762d.png'
  },
  statusIcon: {
    src: `${ASSETS_URL}/flags/worldwide.svg`
  },
  statusText: 'Dec 21, 2021 12:21 AM'
};

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

  it(`Should render not verified user`, () => {
    const { baseElement } = render(
      <UserInfo
        {...mockUser}
        avatarProps={{
          emailVerified: false
        }}
      />
    );
    expect(baseElement).toBeTruthy();
  });

  it(`Should render all user info`, () => {
    const { queryByTestId } = render(<UserInfo {...mockUser} />);
    expect(queryByTestId('userInfo')?.textContent).toBe(
      [mockUser.name, mockUser.userRole, mockUser.userEmail, mockUser.statusText].join('')
    );
  });

  it(`Should render user initials`, () => {
    const userInitials = 'JD';
    const { queryByText } = render(
      <UserInfo
        {...mockUser}
        avatarProps={{
          initials: userInitials
        }}
      />
    );
    expect(queryByText(userInitials)).toBeTruthy();
  });

  it(`Should render user online`, () => {
    const statusText = 'Online';
    const { queryByText } = render(
      <UserInfo
        {...mockUser}
        statusBadgeProps={{
          color: 'primary'
        }}
        statusText={statusText}
      />
    );
    expect(queryByText(statusText)).toBeTruthy();
  });
});