import React from 'react';
import { render, waitFor } from '@testing-library/react';
import TemplateThree from '.';
import getPaymentData from '../../../../../../tests/factories/cards/payment.factory';

describe('TemplateThree', () => {
  it('should return mock payment data', () => {
    const paymentData = getPaymentData();
    expect(paymentData.title).toBe('Payment Method Item Title');
    expect(paymentData.description).toBe(
      'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s,'
    );
    expect(paymentData.path).toBe('/');
    expect(paymentData.relation.name).toBe('Revolut');
    expect(paymentData.relation.selling_points.length).toBe(3);
    expect(paymentData.relation.games_count).toBe(10);
    expect(paymentData.relation.logo_filename_object.alt).toBe('Payment Method Item Logo');
    expect(paymentData.relation.logo_filename_object.filename).toBe('1652872814/revolut.svg');
    expect(paymentData.relation.rating).toBe('4.5');
  });
  it('renders payment method name', () => {
    const paymentData = getPaymentData();
    const { getByText } = render(<TemplateThree item={paymentData} />);
    const nameElement = getByText(paymentData.relation.name);
    expect(nameElement).toBeInTheDocument();
  });

  it('renders "Read Review" button', () => {
    const paymentData = getPaymentData();
    const { getByText } = render(<TemplateThree item={paymentData} />);
    const buttonElement = getByText('Read Review');
    expect(buttonElement).toBeInTheDocument();
  });

  it('renders selling points', () => {
    const paymentData = getPaymentData();
    const { getByText } = render(<TemplateThree item={paymentData} />);
    paymentData.relation.selling_points.forEach((point) => {
      const pointElement = getByText(point.name);
      expect(pointElement).toBeInTheDocument();
    });
  });

  it('renders five star rating', async () => {
    const paymentData = getPaymentData();
    const { container } = render(<TemplateThree item={paymentData} />);

    await waitFor(() => {
      expect(container.querySelector('.starRatingContainer')).toBeTruthy();
      expect(container.querySelectorAll('.starRatingContainer span').length).toBe(5);
    });
  });

  it('renders one star rating', async () => {
    const paymentData = getPaymentData();
    const { container } = render(<TemplateThree item={paymentData} useOneStarRating />);

    await waitFor(() => {
      expect(container.querySelector('.starRatingContainer')).toBeTruthy();
      expect(container.querySelector('.fullStar')).toBeTruthy();
      expect(container.querySelectorAll('.starRatingContainer span').length).toBe(3);
    });
  });
});
