import React from 'react';
import { shallow } from 'enzyme';

import { CustomRefinementList } from '.';
import { Toggle } from '@ui/components';

describe('RefinementList', () => {
  let node;
  let props;

  beforeEach(() => {
    props = {
      attribute: 'subdomain',
      items: [
        { isRefined: true, label: 'project 1', value: 'test' },
        { isRefined: false, label: 'project 2', value: 'test' },
        { isRefined: false, label: 'project 3', value: 'test' },
        { isRefined: false, label: 'project 4', value: 'test' },
        { isRefined: true, label: 'project 5', value: 'test' },
        { isRefined: false, label: 'project 6', value: 'test' },
        { isRefined: false, label: 'project 7', value: 'test' },
        { isRefined: false, label: 'project 8', value: 'test' },
        { isRefined: false, label: 'project 9', value: 'test' },
        { isRefined: false, label: 'project 10', value: 'test' },
        { isRefined: false, label: 'project 11', value: 'test' },
      ],
      showMore: false,
      onBlur: jest.fn(),
      onRefine: jest.fn(),
      refine: jest.fn(),
    };
    node = shallow(<CustomRefinementList {...props} />);
  });

  it('displays the <RefinementList> element', () => {
    expect(node.find('details')).toHaveLength(1);
  });

  it('should handle blur events', () => {
    const li = node.find('li').first();
    li.simulate('keydown', {
      currentTarget: { matches: jest.fn().mockReturnValue(':last-of-type') },
      key: 'Tab',
      shiftKey: false,
    });

    expect(props.onBlur).toHaveBeenCalled();
  });

  it('should handle toggle events', () => {
    const toggle = node.find(Toggle);
    toggle.first().simulate('change');

    expect(props.refine).toHaveBeenCalled();
    expect(props.onRefine).toHaveBeenCalled();
  });
});
