import React from 'react';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom';
import { siteSchema } from 'gatsby-core-theme/tests/factories/modules/site-schema.factory';
import SocialIcons from '.';

const socialIcons =
  siteSchema &&
  (({ instagram, facebook, twitter, linkedin, youtube }) => ({
    instagram,
    facebook,
    twitter,
    linkedin,
    youtube,
  }))(siteSchema);

const socialIconsLength = Object.keys(socialIcons);

describe('SocialIcons Component', () => {
  test('render with props and social icons list', () => {
    const { container } = render(<SocialIcons socialIcons={socialIcons} />);
    expect(container).toBeTruthy();
    const socialLinksWrapper = container.querySelector('.socialIcons');
    expect(socialLinksWrapper.querySelectorAll('a')).toHaveLength(socialIconsLength.length);
    expect(socialLinksWrapper.querySelectorAll('a')[2].innerText).toEqual(siteSchema[2]);
    expect(socialLinksWrapper.querySelectorAll('a')[4].innerText).toEqual(siteSchema[4]);
  });

  test('render null value', () => {
    const obj = {
      default: 'default',
    };
    const { container } = render(<SocialIcons socialIcons={obj} />);
    expect(container.querySelector('svg')).toBe(null);
  });
});
afterEach(() => {
  cleanup();
});
