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

describe('LazyImage function', () => {
  test('LazyImage defaultImg', () => {
    const { container } = render(
      <LazyImage
        src={null}
        defaultImg={<img src="https://cdn.irishluck.ie/jackpot-village-logo-9.png" alt="test" />}
      />
    );
    expect(container.querySelector('img')).toBeTruthy();
    expect(container.querySelector('img')).toHaveAttribute(
      'src',
      'https://cdn.irishluck.ie/jackpot-village-logo-9.png'
    );
  });

  test('LazyImage mock function inisNativeImageLazyLoadingSupported', () => {
    // eslint-disable-next-line global-require
    const func = require('../../helpers/device-detect');
    func.isNativeImageLazyLoadingSupported = jest.fn(() => true);
    const { container } = render(
      <LazyImage src="https://cdn.irishluck.ie/jackpot-village-logo-9.png" />
    );
    expect(container.querySelector('img')).toBeTruthy();
    expect(container.querySelector('img')).toHaveAttribute(
      'src',
      'https://cdn.irishluck.ie/jackpot-village-logo-9.png'
    );
    expect(container.querySelector('img')).toHaveAttribute('loading', 'lazy');
  });
});

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