@instructure/ui-select 9.0.2-snapshot-7 → 9.0.2-snapshot-10

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.0.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v9.0.1...v9.0.2-snapshot-7) (2024-06-06)
+## [9.0.2-snapshot-10](https://github.com/instructure/instructure-ui/compare/v9.0.1...v9.0.2-snapshot-10) (2024-06-11)
 
 **Note:** Version bump only for package @instructure/ui-select
 

package/es/Select/__new-tests__/Select.test.js

@@ -1,3 +1,4 @@
+var _Select, _Select2, _Select3, _Select4, _Select5, _Select6, _Select7;
 /*
  * The MIT License (MIT)
  *
@@ -22,10 +23,25 @@
  * SOFTWARE.
  */
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
+
+// eslint-disable-next-line no-restricted-imports
+import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests';
+import { runAxeCheck } from '@instructure/ui-axe-check';
 import Select from '../index';
+import SelectExamples from '../__examples__/Select.examples';
 import * as utils from '@instructure/ui-utils';
+const defaultOptions = ['foo', 'bar', 'baz'];
+const getOptions = (highlighted, selected, disabled) => defaultOptions.map(opt => /*#__PURE__*/React.createElement(Select.Option, {
+  id: opt,
+  key: opt,
+  value: opt,
+  isHighlighted: opt === highlighted,
+  isSelected: opt === selected,
+  isDisabled: opt === disabled
+}, opt));
 jest.mock('@instructure/ui-utils', () => {
   const originalModule = jest.requireActual('@instructure/ui-utils');
   return {
@@ -36,13 +52,14 @@ jest.mock('@instructure/ui-utils', () => {
 });
 const mockUtils = utils;
 describe('<Select />', () => {
-  const defaultOptions = ['foo', 'bar', 'baz'];
-  const getOptions = disabled => defaultOptions.map(opt => /*#__PURE__*/React.createElement(Select.Option, {
-    id: opt,
-    key: opt,
-    value: opt,
-    isDisabled: opt === disabled
-  }, opt));
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
   it('should have role button in Safari without onInputChange', async () => {
     const _render = render( /*#__PURE__*/React.createElement(Select, {
         renderLabel: "Choose an option"
@@ -71,4 +88,496 @@ describe('<Select />', () => {
     const input = container.querySelector('input');
     expect(input).toHaveAttribute('role', 'combobox');
   });
+  it('should render an input and a list', async () => {
+    const _render4 = render( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        isShowingOptions: true,
+        "data-testid": "subidubi"
+      }, getOptions())),
+      container = _render4.container;
+    const select = container.querySelector('span[class$="-select"]');
+    const label = screen.getByLabelText('Choose an option');
+    const input = container.querySelector('input[id^="Select_"]');
+    const list = screen.getByRole('listbox');
+    const options = screen.getAllByRole('option');
+    const optionsCount = defaultOptions.length;
+    expect(select).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+    expect(input).toBeInTheDocument();
+    expect(list).toBeInTheDocument();
+    expect(options.length).toBe(optionsCount);
+    expect(options[0]).toHaveTextContent(defaultOptions[0]);
+    expect(options[1]).toHaveTextContent(defaultOptions[1]);
+    expect(options[2]).toHaveTextContent(defaultOptions[2]);
+  });
+  it('should render groups', async () => {
+    render(_Select || (_Select = /*#__PURE__*/React.createElement(Select, {
+      renderLabel: "Choose an option",
+      isShowingOptions: true
+    }, /*#__PURE__*/React.createElement(Select.Option, {
+      id: "0"
+    }, "ungrouped option one"), /*#__PURE__*/React.createElement(Select.Group, {
+      renderLabel: "Group one"
+    }, /*#__PURE__*/React.createElement(Select.Option, {
+      id: "1"
+    }, "grouped option one")), /*#__PURE__*/React.createElement(Select.Group, {
+      renderLabel: "Group two"
+    }, /*#__PURE__*/React.createElement(Select.Option, {
+      id: "2"
+    }, "grouped option two")), /*#__PURE__*/React.createElement(Select.Option, {
+      id: "3"
+    }, "ungrouped option two"))));
+    const groups = screen.getAllByRole('group');
+    const groupLabel = screen.getByText('Group one');
+    expect(groupLabel).toHaveAttribute('role', 'presentation');
+    expect(groups[0].getAttribute('aria-labelledby')).toEqual(groupLabel.getAttribute('id'));
+    expect(groups.length).toBe(2);
+  });
+  it('should ignore invalid children', async () => {
+    render(_Select2 || (_Select2 = /*#__PURE__*/React.createElement(Select, {
+      renderLabel: "Choose an option",
+      isShowingOptions: true
+    }, /*#__PURE__*/React.createElement(Select.Option, {
+      id: "0"
+    }, "valid"), /*#__PURE__*/React.createElement("div", null, "invalid"))));
+    const invalidChild = screen.queryByText('invalid');
+    expect(invalidChild).not.toBeInTheDocument();
+    const expectedErrorMessage = 'Expected one of Group, Option';
+    expect(consoleErrorMock).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining(expectedErrorMessage), expect.any(String));
+  });
+  it('should provide a focus method', async () => {
+    var _ref$current;
+    const ref = /*#__PURE__*/React.createRef();
+    render( /*#__PURE__*/React.createElement(Select, {
+      renderLabel: "Choose an option",
+      ref: ref
+    }, getOptions()));
+    const input = screen.getByLabelText('Choose an option');
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+    await waitFor(() => {
+      expect(document.activeElement).toBe(input);
+    });
+  });
+  it('should provide a focused getter', async () => {
+    var _ref$current2, _ref$current3;
+    const ref = /*#__PURE__*/React.createRef();
+    render( /*#__PURE__*/React.createElement(Select, {
+      renderLabel: "Choose an option",
+      ref: ref
+    }, getOptions()));
+    expect((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focused).toBe(false);
+    (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.focus();
+    await waitFor(() => {
+      var _ref$current4;
+      expect((_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.focused).toBe(true);
+    });
+  });
+  describe('input', () => {
+    it('should render with a generated id by default', () => {
+      const _render5 = render(_Select3 || (_Select3 = /*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option"
+        }))),
+        container = _render5.container;
+      const input = container.querySelector('input[id^="Select_"]');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveAttribute('id', expect.stringContaining('Select_'));
+    });
+    it('should render with a custom id if given', () => {
+      const _render6 = render(_Select4 || (_Select4 = /*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          id: "customSelect"
+        }))),
+        container = _render6.container;
+      const input = container.querySelector('input[id^="customSelect"]');
+      expect(input).toBeInTheDocument();
+      expect(input.getAttribute('id')).toEqual('customSelect');
+    });
+    it('should render readonly when interaction="enabled" with no onInputChange', () => {
+      render(_Select5 || (_Select5 = /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option"
+      })));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('readonly');
+      expect(input).not.toHaveAttribute('disabled');
+    });
+    it('should not render readonly when interaction="enabled" with onInputChange', () => {
+      render( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        onInputChange: () => {}
+      }));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).not.toHaveAttribute('readonly');
+      expect(input).not.toHaveAttribute('disabled');
+    });
+    it('should render readonly when interaction="readonly"', () => {
+      render( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        interaction: "readonly",
+        onInputChange: () => {}
+      }));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('readonly');
+      expect(input).not.toHaveAttribute('disabled');
+    });
+    it('should render disabled when interaction="disabled"', () => {
+      render( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        interaction: "disabled",
+        onInputChange: () => {}
+      }));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('disabled');
+      expect(input).not.toHaveAttribute('readonly');
+    });
+    it('should not render readonly when disabled', () => {
+      render(_Select6 || (_Select6 = /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        interaction: "disabled"
+      })));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('disabled');
+      expect(input).not.toHaveAttribute('readonly');
+    });
+    it('should render required when isRequired={true}', () => {
+      render(_Select7 || (_Select7 = /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        isRequired: true
+      })));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('required');
+    });
+    it('should render with inputValue', () => {
+      const val = 'hello world';
+      render( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        inputValue: val
+      }));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('value', val);
+    });
+    it('should set aria-activedescendant based on the highlighted option', () => {
+      render( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        isShowingOptions: true
+      }, getOptions(defaultOptions[1])));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('aria-activedescendant', defaultOptions[1]);
+    });
+    it('should not set aria-activedescendant when not showing options', () => {
+      render( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option"
+      }, getOptions(defaultOptions[1])));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).not.toHaveAttribute('aria-activedescendant');
+    });
+    it('should allow assistive text', () => {
+      render( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        assistiveText: "hello world"
+      }, getOptions()));
+      const input = screen.getByLabelText('Choose an option');
+      const assistiveText = screen.getByText('hello world');
+      const assistiveTextId = assistiveText.getAttribute('id');
+      expect(input).toHaveAttribute('aria-describedby', assistiveTextId);
+    });
+    it('should allow custom props to pass through', () => {
+      render( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        "data-custom-attr": "true"
+      }, getOptions()));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('data-custom-attr', 'true');
+    });
+    it('should allow override of autoComplete prop', () => {
+      const _render7 = render( /*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option"
+        }, getOptions())),
+        rerender = _render7.rerender;
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('autocomplete', 'off');
+      rerender( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        autoComplete: "false"
+      }, getOptions()));
+      expect(input).toHaveAttribute('autocomplete', 'false');
+    });
+    it('should provide a ref to the input element', async () => {
+      const inputRef = jest.fn();
+      render( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        inputRef: inputRef
+      }, getOptions()));
+      const input = screen.getByLabelText('Choose an option');
+      await waitFor(() => {
+        expect(inputRef).toHaveBeenCalledWith(input);
+      });
+    });
+  });
+  describe('list', () => {
+    it('should set aria-selected on options with isSelected={true}', () => {
+      render( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        isShowingOptions: true
+      }, getOptions(void 0, defaultOptions[1])));
+      const options = screen.getAllByRole('option');
+      expect(options[1].getAttribute('aria-selected')).toEqual('true');
+    });
+    it('should set aria-disabled on options when isDisabled={true}', () => {
+      render( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        isShowingOptions: true
+      }, getOptions(void 0, void 0, defaultOptions[2])));
+      const options = screen.getAllByRole('option');
+      expect(options[0]).not.toHaveAttribute('aria-disabled');
+      expect(options[2]).toHaveAttribute('aria-disabled', 'true');
+    });
+    it('should set list element role to "listbox"', async () => {
+      render( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        isShowingOptions: true
+      }, getOptions()));
+      const listbox = screen.getByRole('listbox');
+      expect(listbox).toBeInTheDocument();
+      expect(listbox.tagName).toBe('UL');
+    });
+    it('should provide a ref to the list element', async () => {
+      const listRef = jest.fn();
+      render( /*#__PURE__*/React.createElement(Select, {
+        renderLabel: "Choose an option",
+        isShowingOptions: true,
+        listRef: listRef
+      }, getOptions()));
+      const listbox = screen.getByRole('listbox');
+      await waitFor(() => {
+        expect(listRef).toHaveBeenCalledWith(listbox);
+      });
+    });
+  });
+  describe('with callbacks', () => {
+    describe('should fire onRequestShowOptions', () => {
+      it('when root is clicked', async () => {
+        const onRequestShowOptions = jest.fn();
+        const _render8 = render( /*#__PURE__*/React.createElement(Select, {
+            renderLabel: "Choose an option",
+            onRequestShowOptions: onRequestShowOptions
+          }, getOptions())),
+          container = _render8.container,
+          rerender = _render8.rerender;
+        const icon = container.querySelector('svg[name="IconArrowOpenDown"]');
+        const label = screen.getByText('Choose an option');
+        expect(icon).toBeInTheDocument();
+        expect(label).toBeInTheDocument();
+        await userEvent.click(label);
+        await waitFor(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+        await userEvent.click(icon);
+        await waitFor(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(2);
+        });
+        rerender( /*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          onRequestShowOptions: onRequestShowOptions,
+          isShowingOptions: true
+        }, getOptions()));
+        await userEvent.click(label);
+        await waitFor(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(2);
+        });
+      });
+      it('when input is clicked', async () => {
+        const onRequestShowOptions = jest.fn();
+        const _render9 = render( /*#__PURE__*/React.createElement(Select, {
+            renderLabel: "Choose an option",
+            onRequestShowOptions: onRequestShowOptions
+          }, getOptions())),
+          rerender = _render9.rerender;
+        const input = screen.getByLabelText('Choose an option');
+        await userEvent.click(input);
+        await waitFor(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+        rerender( /*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          onRequestShowOptions: onRequestShowOptions,
+          isShowingOptions: true
+        }, getOptions()));
+        await userEvent.click(input);
+        await waitFor(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+      });
+      it('when up/down arrows are pressed', async () => {
+        const onRequestShowOptions = jest.fn();
+        render( /*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          onRequestShowOptions: onRequestShowOptions
+        }, getOptions()));
+        const input = screen.getByLabelText('Choose an option');
+        await userEvent.type(input, '{arrowdown}');
+        await waitFor(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+        await userEvent.type(input, '{arrowup}');
+        await waitFor(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(2);
+        });
+      });
+      it('when space is pressed', async () => {
+        const onRequestShowOptions = jest.fn();
+        const _render10 = render( /*#__PURE__*/React.createElement(Select, {
+            renderLabel: "Choose an option",
+            onRequestShowOptions: onRequestShowOptions
+          }, getOptions())),
+          rerender = _render10.rerender;
+        const input = screen.getByLabelText('Choose an option');
+        await userEvent.type(input, '{space}');
+        await waitFor(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+        rerender( /*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          onRequestShowOptions: onRequestShowOptions,
+          isShowingOptions: true
+        }, getOptions()));
+        await userEvent.type(input, '{space}');
+        await waitFor(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+      });
+    });
+    describe('should fire onRequestHideOptions', () => {
+      it('when root is clicked and isShowingOptions is true', async () => {
+        const onRequestHideOptions = jest.fn();
+        const _render11 = render( /*#__PURE__*/React.createElement(Select, {
+            renderLabel: "Choose an option",
+            isShowingOptions: true,
+            onRequestHideOptions: onRequestHideOptions
+          }, getOptions())),
+          container = _render11.container;
+        const icon = container.querySelector('svg[name="IconArrowOpenUp"]');
+        const label = screen.getByText('Choose an option');
+        expect(icon).toBeInTheDocument();
+        expect(label).toBeInTheDocument();
+        await userEvent.click(label);
+        await waitFor(() => {
+          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
+        });
+        await userEvent.click(icon);
+        await waitFor(() => {
+          expect(onRequestHideOptions).toHaveBeenCalledTimes(2);
+        });
+      });
+      it('when root is clicked and isShowingOptions is false should NOT fire onRequestHideOptions', async () => {
+        const onRequestHideOptions = jest.fn();
+        render( /*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isShowingOptions: false,
+          onRequestHideOptions: onRequestHideOptions
+        }, getOptions()));
+        const label = screen.getByText('Choose an option');
+        expect(label).toBeInTheDocument();
+        await userEvent.click(label);
+        await waitFor(() => {
+          expect(onRequestHideOptions).not.toHaveBeenCalled();
+        });
+      });
+      it('when input is clicked', async () => {
+        const onRequestHideOptions = jest.fn();
+        const _render12 = render( /*#__PURE__*/React.createElement(Select, {
+            renderLabel: "Choose an option",
+            isShowingOptions: true,
+            onRequestHideOptions: onRequestHideOptions
+          }, getOptions())),
+          rerender = _render12.rerender;
+        const input = screen.getByLabelText('Choose an option');
+        await userEvent.click(input);
+        await waitFor(() => {
+          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
+        });
+        rerender( /*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isShowingOptions: false,
+          onRequestHideOptions: onRequestHideOptions
+        }, getOptions()));
+        await userEvent.click(input);
+        await waitFor(() => {
+          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
+        });
+      });
+      it('when escape is pressed', async () => {
+        const onRequestHideOptions = jest.fn();
+        render( /*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isShowingOptions: true,
+          onRequestHideOptions: onRequestHideOptions
+        }, getOptions()));
+        const input = screen.getByLabelText('Choose an option');
+        await userEvent.type(input, '{esc}');
+        await waitFor(() => {
+          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
+        });
+      });
+    });
+    describe('should fire onRequestHighlightOption', () => {
+      it('when options are hovered', async () => {
+        const onRequestHighlightOption = jest.fn();
+        render( /*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          isShowingOptions: true,
+          onRequestHighlightOption: onRequestHighlightOption
+        }, getOptions()));
+        const options = screen.getAllByRole('option');
+        await userEvent.hover(options[0]);
+        await waitFor(() => {
+          expect(onRequestHighlightOption).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({
+            id: defaultOptions[0]
+          }));
+        });
+        await userEvent.hover(options[1]);
+        await waitFor(() => {
+          expect(onRequestHighlightOption).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({
+            id: defaultOptions[1]
+          }));
+        });
+      });
+    });
+    describe('input callbacks', () => {
+      it('should fire onInputChange when input is typed in', async () => {
+        const onInputChange = jest.fn();
+        render( /*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          onInputChange: onInputChange
+        }, getOptions()));
+        const input = screen.getByLabelText('Choose an option');
+        await userEvent.type(input, 'h');
+        await waitFor(() => {
+          expect(onInputChange).toHaveBeenCalled();
+        });
+      });
+      it('should fire onFocus when input gains focus', async () => {
+        const onFocus = jest.fn();
+        render( /*#__PURE__*/React.createElement(Select, {
+          renderLabel: "Choose an option",
+          onFocus: onFocus
+        }, getOptions()));
+        const input = screen.getByLabelText('Choose an option');
+        input.focus();
+        await waitFor(() => {
+          expect(onFocus).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = generateA11yTests(Select, SelectExamples);
+    it.each(generatedComponents)('should be accessible with example: $description', async ({
+      content
+    }) => {
+      const _render13 = render(content),
+        container = _render13.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+  });
 });