@primer/components 30.3.0-rc.2010c7d4 → 30.3.0-rc.9dbc85a9

package/lib/__tests__/Autocomplete.test.js

@@ -0,0 +1,528 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _testing = require("../utils/testing");
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+require("babel-polyfill");
+
+var _Autocomplete = _interopRequireDefault(require("../Autocomplete"));
+
+var _index = require("../index");
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+const mockItems = [{
+  text: 'zero',
+  id: 0
+}, {
+  text: 'one',
+  id: 1
+}, {
+  text: 'two',
+  id: 2
+}, {
+  text: 'three',
+  id: 3
+}, {
+  text: 'four',
+  id: 4
+}, {
+  text: 'five',
+  id: 5
+}, {
+  text: 'six',
+  id: 6
+}, {
+  text: 'seven',
+  id: 7
+}, {
+  text: 'twenty',
+  id: 20
+}, {
+  text: 'twentyone',
+  id: 21
+}]; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const AUTOCOMPLETE_LABEL = 'Autocomplete field';
+
+const LabelledAutocomplete = ({
+  inputProps = {},
+  menuProps
+}) => {
+  const {
+    ['aria-labelledby']: ariaLabelledBy = 'autocompleteLabel',
+    ...menuPropsRest
+  } = menuProps;
+  const {
+    id = 'autocompleteInput',
+    ...inputPropsRest
+  } = inputProps;
+  return /*#__PURE__*/_react.default.createElement(_ThemeProvider.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react.default.createElement(_index.SSRProvider, null, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: id,
+    id: ariaLabelledBy
+  }, "Autocomplete field"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+    id: "autocompleteId"
+  }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, _extends({
+    id: id
+  }, inputPropsRest)), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, _extends({
+    "aria-labelledby": ariaLabelledBy
+  }, menuPropsRest)))))));
+};
+
+LabelledAutocomplete.displayName = "LabelledAutocomplete";
+describe('Autocomplete', () => {
+  describe('snapshots', () => {
+    it('renders a single select input', () => {
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_index.SSRProvider, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+        id: "autocompleteId"
+      }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, null), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+        "aria-labelledby": "labelId",
+        items: mockItems,
+        selectedItemIds: []
+      }))))).toMatchSnapshot();
+    });
+    it('renders a multiselect input', () => {
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_index.SSRProvider, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+        id: "autocompleteId"
+      }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, null), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+        "aria-labelledby": "labelId",
+        items: mockItems,
+        selectedItemIds: [],
+        selectionVariant: "multiple"
+      }))))).toMatchSnapshot();
+    });
+    it('renders a multiselect input with selected menu items', () => {
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_index.SSRProvider, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+        id: "autocompleteId"
+      }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, null), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+        "aria-labelledby": "labelId",
+        items: mockItems,
+        selectedItemIds: [0, 1, 2],
+        selectionVariant: "multiple"
+      }))))).toMatchSnapshot();
+    });
+    it('renders a menu that contains an item to add to the menu', () => {
+      const handleAddItemMock = jest.fn();
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_index.SSRProvider, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+        id: "autocompleteId"
+      }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, null), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+        "aria-labelledby": "labelId",
+        items: mockItems,
+        selectionVariant: "multiple",
+        selectedItemIds: [],
+        addNewItem: {
+          text: 'Add new item',
+          handleAddItem: handleAddItemMock
+        }
+      }))))).toMatchSnapshot();
+    });
+    it('renders a custom empty state message', () => {
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_index.SSRProvider, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+        id: "autocompleteId"
+      }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, null), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+        "aria-labelledby": "labelId",
+        items: [],
+        selectedItemIds: [],
+        emptyStateText: "No results"
+      }))))).toMatchSnapshot();
+    });
+    it('renders a loading state', () => {
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_index.SSRProvider, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+        id: "autocompleteId"
+      }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, null), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+        "aria-labelledby": "labelId",
+        loading: true,
+        items: [],
+        selectedItemIds: []
+      }))))).toMatchSnapshot();
+    });
+    it('renders with a custom text input component', () => {
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_index.SSRProvider, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+        id: "autocompleteId"
+      }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+        as: () => /*#__PURE__*/_react.default.createElement("input", {
+          type: "text",
+          id: "customInput"
+        })
+      }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+        "aria-labelledby": "labelId",
+        items: mockItems,
+        selectedItemIds: []
+      }))))).toMatchSnapshot();
+    });
+    it('renders with an input value', () => {
+      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_index.SSRProvider, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+        id: "autocompleteId"
+      }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+        value: "test"
+      }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+        "aria-labelledby": "labelId",
+        items: mockItems,
+        selectedItemIds: []
+      }))))).toMatchSnapshot();
+    });
+  });
+  describe('Autocomplete.Input', () => {
+    it('calls onChange', () => {
+      const onChangeMock = jest.fn();
+      const {
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        inputProps: {
+          onChange: onChangeMock
+        },
+        menuProps: {
+          items: mockItems,
+          selectedItemIds: []
+        }
+      }));
+      const inputNode = container.querySelector('#autocompleteInput');
+      expect(onChangeMock).not.toHaveBeenCalled();
+      inputNode && _userEvent.default.type(inputNode, 'z');
+      expect(onChangeMock).toHaveBeenCalled();
+    });
+    it('calls onFocus', () => {
+      const onFocusMock = jest.fn();
+      const {
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        inputProps: {
+          onFocus: onFocusMock
+        },
+        menuProps: {
+          items: mockItems,
+          selectedItemIds: []
+        }
+      }));
+      const inputNode = container.querySelector('#autocompleteInput');
+      expect(onFocusMock).not.toHaveBeenCalled();
+      inputNode && _react2.fireEvent.focus(inputNode);
+      expect(onFocusMock).toHaveBeenCalled();
+    });
+    it('calls onKeyDown', () => {
+      const onKeyDownMock = jest.fn();
+      const {
+        getByLabelText
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        inputProps: {
+          onKeyDown: onKeyDownMock
+        },
+        menuProps: {
+          items: [],
+          selectedItemIds: []
+        }
+      }));
+      const inputNode = getByLabelText(AUTOCOMPLETE_LABEL);
+      expect(onKeyDownMock).not.toHaveBeenCalled();
+
+      _react2.fireEvent.keyDown(inputNode, {
+        key: 'Shift'
+      });
+
+      expect(onKeyDownMock).toHaveBeenCalled();
+    });
+    it('calls onKeyUp', () => {
+      const onKeyUpMock = jest.fn();
+      const {
+        getByLabelText
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        inputProps: {
+          onKeyUp: onKeyUpMock
+        },
+        menuProps: {
+          items: [],
+          selectedItemIds: []
+        }
+      }));
+      const inputNode = getByLabelText(AUTOCOMPLETE_LABEL);
+      expect(onKeyUpMock).not.toHaveBeenCalled();
+
+      _react2.fireEvent.keyUp(inputNode, {
+        key: 'Shift'
+      });
+
+      expect(onKeyUpMock).toHaveBeenCalled();
+    });
+    it('calls onKeyPress', () => {
+      const onKeyPressMock = jest.fn();
+      const {
+        getByLabelText
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        inputProps: {
+          onKeyPress: onKeyPressMock
+        },
+        menuProps: {
+          items: [],
+          selectedItemIds: []
+        }
+      }));
+      const inputNode = getByLabelText(AUTOCOMPLETE_LABEL);
+      expect(onKeyPressMock).not.toHaveBeenCalled();
+
+      _userEvent.default.type(inputNode, '{enter}');
+
+      expect(onKeyPressMock).toHaveBeenCalled();
+    });
+    it('opens the menu when the input is focused', () => {
+      const {
+        getByLabelText
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        menuProps: {
+          items: [],
+          selectedItemIds: []
+        }
+      }));
+      const inputNode = getByLabelText(AUTOCOMPLETE_LABEL);
+      expect(inputNode.getAttribute('aria-expanded')).not.toBe('true');
+
+      _react2.fireEvent.focus(inputNode);
+
+      expect(inputNode.getAttribute('aria-expanded')).toBe('true');
+    });
+    it('closes the menu when the input is blurred', () => {
+      const {
+        getByLabelText
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        menuProps: {
+          items: [],
+          selectedItemIds: []
+        }
+      }));
+      const inputNode = getByLabelText(AUTOCOMPLETE_LABEL);
+      expect(inputNode.getAttribute('aria-expanded')).not.toBe('true');
+
+      _react2.fireEvent.focus(inputNode);
+
+      expect(inputNode.getAttribute('aria-expanded')).toBe('true'); // eslint-disable-next-line github/no-blur
+
+      _react2.fireEvent.blur(inputNode); // wait a tick for blur to finish
+
+
+      setTimeout(() => {
+        expect(inputNode.getAttribute('aria-expanded')).not.toBe('true');
+      }, 0);
+    });
+    it('sets the input value to the suggested item text and highlights the untyped part of the word', () => {
+      const {
+        container,
+        getByDisplayValue
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        menuProps: {
+          items: mockItems,
+          selectedItemIds: []
+        }
+      }));
+      const inputNode = container.querySelector('#autocompleteInput');
+      inputNode && _userEvent.default.type(inputNode, 'ze');
+      expect(getByDisplayValue('zero')).toBeDefined();
+    });
+    it('does not show or highlight suggestion text after the user hits Backspace until they hit another key', () => {
+      const {
+        container,
+        getByDisplayValue
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        menuProps: {
+          items: mockItems,
+          selectedItemIds: []
+        }
+      }));
+      const inputNode = container.querySelector('#autocompleteInput');
+      expect(inputNode.selectionStart).toBe(0);
+      inputNode && _userEvent.default.type(inputNode, 'ze');
+      expect(getByDisplayValue('zero')).toBeDefined();
+      expect(inputNode.selectionStart).toBe(2);
+      expect(inputNode.selectionEnd).toBe(4);
+      inputNode && _userEvent.default.type(inputNode, '{backspace}');
+      expect(inputNode.selectionStart).toBe(2);
+      expect(getByDisplayValue('ze')).toBeDefined();
+      inputNode && _userEvent.default.type(inputNode, 'r');
+      expect(inputNode.selectionStart).toBe(3);
+      expect(inputNode.selectionEnd).toBe(4);
+      expect(getByDisplayValue('zero')).toBeDefined();
+    });
+    it('clears the input value when when the user hits Escape', () => {
+      const {
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        menuProps: {
+          items: mockItems,
+          selectedItemIds: []
+        }
+      }));
+      const inputNode = container.querySelector('#autocompleteInput');
+      expect(inputNode === null || inputNode === void 0 ? void 0 : inputNode.getAttribute('aria-expanded')).not.toBe('true');
+      inputNode && _userEvent.default.type(inputNode, 'ze');
+      expect(inputNode === null || inputNode === void 0 ? void 0 : inputNode.getAttribute('aria-expanded')).toBe('true');
+      inputNode && _userEvent.default.type(inputNode, '{esc}');
+      expect(inputNode === null || inputNode === void 0 ? void 0 : inputNode.getAttribute('aria-expanded')).not.toBe('true');
+    });
+  });
+  describe('Autocomplete.Menu', () => {
+    it('calls a custom filter function', () => {
+      const filterFnMock = jest.fn();
+      const {
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        menuProps: {
+          items: mockItems,
+          selectedItemIds: [],
+          filterFn: filterFnMock
+        }
+      }));
+      const inputNode = container.querySelector('#autocompleteInput');
+      inputNode && _userEvent.default.type(inputNode, 'ze');
+      expect(filterFnMock).toHaveBeenCalled();
+    });
+    it('calls a custom sort function when the menu closes', () => {
+      const sortOnCloseFnMock = jest.fn();
+      const {
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        menuProps: {
+          items: mockItems,
+          selectedItemIds: [],
+          sortOnCloseFn: sortOnCloseFnMock
+        }
+      }));
+      const inputNode = container.querySelector('#autocompleteInput'); // `sortOnCloseFnMock` will be called in a `.sort()` on render to check if the
+      // current sort order matches the result of `sortOnCloseFnMock`
+
+      expect(sortOnCloseFnMock).toHaveBeenCalledTimes(mockItems.length - 1);
+
+      if (inputNode) {
+        _userEvent.default.type(inputNode, 'ze'); // eslint-disable-next-line github/no-blur
+
+
+        _react2.fireEvent.blur(inputNode);
+      } // wait a tick for blur to finish
+
+
+      setTimeout(() => {
+        expect(sortOnCloseFnMock).toHaveBeenCalledTimes(mockItems.length);
+      }, 0);
+    });
+    it("calls onOpenChange with the menu's open state", () => {
+      const onOpenChangeMock = jest.fn();
+      const {
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        menuProps: {
+          items: mockItems,
+          selectedItemIds: [],
+          onOpenChange: onOpenChangeMock
+        }
+      }));
+      const inputNode = container.querySelector('#autocompleteInput');
+      inputNode && _userEvent.default.type(inputNode, 'ze');
+      expect(onOpenChangeMock).toHaveBeenCalled();
+    });
+    it('calls onSelectedChange with the data for the selected items', () => {
+      const onSelectedChangeMock = jest.fn();
+      const {
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        menuProps: {
+          items: mockItems,
+          selectedItemIds: [],
+          onSelectedChange: onSelectedChangeMock
+        }
+      }));
+      const inputNode = container.querySelector('#autocompleteInput');
+      expect(onSelectedChangeMock).not.toHaveBeenCalled();
+
+      if (inputNode) {
+        _react2.fireEvent.focus(inputNode);
+
+        _userEvent.default.type(inputNode, '{enter}');
+      } // wait a tick for the keyboard event to be dispatched to the menu item
+
+
+      setTimeout(() => {
+        expect(onSelectedChangeMock).toHaveBeenCalledWith([mockItems[0]]);
+      }, 0);
+    });
+    it('does not close the menu when clicking an item in the menu if selectionVariant=multiple', () => {
+      const {
+        getByText,
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        menuProps: {
+          items: mockItems,
+          selectedItemIds: [],
+          selectionVariant: 'multiple'
+        }
+      }));
+      const inputNode = container.querySelector('#autocompleteInput');
+      const itemToClickNode = getByText(mockItems[1].text);
+      expect(inputNode === null || inputNode === void 0 ? void 0 : inputNode.getAttribute('aria-expanded')).not.toBe('true');
+      inputNode && _react2.fireEvent.focus(inputNode);
+      expect(inputNode === null || inputNode === void 0 ? void 0 : inputNode.getAttribute('aria-expanded')).toBe('true');
+
+      _react2.fireEvent.click(itemToClickNode);
+
+      inputNode && _userEvent.default.type(inputNode, '{enter}');
+      expect(inputNode === null || inputNode === void 0 ? void 0 : inputNode.getAttribute('aria-expanded')).toBe('true');
+    });
+    it('closes the menu when clicking an item in the menu if selectionVariant=single', () => {
+      const {
+        getByText,
+        container
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        menuProps: {
+          items: mockItems,
+          selectedItemIds: [],
+          selectionVariant: 'single'
+        }
+      }));
+      const inputNode = container.querySelector('#autocompleteInput');
+      const itemToClickNode = getByText(mockItems[1].text);
+      expect(inputNode === null || inputNode === void 0 ? void 0 : inputNode.getAttribute('aria-expanded')).not.toBe('true');
+      inputNode && _react2.fireEvent.focus(inputNode);
+      expect(inputNode === null || inputNode === void 0 ? void 0 : inputNode.getAttribute('aria-expanded')).toBe('true');
+
+      _react2.fireEvent.click(itemToClickNode);
+
+      expect(inputNode === null || inputNode === void 0 ? void 0 : inputNode.getAttribute('aria-expanded')).not.toBe('true');
+    });
+    it('calls handleAddItem with new item data when passing addNewItem', () => {
+      const handleAddItemMock = jest.fn();
+      const {
+        getByText
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledAutocomplete, {
+        menuProps: {
+          items: mockItems,
+          selectedItemIds: [],
+          selectionVariant: 'multiple',
+          addNewItem: {
+            text: 'Add new item',
+            handleAddItem: handleAddItemMock
+          }
+        }
+      }));
+      const addNewItemNode = getByText('Add new item');
+      expect(handleAddItemMock).not.toHaveBeenCalled();
+
+      _react2.fireEvent.click(addNewItemNode);
+
+      expect(handleAddItemMock).toHaveBeenCalled();
+    });
+  });
+});

package/lib/__tests__/behaviors/scrollIntoViewingArea.test.d.ts

@@ -0,0 +1 @@
+export {};