import React from 'react';
import { shallow } from 'enzyme';
import PodcastCard from './podcast-card';
import SlimButton from '../slim-button/slim-button';

describe('<PodcastCard />', () => {
  const requiredProps = {
    headline: 'Babbage',
    description: 'Description for Babbage',
    imageProps: { src: '/babbage.png' },
    url: '/podcasts/babbage',
    topic: 'Science & Technology',
  };
  const ctaText = 'Follow';
  const ctaFunction = () => {};

  it('should render with required props', () => {
    const component = shallow(<PodcastCard {...requiredProps} />);

    expect(component.find('.ds-podcast-card__image').prop('src')).toEqual(
      requiredProps.imageProps.src,
    );
    expect(component.find('.ds-podcast-card__subheadline').text()).toEqual(
      'Science & Technology',
    );

    expect(component.find('.ds-podcast-card__headline').text()).toEqual(
      requiredProps.headline,
    );

    expect(component.find('.ds-podcast-card__description').text()).toEqual(
      requiredProps.description,
    );
  });

  it('should render extra class names provided', () => {
    const className = 'custom-class-name';
    const component = shallow(
      <PodcastCard {...requiredProps} className={className} />,
    );

    expect(component.find(`.${className}`).length).toEqual(1);
  });

  it('should render subheadline with cadence if provided', () => {
    const component = shallow(
      <PodcastCard {...requiredProps} cadence='Weekly' />,
    );
    expect(component.find('.ds-podcast-card__subheadline').text()).toEqual(
      'Science & Technology | Weekly',
    );
  });

  it('should render with image alt text as empty string by default', () => {
    const component = shallow(<PodcastCard {...requiredProps} />);

    expect(component.find('.ds-podcast-card__image').prop('alt')).toEqual('');
  });

  it('should render with image alt text', () => {
    const imageAltText = 'This is the ident for Babbage';
    const component = shallow(
      <PodcastCard
        {...requiredProps}
        imageProps={{ ...requiredProps.imageProps, alt: imageAltText }}
      />,
    );

    expect(component.find('.ds-podcast-card__image').prop('alt')).toEqual(
      imageAltText,
    );
  });

  it('should render with large headline class if largeHeadline prop provided', () => {
    const component = shallow(<PodcastCard {...requiredProps} largeHeadline />);

    expect(
      component
        .find('.ds-podcast-card__headline')
        .hasClass('ds-podcast-card__headline--large'),
    ).toEqual(true);
  });

  it('should not render CTA by default', () => {
    const component = shallow(<PodcastCard {...requiredProps} />);

    expect(component.find('.ds-podcast-card__cta').length).toEqual(0);
  });

  it('should not render CTA if solely CTA text provided', () => {
    const component = shallow(
      <PodcastCard {...requiredProps} ctaText={ctaText} />,
    );

    expect(component.find('.ds-podcast-card__cta').length).toEqual(0);
  });

  it('should not render CTA if soley CTA function provided', () => {
    const component = shallow(
      <PodcastCard {...requiredProps} ctaFunction={ctaFunction} />,
    );

    expect(component.find('.ds-podcast-card__cta').length).toEqual(0);
  });

  it('should render CTA if text and function provided', () => {
    const component = shallow(
      <PodcastCard
        {...requiredProps}
        ctaText={ctaText}
        ctaFunction={ctaFunction}
      />,
    );

    const ctaButton = component.find('.ds-podcast-card__cta');
    expect(ctaButton.length).toEqual(1);

    expect(
      component
        .find(SlimButton)
        .shallow()
        .text(),
    ).toEqual(ctaText);
  });
});
