// @flow
import React from 'react';
import {
  mountWrappedComponent,
  renderSnapshot,
  itIsAccessible,
} from '../../../../utils/tests';
import { SmallArrowRight } from '../../icon/small-arrow-right';
import { Add } from '../../icon/add';
import type { TextButtonWithIconProps } from './text-button-with-icon.proptypes';
import { TextButtonWithIcon } from './text-button-with-icon.component';

const DEFAULT_PROPS: TextButtonWithIconProps = {
  icon: 'add',
  position: 'right',
  href: 'https://google.com',
  target: '_blank',
  children: 'click me',
};

describe('TextButtonWithIcon', () => {
  describe('snapshot', () => {
    it('matches the previous snapshot', () => {
      const button = renderSnapshot(<TextButtonWithIcon {...DEFAULT_PROPS} />);
      expect(button).toMatchSnapshot();
    });
  });

  describe('icon', () => {
    it('renders an add icon when given the respective prop', () => {
      const button = mountWrappedComponent(
        <TextButtonWithIcon {...DEFAULT_PROPS} icon="add" />,
      );
      expect(button.find(Add).exists()).toBe(true);
      expect(button.find(SmallArrowRight).exists()).toBe(false);
    });

    it('renders an `small-arrow-right` icon when given the respective prop', () => {
      const button = mountWrappedComponent(
        <TextButtonWithIcon {...DEFAULT_PROPS} icon="small-arrow-right" />,
      );
      expect(button.find(SmallArrowRight).exists()).toBe(true);
      expect(button.find(Add).exists()).toBe(false);
    });
  });

  it('passes the correct props to the anchor element', () => {
    const button = mountWrappedComponent(
      <TextButtonWithIcon {...DEFAULT_PROPS} />,
    );
    expect(button.find('a').props()).toEqual(
      expect.objectContaining({
        href: DEFAULT_PROPS.href,
        target: DEFAULT_PROPS.target,
      }),
    );
  });

  itIsAccessible(<TextButtonWithIcon {...DEFAULT_PROPS} />);
});
