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

import SellingPoints from '.';

const sellingPointsList = ['test', 'test2', 'test3', 'test4'];

describe('Selling Points Component', () => {
  test('test selling point list', () => {
    const { getByText } = render(<SellingPoints sellingPoints={sellingPointsList} />);
    expect(getByText('test')).toBeTruthy();
    expect(getByText('test2')).toBeTruthy();
    expect(getByText('test3')).toBeTruthy();
    expect(getByText('test').closest('ul').children.length).toBe(3);
  });

  test('test selling point list limit', () => {
    const { getByText } = render(<SellingPoints sellingPoints={sellingPointsList} limit={2} />);
    expect(getByText('test').closest('ul').children.length).toBe(2);
  });

  test('test selling point list icon', () => {
    const { container, getAllByText } = render(
      <SellingPoints sellingPoints={sellingPointsList} icon={<p>test icon</p>} />
    );
    expect(container.querySelectorAll('.tick')).toHaveLength(0);
    expect(getAllByText('test icon')).toHaveLength(3);
  });

  test('test empty selling point list', () => {
    const { container } = render(<SellingPoints sellingPoints={[]} />);
    expect(container).toBeEmptyDOMElement();
  });
});
afterEach(() => {
  cleanup();
});
