/** @jest-environment jsdom */

import * as React from 'react';
import { render, RenderResult } from '@testing-library/react';

import * as General from '../general';
import { Icon } from '../index';
import * as Location from '../location';
import * as Navigation from '../navigation';
import * as Social from '../social';
import * as Theme from '../theme';
import * as Type from '../type';

test('icons', () => {
  let props: Icon;
  let wrapper: RenderResult;

  const createComponent = (Component: any) => {
    props = {
      color: '#fff',
      fill: '#f00',
      height: 50,
      width: 50
    };

    wrapper = render(<Component {...props} />);
  };

  const renderIconSnapshot = (Component: React.FC) => {
    createComponent(Component);

    expect(wrapper.container).toMatchSnapshot();
  };

  // Simple check on the amount of icons we're creating
  expect(Object.values(General)).toHaveLength(5);
  expect(Object.values(Location)).toHaveLength(5);
  expect(Object.values(Navigation)).toHaveLength(4);
  expect(Object.values(Social)).toHaveLength(7);
  expect(Object.values(Theme)).toHaveLength(2);
  expect(Object.values(Type)).toHaveLength(8);

  // Test against a snapshot
  Object.values(General).forEach(renderIconSnapshot);
  Object.values(Location).forEach(renderIconSnapshot);
  Object.values(Navigation).forEach(renderIconSnapshot);
  Object.values(Social).forEach(renderIconSnapshot);
  Object.values(Theme).forEach(renderIconSnapshot);
  Object.values(Type).forEach(renderIconSnapshot);
});