import { shallow } from 'enzyme';
import React from 'react';
import { Header, Label } from 'semantic-ui-react';

import { testItemComponent } from '../../../tests/item';
import { ItemTitle } from './ItemTitle';

describe('ItemTitle component', () => {
  const ITEM_FIXTURE = {
    title: { rendered: 'Test title' },
  };

  let wrapper;

  beforeEach(() => {
    wrapper = shallow(
      <ItemTitle item={ ITEM_FIXTURE } />
    );
  });

  it('renders', () => {
    expect(wrapper).toExist();
  });

  it('renders a Header', () => {
    expect(wrapper.find('Header')).toExist();
  });

  it('passes unknown props through to the Header', () => {
    wrapper.setProps({ unknown: 'value' });
    expect(wrapper.find('Header')).toHaveProp('unknown', 'value');
  });

  it('avoids passing internal props through to the Header', () => {
    const header = wrapper.find('Header');
    expect(header).not.toHaveProp('item');
  });

  it('passes children through to the Header', () => {
    const subheader = <Header.Subheader>Test subheader</Header.Subheader>;
    wrapper = shallow(
      <ItemTitle item={ ITEM_FIXTURE }>{ subheader }</ItemTitle>
    );

    expect(wrapper.find('Header')).toContainReact(subheader);
  });

  it('renders the title using dangerouslySetInnerHTML', () => {
    expect(wrapper.find('span'))
      .toHaveProp('dangerouslySetInnerHTML', { __html: 'Test title' });
  });

  it('copes if no title is available', () => {
    wrapper.setProps({ item: { } });
    expect(wrapper).toBeEmptyRender();
  });

  it('can render as a string component', () => {
    wrapper.setProps({ as: 'a' });
    expect(wrapper.find('Header')).not.toExist();
    expect(wrapper.find('a')).toExist();
  });

  it('can render as a functional component', () => {
    wrapper.setProps({ as: Label });
    expect(wrapper.find('Header')).not.toExist();
    expect(wrapper.find('Label')).toExist();
  });

  testItemComponent(ItemTitle);
});
