// @flow
import React from 'react';
import { enzymeFind } from 'styled-components/test-utils';
import { mountWrappedComponent, itIsAccessible } from '../../../../utils/tests';
import { NextIcon } from '../../icon';
import { Span } from '../../typography';

import type { NextButtonProps } from './next-button.proptypes';
import { NextButton } from './next-button.component';

const DEFAULT_PROPS: NextButtonProps = {
  disabled: false,
  children: 'Press Enter',
};

describe('Button', () => {
  it('passes props down to a styled button', () => {
    const button = mountWrappedComponent(<NextButton {...DEFAULT_PROPS} />);
    expect(button.find('button').props()).toEqual({
      children: expect.anything(),
      className: expect.any(String),
      disabled: DEFAULT_PROPS.disabled,
      type: 'submit',
    });
  });

  it('does not render disabled elements if not disabled', () => {
    const button = mountWrappedComponent(
      <NextButton {...DEFAULT_PROPS} disabled={false} />,
    );
    expect(button.find('button').prop('disabled')).toBe(false);
    expect(button.find(NextIcon).prop('disabled')).toBe(false);
  });

  it('renders disabled elements if disabled', () => {
    const button = mountWrappedComponent(
      <NextButton {...DEFAULT_PROPS} disabled />,
    );
    expect(button.find('button').prop('disabled')).toBe(true);
    expect(button.find(NextIcon).prop('disabled')).toBe(true);
  });

  it('renders a span if provided children', () => {
    const button = mountWrappedComponent(
      <NextButton {...DEFAULT_PROPS}>
        <b>Example Text</b>
      </NextButton>,
    );
    expect(enzymeFind(button, Span).exists()).toBe(true);
  });

  it('does not render a span if not given children', () => {
    const button = mountWrappedComponent(
      <NextButton {...DEFAULT_PROPS}>{null}</NextButton>,
    );
    expect(enzymeFind(button, Span).exists()).toBe(false);
  });

  describe('when children is undefined', () => {
    itIsAccessible(<NextButton {...DEFAULT_PROPS}></NextButton>);
  });

  describe('when there is child text', () => {
    itIsAccessible(<NextButton {...DEFAULT_PROPS} />);
  });
});
