import React from 'react';
import userEvent from '@testing-library/user-event';

import Comment from '..';
import Button from '../../Button';
import renderWithTheme from '../../../testUtils/renderWithTheme';

describe('rendering', () => {
  it('renders correctly', () => {
    const { getByAltText, getByText } = renderWithTheme(
      <Comment
        author="Someone"
        authorDetails="SDE"
        avatar="url_to_avatar"
        content="Lorem ipsum dolor sit amet."
        datetime="3 days ago"
        actions={<Button text="Share" />}
        reactions={<Button text="Reply" />}
      />
    );

    expect(getByAltText('comment-avatar')).toBeInTheDocument();
    expect(getByText('Someone')).toBeInTheDocument();
    expect(getByText('SDE')).toBeInTheDocument();
    expect(getByText('Lorem ipsum dolor sit amet.')).toBeInTheDocument();
    expect(getByText('3 days ago')).toBeInTheDocument();
    expect(getByText('Share')).toBeInTheDocument();
    expect(getByText('Reply')).toBeInTheDocument();
  });
});

describe('interaction', () => {
  it('always show actions', () => {
    const { getByText } = renderWithTheme(
      <Comment
        author="Someone"
        content="Lorem ipsum dolor sit amet."
        actions={<Button text="Share" />}
        alwaysShowActions
      />
    );

    expect(getByText('Share')).toBeVisible();
  });

  it('only show actions when hovering', () => {
    const { getByText, getByTestId } = renderWithTheme(
      <Comment
        author="Someone"
        content="Lorem ipsum dolor sit amet."
        actions={<Button text="Share" />}
        alwaysShowActions={false}
      />
    );

    expect(getByText('Share')).not.toBeVisible();

    userEvent.hover(getByTestId('inner-comment'));

    expect(getByText('Share')).toBeVisible();
  });
});