// @flow
import React from 'react';
import {
  mountWrappedComponent,
  renderSnapshot,
  itIsAccessible,
} from '../../../../utils/tests';

import type { TertiaryButtonProps } from './tertiary-button.proptypes';
import { TertiaryButton } from './index';

const DEFAULT_PROPS: TertiaryButtonProps = {
  disabled: false,
  hideBorder: false,
  children: 'test',
};

const ACTUAL_BUTTON_PROPS: TertiaryButtonProps = {
  ...DEFAULT_PROPS,
  type: 'button',
  onClick: () => {},
};

const LINK_BUTTON_PROPS: TertiaryButtonProps = {
  ...DEFAULT_PROPS,
  href: 'https://google.com',
};

describe('TertiaryButton', () => {
  describe('snapshot', () => {
    it('matches the previous snapshot', () => {
      const tertiaryButton = renderSnapshot(
        <TertiaryButton {...DEFAULT_PROPS} />,
      );

      expect(tertiaryButton).toMatchSnapshot();
    });
  });

  describe('when onClick is passed', () => {
    it('renders a button element', () => {
      const button = mountWrappedComponent(
        <TertiaryButton {...ACTUAL_BUTTON_PROPS} />,
      );
      expect(button.exists('button')).toBe(true);
      expect(button.exists('a')).toBe(false);
    });

    itIsAccessible(<TertiaryButton {...ACTUAL_BUTTON_PROPS} />);
  });

  describe('when href is passed', () => {
    it('renders an anchor element', () => {
      const button = mountWrappedComponent(
        <TertiaryButton {...LINK_BUTTON_PROPS} />,
      );
      expect(button.exists('button')).toBe(false);
      expect(button.exists('a')).toBe(true);
    });

    itIsAccessible(<TertiaryButton {...LINK_BUTTON_PROPS} />);
  });
});
