@instructure/ui-selectable 10.11.1-snapshot-2 → 10.11.1-snapshot-3

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

@@ -0,0 +1,772 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { Selectable } from '../index';
+const defaultOptions = ['foo', 'bar', 'baz'];
+describe('<Selectable />', () => {
+  const getSelectable = selectable => /*#__PURE__*/React.createElement("span", selectable.getRootProps(), /*#__PURE__*/React.createElement("label", selectable.getLabelProps(), "Selectable"), /*#__PURE__*/React.createElement("input", Object.assign({
+    type: "text"
+  }, selectable.getTriggerProps(), selectable.getInputProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+    key: opt
+  }, selectable.getOptionProps({
+    id: opt
+  })), opt))));
+  it('should focus trigger when label is clicked', async () => {
+    render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", selectable.getRootProps(), /*#__PURE__*/React.createElement("label", selectable.getLabelProps(), "Selectable"), /*#__PURE__*/React.createElement("input", Object.assign({
+      type: "text"
+    }, selectable.getTriggerProps(), selectable.getInputProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+      key: opt
+    }, selectable.getOptionProps({
+      id: opt
+    })), opt))))));
+    const label = screen.getByText('Selectable');
+    const input = screen.getByRole('combobox');
+    expect(document.activeElement).not.toBe(input);
+    userEvent.click(label);
+    await waitFor(() => {
+      expect(document.activeElement).toBe(input);
+    });
+  });
+  it('should not blur trigger when label is clicked', async () => {
+    const onFocus = vi.fn();
+    const onBlur = vi.fn();
+    render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", selectable.getRootProps(), /*#__PURE__*/React.createElement("label", selectable.getLabelProps(), "Selectable"), /*#__PURE__*/React.createElement("input", Object.assign({
+      type: "text"
+    }, selectable.getTriggerProps(), selectable.getInputProps(), {
+      onBlur: onBlur,
+      onFocus: onFocus
+    })), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+      key: opt
+    }, selectable.getOptionProps({
+      id: opt
+    })), opt))))));
+    const label = screen.getByText('Selectable');
+    const input = screen.getByRole('combobox');
+    expect(document.activeElement).not.toBe(input);
+    userEvent.click(label);
+    await waitFor(() => {
+      expect(onFocus).toHaveBeenCalledTimes(1);
+      expect(onBlur).not.toHaveBeenCalled();
+    });
+  });
+  it('should not hide options when list is clicked', async () => {
+    const onClick = vi.fn();
+    const onMouseDown = vi.fn();
+    const onRequestHideOptions = vi.fn();
+    render(/*#__PURE__*/React.createElement(Selectable, {
+      isShowingOptions: true,
+      onRequestHideOptions: onRequestHideOptions
+    }, selectable => /*#__PURE__*/React.createElement("span", selectable.getRootProps(), /*#__PURE__*/React.createElement("label", selectable.getLabelProps(), "Selectable"), /*#__PURE__*/React.createElement("input", Object.assign({
+      type: "text"
+    }, selectable.getTriggerProps(), selectable.getInputProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps({
+      onClick,
+      onMouseDown
+    }), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+      key: opt
+    }, selectable.getOptionProps({
+      id: opt
+    })), opt))))));
+    const input = screen.getByRole('combobox');
+    const list = screen.getByRole('listbox');
+    input.focus();
+    userEvent.click(list);
+    await waitFor(() => {
+      expect(document.activeElement).toBe(input);
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onMouseDown).toHaveBeenCalledTimes(1);
+      expect(onRequestHideOptions).not.toHaveBeenCalled();
+    });
+  });
+  it('should not hide options when an option is clicked', async () => {
+    const onClick = vi.fn();
+    const onMouseDown = vi.fn();
+    const onRequestHideOptions = vi.fn();
+    render(/*#__PURE__*/React.createElement(Selectable, {
+      isShowingOptions: true,
+      onRequestHideOptions: onRequestHideOptions
+    }, selectable => /*#__PURE__*/React.createElement("span", selectable.getRootProps(), /*#__PURE__*/React.createElement("label", selectable.getLabelProps(), "Selectable"), /*#__PURE__*/React.createElement("input", Object.assign({
+      type: "text"
+    }, selectable.getTriggerProps(), selectable.getInputProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+      key: opt
+    }, selectable.getOptionProps({
+      id: opt,
+      onClick,
+      onMouseDown
+    })), opt))))));
+    const input = screen.getByRole('combobox');
+    const option = screen.getByText('foo');
+    input.focus();
+    userEvent.click(option);
+    await waitFor(() => {
+      expect(document.activeElement).toBe(input);
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onMouseDown).toHaveBeenCalledTimes(1);
+      expect(onRequestHideOptions).not.toHaveBeenCalled();
+    });
+  });
+  it('should not prevent events on other children', async () => {
+    var _button;
+    const onMouseDown = vi.fn();
+    const onClick = vi.fn();
+    const onKeyDown = vi.fn();
+    render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", selectable.getRootProps(), /*#__PURE__*/React.createElement("label", selectable.getLabelProps(), "Selectable"), _button || (_button = /*#__PURE__*/React.createElement("button", {
+      onMouseDown: onMouseDown,
+      onClick: onClick,
+      onKeyDown: onKeyDown
+    }, "Selected")), /*#__PURE__*/React.createElement("input", Object.assign({
+      type: "text"
+    }, selectable.getTriggerProps(), selectable.getInputProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+      key: opt
+    }, selectable.getOptionProps({
+      id: opt
+    })), opt))))));
+    const button = screen.getByText('Selected');
+    userEvent.click(button);
+    await userEvent.type(button, '{enter}');
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalled();
+      expect(onMouseDown).toHaveBeenCalled();
+      expect(onKeyDown).toHaveBeenCalled();
+    });
+  });
+  describe('with callbacks', () => {
+    describe('should fire onRequestShowOptions', () => {
+      it('when label is clicked', async () => {
+        const onRequestShowOptions = vi.fn();
+        const _render = render(/*#__PURE__*/React.createElement(Selectable, {
+            isShowingOptions: false,
+            onRequestShowOptions: onRequestShowOptions
+          }, selectable => getSelectable(selectable))),
+          rerender = _render.rerender;
+        const label = screen.getByText('Selectable');
+        userEvent.click(label);
+        await waitFor(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+
+        // Set isShowingOptions:
+        rerender(/*#__PURE__*/React.createElement(Selectable, {
+          isShowingOptions: true,
+          onRequestShowOptions: onRequestShowOptions
+        }, selectable => getSelectable(selectable)));
+        userEvent.click(label);
+        await waitFor(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+      });
+      it('when input is clicked', async () => {
+        const onRequestShowOptions = vi.fn();
+        const _render2 = render(/*#__PURE__*/React.createElement(Selectable, {
+            isShowingOptions: false,
+            onRequestShowOptions: onRequestShowOptions
+          }, selectable => getSelectable(selectable))),
+          rerender = _render2.rerender;
+        const input = screen.getByRole('combobox');
+        userEvent.click(input);
+        await waitFor(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+        rerender(/*#__PURE__*/React.createElement(Selectable, {
+          isShowingOptions: true,
+          onRequestShowOptions: onRequestShowOptions
+        }, selectable => getSelectable(selectable)));
+        userEvent.click(input);
+        await waitFor(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+      });
+      it('when up/down arrows are pressed', async () => {
+        const onRequestShowOptions = vi.fn();
+        render(/*#__PURE__*/React.createElement(Selectable, {
+          isShowingOptions: false,
+          onRequestShowOptions: onRequestShowOptions
+        }, selectable => getSelectable(selectable)));
+        const input = screen.getByRole('combobox');
+        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 = vi.fn();
+        const _render3 = render(/*#__PURE__*/React.createElement(Selectable, {
+            onRequestShowOptions: onRequestShowOptions
+          }, selectable => getSelectable(selectable))),
+          rerender = _render3.rerender;
+        const input = screen.getByRole('combobox');
+        await userEvent.type(input, '{space}');
+        rerender(/*#__PURE__*/React.createElement(Selectable, {
+          isShowingOptions: true,
+          onRequestShowOptions: onRequestShowOptions
+        }, selectable => getSelectable(selectable)));
+        await userEvent.type(input, '{space}');
+        await waitFor(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+      });
+    });
+    describe('should fire onRequestHideOptions', () => {
+      it('when label is clicked', async () => {
+        const onRequestHideOptions = vi.fn();
+        const _render4 = render(/*#__PURE__*/React.createElement(Selectable, {
+            isShowingOptions: true,
+            onRequestHideOptions: onRequestHideOptions
+          }, selectable => getSelectable(selectable))),
+          rerender = _render4.rerender;
+        const label = screen.getByText('Selectable');
+        await userEvent.click(label);
+        await waitFor(() => {
+          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
+        });
+        rerender(/*#__PURE__*/React.createElement(Selectable, {
+          isShowingOptions: false,
+          onRequestHideOptions: onRequestHideOptions
+        }, selectable => getSelectable(selectable)));
+        await userEvent.click(label);
+        await waitFor(() => {
+          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
+        });
+      });
+      it('when input is clicked', async () => {
+        const onRequestHideOptions = vi.fn();
+        const _render5 = render(/*#__PURE__*/React.createElement(Selectable, {
+            isShowingOptions: true,
+            onRequestHideOptions: onRequestHideOptions
+          }, selectable => getSelectable(selectable))),
+          rerender = _render5.rerender;
+        const input = screen.getByRole('combobox');
+        await userEvent.click(input);
+        await waitFor(() => {
+          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
+        });
+        rerender(/*#__PURE__*/React.createElement(Selectable, {
+          isShowingOptions: false,
+          onRequestHideOptions: onRequestHideOptions
+        }, selectable => getSelectable(selectable)));
+        await userEvent.click(input);
+        await waitFor(() => {
+          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
+        });
+      });
+    });
+  });
+  describe('getRootProps()', () => {
+    it('should provide prop getter for root element', async () => {
+      const renderSpy = vi.fn();
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => {
+        renderSpy(selectable);
+        return null;
+      }));
+      const selectableProps = renderSpy.mock.calls[0][0];
+      expect(selectableProps.getRootProps).toBeDefined();
+    });
+    it('should allow custom props to pass through', async () => {
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", selectable.getRootProps({
+        'data-custom-attr': true,
+        className: 'customClass',
+        style: {
+          color: 'red'
+        }
+      }), /*#__PURE__*/React.createElement("label", selectable.getLabelProps(), "Selectable"), /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getTriggerProps(), selectable.getInputProps())))));
+      const root = screen.getByText('Selectable').closest('span');
+      expect(root).toHaveAttribute('data-custom-attr', 'true');
+      expect(root).toHaveClass('customClass');
+      expect(root).toHaveStyle('color: rgb(255, 0, 0)');
+    });
+    it('should allow supplemental onClick behavior', async () => {
+      const onClick = vi.fn();
+      const onRequestShowOptions = vi.fn();
+      render(/*#__PURE__*/React.createElement(Selectable, {
+        onRequestShowOptions: onRequestShowOptions
+      }, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getTriggerProps({
+        onClick
+      }), selectable.getInputProps())))));
+      const input = screen.getByRole('combobox');
+      await userEvent.click(input);
+      await waitFor(() => {
+        expect(onClick).toHaveBeenCalledTimes(1);
+        expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+  describe('getLabelProps()', () => {
+    it('should provide prop getter for label element', async () => {
+      const renderSpy = vi.fn();
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => {
+        renderSpy(selectable);
+        return null;
+      }));
+      expect(renderSpy.mock.calls[0].length > 0).toBeTruthy();
+    });
+    it('should set htmlFor prop', async () => {
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", selectable.getLabelProps(), "Selectable"), /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getTriggerProps(), selectable.getInputProps())))));
+      const label = screen.getByText('Selectable');
+      const input = screen.getByRole('combobox');
+      expect(label).toHaveAttribute('for', input.getAttribute('id'));
+    });
+    it('should set htmlFor prop with custom defined id', async () => {
+      const customId = 'CustomSelect';
+      render(/*#__PURE__*/React.createElement(Selectable, {
+        id: customId
+      }, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", selectable.getLabelProps(), "Selectable"), /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getTriggerProps(), selectable.getInputProps())))));
+      const label = screen.getByText('Selectable');
+      const input = screen.getByRole('combobox');
+      expect(input).toHaveAttribute('id', customId);
+      expect(label).toHaveAttribute('for', customId);
+    });
+    it('should allow custom props to pass through', async () => {
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", selectable.getLabelProps({
+        'data-custom-attr': true,
+        className: 'customClass',
+        style: {
+          color: 'red'
+        }
+      }), "Selectable"), /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getTriggerProps(), selectable.getInputProps())))));
+      const label = screen.getByText('Selectable');
+      expect(label).toHaveAttribute('data-custom-attr', 'true');
+      expect(label).toHaveClass('customClass');
+      expect(label).toHaveStyle({
+        color: 'rgb(255, 0, 0)'
+      });
+    });
+  });
+  describe('getTriggerProps()', () => {
+    it('should provide prop getter for trigger element', async () => {
+      const renderSpy = vi.fn();
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => {
+        renderSpy(selectable);
+        return null;
+      }));
+      expect(renderSpy.mock.calls[0][0].getTriggerProps).toBeDefined();
+    });
+    it('should set appropriate prop defaults', async () => {
+      const _render6 = render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+          type: "text"
+        }, selectable.getTriggerProps())), /*#__PURE__*/React.createElement("span", selectable.getDescriptionProps(), "description")))),
+        container = _render6.container;
+      const input = container.querySelector('input');
+      const desc = screen.getByText('description');
+      expect(input).toHaveAttribute('aria-haspopup', 'listbox');
+      expect(input).toHaveAttribute('aria-describedby', desc.id);
+      expect(input).toHaveAttribute('id');
+    });
+    it('should set appropriate props based on isShowingOptions', async () => {
+      const _render7 = render(/*#__PURE__*/React.createElement(Selectable, {
+          isShowingOptions: false
+        }, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+          type: "text"
+        }, selectable.getTriggerProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps())))),
+        container = _render7.container,
+        rerender = _render7.rerender;
+      const input = container.querySelector('input');
+      const list = screen.getByRole('listbox');
+      expect(input).toHaveAttribute('aria-expanded', 'false');
+      expect(input).not.toHaveAttribute('aria-controls');
+
+      // Set prop: isShowingOptions true
+      rerender(/*#__PURE__*/React.createElement(Selectable, {
+        isShowingOptions: true
+      }, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getTriggerProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps()))));
+      expect(input).toHaveAttribute('aria-expanded', 'true');
+      expect(input).toHaveAttribute('aria-controls', list.id);
+    });
+    it('should set appropriate props based on highlightedOptionId', async () => {
+      const _render8 = render(/*#__PURE__*/React.createElement(Selectable, {
+          isShowingOptions: true
+        }, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+          type: "text"
+        }, selectable.getTriggerProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+          key: opt
+        }, selectable.getOptionProps({
+          id: opt
+        })))))))),
+        container = _render8.container,
+        rerender = _render8.rerender;
+      const input = container.querySelector('input');
+      const options = screen.getAllByRole('option');
+      expect(input).not.toHaveAttribute('aria-activedescendant');
+
+      // Set prop: highlightedOptionId
+      rerender(/*#__PURE__*/React.createElement(Selectable, {
+        isShowingOptions: true,
+        highlightedOptionId: defaultOptions[0]
+      }, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getTriggerProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+        key: opt
+      }, selectable.getOptionProps({
+        id: opt
+      }))))))));
+      expect(input).toHaveAttribute('aria-activedescendant', options[0].id);
+
+      // Set prop: highlightedOptionId
+      rerender(/*#__PURE__*/React.createElement(Selectable, {
+        isShowingOptions: true,
+        highlightedOptionId: defaultOptions[1]
+      }, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getTriggerProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+        key: opt
+      }, selectable.getOptionProps({
+        id: opt
+      }))))))));
+      expect(input).toHaveAttribute('aria-activedescendant', options[1].id);
+
+      // Set prop: isShowingOptions
+      rerender(/*#__PURE__*/React.createElement(Selectable, {
+        isShowingOptions: false,
+        highlightedOptionId: defaultOptions[1]
+      }, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getTriggerProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+        key: opt
+      }, selectable.getOptionProps({
+        id: opt
+      }))))))));
+      expect(input).not.toHaveAttribute('aria-activedescendant');
+    });
+    it('should allow custom props to pass through', async () => {
+      const _render9 = render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+          type: "text"
+        }, selectable.getTriggerProps({
+          'data-custom-attr': true,
+          placeholder: 'Type to enter text',
+          className: 'customClass',
+          style: {
+            color: 'red'
+          }
+        })))))),
+        container = _render9.container;
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('data-custom-attr', 'true');
+      expect(input).toHaveAttribute('style', 'color: red;');
+      expect(input).toHaveAttribute('placeholder');
+      expect(input).toHaveClass('customClass');
+    });
+    it('should allow props to be overridden', async () => {
+      const _render10 = render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+          type: "text"
+        }, selectable.getTriggerProps({
+          'aria-haspopup': 'menu',
+          'aria-controls': 'customId'
+        })))))),
+        container = _render10.container;
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('aria-haspopup', 'menu');
+      expect(input).toHaveAttribute('aria-controls', 'customId');
+    });
+    it('should provide a ref to the text input', async () => {
+      const inputRef = vi.fn();
+      const _render11 = render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+          type: "text"
+        }, selectable.getTriggerProps({
+          ref: inputRef
+        })))))),
+        container = _render11.container;
+      const input = container.querySelector('input');
+      expect(inputRef).toHaveBeenCalledWith(input);
+    });
+    it('should allow role and aria-autocomplete props to be overridden', async () => {
+      const _render12 = render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+          type: "text"
+        }, selectable.getTriggerProps({
+          role: 'textbox',
+          'aria-autocomplete': 'list'
+        })))))),
+        container = _render12.container;
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('role', 'textbox');
+      expect(input).toHaveAttribute('aria-autocomplete', 'list');
+    });
+    it('should allow supplemental onClick behavior', async () => {
+      const onClick = vi.fn();
+      const onRequestShowOptions = vi.fn();
+      render(/*#__PURE__*/React.createElement(Selectable, {
+        onRequestShowOptions: onRequestShowOptions
+      }, selectable => /*#__PURE__*/React.createElement("span", selectable.getRootProps(), /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getTriggerProps({
+        onClick
+      }), selectable.getInputProps())))));
+      const input = screen.getByRole('combobox');
+      await input.click();
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+    });
+  });
+  describe('getInputProps()', () => {
+    it('should provide prop getter for trigger element', async () => {
+      const renderSpy = vi.fn();
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => {
+        renderSpy(selectable);
+        return null;
+      }));
+      const args = renderSpy.mock.calls[0][0];
+      expect(args.getInputProps).toBeDefined();
+    });
+    it('should set appropriate prop defaults', async () => {
+      const _render13 = render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+          type: "text"
+        }, selectable.getInputProps()))))),
+        container = _render13.container;
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('role', 'combobox');
+      expect(input).toHaveAttribute('aria-autocomplete', 'both');
+      expect(input).toHaveAttribute('autocomplete', 'off');
+    });
+    it('should set appropriate props when readOnly', async () => {
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getInputProps({
+        readOnly: true
+      }))))));
+      const input = screen.getByRole('combobox');
+      expect(input).toHaveAttribute('aria-autocomplete', 'none');
+      expect(input).toHaveAttribute('readOnly');
+      expect(input).not.toHaveAttribute('disabled');
+    });
+    it('should allow props to be overridden', async () => {
+      const _render14 = render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+          type: "text"
+        }, selectable.getInputProps({
+          role: 'textbox',
+          'aria-autocomplete': 'inline'
+        })))))),
+        container = _render14.container;
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('role', 'textbox');
+      expect(input).toHaveAttribute('aria-autocomplete', 'inline');
+    });
+    it('should allow custom props to pass through', async () => {
+      const _render15 = render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+          type: "text"
+        }, selectable.getInputProps({
+          'data-custom-attr': true,
+          placeholder: 'Type to enter text',
+          className: 'customClass',
+          style: {
+            color: 'red'
+          }
+        })))))),
+        container = _render15.container;
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('data-custom-attr', 'true');
+      expect(input).toHaveAttribute('placeholder');
+      expect(input).toHaveClass('customClass');
+      expect(input).toHaveAttribute('style', 'color: red;');
+    });
+  });
+  describe('getListProps()', () => {
+    it('should provide prop getter for list element', async () => {
+      const renderSpy = vi.fn();
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => {
+        renderSpy(selectable);
+        return null;
+      }));
+      const args = renderSpy.mock.calls[0][0];
+      expect(args.getListProps).toBeDefined();
+    });
+    it('should set appropriate prop defaults', async () => {
+      const _render16 = render(/*#__PURE__*/React.createElement(Selectable, {
+          isShowingOptions: true
+        }, selectable => /*#__PURE__*/React.createElement("span", selectable.getRootProps(), /*#__PURE__*/React.createElement("input", Object.assign({
+          type: "text"
+        }, selectable.getTriggerProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps())))),
+        container = _render16.container;
+      const list = container.querySelector('ul');
+      expect(list).toHaveAttribute('id');
+      expect(list).toHaveAttribute('role', 'listbox');
+    });
+    it('should allow custom props to pass through', async () => {
+      const _render17 = render(/*#__PURE__*/React.createElement(Selectable, {
+          isShowingOptions: true
+        }, selectable => /*#__PURE__*/React.createElement("span", selectable.getRootProps(), /*#__PURE__*/React.createElement("input", Object.assign({
+          type: "text"
+        }, selectable.getTriggerProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps({
+          'data-custom-attr': true,
+          className: 'customClass',
+          style: {
+            color: 'red'
+          }
+        }))))),
+        container = _render17.container;
+      const list = container.querySelector('ul');
+      expect(list).toHaveAttribute('data-custom-attr', 'true');
+      expect(list).toHaveClass('customClass');
+      expect(list).toHaveAttribute('style', 'color: red;');
+    });
+  });
+  describe('getOptionProps()', () => {
+    it('should provide prop getter for option element', async () => {
+      const renderSpy = vi.fn();
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => {
+        renderSpy(selectable);
+        return null;
+      }));
+      const args = renderSpy.mock.calls[0][0];
+      expect(args.getOptionProps).toBeDefined();
+    });
+    it('should set appropriate prop defaults', async () => {
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getTriggerProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+        key: opt
+      }, selectable.getOptionProps({
+        id: opt
+      })), opt))))));
+      const option = screen.getByText(defaultOptions[0]);
+      expect(option.tagName).toBe('LI');
+      expect(option).toHaveAttribute('role', 'option');
+      expect(option).toHaveAttribute('aria-selected', 'false');
+    });
+    it('should set aria-selected based on selectedOptionId', async () => {
+      const _render18 = render(/*#__PURE__*/React.createElement(Selectable, {
+          selectedOptionId: defaultOptions[1]
+        }, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+          type: "text"
+        }, selectable.getTriggerProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+          key: opt
+        }, selectable.getOptionProps({
+          id: opt
+        })), opt)))))),
+        container = _render18.container,
+        rerender = _render18.rerender;
+      const options = container.querySelectorAll('li');
+      expect(options[0]).toHaveAttribute('aria-selected', 'false');
+      expect(options[1]).toHaveAttribute('aria-selected', 'true');
+      expect(options[2]).toHaveAttribute('aria-selected', 'false');
+
+      // Set prop: selectedOptionId
+      rerender(/*#__PURE__*/React.createElement(Selectable, {
+        selectedOptionId: [defaultOptions[0], defaultOptions[1]]
+      }, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getTriggerProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+        key: opt
+      }, selectable.getOptionProps({
+        id: opt
+      })), opt))))));
+      expect(options[0]).toHaveAttribute('aria-selected', 'true');
+      expect(options[1]).toHaveAttribute('aria-selected', 'true');
+      expect(options[2]).toHaveAttribute('aria-selected', 'false');
+    });
+    it('should allow custom props to pass through', async () => {
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getTriggerProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+        key: opt
+      }, selectable.getOptionProps({
+        id: opt,
+        'data-custom-attr': true,
+        className: 'customClass',
+        style: {
+          color: 'red'
+        }
+      })), opt))))));
+      const option = screen.getByText(defaultOptions[0]);
+      expect(option.tagName).toBe('LI');
+      expect(option).toHaveAttribute('data-custom-attr', 'true');
+      expect(option).toHaveClass('customClass');
+      expect(option).toHaveAttribute('style', 'color: red;');
+    });
+    it('should allow supplemental onClick behavior', async () => {
+      const onClick = vi.fn();
+      const onRequestSelectOption = vi.fn();
+      render(/*#__PURE__*/React.createElement(Selectable, {
+        isShowingOptions: true,
+        onRequestSelectOption: onRequestSelectOption
+      }, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getInputProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+        key: opt
+      }, selectable.getOptionProps({
+        id: opt,
+        onClick
+      })), opt))))));
+      const option_0 = screen.getByText(defaultOptions[0]);
+      const option_1 = screen.getByText(defaultOptions[1]);
+      userEvent.click(option_0);
+      userEvent.click(option_1);
+      await waitFor(() => {
+        expect(onRequestSelectOption).toHaveBeenCalledTimes(2);
+        expect(onClick).toHaveBeenCalledTimes(2);
+      });
+    });
+  });
+  describe('getDisabledOptionProps()', () => {
+    it('should provide prop getter for disabled option element', async () => {
+      const renderSpy = vi.fn();
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => {
+        renderSpy(selectable);
+        return null;
+      }));
+      const args = renderSpy.mock.calls[0][0];
+      expect(args.getDisabledOptionProps).toBeDefined();
+    });
+    it('should set aria-disabled prop', async () => {
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", Object.assign({
+        type: "text"
+      }, selectable.getTriggerProps(), selectable.getInputProps())), /*#__PURE__*/React.createElement("ul", selectable.getListProps(), defaultOptions.map(opt => /*#__PURE__*/React.createElement("li", Object.assign({
+        key: opt
+      }, selectable.getOptionProps({
+        id: opt
+      }), selectable.getDisabledOptionProps()), opt))))));
+      const option = screen.getByText(defaultOptions[0]);
+      expect(option.tagName).toBe('LI');
+      expect(option).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+  describe('getDescriptionProps()', () => {
+    it('should provide prop getter for description element', async () => {
+      const renderSpy = vi.fn();
+      render(/*#__PURE__*/React.createElement(Selectable, null, selectable => {
+        renderSpy(selectable);
+        return null;
+      }));
+      const selectableProps = renderSpy.mock.calls[0][0];
+      expect(selectableProps.getDescriptionProps).toBeDefined();
+    });
+  });
+});