import React from 'react';
import { shallow } from 'enzyme';
import SectionHeadline from './section-headline';

describe('<SectionHeadline />', () => {
  it('should render the correct default props', () => {
    const component = shallow(<SectionHeadline />);
    expect(component.find('h1').length).toEqual(1);
  });

  it('should render the correct heading type', () => {
    expect(shallow(<SectionHeadline type='h1' />).find('h1').length).toEqual(1);
    expect(shallow(<SectionHeadline type='h2' />).find('h2').length).toEqual(1);
    expect(shallow(<SectionHeadline type='h3' />).find('h3').length).toEqual(1);
    expect(shallow(<SectionHeadline type='h4' />).find('h4').length).toEqual(1);
    expect(shallow(<SectionHeadline type='h5' />).find('h5').length).toEqual(1);
    expect(shallow(<SectionHeadline type='h6' />).find('h6').length).toEqual(1);
    expect(
      shallow(<SectionHeadline type='strong' />).find('strong').length,
    ).toEqual(1);
  });

  it('should render the headlines provided', () => {
    expect(
      shallow(<SectionHeadline headline='test headline' />)
        .find('h1')
        .text(),
    ).toEqual('test headline');
    expect(
      shallow(<SectionHeadline subheadline='test subheadline' />)
        .find('h1')
        .text(),
    ).toEqual(' test subheadline');
  });

  it('should add heavy classname if heavy prop is passed', () => {
    const component = shallow(
      <SectionHeadline subheadline='test subheadline' heavy />,
    );
    expect(component.find('h1').props().className).toEqual(
      'ds-section-headline ds-section-headline--heavy',
    );
    expect(component.find('span').props().className).toEqual(
      'ds-section-subheadline ds-section-subheadline--heavy',
    );
  });

  it('should add inverse classname if inverse prop is passed', () => {
    const component = shallow(
      <SectionHeadline subheadline='test subheadline' inverse />,
    );
    expect(component.find('h1').props().className).toEqual(
      'ds-section-headline ds-section-headline--inverse',
    );
    expect(component.find('span').props().className).toEqual(
      'ds-section-subheadline ds-section-subheadline--inverse',
    );
  });

  it('should add rule emphasised classname if ruleEmphasised prop is passed', () => {
    const component = shallow(<SectionHeadline rule='emphasised' />);
    expect(component.find('h1').props().className).toEqual(
      'ds-section-headline ds-section-headline--rule-emphasised',
    );
  });

  it('should add rule heavy classname if ruleHeavy prop is passed', () => {
    const component = shallow(<SectionHeadline rule='heavy' />);
    expect(component.find('h1').props().className).toEqual(
      'ds-section-headline ds-section-headline--rule-heavy',
    );
  });

  it('should add rule accent classname if ruleAccent prop is passed', () => {
    const component = shallow(<SectionHeadline rule='accent' />);
    expect(component.find('h1').props().className).toEqual(
      'ds-section-headline ds-section-headline--rule-accent',
    );
  });

  it('should not have a link by default', () => {
    const component = shallow(<SectionHeadline headline='test headline' />);
    expect(component.contains('a')).toBe(false);
  });

  it('should add className from props when provided', () => {
    const component = shallow(
      <SectionHeadline className='beefwellingtoncrisps' />,
    );
    expect(component.find('h1').props().className).toContain(
      'beefwellingtoncrisps',
    );
  });

  it('should wrap the headline in an anchor tag given a link', () => {
    const url = 'www.test.com';
    const component = shallow(
      <SectionHeadline
        headline='test headline'
        subheadline='test subheadline'
        href={url}
      />,
    );
    expect(component.find('a').props().href).toEqual(url);
    expect(component.find('h1').text()).toEqual(
      'test headline test subheadline',
    );
  });
});
