import React from 'react';
import { shallow } from 'enzyme';
import CallToActionWithArrow from './call-to-action-with-arrow';

describe('<CallToActionWithArrow />', () => {
  const link = 'link';

  it('should render a call-to-action', () => {
    const callToAction = shallow(
      <CallToActionWithArrow href={link} text='View subscription options' />,
    );
    expect(callToAction.html()).not.toBe(null);
  });

  it('should display the correct text', () => {
    const callToAction = shallow(
      <CallToActionWithArrow href={link} text='View subscription options' />,
    );
    expect(callToAction.text()).toContain('View subscription options');
  });

  it('should render the correct link', () => {
    const callToAction = shallow(
      <CallToActionWithArrow href={link} text='View subscription options' />,
    );
    expect(callToAction.find('a').props().href).toEqual(link);
  });

  it('should render additional props', () => {
    const callToAction = shallow(
      <CallToActionWithArrow text='View subscription options' test='test' />,
    );
    expect(callToAction.find('a').props().test).toEqual('test');
  });

  it('should apply the correct classname if passed inverse as a prop', () => {
    const callToAction = shallow(
      <CallToActionWithArrow
        href={link}
        text='View subscription options'
        inverse
      />,
    );
    expect(callToAction.find('a').props().className).toEqual(
      'ds-call-to-action-with-arrow ds-call-to-action-with-arrow--inverse',
    );
  });

  it('should apply the correct classname if passed secondary as a prop', () => {
    const callToAction = shallow(
      <CallToActionWithArrow
        href={link}
        text='View subscription options'
        secondary
      />,
    );
    expect(callToAction.find('a').props().className).toEqual(
      'ds-call-to-action-with-arrow ds-call-to-action-with-arrow--secondary',
    );
  });

  it('should apply the correct classname if inverse and secondary props are passed', () => {
    const callToAction = shallow(
      <CallToActionWithArrow
        href={link}
        text='View subscription options'
        secondary
        inverse
      />,
    );
    expect(callToAction.find('a').props().className).toEqual(
      'ds-call-to-action-with-arrow ds-call-to-action-with-arrow--secondary ds-call-to-action-with-arrow--inverse',
    );
  });

  it('should apply the correct classname if passed className as a prop', () => {
    const callToAction = shallow(
      <CallToActionWithArrow
        href={link}
        text='View subscription options'
        secondary
        inverse
        className='potato'
      />,
    );
    expect(callToAction.find('a').props().className).toContain('potato');
  });
});
