import React from 'react';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import Spotlights from '.';
import { getSpotlightItems } from '~tests/factories/modules/spotlights.factory';

describe('Spotlights Component', () => {
  test('render', () => {
    const { container, getByText } = render(<Spotlights module={getSpotlightItems(4)} />);
    expect(container).toBeTruthy();
    expect(container.querySelector('ul')).toBeTruthy();
    expect(container.querySelectorAll('li')).toHaveLength(4);
    expect(container.querySelectorAll('label')).toHaveLength(4);
    // For images lazy loaded
    // expect(container.querySelectorAll('noscript')).toHaveLength(4);
    expect(getByText('read more text')).toBeTruthy();
    // expect(getByText('html text 4')).toBeTruthy();
  });
  test('without show more text', () => {
    const { container } = render(
      <Spotlights module={getSpotlightItems(4, 'image_text', null, '0')} />
    );
    expect(container).toBeTruthy();
    expect(container.querySelector('div.spotlightstext')).toBeFalsy();
  });
  test('image mode', () => {
    const { container } = render(<Spotlights module={getSpotlightItems(3, 'image')} />);
    expect(container).toBeTruthy();
    expect(container.querySelector('ul')).toBeTruthy();
    expect(container.querySelectorAll('p.text')).toHaveLength(0);
    expect(container.querySelectorAll('label')).toHaveLength(3);
    // For images lazy loaded
    // expect(container.querySelectorAll('noscript')).toHaveLength(3);
  });
  test('icon mode', () => {
    const { container } = render(<Spotlights module={getSpotlightItems(6, 'icon')} />);
    expect(container).toBeTruthy();
    expect(container.querySelector('ul')).toBeTruthy();
    expect(container.querySelectorAll('p.text')).toHaveLength(0);
    expect(container.querySelectorAll('label')).toHaveLength(6);
    // For images lazy loaded
    // expect(container.querySelectorAll('noscript')).toHaveLength(6);
  });

  test('Image width and height', () => {
    // eslint-disable-next-line global-require
    const func = require('../../../helpers/device-detect');
    func.isNativeImageLazyLoadingSupported = jest.fn(() => true);
    const { container } = render(<Spotlights module={getSpotlightItems(1, 'image')} />);

    expect(container.querySelector('img').getAttribute('src')).toContain('fit-in/100x50');

    expect(container.querySelector('img')).toHaveAttribute('width', '100');

    expect(container.querySelector('img')).toHaveAttribute('height', '50');
  });
});
afterEach(() => {
  cleanup();
});
