{"size": 9089, "ext": "js", "max_stars_repo_path": "_/Chapter 9 Code/reactstrap/src/__tests__/Dropdown.spec.js", "max_stars_repo_name": "paullewallencom/bootstrap-978-1-7821-6452-4", "max_stars_repo_stars_event_min_datetime": "2016-11-14T05:27:31.000Z", "max_stars_repo_stars_event_max_datetime": "2021-11-08T13:12:11.000Z", "max_issues_repo_path": "_/Chapter 9 Code/reactstrap/src/__tests__/Dropdown.spec.js", "max_issues_repo_name": "paullewallencom/bootstrap-978-1-7821-6452-4", "max_issues_repo_issues_event_min_datetime": "2019-07-17T01:15:10.000Z", "max_issues_repo_issues_event_max_datetime": "2020-09-16T12:58:55.000Z", "max_forks_repo_path": "_/Chapter 9 Code/reactstrap/src/__tests__/Dropdown.spec.js", "max_forks_repo_name": "paullewallencom/bootstrap-978-1-7821-6452-4", "max_forks_repo_forks_event_min_datetime": "2017-02-14T07:58:12.000Z", "max_forks_repo_forks_event_max_datetime": "2021-05-11T09:20:13.000Z"}
{"max_stars_count": 19, "max_issues_count": 1, "max_forks_count": 19, "avg_line_length": 33.5387453875, "max_line_length": 92, "alphanum_fraction": 0.6326328529}
import React from 'react';
import { mount } from 'enzyme';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, TetherContent } from '../';


describe('Dropdown', () => {
  let isOpen;
  let toggle;
  let element;

  beforeEach(() => {
    isOpen = false;
    toggle = () => { isOpen = !isOpen; };
    element = document.createElement('div');
    document.body.appendChild(element);
  });

  afterEach(() => {
    document.body.removeChild(element);
    element = null;
  });

  it('should render a single child', () => {
    const wrapper = mount(<Dropdown isOpen={isOpen} toggle={toggle}>Ello world</Dropdown>);

    expect(wrapper.text()).toBe('Ello world');
    expect(wrapper.find('.dropdown').length).toBe(1);
  });

  it('should render multiple children when isOpen is true', () => {
    isOpen = true;
    const wrapper = mount(
      <Dropdown isOpen={isOpen} toggle={toggle}>
        <DropdownToggle>Toggle</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Test</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );

    expect(wrapper.find('.btn').text()).toBe('Toggle');
    expect(wrapper.find('.dropdown').length).toBe(1);
    expect(wrapper.find('.dropdown-item').length).toBe(1);
    expect(wrapper.children().length).toBe(2);
  });

  it('should not call props.toggle when disabled ', () => {
    isOpen = true;
    let props = jasmine.createSpyObj('props', ['toggle']);
    const wrapper = mount(
      <Dropdown isOpen={isOpen} toggle={props.toggle} disabled>
        <DropdownToggle>Toggle</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Test</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );
    const instance = wrapper.instance();

    instance.toggle({ preventDefault: () => { } });
    expect(props.toggle).not.toHaveBeenCalled();
  });

  describe('handleProps', () => {
    it('should be called on componentDidUpdate when isOpen changed', () => {
      spyOn(Dropdown.prototype, 'componentDidUpdate').and.callThrough();
      spyOn(Dropdown.prototype, 'handleProps').and.callThrough();
      const wrapper = mount(
        <Dropdown isOpen={isOpen} toggle={toggle}>
          <DropdownToggle>Toggle</DropdownToggle>
          <DropdownMenu>
            <DropdownItem>Test</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      );

      const instance = wrapper.instance();

      expect(Dropdown.prototype.componentDidUpdate.calls.count()).toBe(0);
      expect(Dropdown.prototype.handleProps.calls.count()).toBe(1);
      expect(instance.props.isOpen).toBe(false);

      isOpen = true;
      wrapper.setProps({ isOpen: isOpen });

      expect(Dropdown.prototype.componentDidUpdate.calls.count()).toBe(1);
      expect(Dropdown.prototype.handleProps.calls.count()).toBe(2);
      expect(instance.props.isOpen).toBe(true);
    });

    it('should not be called on componentDidUpdate when isOpen did not change', () => {
      spyOn(Dropdown.prototype, 'componentDidUpdate').and.callThrough();
      spyOn(Dropdown.prototype, 'handleProps').and.callThrough();
      const wrapper = mount(
        <Dropdown isOpen={isOpen} toggle={toggle}>
          <DropdownToggle>Toggle</DropdownToggle>
          <DropdownMenu>
            <DropdownItem>Test</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      );
      const instance = wrapper.instance();

      expect(Dropdown.prototype.componentDidUpdate.calls.count()).toBe(0);
      expect(Dropdown.prototype.handleProps.calls.count()).toBe(1);
      expect(instance.props.isOpen).toBe(false);

      wrapper.setProps({ 'data-foo': 'bar' });

      expect(Dropdown.prototype.componentDidUpdate.calls.count()).toBe(1);
      expect(Dropdown.prototype.handleProps.calls.count()).toBe(1);
      expect(instance.props.isOpen).toBe(false);
    });
  });

  describe('removeEvents', () => {
    it('should be called on componentWillUnmount', () => {
      spyOn(Dropdown.prototype, 'componentWillUnmount').and.callThrough();
      spyOn(Dropdown.prototype, 'removeEvents').and.callThrough();
      isOpen = true;
      const wrapper = mount(
        <Dropdown isOpen={isOpen} toggle={toggle} tether>
          <DropdownToggle>Toggle</DropdownToggle>
          <DropdownMenu>
            <DropdownItem>Test</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      );

      expect(Dropdown.prototype.componentWillUnmount.calls.count()).toBe(0);
      expect(Dropdown.prototype.removeEvents.calls.count()).toBe(0);

      wrapper.unmount();

      expect(Dropdown.prototype.componentWillUnmount.calls.count()).toBe(1);
      expect(Dropdown.prototype.removeEvents.calls.count()).toBe(1);
    });
  });

  describe('getTetherConfig', () => {
    it('should be called when tether is enabled', () => {
      isOpen = true;
      spyOn(Dropdown.prototype, 'getTetherConfig').and.callThrough();
      const wrapper = mount(
        <Dropdown isOpen={isOpen} toggle={toggle} tether>
          <DropdownToggle>Toggle</DropdownToggle>
          <DropdownMenu right>
            <DropdownItem>Test</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      );

      expect(Dropdown.prototype.getTetherConfig).toHaveBeenCalled();
      wrapper.unmount();
    });

    it('should apply dropup tether values', () => {
      isOpen = true;
      const wrapper = mount(
        <Dropdown isOpen={isOpen} toggle={toggle} tether dropup>
          <DropdownToggle>Toggle</DropdownToggle>
          <DropdownMenu right>
            <DropdownItem>Test</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      );

      expect(wrapper.find(TetherContent).props().tether.attachment).toBe('bottom right');
      expect(wrapper.find(TetherContent).props().tether.targetAttachment).toBe('top right');
      wrapper.unmount();
    });
  });

  describe('handleDocumentClick', () => {
    it('should call toggle on document click', () => {
      isOpen = true;
      spyOn(Dropdown.prototype, 'handleDocumentClick').and.callThrough();
      spyOn(Dropdown.prototype, 'toggle').and.callThrough();

      mount(
        <Dropdown isOpen={isOpen} toggle={toggle}>
          <DropdownToggle>Toggle</DropdownToggle>
          <DropdownMenu right>
            <DropdownItem>Test</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      );

      expect(Dropdown.prototype.handleDocumentClick.calls.count()).toBe(0);
      expect(Dropdown.prototype.toggle.calls.count()).toBe(0);

      document.body.click();

      expect(Dropdown.prototype.handleDocumentClick.calls.count()).toBe(1);
      expect(Dropdown.prototype.toggle.calls.count()).toBe(1);
    });

    it('should call toggle on container click', () => {
      isOpen = true;
      spyOn(Dropdown.prototype, 'handleDocumentClick').and.callThrough();
      spyOn(Dropdown.prototype, 'toggle').and.callThrough();

      const wrapper = mount(
        <Dropdown id="test" isOpen={isOpen} toggle={toggle}>
          <DropdownToggle>Toggle</DropdownToggle>
          <DropdownMenu right>
            <DropdownItem>Test</DropdownItem>
          </DropdownMenu>
        </Dropdown>, { attachTo: element });

      expect(Dropdown.prototype.handleDocumentClick.calls.count()).toBe(0);
      expect(Dropdown.prototype.toggle.calls.count()).toBe(0);

      document.getElementById('test').click();

      expect(Dropdown.prototype.handleDocumentClick.calls.count()).toBe(1);
      expect(Dropdown.prototype.toggle.calls.count()).toBe(1);

      wrapper.detach();
    });

    it('should not call toggle on inner container click', () => {
      isOpen = true;
      spyOn(Dropdown.prototype, 'handleDocumentClick').and.callThrough();
      spyOn(Dropdown.prototype, 'toggle').and.callThrough();

      const wrapper = mount(
        <Dropdown isOpen={isOpen} toggle={toggle}>
          <DropdownToggle>Toggle</DropdownToggle>
          <DropdownMenu right>
            <DropdownItem>Test</DropdownItem>
            <DropdownItem id="divider" divider />
          </DropdownMenu>
        </Dropdown>, { attachTo: element });

      expect(Dropdown.prototype.handleDocumentClick.calls.count()).toBe(0);
      expect(Dropdown.prototype.toggle.calls.count()).toBe(0);

      document.getElementById('divider').click();

      expect(Dropdown.prototype.handleDocumentClick.calls.count()).toBe(1);
      expect(Dropdown.prototype.toggle.calls.count()).toBe(0);

      wrapper.detach();
    });
  });

  it('should render different size classes', () => {
    const small = mount(
      <Dropdown group isOpen={isOpen} size="sm" toggle={toggle}>
        <DropdownToggle>Toggle</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Test</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );

    const large = mount(
      <Dropdown group isOpen={isOpen} size="lg" toggle={toggle}>
        <DropdownToggle>Toggle</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Test</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );

    expect(small.find('.btn-group-sm').length).toBe(1);
    expect(large.find('.btn-group-lg').length).toBe(1);
  });
});
