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

import type { SelectorProps } from './selector.proptypes';
import { Selector } from './index';
import { SelectorItem } from './selector-item';

const DEFAULT_PROPS: SelectorProps = {
  children: <span>child</span>,
  name: 'great-name',
  type: 'checkbox',
  onChange: jest.fn(),
};

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

  describe.skip('accessibility', () => {
    const TestComponent = () => (
      <Selector name="selector-name" onChange={jest.fn()} stateful>
        <SelectorItem id="option-one" label="First choice" value="option-one" />
        <SelectorItem
          id="option-two"
          label="Second choice"
          value="option-two"
          disabled
        />
        <SelectorItem
          id="option-three"
          label="Third choice"
          value="option-three"
        />
      </Selector>
    );

    itIsAccessible(<TestComponent />);
  });
});
