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

describe('Gatsby Image Component', () => {
  const data = {
    images: {
      edges: [
        {
          node: {
            relativePath: 'age-policy.jpg',
            name: 'age-policy',
            childImageSharp: {
              gatsbyImageData: {
                layout: 'fullWidth',
                backgroundColor: '#383838',
                images: {
                  fallback: {
                    sizes: '100vw',
                    src: '/static/767acf4c46638ab51f5dda1e7808f703/d02f6/age-policy.jpg',
                    srcSet: '/static/767acf4c46638ab51f5dda1e7808f703/d02f6/age-policy.jpg 21w',
                  },
                  sources: [
                    {
                      sizes: '100vw',
                      src: '/static/767acf4c46638ab51f5dda1e7808f703/8bc71/age-policy.webp 21w',
                      type: 'image/webp',
                    },
                  ],
                },
              },
            },
          },
        },
      ],
    },
  };

  test('Render with Image', () => {
    const { container } = render(
      <PureImage data={data} alt="testAlt" height="100%" width="100%" filename="age-policy" />
    );
    expect(container.querySelectorAll('img')).toHaveLength(1);
    expect(container.querySelector('img').getAttribute('style')).toBe('height: 100%; width: 100%;');
    expect(container.querySelector('img').getAttribute('alt')).toBe('testAlt');
    expect(container).toBeTruthy();
  });

  test('Render with No image', () => {
    const { container } = render(<PureImage data={data} filename="age-policy2" />);
    expect(container.querySelectorAll('img')).toHaveLength(0);
    expect(container).toBeTruthy();
  });
});

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