import React from 'react';
import { render, cleanup, screen, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
import getPageData from '../../../../../../../test/factories/pages/slot';
import TemplateOne from '.';

describe('summary component', () => {
  test('render', () => {
    const { container, getByText, getByRole } = render(<TemplateOne page={getPageData()} />);
    expect(container).toBeTruthy();

    expect(container.querySelectorAll('div.parentContainer')).toHaveLength(1);

    const div = getByText('The Slot Title');
    expect(div).toBeInTheDocument();

    const h1 = getByRole('heading', { level: 1 });
    expect(h1).toBeInTheDocument();
  });

  const page = {
    relation: {
      name: 'Halloween',
      thumbnail_filename_object: {
        filename: 'image.jpg',
        alt: 'Halloween',
      },
    },
    sections: {
      header: {
        modules: [
          {
            name: 'bonus',
            value: {
              one_liners: {
                main: {
                  one_liner: '20 Free Spins No Deposit Bonus + 300% & 555 Spins Welcome Bonus',
                },
              },
              standardised_logo_url_object: {
                filename: '1651670485/davincis-gold-casino-logo.png',
              },
              links: { main: 'test' },
              status: 'active',
            },
          },
        ],
      },
    },
  };

  describe('SlotHeader', () => {
    it('should render the image', async () => {
      render(<TemplateOne page={page} />);
      const img = screen.getByAltText('Halloween');
      await waitFor(() => expect(img).toBeVisible());
      expect(img).toHaveAttribute(
        'src',
        imagePrettyUrl(page.relation?.thumbnail_filename_object?.filename, 170, 170)
      );
      expect(img).toHaveAttribute('width', '170');
      expect(img).toHaveAttribute('height', '170');
    });

    it('should render the headerBonus logo', async () => {
      render(<TemplateOne page={page} />);

      await waitFor(() => {
        const bonusText = screen.getByText('Welcome Bonus');
        expect(bonusText).toBeInTheDocument();
      });
    });

    it('should render the headerBonus one-liner', () => {
      render(<TemplateOne page={page} />);
      const oneLiner = screen.getByText(/20 Free Spins No Deposit Bonus/);
      expect(oneLiner).toBeInTheDocument();
    });
  });
});

afterEach(() => {
  cleanup();
});
