// @flow
import React from 'react';
import { FormattedMessage } from 'react-intl';
import {
  mountWrappedComponent,
  type MessageTable,
  itIsAccessible,
} from '../../../../utils/tests';
import { ContextMenu } from './context-menu.component';

const messages: MessageTable = {
  login: 'Login as client',
  invite: 'Invite',
  moreInfo: 'More Information',
  removeClient: 'Remove client',
};

const items = [
  {
    id: 'login',
    label: <FormattedMessage id="login" />,
    onSelect: () => {},
  },
  {
    id: 'invite',
    label: <FormattedMessage id="invite" />,
    onSelect: () => {},
  },
  {
    id: 'more_info',
    label: <FormattedMessage id="moreInfo" />,
    onSelect: () => {},
    textColorName: 'brand-secondary-fg',
  },
  {
    id: 'remove',
    label: <FormattedMessage id="removeClient" />,
    onSelect: () => {},
    danger: true,
  },
];

const DEFAULT_PROPS = {
  items,
  buttonLabel: 'See options',
};

describe('Context menu', () => {
  describe('click test', () => {
    it('clicks on menu but does not trigger parent click', () => {
      const parentClicker = jest.fn();
      const noop = () => {};
      const wrapper = mountWrappedComponent(
        <div onClick={parentClicker} onKeyDown={noop} role="presentation">
          <ContextMenu {...DEFAULT_PROPS} />,
        </div>,
        messages,
      );
      wrapper.find('button').at(0).simulate('click');
      expect(parentClicker).not.toHaveBeenCalled();
    });
  });

  describe('accessibility', () => {
    itIsAccessible(<ContextMenu {...DEFAULT_PROPS} isExpanded />);
  });
});
