dropdownAutoComplete.spec.jsx 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. import {mountWithTheme} from 'sentry-test/enzyme';
  2. import DropdownAutoComplete from 'app/components/dropdownAutoComplete';
  3. describe('DropdownAutoComplete', function () {
  4. const routerContext = TestStubs.routerContext();
  5. const items = [
  6. {
  7. value: 'apple',
  8. label: <div>Apple</div>,
  9. },
  10. {
  11. value: 'bacon',
  12. label: <div>Bacon</div>,
  13. },
  14. {
  15. value: 'corn',
  16. label: <div>Corn</div>,
  17. },
  18. ];
  19. it('has actor wrapper', function () {
  20. const wrapper = mountWithTheme(
  21. <DropdownAutoComplete items={items}>{() => 'Click Me!'}</DropdownAutoComplete>,
  22. routerContext
  23. );
  24. expect(wrapper.find('div[role="button"]')).toHaveLength(1);
  25. expect(wrapper.find('div[role="button"]').text()).toBe('Click Me!');
  26. });
  27. it('opens dropdown menu when actor is clicked', function () {
  28. const wrapper = mountWithTheme(
  29. <DropdownAutoComplete items={items}>{() => 'Click Me!'}</DropdownAutoComplete>,
  30. routerContext
  31. );
  32. wrapper.find('Actor[role="button"]').simulate('click');
  33. expect(wrapper.find('BubbleWithMinWidth')).toHaveLength(1);
  34. wrapper.find('Actor[role="button"]').simulate('click');
  35. expect(wrapper.find('BubbleWithMinWidth')).toHaveLength(1);
  36. });
  37. it('toggles dropdown menu when actor is clicked', function () {
  38. const wrapper = mountWithTheme(
  39. <DropdownAutoComplete allowActorToggle items={items}>
  40. {() => 'Click Me!'}
  41. </DropdownAutoComplete>,
  42. routerContext
  43. );
  44. wrapper.find('Actor[role="button"]').simulate('click');
  45. expect(wrapper.find('BubbleWithMinWidth')).toHaveLength(1);
  46. wrapper.find('Actor[role="button"]').simulate('click');
  47. expect(wrapper.find('BubbleWithMinWidth')).toHaveLength(0);
  48. });
  49. });