import React from 'react';
import { render, screen } from '@testing-library/react';
import ArticleCard from './index';

const item = {
  author: {
    name: 'John Doe',
    profile_page_path: '/john-doe',
    twitter_profile: 'johndoe',
    image: '/images/john-doe.png',
  },
  title: 'Sample Article',
  updated_at: '2022-02-01',
  created_at: '2022-01-01',
  path: '/sample-article',
  banner: 'sample-article-banner.jpg',
};

describe('ArticleCard', () => {
  it('should render Article Card', () => {
    const { getByText } = render(
      <ArticleCard
        item={item}
        width={200}
        height={200}
        showAuthorOnOneLine={false}
        hasVariableComponent
        showDate
      />
    );
    screen.debug();
    expect(getByText('Sample Article')).toBeInTheDocument();
    expect(getByText('John Doe')).toBeInTheDocument();
    expect(getByText('01/02/2022')).toBeInTheDocument();
  });

  it('Should render the reading time when the props is true', () => {
    const { getByText } = render(
      <ArticleCard
        item={item}
        width={200}
        height={200}
        showAuthorOnOneLine
        hasVariableComponent
        showDate
        readingTime={1}
      />
    );
    expect(getByText('1')).toBeInTheDocument();
  });

  it('should render the article card with author on one line', () => {
    const { getByText } = render(
      <ArticleCard
        item={item}
        width={200}
        height={200}
        showAuthorOnOneLine
        hasVariableComponent
        showDate
        readingTime={1}
      />
    );
    expect(getByText('John Doe')).toBeInTheDocument();
    expect(getByText('01/02/2022')).toBeInTheDocument();
    expect(getByText('Sample Article')).toBeInTheDocument();
  });

  it('should render without a banner image X', () => {
    const itemWithoutBanner = { ...item, banner: null };
    const { getByText } = render(
      <ArticleCard
        item={itemWithoutBanner}
        width={200}
        height={200}
        showAuthorOnOneLine={false}
        showDate
      />
    );

    expect(getByText('John Doe')).toBeInTheDocument();
    expect(getByText('01/02/2022')).toBeInTheDocument();
    expect(getByText('Sample Article')).toBeInTheDocument();
  });

  it('should render without author', () => {
    const itemWithoutAuthor = { ...item, author: null };
    const { getByText } = render(
      <ArticleCard
        item={itemWithoutAuthor}
        width={200}
        height={200}
        showAuthorOnOneLine={false}
        hasVariableComponent
      />
    );
    expect(getByText('Sample Article')).toBeInTheDocument();
  });
});
