import React from 'react';
import { render, screen } from '@testing-library/react';
import TemplateOne from '.';
import MainProvider from '~context/MainProvider';

function renderComponent(operator) {
  return render(
    <MainProvider
      value={{
        bannerIsActive: false,
        cookieAccepted: true,
      }}
    >
      <TemplateOne showOnLoad operator={operator} />
    </MainProvider>
  );
}

describe('TemplateOne', () => {
  const operator = {
    standardised_logo_url: 'logo_st',
    logo: 'logo',
    logo_url: 'logo-url',
    bonus: {
      rating: '4.5',
    },
    name: 'Rizk',
    url: 'affilate',
    extra_fields: {
      terms_and_conditions_text_enabled: '1',
    },
    status: 'active',
  };

  test('displays the operator name', () => {
    renderComponent(operator);
    const operatorName = screen.getByText(operator.name);
    expect(operatorName).toBeInTheDocument();
  });

  test('displays the welcome bonus text', () => {
    renderComponent(operator);
    const welcomeBonus = screen.getByText('Welcome Bonus');
    expect(welcomeBonus).toBeInTheDocument();
  });

  test('displays the operator rating', () => {
    renderComponent(operator);
    const operatorRating = screen.getByText(operator.bonus.rating);
    expect(operatorRating).toBeInTheDocument();
  });
});
