@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -0,0 +1,362 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { useState } from 'react';
+import EnvironmentBreadcrumb from './EnvironmentBreadcrumb';
+import { Item, Section, Chip, Box, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'EnvironmentBreadcrumb',
+  component: EnvironmentBreadcrumb
+};
+var defaultEnvironments = [{
+  name: 'Default'
+}, {
+  name: 'Kangaroo'
+}, {
+  name: 'Snake'
+}, {
+  name: 'Snail'
+}, {
+  name: 'Slug'
+}, {
+  name: 'Crow'
+}, {
+  name: 'Dog'
+}, {
+  name: 'Crab',
+  isSandbox: true
+}, {
+  name: 'Fish'
+}, {
+  name: 'Turtle'
+}, {
+  name: 'Mouse'
+}, {
+  name: 'Banana'
+}, {
+  name: 'Shark'
+}, {
+  name: 'Gorilla'
+}, {
+  name: 'Goat'
+}];
+var environmentsWithSections = [{
+  name: 'Recent',
+  options: [{
+    name: 'Default'
+  }, {
+    name: 'Consumer Banking Prod'
+  }, {
+    name: 'Custom 360 Test'
+  }]
+}, {
+  name: 'All',
+  options: [{
+    name: 'Consumer Banking Prod'
+  }, {
+    name: 'Custom 360 Test'
+  }, {
+    name: 'Default'
+  }, {
+    name: 'Great New One',
+    isSandbox: true
+  }, {
+    name: 'Jeff’s Workforce'
+  }, {
+    name: 'Lindemuller Prod'
+  }, {
+    name: 'Mine'
+  }]
+}];
+export var Default = function Default(args) {
+  var _useState = useState({
+    name: 'Snail',
+    isSandbox: true
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedEnvironment = _useState2[0],
+      setSelectedEnvironment = _useState2[1];
+
+  var envNode = ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref) {
+      var name = _ref.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  return ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, args, {
+    items: defaultEnvironments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange
+  }), function (_ref2) {
+    var name = _ref2.name,
+        isSandbox = _ref2.isSandbox;
+    return ___EmotionJSX(Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? ___EmotionJSX(Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40"
+    }) : null);
+  });
+};
+export var WithSections = function WithSections() {
+  var _useState3 = useState(environmentsWithSections),
+      _useState4 = _slicedToArray(_useState3, 2),
+      environments = _useState4[0],
+      setEnvironments = _useState4[1];
+
+  var _useState5 = useState({
+    name: 'Consumer Banking Prod'
+  }),
+      _useState6 = _slicedToArray(_useState5, 2),
+      selectedEnvironment = _useState6[0],
+      setSelectedEnvironment = _useState6[1];
+
+  var recentEnvShown = 3;
+
+  var getUpdatedRecentEnvs = function getUpdatedRecentEnvs(envObj, prevEnvs) {
+    var _context3;
+
+    var envName = envObj.name;
+    var isDuplicate = _filterInstanceProperty(prevEnvs).call(prevEnvs, function (prevEnv) {
+      return prevEnv.name === envName;
+    }).length > 0;
+
+    if (isDuplicate) {
+      var _context;
+
+      return _concatInstanceProperty(_context = [_objectSpread({}, envObj)]).call(_context, _filterInstanceProperty(prevEnvs).call(prevEnvs, function (prevEnv) {
+        return prevEnv.name !== envName;
+      }));
+    }
+
+    if (prevEnvs.length >= recentEnvShown) {
+      var _context2;
+
+      return _concatInstanceProperty(_context2 = [_objectSpread({}, envObj)]).call(_context2, _sliceInstanceProperty(prevEnvs).call(prevEnvs, 0, recentEnvShown - 1));
+    }
+
+    return _concatInstanceProperty(_context3 = [_objectSpread({}, envObj)]).call(_context3, prevEnvs);
+  };
+
+  var findEnvObj = function findEnvObj(envName) {
+    var _context4;
+
+    return _findInstanceProperty(_context4 = _findInstanceProperty(environments).call(environments, function (section) {
+      return section.name === 'All';
+    }).options).call(_context4, function (option) {
+      return option.name === envName;
+    });
+  };
+
+  var handleEnvPress = function handleEnvPress(newEnv) {
+    var sectionPrefixIndex = _indexOfInstanceProperty(newEnv).call(newEnv, '-');
+
+    var envKey = newEnv.substr(sectionPrefixIndex + 1);
+
+    var recentEnvironments = _findInstanceProperty(environments).call(environments, function (envSection) {
+      return envSection.name === 'Recent';
+    }).options;
+
+    var envObj = findEnvObj(envKey);
+    var updatedRecentEnvironments = getUpdatedRecentEnvs(envObj, recentEnvironments);
+    setEnvironments(function (prevEnvs) {
+      return _mapInstanceProperty(prevEnvs).call(prevEnvs, function (section) {
+        return section.name === 'Recent' ? _objectSpread(_objectSpread({}, section), {}, {
+          options: updatedRecentEnvironments
+        }) : section;
+      });
+    });
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  var envNode = ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  return ___EmotionJSX(EnvironmentBreadcrumb, {
+    items: environments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleEnvPress
+  }, function (_ref3) {
+    var sectionName = _ref3.name,
+        sectionOptions = _ref3.options;
+    return ___EmotionJSX(Section, {
+      key: sectionName,
+      title: sectionName,
+      items: sectionOptions
+    }, function (_ref4) {
+      var _context5;
+
+      var itemName = _ref4.name,
+          itemOptions = _ref4.options,
+          isSandbox = _ref4.isSandbox;
+      return ___EmotionJSX(Item, {
+        key: _concatInstanceProperty(_context5 = "".concat(sectionName, "-")).call(_context5, itemName),
+        childItems: itemOptions,
+        textValue: itemName
+      }, ___EmotionJSX(Box, {
+        isRow: true
+      }, itemName, isSandbox ? ___EmotionJSX(Chip, {
+        label: "SANDBOX",
+        variant: "boxes.environmentChip",
+        bg: "neutral.40"
+      }) : null));
+    });
+  });
+};
+export var OrgLevel = function OrgLevel() {
+  return ___EmotionJSX(EnvironmentBreadcrumb, {
+    name: "Globochem"
+  });
+};
+export var DefaultOpen = function DefaultOpen() {
+  var _useState7 = useState({
+    name: 'Dog',
+    isSandbox: true
+  }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      selectedEnvironment = _useState8[0],
+      setSelectedEnvironment = _useState8[1];
+
+  var envNode = ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref5) {
+      var name = _ref5.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  return ___EmotionJSX(EnvironmentBreadcrumb, {
+    items: defaultEnvironments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange,
+    isDefaultOpen: true
+  }, function (_ref6) {
+    var name = _ref6.name,
+        isSandbox = _ref6.isSandbox;
+    return ___EmotionJSX(Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? ___EmotionJSX(Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40"
+    }) : null);
+  });
+};
+export var ControlledMenu = function ControlledMenu() {
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isOpen = _useState10[0],
+      setIsOpen = _useState10[1];
+
+  var _useState11 = useState({
+    name: 'Shark',
+    isSandbox: true
+  }),
+      _useState12 = _slicedToArray(_useState11, 2),
+      selectedEnvironment = _useState12[0],
+      setSelectedEnvironment = _useState12[1];
+
+  var envNode = ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref7) {
+      var name = _ref7.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  return ___EmotionJSX(EnvironmentBreadcrumb, {
+    items: defaultEnvironments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange,
+    isOpen: isOpen,
+    onOpenChange: setIsOpen
+  }, function (_ref8) {
+    var name = _ref8.name,
+        isSandbox = _ref8.isSandbox;
+    return ___EmotionJSX(Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? ___EmotionJSX(Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40"
+    }) : null);
+  });
+};

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -0,0 +1,299 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { Section } from '@react-stately/collections';
+import { axe } from 'jest-axe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import { EnvironmentBreadcrumb, Item, OverlayProvider } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testEnvBreadcrumb = 'test-env-breadcrumb';
+var testName = 'test-name';
+var testSelectedItem = 'test-selected-item';
+var testSearchLabel = 'test-Search-Label';
+var items = [{
+  name: 'a'
+}, {
+  name: 'b'
+}, {
+  name: 'c'
+}];
+var itemsWithSections = [{
+  name: 'Heading 1',
+  options: [{
+    name: 'Foo'
+  }, {
+    name: 'Bar'
+  }, {
+    name: 'Baz'
+  }]
+}];
+var defaultProps = {
+  'data-testid': testEnvBreadcrumb,
+  name: testName,
+  selectedItem: testSelectedItem,
+  searchProps: {
+    label: testSearchLabel
+  },
+  items: items
+};
+var popoverProps = {
+  maxWidth: '100px',
+  'data-testid': 'popover-container'
+};
+var defaultWithSectionsProps = {
+  'data-testid': testEnvBreadcrumb,
+  name: testName,
+  selectedItem: testSelectedItem,
+  searchProps: {
+    label: testSearchLabel
+  },
+  items: itemsWithSections
+};
+var onSelectionChange = jest.fn();
+
+var getComponent = function getComponent(props) {
+  return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultProps, props), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      "data-testid": item.name
+    }, item.name);
+  })));
+};
+
+var getSectionsComponent = function getSectionsComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultWithSectionsProps, props), function (section) {
+    return (// eslint-disable-next-line testing-library/no-node-access
+      ___EmotionJSX(Section, {
+        key: section.name,
+        name: section.name,
+        items: section.options
+      }, function (item) {
+        return ___EmotionJSX(Item, {
+          key: item.name,
+          childItems: item.options
+        }, item.name);
+      })
+    );
+  })));
+};
+
+beforeAll(function () {
+  jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  jest.spyOn(window.screen, 'width', 'get').mockImplementation(function () {
+    return 1024;
+  });
+  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
+    return cb();
+  });
+  jest.useFakeTimers();
+});
+afterEach(function () {
+  jest.clearAllMocks();
+  onSelectionChange.mockClear();
+});
+afterAll(function () {
+  jest.restoreAllMocks();
+});
+test('should render environment breadcrumb component by default', function () {
+  getComponent();
+  var breadcrumbList = screen.getByTestId(testEnvBreadcrumb);
+  expect(breadcrumbList).toBeInstanceOf(HTMLOListElement);
+  expect(breadcrumbList).toBeInTheDocument();
+  var firstButton = screen.getByTestId('name');
+  expect(firstButton).toBeInstanceOf(HTMLButtonElement);
+  expect(firstButton).toBeInTheDocument();
+  var lastButton = screen.getByText('test-selected-item');
+  expect(lastButton).toBeInstanceOf(HTMLButtonElement);
+  expect(lastButton).toBeInTheDocument();
+});
+test('should display name', function () {
+  getComponent();
+  expect(screen.getByText(testName)).toBeInTheDocument();
+});
+test('should spread props into popover container', function () {
+  getComponent(_objectSpread(_objectSpread({}, popoverProps), {}, {
+    isDefaultOpen: true
+  }));
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(screen.queryByTestId('popover-container')).toHaveStyle('max-width: 100px');
+});
+test('should display selectedItem', function () {
+  getComponent();
+  expect(screen.getByText(testSelectedItem)).toBeInTheDocument();
+});
+test('should call onNamePress when name pressed', function () {
+  var onNamePressMock = jest.fn();
+  getComponent({
+    onNamePress: onNamePressMock
+  });
+  expect(onNamePressMock).not.toHaveBeenCalled();
+  userEvent.click(screen.getByText(testName));
+  expect(onNamePressMock).toHaveBeenCalledTimes(1);
+});
+test('should not call onNamePress when current env button pressed', function () {
+  var onNamePressMock = jest.fn();
+  getComponent({
+    onNamePress: onNamePressMock
+  });
+  expect(onNamePressMock).not.toHaveBeenCalled();
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(onNamePressMock).not.toHaveBeenCalled();
+});
+test('should render items passed in props', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          getComponent();
+          expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+          expect(screen.queryByRole('option')).not.toBeInTheDocument();
+          userEvent.click(screen.getByText(testSelectedItem));
+          expect(screen.queryByRole('listbox')).toBeInTheDocument();
+          expect(screen.queryAllByRole('option')).toHaveLength(3);
+
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
+test('should render items with sections passed in props', function () {
+  getSectionsComponent();
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(screen.queryByRole('option')).not.toBeInTheDocument();
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(screen.getByRole('group')).toBeInTheDocument();
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(screen.queryAllByRole('option')).toHaveLength(3);
+});
+test('should call onSelectionChange when env clicked', function () {
+  var onSelectionChangeMock = jest.fn();
+  getComponent({
+    onSelectionChange: onSelectionChangeMock
+  });
+  expect(onSelectionChangeMock).not.toHaveBeenCalled();
+  userEvent.click(screen.getByText(testSelectedItem));
+  userEvent.click(screen.getByText(items[0].name));
+  expect(onSelectionChangeMock).toHaveBeenNthCalledWith(1, items[0].name);
+});
+test('should disable item if his hey passed in the disabledKeys prop', function () {
+  getComponent({
+    disabledKeys: ['a']
+  });
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(screen.getByText(items[0].name)).toHaveClass('is-disabled');
+});
+test('should call onPopoverOpen if it is passed in the props', function () {
+  var onPopoverOpenMock = jest.fn();
+  getComponent({
+    onPopoverOpen: onPopoverOpenMock
+  });
+  expect(onPopoverOpenMock).not.toHaveBeenCalled();
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(onPopoverOpenMock).toHaveBeenCalled();
+});
+test('should call onPopoverClose if it is passed in the props', function () {
+  var onPopoverCloseMock = jest.fn();
+  getComponent({
+    onPopoverClose: onPopoverCloseMock
+  });
+  expect(onPopoverCloseMock).not.toHaveBeenCalled();
+  userEvent.click(screen.getByText(testSelectedItem));
+  userEvent.click(screen.getByText(testName));
+  expect(onPopoverCloseMock).toHaveBeenCalled();
+});
+test('should close popover when other component clicked', function () {
+  getComponent();
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(screen.queryAllByRole('option')).toHaveLength(3);
+  userEvent.click(screen.getByText(testName));
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(screen.queryAllByRole('option')).not.toHaveLength(3);
+});
+test('should render current env node if passed in props', function () {
+  var testSelectedItemId = 'testSelectedItemId';
+  getComponent({
+    selectedItem: ___EmotionJSX("div", {
+      "data-testid": testSelectedItemId
+    })
+  });
+  expect(screen.getByTestId(testSelectedItemId)).toBeInTheDocument();
+});
+test('should show empty state in search if there are no results', function () {
+  var testEmptySearchText = 'testEmptySearchText';
+  getComponent({
+    emptySearchText: testEmptySearchText
+  });
+  userEvent.click(screen.getByText(testSelectedItem));
+  userEvent.type(screen.getByRole('searchbox'), '111');
+  expect(screen.getByText(testEmptySearchText)).toBeInTheDocument();
+});
+test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  var _getComponent, container, results;
+
+  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          jest.useRealTimers();
+          _getComponent = getComponent(), container = _getComponent.container;
+          _context2.next = 4;
+          return axe(container);
+
+        case 4:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+
+        case 6:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee2);
+})));
+test('should be open when isDefaultOpen is true', function () {
+  getComponent({
+    isDefaultOpen: true
+  });
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(screen.queryAllByRole('option')).toHaveLength(3);
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(screen.queryAllByRole('option')).not.toHaveLength(3);
+});
+test('should respond to onOpenChange', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    onOpenChange: onOpenChange
+  });
+  expect(onOpenChange).not.toHaveBeenCalled();
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(onOpenChange).toHaveBeenNthCalledWith(1, true);
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(onOpenChange).toHaveBeenNthCalledWith(2, false);
+});

package/lib/components/EnvironmentBreadcrumb/index.js

@@ -0,0 +1 @@
+export { default } from './EnvironmentBreadcrumb';