/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import Enzyme from 'enzyme';
import Sinon from 'sinon';
import Adapter from 'enzyme-adapter-react-16';
import { FilterAvailable } from '../src/FilterAvailable';
import styles from '../src/Filters.scss';

Enzyme.configure({ adapter: new Adapter() });

const data = [
  {
    endpoint: '/filterA',
    key: 'aaa',
    value: 'AAA'
  },
  {
    endpoint: '/filterB',
    key: 'bbb',
    value: 'BBB'
  }
];

const I18nText = 'I18n Translation Text';
const I18n = { t: () => I18nText };

const shallowRender = (props = {}) => {
  const mergedProps = Object.assign({}, {
    disabled: false,
    keyListeners: () => {},
    currentIndex: -1,
    data,
    I18n,
    onChange: () => {},
    styles
  }, props);

  return Enzyme.shallow(
    <FilterAvailable {...mergedProps} />
  );
};

describe('FilterAvailable', () => {
  it('should render n items', () => {
    const wrapper = shallowRender();
    const itemElements = wrapper.find(`.${styles.availableRow}`);
    expect(itemElements.length).toBe(data.length);
  });

  describe('closes on select enter key', () => {
    const wrapper = shallowRender();
    wrapper.setState({ expanded: true });
    const itemElement = wrapper.find(`.${styles.availableRow}`).first();
    itemElement.simulate('click', { key: 'Enter' });
    expect(wrapper.state('expanded')).toBe(false);
  });

  describe('closes on select click', () => {
    const wrapper = shallowRender();
    wrapper.setState({ expanded: true });
    const itemElement = wrapper.find(`.${styles.availableRow}`).first();
    itemElement.simulate('click', { key: 'click', currentTarget: { dataset: {} } });
    expect(wrapper.state('expanded')).toBe(false);
  });

  it('triggers callback on select enter key', () => {
    const onChange = Sinon.spy();
    const wrapper = shallowRender({ onChange });
    const itemElement = wrapper.find(`.${styles.availableRow}`).first();
    itemElement.simulate('click', { key: 'Enter' });
    expect(onChange.called).toBe(true);
  });
});