import React from 'react';
import { configure, mount } from 'enzyme';
import { spy } from 'sinon';
import Adapter from 'enzyme-adapter-react-16';
import NavigationTiers from '../src/NavigationTiers';
import ListProvider from '../src/ListProvider';
import { OpenProvider } from '../src/OpenProvider';
import PageProvider from '../src/PageProvider';
import Dropdown from '../src/Dropdown';

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

const shallowRender = (props) => {
  const Tier = () => <div>I'm a Tier, child of Nav</div>;
  const requiredProps = {
    children: [
      <Tier
        id='id'
        itemSearch={() => {}}
        initialData={[{}]}
        label='name'
        onDrilldown={() => {}}
        onSelect={() => {}}
        clippedResultsMessage={() => {}}
      >
        {
          () => <span>tier content</span>
        }
      </Tier>
    ],
    initialData: [{}],
    style: {}
  };
  const mergedProps = Object.assign({}, requiredProps, props);
  const wrapper = mount(
    <NavigationTiers { ...mergedProps } />
  );

  return {
    mergedProps,
    wrapper
  }
};

describe('NavigationTiers', () => {

  describe('sub components', () => {
    const { wrapper } = shallowRender();

    it('should render the OpenProvider component', () => {
      expect(wrapper.find('OpenProvider')).toHaveLength(1);
    });

    it('should render the PageProvider component', () => {
      expect(wrapper.find('PageProvider')).toHaveLength(1);
    });

    it('should render the ListProvider component', () => {
      expect(wrapper.find('ListProvider')).toHaveLength(1);
    });
  });


  describe('when the trigger zone has not been clicked', () => {
    const { wrapper } = shallowRender();

    it('should not render the Dropdown component', () => {
      expect(wrapper.find('Dropdown')).toHaveLength(0);
    });

  });

  describe('when the trigger zone is clicked', () => {
    const { wrapper } = shallowRender();

    it('should toggle the Dropdown ', () => {
      wrapper.find('.trigger').simulate('click');

      expect(wrapper.find('Dropdown')).toHaveLength(1);
    });
  });
});