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

import { getHeight } from './button.css-rules';
import type { ButtonProps } from './button.proptypes';
import { Button } from './button.component';

const DEFAULT_PROPS = {
  disabled: false,
  size: 'sm',
  children: 'child text',
};

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

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

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

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

  describe('css-rules', () => {
    describe('getHeight', () => {
      it('medium and default heights return the same height', () => {
        const mediumHeight = getHeight({ size: 'md' });
        const defaultHeight = getHeight({});

        expect(mediumHeight).toBe(defaultHeight);
      });

      it('small and medium heights return different heights', () => {
        const mediumHeight = getHeight({ size: 'md' });
        const smallHeight = getHeight({ size: 'sm' });

        expect(mediumHeight).not.toBe(smallHeight);
      });
    });
  });
});
