import React from 'react';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import Timeline from '.';

const timelineArray = [
  {
    date: '2013',
    title: 'Launched',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. At urna in sapien posuere leo imperdiet pulvinar dictum.',
    isActive: false,
  },
  {
    date: '2015',
    title: 'Rebrand + New Website',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. At urna in sapien posuere leo imperdiet pulvinar dictum.',
    isActive: false,
  },
  {
    date: '2017',
    title: '150+ Employees',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. At urna in sapien posuere leo imperdiet pulvinar dictum.',
    isActive: false,
  },
  {
    date: '2019',
    title: 'We acquired XXX',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. At urna in sapien posuere leo imperdiet pulvinar dictum.',
    isActive: false,
  },
  {
    date: 'Today',
    title: 'Over 500 Casino Reviews',
    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. At urna in sapien posuere leo imperdiet pulvinar dictum.',
    isActive: true,
  },
];

describe('Timeline Component', () => {
  test('render with props', () => {
    const { container, getByText } = render(<Timeline items={timelineArray} />);
    expect(container.querySelectorAll('li')).toHaveLength(5);
    expect(container.querySelectorAll('div.row')).toHaveLength(5);
    expect(getByText('Over 500 Casino Reviews')).toBeTruthy();
    expect(getByText('Over 500 Casino Reviews').getAttribute('class')).toEqual('title');
    expect(getByText('Today').getAttribute('class')).toEqual('date');
    expect(container.querySelectorAll('div.row.active')).toHaveLength(1);
  });
});
afterEach(() => {
  cleanup();
});
