import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { getSpotlightItems } from '~tests/factories/modules/spotlights.factory';

import TempateThree from '.';

describe('TempateOne Component', () => {
  test('Image-text mode', () => {
    const { container } = render(<TempateThree module={getSpotlightItems(6, 'image')} />);
    expect(container).toBeTruthy();
    expect(container.querySelector('div')).toBeTruthy();
    expect(container.querySelector('p')).toBeTruthy();
    expect(container.querySelectorAll('label')).toBeTruthy();
    expect(container.querySelectorAll('a')).toBeTruthy();
  });

  test('toggles showMore state when "Read more" button is clicked', () => {
    const { getByText, getAllByText } = render(
      <TempateThree module={getSpotlightItems(6, 'image')} readMore />
    );

    const readMoreBtn = getAllByText('Read more')[0];

    fireEvent.click(readMoreBtn);
    expect(getByText('Read less')).toBeInTheDocument();
  });
});
