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

import type { SegmentedControlProps } from './segmented-control.proptypes';
import { SegmentedControlItem } from './segmented-control-item';
import { SegmentedControl } from './index';

const items = [
  { value: 1, label: 'label 1' },
  { value: 2, label: 'label 2' },
  { value: 3, label: 'label 3' },
];

const DEFAULT_PROPS: SegmentedControlProps = {
  value: 1,
  onChange: () => {},
  children: items.map((item) => (
    <SegmentedControlItem value={item.value} key={item.label}>
      {item.label}
    </SegmentedControlItem>
  )),
};

describe('SegmentedControl', () => {
  it('renders items', () => {
    const segmentedControl = mountWrappedComponent(
      <SegmentedControl {...DEFAULT_PROPS} />,
    );

    expect(segmentedControl.contains(DEFAULT_PROPS.children)).toBe(true);
    expect(segmentedControl.find(SegmentedControlItem)).toHaveLength(
      DEFAULT_PROPS.children.length,
    );
  });

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