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

import type { ClickableListProps } from './clickable-list.proptypes';
import { ClickableList } from './index';

const DEFAULT_PROPS: ClickableListProps = {
  label: 'great label',
  options: [
    {
      id: 'employed',
      text: 'Employed',
    },
    {
      id: 'self-employed',
      text: 'Self-employed',
    },
    {
      id: 'retired',
      text: 'Retired',
    },
  ],
  onClick: jest.fn(),
};

// Used to supress console warning
const PROPS_WITH_THEME = {
  ...DEFAULT_PROPS,
  theme: currentTheme,
};

describe('ClickableList', () => {
  describe('snapshot', () => {
    it('matches the previous snapshot', () => {
      const clickableList = renderSnapshot(
        <ClickableList {...DEFAULT_PROPS} />,
      );
      expect(clickableList).toMatchSnapshot();
    });
  });

  it('renders a label based on props', () => {
    const clickableList = mountWrappedComponent(
      <ClickableList {...PROPS_WITH_THEME} />,
    );

    expect(clickableList.contains(DEFAULT_PROPS.label)).toBe(true);
  });

  it('renders list items with valid props', () => {
    const clickableList = mountWrappedComponent(
      <ClickableList {...PROPS_WITH_THEME} />,
    );

    const listItems = clickableList.find('ListItem');

    listItems.forEach((item, index) => {
      expect(item.props()).toEqual({
        id: DEFAULT_PROPS.options[index].id,
        text: DEFAULT_PROPS.options[index].text,
        onClick: DEFAULT_PROPS.onClick,
      });
    });
  });

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