// @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(),
  label: 'great-label',
};

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

  describe('accessibility', () => {
    const TestComponent = () => (
      <div>
        <Selector
          name="selector-name"
          onChange={jest.fn()}
          stateful
          label="Label"
          hideLabel
        >
          <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>
      </div>
    );

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