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

import type { SecondaryButtonProps } from './secondary-button.proptypes';
import { SecondaryButton } from './secondary-button.component';

const ACTUAL_BUTTON_PROPS: SecondaryButtonProps = {
  children: 'test',
  disabled: false,
  onClick() {},
};

const LINK_BUTTON_PROPS: SecondaryButtonProps = {
  href: 'https://google.com',
  children: 'test',
};

describe('SecondaryButton', () => {
  describe('ActualButton', () => {
    it('renders a button element if given an onClick', () => {
      const secondaryButton = mountWrappedComponent(
        <SecondaryButton {...ACTUAL_BUTTON_PROPS} />,
      );
      expect(secondaryButton.exists('button')).toBe(true);
      expect(secondaryButton.exists('a')).toBe(false);
    });

    it('matches the previous snapshot', () => {
      const secondaryButton = renderSnapshot(
        <SecondaryButton {...ACTUAL_BUTTON_PROPS} />,
      );
      expect(secondaryButton).toMatchSnapshot();
    });

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

  describe('LinkButton', () => {
    it('renders an anchor element if given an href', () => {
      const secondaryButton = mountWrappedComponent(
        <SecondaryButton {...LINK_BUTTON_PROPS} />,
      );
      expect(secondaryButton.exists('button')).toBe(false);
      expect(secondaryButton.exists('a')).toBe(true);
    });

    it('matches the previous snapshot', () => {
      const secondaryButton = renderSnapshot(
        <SecondaryButton {...LINK_BUTTON_PROPS} />,
      );
      expect(secondaryButton).toMatchSnapshot();
    });

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