// @flow
import React from 'react';
import { mountWrappedComponent, itIsAccessible } from '../../../../utils/tests';
import { UnstyledButton } from './index';
import type { UnstyledButtonProps } from './unstyled-button.proptypes';

const DEFAULT_BUTTON_PROPS: UnstyledButtonProps = {
  onClick: jest.fn(),
};

const DEFAULT_LINK_PROPS: UnstyledButtonProps = {
  ...DEFAULT_BUTTON_PROPS,
  href: 'https://wealthsimple.com',
};

describe('UnstyledButton', () => {
  describe('Button', () => {
    it('calls the onClick handler when clicked', () => {
      const button = mountWrappedComponent(
        <UnstyledButton {...DEFAULT_BUTTON_PROPS} />,
      ).find('button');
      expect(DEFAULT_BUTTON_PROPS.onClick).toHaveBeenCalledTimes(0);
      button.simulate('click');
      expect(DEFAULT_BUTTON_PROPS.onClick).toHaveBeenCalledTimes(1);
    });

    itIsAccessible(
      <UnstyledButton {...DEFAULT_BUTTON_PROPS}>test</UnstyledButton>,
    );
  });

  describe('Anchor', () => {
    it('Is a link when given an href', () => {
      const button = mountWrappedComponent(
        <UnstyledButton {...DEFAULT_LINK_PROPS} />,
      );

      expect(button.exists('button')).toBe(false);
      expect(button.exists('a')).toBe(true);
    });

    itIsAccessible(
      <UnstyledButton {...DEFAULT_LINK_PROPS}>test</UnstyledButton>,
    );
  });

  describe('CSS Rules', () => {
    it('sets border radius based on prop', () => {
      const BORDER_RADIUS = 30;
      const button = mountWrappedComponent(
        <UnstyledButton
          {...DEFAULT_BUTTON_PROPS}
          borderRadius={BORDER_RADIUS}
        />,
      );
      expect(button).toHaveStyleRule('border-radius', `${BORDER_RADIUS}px`);
    });
  });
});
