@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.5

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

@@ -0,0 +1,293 @@
+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 { 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('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);
+})));

package/lib/components/MultivaluesField/index.js

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

package/lib/components/NavBar/NavBar.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Box from '../Box/Box';
+/**
+ * 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) {
+  return ___EmotionJSX(Box, {
+    variant: "boxes.navBar",
+    role: "navigation",
+    as: "nav"
+  }, props.children);
+};
+
+export default NavBar;