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

import Timeline from '~atoms/timeline';
import ContentAndCustomModule 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,
  },
];

describe('ContentAndCustomModule Component', () => {
  test('render with props', () => {
    const { container, getByText } = render(
      <ContentAndCustomModule
        content="hello"
        CustomComponent={Timeline}
        customComponentProps={{ items: timelineArray }}
      />
    );
    expect(container.querySelectorAll('li')).toHaveLength(1);
    expect(container.querySelectorAll('div.contentBox')).toHaveLength(1);
    expect(getByText('hello')).toBeTruthy();
    expect(getByText('Launched').getAttribute('class')).toEqual('title');
    expect(getByText('2013').getAttribute('class')).toEqual('date');
  });
  test('without content', () => {
    const { container } = render(
      <ContentAndCustomModule
        CustomComponent={Timeline}
        customComponentProps={{ items: timelineArray }}
      />
    );
    expect(container.querySelector('div.contentBox')).toBeFalsy();
  });
});
afterEach(() => {
  cleanup();
});
