import React from 'react';
// eslint-disable-next-line import/no-extraneous-dependencies
import { render, screen } from '@testing-library/react';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import TemplateOneTwo from './index';
import getPaymentData from '../../../../../../tests/factories/cards/payment.factory';

describe('TemplateOneTwo component', () => {
  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 the payment method name', () => {
    const paymentData = getPaymentData();
    const translations = {
      go_to_review: 'Go To Review',
      read_review: 'Read Review',
    };
    render(<TemplateOneTwo item={paymentData} />, {
      wrapper: ({ children }) => (
        <Context.Provider value={{ translations }}>{children}</Context.Provider>
      ),
    });

    const nameElement = screen.getByText(paymentData.relation.name);
    expect(nameElement).toBeInTheDocument();
  });
  it('renders the "Read Review" button by default', () => {
    const paymentData = getPaymentData();
    const translations = {
      go_to_review: 'Go To Review',
      read_review: 'Read Review',
    };
    render(<TemplateOneTwo item={paymentData} />, {
      wrapper: ({ children }) => (
        <Context.Provider value={{ translations }}>{children}</Context.Provider>
      ),
    });
    const buttonElement = screen.getByText('Read Review');
    expect(buttonElement).toBeInTheDocument();
  });
  it('renders the "Read Review" button when showSellingPoints is true', () => {
    const paymentData = getPaymentData();
    const translations = {
      go_to_review: 'Go To Review',
      read_review: 'Read Review',
    };
    render(<TemplateOneTwo item={paymentData} showSellingPoints />, {
      wrapper: ({ children }) => (
        <Context.Provider value={{ translations }}>{children}</Context.Provider>
      ),
    });
    const buttonElement = screen.getByText('Read Review');
    expect(buttonElement).toBeInTheDocument();
  });

  it('renders the "Read Review" button when showSellingPoints is true', () => {
    const paymentData = getPaymentData();
    const translations = {
      go_to_review: 'Go To Review',
      read_review: 'Read Review',
    };
    render(<TemplateOneTwo item={paymentData} />, {
      wrapper: ({ children }) => (
        <Context.Provider value={{ translations }}>{children}</Context.Provider>
      ),
    });
    const buttonElement = screen.getByText('Read Review');
    expect(buttonElement).toBeInTheDocument();
  });
  it('should render payment method title', () => {
    const paymentData = getPaymentData();
    const translations = {
      go_to_review: 'Go To Review',
      read_review: 'Read Review',
    };
    render(<TemplateOneTwo item={paymentData} />, {
      wrapper: ({ children }) => (
        <Context.Provider value={{ translations }}>{children}</Context.Provider>
      ),
    });
    const titleElement = screen.getByText('Revolut');
    expect(titleElement).toBeInTheDocument();
  });
});
