@momentum-ui/react-collaboration/src/legacy/MenuOverlay/tests/index.spec.js

Cisco Momentum UI Framework for React Collaboration Applications

import React from 'react';
import { shallow, mount } from 'enzyme';
import {
  Menu,
  MenuContent,
  MenuItemLegacy,
  MenuOverlay,
  Button,
} from '@momentum-ui/react-collaboration';
import EventOverlay from '../../EventOverlay';
import { ButtonPill } from '../../../components';
import { triggerPress } from '../../../../test/utils';
describe('tests for <MenuOverlay />', () => {
  it('should render a MenuOverlay', () => {
    const wrapper = mount(
      <MenuOverlay menuTrigger={<div>Trigger</div>}>
        <Menu>
          <MenuItemLegacy label="one" />
        </Menu>
      </MenuOverlay>
    );
    expect(wrapper).toMatchSnapshot();
  });

  it('should apply className to MenuOverlay', () => {
    const wrapper = mount(<MenuOverlay className="test" menuTrigger={<div>Trigger</div>} />);
    expect(wrapper.find('.md-menu-overlay-wrapper').hasClass('test')).toEqual(true);
  });

  it('should focus on focusFirstQuery', () => {
    // focus was being transferred to component outside the dom
    // see https://github.com/jsdom/jsdom/issues/2924
    const focusContainer = document.createElement('div');
    document.body.append(focusContainer);
    const wrapper = mount(
      <MenuOverlay focusFirstQuery=".md-test" menuTrigger={<div className="trigger">Trigger</div>}>
        <MenuContent>
          <button className="md-test" tabIndex={0}>
            test
          </button>
        </MenuContent>
        <Menu focusFirst={false}>
          <MenuItemLegacy label="one" />
        </Menu>
      </MenuOverlay>,
      { attachTo: focusContainer }
    );

    wrapper.find('.trigger').simulate('click');
    expect(document.activeElement.className).toEqual('md-test');
  });

  it('should open the menu on Click of button', () => {
    const wrapper = mount(
      <MenuOverlay menuTrigger={<div className="trigger">Trigger</div>}>
        <MenuContent>test</MenuContent>
        <Menu>
          <MenuItemLegacy label="one" />
        </Menu>
      </MenuOverlay>
    );
    wrapper.find('.trigger').simulate('click');
    expect(wrapper.find('.md-menu').length).toEqual(1);
    expect(wrapper.find('.md-menu-content').length).toEqual(1);
  });

  it('should toggle the menu on click of menuTrigger', () => {
    const wrapper = mount(
      <MenuOverlay menuTrigger={<div className="trigger">Trigger</div>}>
        <MenuContent>test</MenuContent>
        <Menu>
          <MenuItemLegacy label="one" />
        </Menu>
      </MenuOverlay>
    );
    wrapper.find('.trigger').simulate('click');
    expect(wrapper.find('.md-menu').length).toEqual(1);
    expect(wrapper.find('.md-menu-content').length).toEqual(1);
    wrapper.find('.trigger').simulate('click');
    expect(wrapper.find('.md-menu').length).toEqual(0);
    expect(wrapper.find('.md-menu-content').length).toEqual(0);
  });

  // skipping this test given that it works in the browser but not in jsdom
  it.skip('should close the menu on click outside and focus on the trigger with new momentum button trigger', async () => {
    const focusContainer = document.createElement('div');
    document.body.append(focusContainer);
    const wrapper = mount(
      <MenuOverlay
        menuTrigger={
          <ButtonPill className="trigger" stopPropagation={false}>
            Trigger
          </ButtonPill>
        }
      >
        <MenuContent>test</MenuContent>
        <Menu>
          <MenuItemLegacy label="one" />
        </Menu>
      </MenuOverlay>,
      { attachTo: focusContainer }
    );

    const trigger = wrapper.find('.trigger').at(0);
    triggerPress(trigger);
    expect(wrapper.find('.md-menu').length).toEqual(1);
    expect(wrapper.find('.md-menu-content').length).toEqual(1);
    wrapper.find(EventOverlay).instance().handleClickAway({});

    wrapper.update();

    expect(wrapper.find('.md-menu').length).toEqual(0);
    expect(wrapper.find('.md-menu-content').length).toEqual(0);
    expect(document.activeElement.textContent).toEqual(trigger.text());
  });

  it('when keepMenuOpen is set to true on MenuItemLegacy the MenuOverlay should not close', () => {
    const wrapper = mount(
      <MenuOverlay menuTrigger={<div className="trigger">Trigger</div>}>
        <MenuContent>test</MenuContent>
        <Menu>
          <MenuItemLegacy label="one" keepMenuOpen />
        </Menu>
      </MenuOverlay>
    );
    wrapper.find('.trigger').simulate('click');
    expect(wrapper.find('.md-menu').length).toEqual(1);
    expect(wrapper.find('.md-menu-content').length).toEqual(1);

    wrapper.find('.md-list-item').simulate('click');

    expect(wrapper.find('.md-menu').length).toEqual(1);
    expect(wrapper.find('.md-menu-content').length).toEqual(1);
  });

  it('by default should close the MenuOverlay when an leaf MenuItemLegacy is clicked', () => {
    const wrapper = mount(
      <MenuOverlay menuTrigger={<div className="trigger">Trigger</div>}>
        <MenuContent>test</MenuContent>
        <Menu>
          <MenuItemLegacy label="one" />
        </Menu>
      </MenuOverlay>
    );
    wrapper.find('.trigger').simulate('click');
    expect(wrapper.find('.md-menu').length).toEqual(1);
    expect(wrapper.find('.md-menu-content').length).toEqual(1);
    wrapper.find('.md-list-item').simulate('click');

    expect(wrapper.find('.md-menu').length).toEqual(0);
    expect(wrapper.find('.md-menu-content').length).toEqual(0);
  });

  it('callback should be called when an menuItem is selected', () => {
    let selectedIndex;
    const onSelectFn = (e, index) => (selectedIndex = index);
    const onClickFn = jest.fn();
    const wrapper = mount(
      <MenuOverlay onSelect={onSelectFn} menuTrigger={<div className="trigger">Trigger</div>}>
        <MenuContent>test</MenuContent>
        <Menu>
          <MenuItemLegacy onClick={onClickFn} label="one" keepMenuOpen />
        </Menu>
      </MenuOverlay>
    );
    //Open the menu
    wrapper.find('.trigger').simulate('click');

    // select the menuItem
    wrapper.find('.md-list-item').simulate('click');
    expect(selectedIndex).toBeTruthy();
    expect(onClickFn).toHaveBeenCalled();

    // hit enter
    wrapper.find('.md-list-item').simulate('keyDown', { which: 13 });
    expect(selectedIndex).toBeTruthy();
    expect(onClickFn).toHaveBeenCalled();
  });

  it('should throw error when MenuOverlay contains invalid elements', () => {
    try {
      shallow(
        <MenuOverlay menuTrigger={<div className="trigger">Trigger</div>}>
          <div>test</div>
          <Menu>
            <MenuItemLegacy label="one" />
          </Menu>
        </MenuOverlay>
      );
    } catch (e) {
      expect(e.message).toEqual('MenuOverlay should only contain Menu or MenuContent as children');
    }

    try {
      shallow(
        <MenuOverlay menuTrigger={<div className="trigger">Trigger</div>}>
          <MenuContent>test</MenuContent>
          <div>test</div>
        </MenuOverlay>
      );
    } catch (e) {
      expect(e.message).toEqual('MenuOverlay should only contain Menu or MenuContent as children');
    }
  });

  it('should pass down onPress prop when isMRv2Button used', () => {
    const wrapper = mount(
      <MenuOverlay menuTrigger={<ButtonPill className="trigger">Trigger</ButtonPill>}>
        <MenuContent>test</MenuContent>
        <Menu>
          <MenuItemLegacy label="one" />
        </Menu>
      </MenuOverlay>
    );
    const trigger = wrapper.find('.trigger').at(0);
    expect(trigger.prop('onPress')).toEqual(expect.any(Function));
    expect(trigger.prop('onClick')).toBeUndefined();
  });

  it('should pass down onClick prop when legacy button / non MRv2 button is used', () => {
    const wrapper = mount(
      <MenuOverlay menuTrigger={<Button className="trigger">Trigger</Button>}>
        <MenuContent>test</MenuContent>
        <Menu>
          <MenuItemLegacy label="one" />
        </Menu>
      </MenuOverlay>
    );
    const trigger = wrapper.find('.trigger').at(0);
    expect(trigger.prop('onClick')).toEqual(expect.any(Function));
    expect(trigger.prop('onPress')).toBeUndefined();
  });
});