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

import ContentBox from '.';

const info = [
  {
    title: 'Fully licensed casinos',
    image: '../../../images/content-1.png',
    text: 'We only list and review fully licensed and legally operating casinos so you can be sure where you end up playing will be safe and secure.',
  },
  {
    title: 'Get the most for your money',
    image: '../../../images/content-2.png',
    text: 'We list all the features the Casinos have to offer so you can make an educated decision about where to place your money for maximum gains!',
  },
  {
    title: 'Authenticly written articles',
    image: '../../../images/content-3.png',
    text: 'All our Authors are professional writers with industry know-how, so you can depend on what we say is the truth!',
  },
];

describe('ContentBox Component', () => {
  test('render with props', () => {
    const { container, getByText } = render(<ContentBox data={info} />);
    expect(container.querySelectorAll('div.item')).toHaveLength(3);
    expect(getByText('Authenticly written articles')).toBeTruthy();
    expect(container.querySelectorAll('.icon')).toHaveLength(3);
  });

  test('render without props', () => {
    const { container } = render(<ContentBox data={[]} />);

    expect(container.querySelector('li')).toBeFalsy();
  });
});
afterEach(() => {
  cleanup();
});
