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

package/lib/components/MultivaluesField/MultivaluesField.test.js

@@ -0,0 +1,397 @@
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { Item, MultivaluesField, OverlayProvider } from '../../index';
+import { render, screen, within } from '../../utils/testUtils/testWrapper';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var items = [{
+  id: 1,
+  name: 'Aardvark',
+  key: 'Aardvark'
+}, {
+  id: 2,
+  name: 'Kangaroo',
+  key: 'Kangaroo'
+}, {
+  id: 3,
+  name: 'Snake',
+  key: 'Snake'
+}];
+var defaultProps = {
+  items: items,
+  label: 'Field Label'
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
+
+  return renderFn(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({}, defaultProps, props), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name
+    }, 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();
+});
+afterAll(function () {
+  jest.restoreAllMocks();
+});
+test('renders MultivaluesField component', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  var label = screen.getByText(defaultProps.label);
+  expect(input).toBeInTheDocument();
+  expect(label).toBeInTheDocument();
+});
+test('opens listbox on focus and fires "onFocus', function () {
+  var onFocus = jest.fn();
+  getComponent({
+    onFocus: onFocus
+  });
+  var input = screen.getByRole('combobox');
+  input.focus();
+  expect(screen.getByRole('listbox')).toBeInTheDocument();
+  var options = screen.getAllByRole('option');
+  expect(options.length).toBe(items.length);
+  expect(options[0]).toHaveTextContent(items[0].name);
+  expect(onFocus).toBeCalled();
+});
+test('closes listbox on blur and fires "onBlur"', function () {
+  var onBlur = jest.fn();
+  getComponent({
+    onBlur: onBlur
+  });
+  var input = screen.getByRole('combobox');
+  input.focus();
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  input.blur();
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onBlur).toBeCalled();
+});
+test('opening and closing listbox fires "onOpenChange"', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    onOpenChange: onOpenChange
+  });
+  var input = screen.getByRole('combobox');
+  input.focus();
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(true);
+  input.blur();
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(false);
+});
+test('multiple selection is enabled, option disappears after selection', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  input.focus();
+  var listbox = screen.getByRole('listbox');
+  expect(listbox).toHaveAttribute('aria-multiselectable', 'true');
+  var options = within(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+  var secondOption = options[1];
+  secondOption.click();
+  expect(secondOption).not.toBeInTheDocument();
+});
+test('clicking an option renders chip with option name', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  input.focus();
+  var options = screen.getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+  var chip = screen.getByText(items[0].name);
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+});
+test('clicking on delete button deletes selection, and re-adds option to list', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  input.focus();
+  var options = screen.getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+  var chip = screen.getByText(items[0].name);
+  expect(chip).toBeInTheDocument();
+  var deleteButton = chip.nextSibling;
+  deleteButton.click();
+  expect(chip).not.toBeInTheDocument();
+  input.focus();
+  var updatedOptions = screen.getAllByRole('option');
+  expect(updatedOptions[0]).toBeInTheDocument();
+  expect(updatedOptions[0]).toHaveTextContent(items[0].name);
+});
+test('clicking an option fires "onSelectionChange"', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    onSelectionChange: onSelectionChange
+  });
+  var input = screen.getByRole('combobox');
+  input.focus();
+  var listbox = screen.getByRole('listbox');
+  var options = within(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+  var secondOption = options[1];
+  secondOption.click();
+  expect(secondOption).not.toBeInTheDocument();
+  expect(onSelectionChange).toBeCalledTimes(2);
+  expect(onSelectionChange.mock.calls[0][0].has(items[0].name)).toBeTruthy();
+  expect(onSelectionChange.mock.calls[1][0].has(items[1].name)).toBeTruthy();
+});
+test('changing the input value opens listbox, filters options, and fires "onInputChange"', function () {
+  var onInputChange = jest.fn();
+  getComponent({
+    onInputChange: onInputChange
+  });
+  var input = screen.getByRole('combobox');
+  var value = 'aa';
+  userEvent.type(input, value);
+  var listbox = screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  var options = within(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  expect(onInputChange).toBeCalledTimes(value.length);
+  expect(onInputChange).toHaveBeenCalledWith(value);
+});
+test('changing the input value and hitting enter by default do nothing', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'custom';
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  expect(input).toHaveValue(value);
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+});
+test('changing the input value and hitting enter creates new value in non-restrictive mode', function () {
+  getComponent({
+    mode: 'non-restrictive'
+  });
+  var input = screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'custom';
+  userEvent.type(input, value);
+  expect(input).toHaveValue(value);
+  userEvent.type(input, '{enter}');
+  expect(input).toHaveValue('');
+  var chip = screen.queryByText(value);
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+});
+test('in non-restrictive mode "onSelectionChange" returns entered keys', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+  var input = screen.getByRole('combobox');
+  var value = 'custom';
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  var chip = screen.queryByText(value);
+  expect(chip).toBeInTheDocument();
+  expect(onSelectionChange).toBeCalledTimes(1);
+  expect(onSelectionChange.mock.calls[0][0].has(value)).toBeTruthy();
+});
+test('in non-restrictive mode the same value cannot be applied twice', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+  var input = screen.getByRole('combobox');
+  var value = 'custom';
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  var chip = screen.queryByText(value);
+  expect(chip).toBeInTheDocument();
+  expect(input).toHaveValue('');
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  expect(input).toHaveValue(value);
+  expect(onSelectionChange).toBeCalledTimes(1);
+});
+test('in non-restrictive mode the value that was already selected using the list cannot be applied', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+  var input = screen.getByRole('combobox');
+  input.focus();
+  var listbox = screen.getByRole('listbox');
+  var options = within(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(onSelectionChange.mock.calls[0][0].has(items[0].name)).toBeTruthy();
+  onSelectionChange.mockClear();
+  userEvent.type(input, items[0].name);
+  userEvent.type(input, '{enter}');
+  expect(input).toHaveValue(items[0].name);
+  expect(onSelectionChange).not.toBeCalled();
+});
+test('options can be focused via keyboard', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  input.focus();
+  var listbox = screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  var options = within(listbox).getAllByRole('option');
+  userEvent.type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+  expect(options[0]).toHaveClass('is-focused');
+  userEvent.type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+  expect(options[1]).toHaveClass('is-focused');
+});
+test('options can be selected via keyboard', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  input.focus();
+  var listbox = screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  var options = within(listbox).getAllByRole('option');
+  userEvent.type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+  expect(options[0]).toHaveClass('is-focused');
+  userEvent.type(options[0], '{enter}');
+  expect(options[0]).not.toBeInTheDocument();
+  var chip = screen.getByText(items[0].name);
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+});
+test('default selected keys', function () {
+  getComponent({
+    defaultSelectedKeys: [items[1].key, items[2].key]
+  });
+  var listbox = screen.queryByRole('listbox');
+  expect(listbox).not.toBeInTheDocument();
+  var firstChip = screen.getByText(items[1].name);
+  expect(firstChip).toBeInTheDocument();
+  var secondChip = screen.getByText(items[2].name);
+  expect(secondChip).toBeInTheDocument();
+});
+test('selected keys', function () {
+  getComponent({
+    selectedKeys: [items[1].key, items[2].key]
+  });
+  var listbox = screen.queryByRole('listbox');
+  expect(listbox).not.toBeInTheDocument();
+  var firstChip = screen.getByText(items[1].name);
+  expect(firstChip).toBeInTheDocument();
+  var secondChip = screen.getByText(items[2].name);
+  expect(secondChip).toBeInTheDocument();
+});
+test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  var _getComponent, container, results;
+
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          jest.useRealTimers();
+          _getComponent = getComponent(), container = _getComponent.container;
+          _context.next = 4;
+          return axe(container);
+
+        case 4:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
+test('read only keys', function () {
+  getComponent({
+    readOnlyKeys: [items[1].key, items[2].key]
+  });
+  var listbox = screen.queryByRole('listbox');
+  expect(listbox).not.toBeInTheDocument();
+  var firstChip = screen.getByText(items[1].name);
+  var deleteButton1 = firstChip.nextSibling;
+  expect(firstChip).toBeInTheDocument();
+  expect(deleteButton1).toBeNull();
+  var secondChip = screen.getByText(items[2].name);
+  expect(secondChip).toBeInTheDocument();
+  var deleteButton2 = firstChip.nextSibling;
+  expect(deleteButton2).toBeNull();
+});
+test(' multivalue field with helper text', function () {
+  var helperText = 'helper text';
+  getComponent({
+    helperText: helperText,
+    status: statuses.ERROR
+  });
+  var helper = screen.getByText(helperText);
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(statuses.ERROR));
+});
+test('read only field', function () {
+  var isReadOnly = true;
+  getComponent({
+    isReadOnly: isReadOnly
+  });
+  var chip = screen.queryAllByRole('presentation');
+  expect(chip[0]).toHaveAttribute('label', items[0].name);
+  expect(chip[1]).toHaveAttribute('label', items[1].name);
+  expect(chip[2]).toHaveAttribute('label', items[2].name);
+  var textArea = screen.getByLabelText(defaultProps.label);
+  expect(textArea).toHaveClass('is-read-only');
+  expect(screen.queryByRole('option')).not.toBeInTheDocument();
+});
+test('read only keys with read only field', function () {
+  var isReadOnly = true;
+  getComponent({
+    isReadOnly: isReadOnly,
+    readOnlyKeys: [items[1].key, items[2].key]
+  });
+  var chip = screen.queryAllByRole('presentation');
+  expect(chip[0]).toHaveAttribute('label', items[1].name);
+  expect(chip[1]).toHaveAttribute('label', items[2].name);
+  var textArea = screen.getByLabelText(defaultProps.label);
+  expect(textArea).toHaveClass('is-read-only');
+  expect(screen.queryByRole('option')).not.toBeInTheDocument();
+});

package/lib/components/MultivaluesField/index.js

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

package/lib/components/NavBar/NavBar.js

@@ -0,0 +1,63 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { NavBarContext } from '../../context/NavBarContext';
+import { isIterableProp } from '../../utils/devUtils/props/isIterable';
+import Box from '../Box/Box';
+import useProgressiveState from '../../hooks/useProgressiveState';
+/**
+ * Composed component that spreads children.
+ *
+ * This component is built to have the NavBarSection component passed into it.
+ *
+ * NavBarSection is an iterative component that
+ * will build an AccordionGridGroup using
+ * the array of objects that is passed into it.
+ *
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var NavBar = function NavBar(props) {
+  var defaultSelectedKeys = props.defaultSelectedKeys,
+      selectedKeysProp = props.selectedKeys,
+      setSelectedKeysProp = props.setSelectedKeys,
+      defaultExpandedKeys = props.defaultExpandedKeys;
+
+  var _useState = useState(defaultExpandedKeys),
+      _useState2 = _slicedToArray(_useState, 2),
+      expandedKeys = _useState2[0],
+      setExpandedKeys = _useState2[1];
+
+  var _useProgressiveState = useProgressiveState(selectedKeysProp, defaultSelectedKeys),
+      _useProgressiveState2 = _slicedToArray(_useProgressiveState, 2),
+      selectedKeys = _useProgressiveState2[0],
+      setSelectedKeys = _useProgressiveState2[1];
+
+  return ___EmotionJSX(NavBarContext.Provider, {
+    value: {
+      selectedKey: selectedKeys,
+      setSelectedKey: setSelectedKeysProp || setSelectedKeys,
+      expandedKeys: expandedKeys,
+      setExpandedKeys: setExpandedKeys
+    }
+  }, ___EmotionJSX(Box, {
+    variant: "navBar.container",
+    role: "navigation",
+    as: "nav"
+  }, props.children));
+};
+
+NavBar.propTypes = {
+  /** The initial selected key in the collection (uncontrolled). */
+  defaultSelectedKeys: isIterableProp,
+
+  /** The initial expanded keys in the collection (uncontrolled). */
+  defaultExpandedKeys: isIterableProp,
+  selectedKeys: isIterableProp,
+  setSelectedKeys: PropTypes.func
+};
+NavBar.defaultProps = {
+  defaultSelectedKeys: []
+};
+export default NavBar;