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

import { SectionHeader } from './index';

describe('SectionHeader', () => {
  it('renders a large header by default', () => {
    const sectionHeader = mountWrappedComponent(
      <SectionHeader>content</SectionHeader>,
    );

    const sectionHeaderLarge = sectionHeader.find('SectionHeaderLarge');
    const sectionHeaderSmall = sectionHeader.find('SectionHeaderSmall');

    expect(sectionHeaderLarge.exists()).toBe(true);
    expect(sectionHeaderSmall.exists()).toBe(false);
  });

  it('renders a large header if size is set to large', () => {
    const sectionHeader = mountWrappedComponent(
      <SectionHeader size="lg">content</SectionHeader>,
    );

    const sectionHeaderLarge = sectionHeader.find('SectionHeaderLarge');
    const sectionHeaderSmall = sectionHeader.find('SectionHeaderSmall');

    expect(sectionHeaderLarge.exists()).toBe(true);
    expect(sectionHeaderSmall.exists()).toBe(false);
  });

  it('renders a small header if size is set to small', () => {
    const sectionHeader = mountWrappedComponent(
      <SectionHeader size="sm">content</SectionHeader>,
    );

    const sectionHeaderLarge = sectionHeader.find('SectionHeaderLarge');
    const sectionHeaderSmall = sectionHeader.find('SectionHeaderSmall');

    expect(sectionHeaderSmall.exists()).toBe(true);
    expect(sectionHeaderLarge.exists()).toBe(false);
  });

  it('renders children', () => {
    const children = <div>Great children</div>;
    const sectionHeader = mountWrappedComponent(
      <SectionHeader size="sm">{children}</SectionHeader>,
    );

    expect(sectionHeader.contains(children)).toBe(true);
  });
});
