/* eslint-disable no-unused-expressions */
/* eslint-disable array-callback-return */
import React from 'react';
import { render, cleanup, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { sampleOperatorCards } from '../../../../../../tests/factories/modules/matrix/card.factory';

import ComparisonTable from '.';

const module = sampleOperatorCards;

describe('Comparison table test component', () => {
  test('render', () => {
    const { getByText, container } = render(<ComparisonTable items={module.items} />);
    module.items.map((item) => {
      expect(container.querySelectorAll('table')).toHaveLength(1);
      expect(getByText(item.relation.name));

      const paymentMethods = container.querySelector('.paymentMethods');
      const loadMoreBtn = paymentMethods.querySelector('a');
      // eslint-disable-next-line no-unused-expressions
      loadMoreBtn && expect(paymentMethods.querySelectorAll('span').length).toEqual(5);

      loadMoreBtn && fireEvent.click(loadMoreBtn);
      loadMoreBtn && expect(paymentMethods.querySelectorAll('span').length).toBeGreaterThan(5);
    });
  });

  test('render with custom component', () => {
    const filterItems = [{ ...module.items[0] }];

    const { getByText } = render(
      <ComparisonTable
        items={filterItems}
        tabelInfo={[
          {
            defaultValue: 'Rating',
            key: 'rating',
          },
          {
            defaultValue: 'Bonus',
            key: 'bonus',
            customComponent: () => <td>coupon code</td>,
          },
        ]}
      />
    );

    expect(getByText('coupon code')).toBeTruthy();
  });

  test('render false value', () => {
    const filterItems = [{ ...module.items[1] }];
    const { container } = render(
      <ComparisonTable
        items={filterItems}
        tabelInfo={[
          {
            defaultValue: 'default',
            key: 'default',
          },
          {
            defaultValue: 'Payment Methods',
            key: 'payment_methods',
          },
        ]}
      />
    );
    // expect(getByText('coupon code')).toBeTruthy();
    const paymentMethods = container.querySelector('.paymentMethods');
    expect(paymentMethods.querySelectorAll('img').length).toEqual(5);
  });
});
afterEach(() => {
  cleanup();
});
