@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.4

package/lib/cjs/components/NavBar/NavBar.test.js

@@ -1,55 +1,30 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
-var _GlobeIcon = _interopRequireDefault(require("mdi-react/GlobeIcon"));
-
-var _ViewDashboardIcon = _interopRequireDefault(require("mdi-react/ViewDashboardIcon"));
-
 var _AccountMultipleIcon = _interopRequireDefault(require("mdi-react/AccountMultipleIcon"));
-
-var _TransitConnectionVariantIcon = _interopRequireDefault(require("mdi-react/TransitConnectionVariantIcon"));
-
 var _EmoticonHappyOutlineIcon = _interopRequireDefault(require("mdi-react/EmoticonHappyOutlineIcon"));
-
 var _FingerprintIcon = _interopRequireDefault(require("mdi-react/FingerprintIcon"));
-
+var _GlobeIcon = _interopRequireDefault(require("mdi-react/GlobeIcon"));
 var _ScaleBalanceIcon = _interopRequireDefault(require("mdi-react/ScaleBalanceIcon"));
-
+var _TransitConnectionVariantIcon = _interopRequireDefault(require("mdi-react/TransitConnectionVariantIcon"));
 var _VerifiedIcon = _interopRequireDefault(require("mdi-react/VerifiedIcon"));
-
-var _ = require("../../");
-
-var _NavBar = _interopRequireDefault(require("./NavBar"));
-
+var _ViewDashboardIcon = _interopRequireDefault(require("mdi-react/ViewDashboardIcon"));
+var _index = require("../../index");
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
-
 var _testWrapper = require("../../utils/testUtils/testWrapper");
-
+var _NavBar = _interopRequireDefault(require("./NavBar"));
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var DATA_ID = 'data-id';
 var SECTION_BUTTON_DATA_ID = 'section-data-id';
 var data = [{
@@ -58,11 +33,11 @@ var data = [{
   icon: _GlobeIcon["default"],
   key: 'Overview',
   heading: 'Overview',
-  children: [(0, _react2.jsx)(_.NavBarItemButton, {
+  children: [(0, _react2.jsx)(_index.NavBarItemButton, {
     key: "Credentials Button Users",
     id: "Credentials Button Users",
     "data-testid": "navItemButton"
-  }, "Users"), (0, _react2.jsx)(_.NavBarItemLink, {
+  }, "Users"), (0, _react2.jsx)(_index.NavBarItemLink, {
     key: "Experiences Link Roles",
     id: "Experiences Link Roles",
     href: "https://pingidentity.com/",
@@ -107,27 +82,26 @@ var secondData = [{
   heading: 'Verify',
   children: ['Users', 'Group', 'Populations', 'Attributes', 'Roles']
 }];
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_.Box, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_index.Box, {
     sx: {
       height: '100%',
       maxHeight: '100%',
       overflowY: 'overlay !important'
     },
     key: "top-logo-parent"
-  }, (0, _react2.jsx)(_.NavBarSection, {
+  }, (0, _react2.jsx)(_index.NavBarSection, {
     items: data,
     hasSeparator: true,
     "data-testid": DATA_ID,
     "data-id": DATA_ID,
     key: "first-section"
-  }), (0, _react2.jsx)(_.NavBarSection, {
+  }), (0, _react2.jsx)(_index.NavBarSection, {
     items: secondData,
     title: "test_title",
     key: "second-section"
-  }), (0, _react2.jsx)(_.NavBarItem, {
+  }), (0, _react2.jsx)(_index.NavBarItem, {
     id: "Overview",
     key: "Overview",
     text: "Overview",
@@ -135,53 +109,45 @@ var getComponent = function getComponent() {
     "data-testid": "navItem"
   }))));
 };
-
 var ControlledComponent = function ControlledComponent() {
   var _context;
-
   var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedKey = _useState2[0],
-      setSelectedKey = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
   var customData = [{
     icon: _GlobeIcon["default"],
     key: 'Environment',
     heading: 'Environment title that is so long, it wraps',
-    children: [(0, _react2.jsx)(_.NavBarItemButton, {
+    children: [(0, _react2.jsx)(_index.NavBarItemButton, {
       key: "Click me for MFA Users",
       id: "Click me for MFA Users",
       onPress: function onPress() {
         setSelectedKey('MFA Button Users');
       }
-    }, "Click me for MFA Users"), (0, _react2.jsx)(_.NavBarItemButton, {
+    }, "Click me for MFA Users"), (0, _react2.jsx)(_index.NavBarItemButton, {
       key: "Earth Button Group",
       id: "Earth Button Group",
       "data-testid": "group-item"
     }, "Group")]
   }];
-
   var _useState3 = (0, _react.useState)((0, _concat["default"])(_context = []).call(_context, customData)),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      thisData = _useState4[0],
-      setData = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    thisData = _useState4[0],
+    setData = _useState4[1];
   var testFunction = function testFunction() {
     var _context2, _context3;
-
     var newArray = (0, _concat["default"])(_context2 = []).call(_context2, customData);
     newArray.pop();
     setData((0, _concat["default"])(_context3 = []).call(_context3, newArray));
   };
-
   var setKeys = function setKeys(e) {
     setSelectedKey(e);
   };
-
   return (0, _react2.jsx)(_NavBar["default"], {
     setSelectedKey: setKeys,
     selectedKey: selectedKey
-  }, (0, _react2.jsx)(_.Box, {
+  }, (0, _react2.jsx)(_index.Box, {
     variant: "navBar.sectionContainer",
     paddingBottom: "xl",
     key: "top-logo-parent"
@@ -189,50 +155,46 @@ var ControlledComponent = function ControlledComponent() {
     key: "test-button",
     "data-testid": "test-button",
     onClick: testFunction
-  }, "click me!"), (0, _react2.jsx)(_.NavBarItem, {
+  }, "click me!"), (0, _react2.jsx)(_index.NavBarItem, {
     id: "Overview",
     key: "Overview",
     text: "Overview",
     icon: _ViewDashboardIcon["default"],
     "data-testid": "navItem"
-  }), (0, _react2.jsx)(_.NavBarSection, {
+  }), (0, _react2.jsx)(_index.NavBarSection, {
     items: data,
     hasSeparator: true,
     "data-id": "nav-bar-section"
-  }), (0, _react2.jsx)(_.NavBarSection, {
+  }), (0, _react2.jsx)(_index.NavBarSection, {
     items: secondData,
     hasSeparator: true,
     title: "PingOne Services",
     "data-id": "second-nav-bar-section"
-  }), (0, _react2.jsx)(_.NavBarSection, {
+  }), (0, _react2.jsx)(_index.NavBarSection, {
     items: thisData,
     "data-id": "third-nav-bar-section"
   })));
 };
-
 var getComponentWithMultipleChildren = function getComponentWithMultipleChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_.Box, {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_index.Box, {
     key: "top-logo-parent"
-  }, (0, _react2.jsx)(_.Link, {
+  }, (0, _react2.jsx)(_index.Link, {
     href: "https://pingidentity.com",
     target: "_blank",
     "aria-label": "home link",
     "data-testid": "navLink"
-  }, "home")), (0, _react2.jsx)(_.Button, {
+  }, "home")), (0, _react2.jsx)(_index.Button, {
     "data-testid": "navButton",
     key: "nav-button"
   }, "test button")));
 };
-
 var clickHeaderButtons = function clickHeaderButtons() {
   var headerButtons = _testWrapper.screen.getAllByRole('button');
-
   (0, _map["default"])(headerButtons).call(headerButtons, function (button) {
     return _userEvent["default"].click(button);
   });
 };
-
 (0, _testAxe["default"])(getComponent);
 test('should render basic nav with children', function () {
   getComponent();
@@ -254,13 +216,9 @@ test('should render title for itemBodies that have subTitles', function () {
 test('should select NavItemLink', function () {
   getComponent();
   clickHeaderButtons();
-
   var link = _testWrapper.screen.getByTestId('navItemLink');
-
   expect(link).toBeInTheDocument();
-
   _userEvent["default"].click(link);
-
   expect(link).toHaveClass('is-selected');
 });
 test('controlled: should select NavItemLink', function () {
@@ -269,25 +227,19 @@ test('controlled: should select NavItemLink', function () {
   clickHeaderButtons();
   link = _testWrapper.screen.queryByTestId('navItemLink');
   expect(link).toBeInTheDocument();
-
   _userEvent["default"].click(link);
-
   link = _testWrapper.screen.queryByTestId('navItemLink');
   expect(link).toHaveClass('is-selected');
 });
 test('should select NavItemLink on space key press', function () {
   getComponent();
   clickHeaderButtons();
-
   var link = _testWrapper.screen.getByTestId('navItemLink');
-
   expect(link).toBeInTheDocument();
-
   _testWrapper.fireEvent.keyDown(link, {
     key: 'Space',
     keyCode: 32
   });
-
   expect(link).toHaveClass('is-selected');
 });
 test('controlled: should select NavItemLink on space key press', function () {
@@ -296,17 +248,14 @@ test('controlled: should select NavItemLink on space key press', function () {
   clickHeaderButtons();
   link = _testWrapper.screen.queryByTestId('navItemLink');
   expect(link).toBeInTheDocument();
-
   _testWrapper.fireEvent.keyDown(link, {
     key: 'Space',
     keyCode: 32
   });
-
   _testWrapper.fireEvent.keyUp(link, {
     key: 'Space',
     keyCode: 32
   });
-
   link = _testWrapper.screen.queryByTestId('navItemLink');
   expect(link).toHaveClass('is-selected');
 });
@@ -315,21 +264,15 @@ test('should select NavItem', function () {
   var item;
   item = _testWrapper.screen.queryByTestId('navItem');
   expect(item).toBeInTheDocument();
-
   _userEvent["default"].click(item);
-
   item = _testWrapper.screen.queryByTestId('navItem');
   expect(item).toHaveClass('is-selected');
 });
 test('should select NavItem', function () {
   getComponent();
-
   var item = _testWrapper.screen.getByTestId('navItem');
-
   expect(item).toBeInTheDocument();
-
   _userEvent["default"].click(item);
-
   expect(item).toHaveClass('is-selected');
 });
 test('controlled: should select NavItem', function () {
@@ -337,22 +280,16 @@ test('controlled: should select NavItem', function () {
   var item;
   item = _testWrapper.screen.queryByTestId('navItem');
   expect(item).toBeInTheDocument();
-
   _userEvent["default"].click(item);
-
   item = _testWrapper.screen.queryByTestId('navItem');
   expect(item).toHaveClass('is-selected');
 });
 test('should select NavItemButton', function () {
   getComponent();
   clickHeaderButtons();
-
   var button = _testWrapper.screen.getByTestId('navItemButton');
-
   expect(button).toBeInTheDocument();
-
   _userEvent["default"].click(button);
-
   expect(button).toHaveClass('is-selected');
 });
 test('controlled: should select NavItemButton', function () {
@@ -361,9 +298,7 @@ test('controlled: should select NavItemButton', function () {
   clickHeaderButtons();
   button = _testWrapper.screen.queryByTestId('navItemButton');
   expect(button).toBeInTheDocument();
-
   _userEvent["default"].click(button);
-
   button = _testWrapper.screen.queryByTestId('navItemButton');
   expect(button).toHaveClass('is-selected');
 });
@@ -379,9 +314,7 @@ test('should collapse NavItemBody on Escape key press', function () {
   getComponent();
   clickHeaderButtons();
   expect(_testWrapper.screen.getByTestId('navItemButton')).toBeInTheDocument();
-
   var headerButtons = _testWrapper.screen.getAllByRole('button');
-
   (0, _map["default"])(headerButtons).call(headerButtons, function (headerButton) {
     return _testWrapper.fireEvent.keyDown(headerButton, {
       key: 'Escape',
@@ -392,82 +325,60 @@ test('should collapse NavItemBody on Escape key press', function () {
 });
 test('should change focus between NavBarItemHeader on arrow key press', function () {
   getComponent();
-
   var headerButtons = _testWrapper.screen.getAllByRole('button');
-
   expect(headerButtons[0]).toBeInTheDocument();
   headerButtons[0].focus();
   expect(headerButtons[0]).toHaveClass('is-focused');
-
   _testWrapper.fireEvent.keyDown(headerButtons[0], {
     key: 'ArrowDown',
     keyCode: 40
   });
-
   expect(headerButtons[1]).toHaveClass('is-focused');
-
   _testWrapper.fireEvent.keyDown(headerButtons[0], {
     key: 'ArrowRight',
     keyCode: 39
   });
-
   expect(headerButtons[2]).toHaveClass('is-focused');
-
   _testWrapper.fireEvent.keyDown(headerButtons[0], {
     key: 'ArrowLeft',
     keyCode: 37
   });
-
   expect(headerButtons[1]).toHaveClass('is-focused');
-
   _testWrapper.fireEvent.keyDown(headerButtons[0], {
     key: 'ArrowUp',
     keyCode: 38
   });
-
   expect(headerButtons[0]).toHaveClass('is-focused');
-
   _testWrapper.fireEvent.keyDown(headerButtons[0], {
     key: 'Shift',
     keyCode: 16
   });
-
   expect(headerButtons[0]).toHaveClass('is-focused');
 });
 test('should not change focus from NavItemBody to NavBarItemHeader on arrow key press', function () {
   getComponent();
-
   var headerButtons = _testWrapper.screen.getAllByRole('button');
-
   expect(headerButtons[0]).toBeInTheDocument();
   headerButtons[0].click();
-
   _testWrapper.fireEvent.keyDown(headerButtons[0], {
     key: 'ArrowDown',
     keyCode: 40
   });
-
   expect(_testWrapper.screen.getByTestId('navItemButton')).toHaveClass('is-focused');
-
   _testWrapper.fireEvent.keyDown(_testWrapper.screen.getByTestId('navItemButton'), {
     key: 'ArrowUp',
     keyCode: 38
   });
-
   expect(_testWrapper.screen.getByTestId('navItemButton')).toHaveClass('is-focused');
-
   _testWrapper.fireEvent.keyDown(_testWrapper.screen.getByTestId('navItemButton'), {
     key: 'ArrowDown',
     keyCode: 40
   });
-
   expect(_testWrapper.screen.getByTestId('navItemLink')).toHaveClass('is-focused');
-
   _testWrapper.fireEvent.keyDown(_testWrapper.screen.getByTestId('navItemLink'), {
     key: 'ArrowDown',
     keyCode: 40
   });
-
   expect(_testWrapper.screen.getByTestId('navItemLink')).toHaveClass('is-focused');
 });
 test('should render nav with multiple children', function () {
@@ -476,55 +387,40 @@ test('should render nav with multiple children', function () {
 });
 test('should change focus between nav children on arrow key press', function () {
   getComponentWithMultipleChildren();
-
   var link = _testWrapper.screen.getByTestId('navLink');
-
   var button = _testWrapper.screen.getByTestId('navButton');
-
   expect(link).toBeInTheDocument();
   link.focus();
   expect(link).toHaveClass('is-focused');
-
   _testWrapper.fireEvent.keyDown(link, {
     key: 'ArrowDown',
     keyCode: 40
   });
-
   expect(button).toHaveClass('is-focused');
-
   _testWrapper.fireEvent.keyDown(button, {
     key: 'ArrowUp',
     keyCode: 38
   });
-
   expect(link).toHaveClass('is-focused');
-
   _testWrapper.fireEvent.keyDown(link, {
     key: 'ArrowRight',
     keyCode: 39
   });
-
   expect(button).toHaveClass('is-focused');
-
   _testWrapper.fireEvent.keyDown(button, {
     key: 'ArrowLeft',
     keyCode: 37
   });
-
   expect(link).toHaveClass('is-focused');
-
   _testWrapper.fireEvent.keyDown(link, {
     key: 'Shift',
     keyCode: 16
   });
-
   expect(link).toHaveClass('is-focused');
-
   _testWrapper.fireEvent.keyDown(link, {
     key: 'Space',
     keyCode: 32
   });
-
   expect(link).toHaveClass('is-focused');
 });
 test('should render NavBarSection with data-id', function () {
@@ -539,9 +435,7 @@ test('passing in a string into defaultSelectedKeys makes the key selected by def
   getComponent({
     defaultSelectedKey: 'Credentials Button Users'
   });
-
   var child = _testWrapper.screen.getByTestId('navItemButton');
-
   expect(child).toBeInTheDocument();
   expect(child).toHaveClass('is-selected');
 });
@@ -549,32 +443,20 @@ test('when a child is selected, and the parent is collapsed, the parent has the
   getComponent({
     defaultSelectedKey: 'Credentials Button Users'
   });
-
   var child = _testWrapper.screen.getByTestId('navItemButton');
-
   expect(child).toBeInTheDocument();
   expect(child).toHaveClass('is-selected');
-
   var parent = _testWrapper.screen.queryByTestId(SECTION_BUTTON_DATA_ID);
-
   expect(parent).not.toHaveClass('is-selected');
-
   _userEvent["default"].click(parent);
-
   var parentDiv = _testWrapper.screen.queryByTestId('Overview');
-
   expect(parentDiv).toHaveClass('is-selected');
 });
 test('controlled version: items can be updated.', function () {
   (0, _testWrapper.render)((0, _react2.jsx)(ControlledComponent, null));
-
   var button = _testWrapper.screen.getByTestId('test-button');
-
   var thisitem = _testWrapper.screen.getByTestId('Environment title that is so long, it wraps');
-
   expect(thisitem).toBeInTheDocument();
-
   _userEvent["default"].click(button);
-
   expect(_testWrapper.screen.queryByTestId('Environment title that is so long, it wraps')).not.toBeInTheDocument();
 });

package/lib/cjs/components/NavBar/index.js

@@ -1,18 +1,14 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
     return _NavBar["default"];
   }
 });
-
 var _NavBar = _interopRequireDefault(require("./NavBar"));