// @flow
import React from 'react';
import {
  getFakeSvg,
  getFakeComponent,
  mountWrappedComponent,
  itIsAccessible,
} from '../../../utils/tests';

import type { ListItemProps } from './list-item.proptypes';
import { ListItem } from './index';

const DEFAULT_PROPS: ListItemProps = {
  icon: getFakeSvg(),
  header: getFakeComponent('header'),
  body: getFakeComponent('body'),
  subComponent: getFakeComponent('sub'),
};

describe('ListItem', () => {
  it('renders a header component', () => {
    const header = <h1>Big header</h1>;
    const listItem = mountWrappedComponent(
      <ListItem {...DEFAULT_PROPS} header={header} />,
    );
    expect(listItem.contains(header)).toBe(true);
  });

  it('renders a body component', () => {
    const body = <span>a body</span>;
    const listItem = mountWrappedComponent(
      <ListItem {...DEFAULT_PROPS} body={body} />,
    );
    expect(listItem.contains(body)).toBe(true);
  });

  it('renders a subcomponent if given', () => {
    const subComponent = <span>a component</span>;
    const listItem = mountWrappedComponent(
      <ListItem {...DEFAULT_PROPS} subComponent={subComponent} />,
    );
    expect(listItem.contains(subComponent)).toBe(true);
  });

  itIsAccessible(<ListItem {...DEFAULT_PROPS} />);
});
