@pie-lib/test-utils 0.22.1 → 0.22.2-next.164

package/lib/web-components.js

@@ -0,0 +1,248 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createCustomElement = createCustomElement;
+exports.dispatchCustomEvent = dispatchCustomEvent;
+exports.isCustomElementDefined = isCustomElementDefined;
+exports.renderWebComponent = renderWebComponent;
+exports.waitForCustomElement = waitForCustomElement;
+exports.waitForEvent = waitForEvent;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Note: These helpers are for light DOM web components (no Shadow DOM)
+// Standard React Testing Library queries work directly on these components
+/**
+ * Wait for a custom element to be defined
+ * Custom elements are registered asynchronously
+ *
+ * @param {string} tagName - Custom element tag name (e.g., 'my-component')
+ * @param {number} timeout - Timeout in milliseconds
+ * @returns {Promise<void>}
+ *
+ * @example
+ * await waitForCustomElement('pie-chart');
+ * const chart = document.createElement('pie-chart');
+ *
+ * @example
+ * await waitForCustomElement('my-component', 5000);
+ */
+function waitForCustomElement(_x) {
+  return _waitForCustomElement.apply(this, arguments);
+}
+/**
+ * Render a web component and wait for it to be ready
+ * Handles the full lifecycle: wait for definition, create, append, wait for render
+ *
+ * @param {string} tagName - Custom element tag name
+ * @param {Object} attributes - Attributes to set on the element
+ * @param {Object} properties - Properties to set on the element
+ * @param {HTMLElement} container - Container to append to (defaults to document.body)
+ * @returns {Promise<HTMLElement>} The custom element
+ *
+ * @example
+ * const chart = await renderWebComponent('pie-chart', {
+ *   type: 'bar',
+ *   'data-testid': 'my-chart'
+ * });
+ *
+ * @example
+ * const button = await renderWebComponent('custom-button',
+ *   { 'aria-label': 'Submit' },
+ *   { onClick: jest.fn() }
+ * );
+ */
+function _waitForCustomElement() {
+  _waitForCustomElement = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(tagName) {
+    var timeout,
+      _args = arguments;
+    return _regenerator["default"].wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          timeout = _args.length > 1 && _args[1] !== undefined ? _args[1] : 3000;
+          if (!customElements.get(tagName)) {
+            _context.next = 1;
+            break;
+          }
+          return _context.abrupt("return");
+        case 1:
+          return _context.abrupt("return", new Promise(function (resolve, reject) {
+            var timer = setTimeout(function () {
+              reject(new Error("Custom element '".concat(tagName, "' not defined within ").concat(timeout, "ms. ") + 'Make sure the element is registered with customElements.define().'));
+            }, timeout);
+            customElements.whenDefined(tagName).then(function () {
+              clearTimeout(timer);
+              resolve();
+            });
+          }));
+        case 2:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return _waitForCustomElement.apply(this, arguments);
+}
+function renderWebComponent(_x2) {
+  return _renderWebComponent.apply(this, arguments);
+}
+/**
+ * Dispatch a custom event on an element
+ * Web components often use custom events for communication
+ *
+ * @param {HTMLElement} element - Element to dispatch event from
+ * @param {string} eventName - Event name (e.g., 'change', 'custom-event')
+ * @param {*} detail - Event detail data
+ * @param {Object} options - Event options (bubbles, composed, etc.)
+ *
+ * @example
+ * dispatchCustomEvent(chart, 'data-changed', { value: [1, 2, 3] });
+ *
+ * @example
+ * dispatchCustomEvent(button, 'custom-click', null, { bubbles: false });
+ */
+function _renderWebComponent() {
+  _renderWebComponent = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(tagName) {
+    var attributes,
+      properties,
+      container,
+      element,
+      _args2 = arguments;
+    return _regenerator["default"].wrap(function (_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          attributes = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : {};
+          properties = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : {};
+          container = _args2.length > 3 && _args2[3] !== undefined ? _args2[3] : document.body;
+          _context2.next = 1;
+          return waitForCustomElement(tagName);
+        case 1:
+          element = document.createElement(tagName); // Set attributes (strings)
+          Object.entries(attributes).forEach(function (_ref3) {
+            var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+              key = _ref4[0],
+              value = _ref4[1];
+            element.setAttribute(key, value);
+          });
+
+          // Set properties (objects, functions, etc.)
+          Object.entries(properties).forEach(function (_ref5) {
+            var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
+              key = _ref6[0],
+              value = _ref6[1];
+            element[key] = value;
+          });
+          container.appendChild(element);
+
+          // Wait for component to render (custom elements may be async)
+          _context2.next = 2;
+          return new Promise(function (resolve) {
+            return setTimeout(resolve, 0);
+          });
+        case 2:
+          return _context2.abrupt("return", element);
+        case 3:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _renderWebComponent.apply(this, arguments);
+}
+function dispatchCustomEvent(element, eventName) {
+  var detail = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var event = new CustomEvent(eventName, _objectSpread({
+    detail: detail,
+    bubbles: true,
+    composed: true
+  }, options));
+  element.dispatchEvent(event);
+  return event;
+}
+
+/**
+ * Listen for a custom event and return a promise that resolves when fired
+ * Useful for testing event emissions
+ *
+ * @param {HTMLElement} element - Element to listen to
+ * @param {string} eventName - Event name to wait for
+ * @param {number} timeout - Timeout in milliseconds
+ * @returns {Promise<CustomEvent>} Promise that resolves with the event
+ *
+ * @example
+ * const promise = waitForEvent(chart, 'data-loaded');
+ * chart.loadData();
+ * const event = await promise;
+ * expect(event.detail).toEqual({ loaded: true });
+ *
+ * @example
+ * await waitForEvent(component, 'ready', 5000);
+ */
+function waitForEvent(element, eventName) {
+  var timeout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 3000;
+  return new Promise(function (resolve, reject) {
+    var timer = setTimeout(function () {
+      element.removeEventListener(eventName, _handler);
+      reject(new Error("Event '".concat(eventName, "' not fired within ").concat(timeout, "ms")));
+    }, timeout);
+    var _handler = function handler(event) {
+      clearTimeout(timer);
+      element.removeEventListener(eventName, _handler);
+      resolve(event);
+    };
+    element.addEventListener(eventName, _handler);
+  });
+}
+
+/**
+ * Check if a custom element is defined
+ * Useful for verifying element registration
+ *
+ * @param {string} tagName - Custom element tag name
+ * @returns {boolean} True if element is defined
+ *
+ * @example
+ * if (isCustomElementDefined('pie-chart')) {
+ *   // Element is ready to use
+ * }
+ */
+function isCustomElementDefined(tagName) {
+  return typeof customElements !== 'undefined' && customElements.get(tagName) !== undefined;
+}
+
+/**
+ * Helper to create and configure a custom element
+ * For light DOM web components that render React
+ *
+ * @param {string} tagName - Custom element tag name
+ * @param {Object} props - Props to pass to the element
+ * @returns {HTMLElement} The custom element
+ *
+ * @example
+ * const chart = createCustomElement('pie-chart', {
+ *   data: [1, 2, 3],
+ *   type: 'bar'
+ * });
+ * document.body.appendChild(chart);
+ */
+function createCustomElement(tagName) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var element = document.createElement(tagName);
+
+  // Set properties directly on the element
+  Object.entries(props).forEach(function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    element[key] = value;
+  });
+  return element;
+}
+//# sourceMappingURL=web-components.js.map

package/lib/web-components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"web-components.js","names":["waitForCustomElement","_x","_waitForCustomElement","apply","arguments","_asyncToGenerator2","_regenerator","mark","_callee","tagName","timeout","_args","wrap","_context","prev","next","length","undefined","customElements","get","abrupt","Promise","resolve","reject","timer","setTimeout","Error","concat","whenDefined","then","clearTimeout","stop","renderWebComponent","_x2","_renderWebComponent","_callee2","attributes","properties","container","element","_args2","_context2","document","body","createElement","Object","entries","forEach","_ref3","_ref4","_slicedToArray2","key","value","setAttribute","_ref5","_ref6","appendChild","dispatchCustomEvent","eventName","detail","options","event","CustomEvent","_objectSpread","bubbles","composed","dispatchEvent","waitForEvent","removeEventListener","handler","addEventListener","isCustomElementDefined","createCustomElement","props","_ref","_ref2"],"sources":["../src/web-components.js"],"sourcesContent":["// Note: These helpers are for light DOM web components (no Shadow DOM)\n// Standard React Testing Library queries work directly on these components\n\n/**\n * Wait for a custom element to be defined\n * Custom elements are registered asynchronously\n *\n * @param {string} tagName - Custom element tag name (e.g., 'my-component')\n * @param {number} timeout - Timeout in milliseconds\n * @returns {Promise<void>}\n *\n * @example\n * await waitForCustomElement('pie-chart');\n * const chart = document.createElement('pie-chart');\n *\n * @example\n * await waitForCustomElement('my-component', 5000);\n */\nexport async function waitForCustomElement(tagName, timeout = 3000) {\n  if (customElements.get(tagName)) {\n    return;\n  }\n\n  return new Promise((resolve, reject) => {\n    const timer = setTimeout(() => {\n      reject(\n        new Error(\n          `Custom element '${tagName}' not defined within ${timeout}ms. ` +\n          'Make sure the element is registered with customElements.define().'\n        )\n      );\n    }, timeout);\n\n    customElements.whenDefined(tagName).then(() => {\n      clearTimeout(timer);\n      resolve();\n    });\n  });\n}\n\n/**\n * Render a web component and wait for it to be ready\n * Handles the full lifecycle: wait for definition, create, append, wait for render\n *\n * @param {string} tagName - Custom element tag name\n * @param {Object} attributes - Attributes to set on the element\n * @param {Object} properties - Properties to set on the element\n * @param {HTMLElement} container - Container to append to (defaults to document.body)\n * @returns {Promise<HTMLElement>} The custom element\n *\n * @example\n * const chart = await renderWebComponent('pie-chart', {\n *   type: 'bar',\n *   'data-testid': 'my-chart'\n * });\n *\n * @example\n * const button = await renderWebComponent('custom-button',\n *   { 'aria-label': 'Submit' },\n *   { onClick: jest.fn() }\n * );\n */\nexport async function renderWebComponent(\n  tagName,\n  attributes = {},\n  properties = {},\n  container = document.body\n) {\n  await waitForCustomElement(tagName);\n\n  const element = document.createElement(tagName);\n\n  // Set attributes (strings)\n  Object.entries(attributes).forEach(([key, value]) => {\n    element.setAttribute(key, value);\n  });\n\n  // Set properties (objects, functions, etc.)\n  Object.entries(properties).forEach(([key, value]) => {\n    element[key] = value;\n  });\n\n  container.appendChild(element);\n\n  // Wait for component to render (custom elements may be async)\n  await new Promise((resolve) => setTimeout(resolve, 0));\n\n  return element;\n}\n\n/**\n * Dispatch a custom event on an element\n * Web components often use custom events for communication\n *\n * @param {HTMLElement} element - Element to dispatch event from\n * @param {string} eventName - Event name (e.g., 'change', 'custom-event')\n * @param {*} detail - Event detail data\n * @param {Object} options - Event options (bubbles, composed, etc.)\n *\n * @example\n * dispatchCustomEvent(chart, 'data-changed', { value: [1, 2, 3] });\n *\n * @example\n * dispatchCustomEvent(button, 'custom-click', null, { bubbles: false });\n */\nexport function dispatchCustomEvent(\n  element,\n  eventName,\n  detail = null,\n  options = {}\n) {\n  const event = new CustomEvent(eventName, {\n    detail,\n    bubbles: true,\n    composed: true, // Allow event to cross shadow DOM boundary\n    ...options,\n  });\n\n  element.dispatchEvent(event);\n  return event;\n}\n\n/**\n * Listen for a custom event and return a promise that resolves when fired\n * Useful for testing event emissions\n *\n * @param {HTMLElement} element - Element to listen to\n * @param {string} eventName - Event name to wait for\n * @param {number} timeout - Timeout in milliseconds\n * @returns {Promise<CustomEvent>} Promise that resolves with the event\n *\n * @example\n * const promise = waitForEvent(chart, 'data-loaded');\n * chart.loadData();\n * const event = await promise;\n * expect(event.detail).toEqual({ loaded: true });\n *\n * @example\n * await waitForEvent(component, 'ready', 5000);\n */\nexport function waitForEvent(element, eventName, timeout = 3000) {\n  return new Promise((resolve, reject) => {\n    const timer = setTimeout(() => {\n      element.removeEventListener(eventName, handler);\n      reject(\n        new Error(`Event '${eventName}' not fired within ${timeout}ms`)\n      );\n    }, timeout);\n\n    const handler = (event) => {\n      clearTimeout(timer);\n      element.removeEventListener(eventName, handler);\n      resolve(event);\n    };\n\n    element.addEventListener(eventName, handler);\n  });\n}\n\n/**\n * Check if a custom element is defined\n * Useful for verifying element registration\n *\n * @param {string} tagName - Custom element tag name\n * @returns {boolean} True if element is defined\n *\n * @example\n * if (isCustomElementDefined('pie-chart')) {\n *   // Element is ready to use\n * }\n */\nexport function isCustomElementDefined(tagName) {\n  return typeof customElements !== 'undefined' && customElements.get(tagName) !== undefined;\n}\n\n/**\n * Helper to create and configure a custom element\n * For light DOM web components that render React\n *\n * @param {string} tagName - Custom element tag name\n * @param {Object} props - Props to pass to the element\n * @returns {HTMLElement} The custom element\n *\n * @example\n * const chart = createCustomElement('pie-chart', {\n *   data: [1, 2, 3],\n *   type: 'bar'\n * });\n * document.body.appendChild(chart);\n */\nexport function createCustomElement(tagName, props = {}) {\n  const element = document.createElement(tagName);\n\n  // Set properties directly on the element\n  Object.entries(props).forEach(([key, value]) => {\n    element[key] = value;\n  });\n\n  return element;\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-lib/test-utils",
-  "version": "0.22.1",
-  "description": "",
+  "version": "0.22.2-next.164+09821f09",
+  "description": "Testing utilities for pie-lib packages with React Testing Library and MUI support",
   "main": "lib/index.js",
   "module": "src/index.js",
   "publishConfig": {
@@ -10,9 +10,17 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "enzyme": "^3.8.0",
-    "react": "^16.8.1"
+    "@mui/material": "^7.3.4",
+    "@testing-library/react": "^16.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
-  "gitHead": "ce0ec7134200c51f3a3301257be3e707054b36ca",
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.11.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/user-event": "^14.5.2"
+  },
+  "gitHead": "09821f09cfcaee178971c57f4134645350be2222",
   "scripts": {}
 }

package/src/__tests__/index.test.js

@@ -1,45 +1,92 @@
 import * as React from 'react';
-import { shallowChild } from '../index';
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-Enzyme.configure({ adapter: new Adapter() });
-
-describe('test-utils', () => {
-  describe('shallowChild', () => {
-    function simpleHoC(WrappedComponent) {
-      return class extends React.Component {
-        render() {
-          return (
-            <div>
-              <WrappedComponent oneMoreProp="hello" {...this.props} />
-            </div>
-          );
-        }
-      };
-    }
-
-    class SimpleComponent extends React.Component {
-      render() {
-        return <span>My simple component will get wrapped</span>;
-      }
-    }
-
-    it('moves past HoC and returns shallow rendered component using enzyme', () => {
-      const wrapper = shallowChild(simpleHoC(SimpleComponent), null, 1);
-      const shallowComponent = wrapper();
-
-      expect(shallowComponent.find(SimpleComponent).length).toEqual(1);
-      expect(shallowComponent.props().children.props.oneMoreProp).toEqual('hello');
-      expect(shallowComponent.html().includes('span')).toEqual(true);
-    });
-
-    it('overwrites specific props when passed into the closure', () => {
-      const wrapper = shallowChild(simpleHoC(SimpleComponent), null, 1);
-      const shallowComponent = wrapper({ oneMoreProp: 'helloToo' });
-
-      expect(shallowComponent.find(SimpleComponent).length).toEqual(1);
-      expect(shallowComponent.props().children.props.oneMoreProp).toEqual('helloToo');
+import { renderWithTheme, renderWithProviders, screen, createTestTheme } from '../index';
+import { Button } from '@mui/material';
+
+describe('@pie-lib/test-utils', () => {
+  describe('renderWithTheme', () => {
+    it('renders a component with default MUI theme', () => {
+      renderWithTheme(<Button>Click me</Button>);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+      expect(screen.getByText('Click me')).toBeInTheDocument();
+    });
+
+    it('renders a component with custom theme', () => {
+      const customTheme = createTestTheme({
+        palette: {
+          primary: {
+            main: '#ff0000',
+          },
+        },
+      });
+
+      renderWithTheme(<Button color="primary">Themed Button</Button>, {
+        theme: customTheme,
+      });
+
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('accepts additional render options', () => {
+      const { container } = renderWithTheme(<Button>Test</Button>, {
+        container: document.body,
+      });
+
+      expect(container).toBe(document.body);
+    });
+  });
+
+  describe('renderWithProviders', () => {
+    it('renders with theme provider by default', () => {
+      renderWithProviders(<Button>Provided Button</Button>);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('renders with additional providers', () => {
+      const TestProvider = ({ children }) => (
+        <div data-testid="test-provider">{children}</div>
+      );
+
+      renderWithProviders(<Button>Multi Provider</Button>, {
+        providers: [TestProvider],
+      });
+
+      expect(screen.getByTestId('test-provider')).toBeInTheDocument();
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+  });
+
+  describe('createTestTheme', () => {
+    it('creates a theme with custom options', () => {
+      const theme = createTestTheme({
+        palette: {
+          mode: 'dark',
+          primary: {
+            main: '#90caf9',
+          },
+        },
+      });
+
+      expect(theme.palette.mode).toBe('dark');
+      expect(theme.palette.primary.main).toBe('#90caf9');
+    });
+
+    it('creates a theme with default options when none provided', () => {
+      const theme = createTestTheme();
+      expect(theme.palette).toBeDefined();
+      expect(theme.spacing).toBeDefined();
+    });
+  });
+
+  describe('RTL re-exports', () => {
+    it('exports screen utility', () => {
+      renderWithTheme(<div>Test Content</div>);
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    it('exports render function', async () => {
+      const { render, screen: screenImport } = await import('../index');
+      render(<div>Direct Render</div>);
+      expect(screenImport.getByText('Direct Render')).toBeInTheDocument();
     });
   });
 });

package/src/__tests__/keyboard.test.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Keys, pressKey, typeAndSubmit, clearAndType, navigateWithKeys } from '../keyboard';
+
+describe('Keyboard helpers', () => {
+  describe('Keys constant', () => {
+    it('exports common key codes', () => {
+      expect(Keys.ENTER).toBe(13);
+      expect(Keys.ESCAPE).toBe(27);
+      expect(Keys.SPACE).toBe(32);
+      expect(Keys.TAB).toBe(9);
+      expect(Keys.ARROW_DOWN).toBe(40);
+    });
+  });
+
+  describe('pressKey', () => {
+    it('dispatches keyboard event with keyCode', () => {
+      const onKeyDown = jest.fn();
+      render(<input onKeyDown={onKeyDown} />);
+      const input = screen.getByRole('textbox');
+
+      pressKey(input, Keys.ENTER);
+
+      expect(onKeyDown).toHaveBeenCalled();
+      const event = onKeyDown.mock.calls[0][0];
+      expect(event.keyCode).toBe(13);
+    });
+
+    it('dispatches different event types', () => {
+      const onKeyUp = jest.fn();
+      render(<input onKeyUp={onKeyUp} />);
+      const input = screen.getByRole('textbox');
+
+      pressKey(input, Keys.ESCAPE, 'keyup');
+
+      expect(onKeyUp).toHaveBeenCalled();
+      const event = onKeyUp.mock.calls[0][0];
+      expect(event.keyCode).toBe(27);
+    });
+
+    it('passes additional options', () => {
+      const onKeyDown = jest.fn();
+      render(<input onKeyDown={onKeyDown} />);
+      const input = screen.getByRole('textbox');
+
+      pressKey(input, Keys.ENTER, 'keydown', { ctrlKey: true });
+
+      const event = onKeyDown.mock.calls[0][0];
+      expect(event.ctrlKey).toBe(true);
+    });
+  });
+
+  describe('typeAndSubmit', () => {
+    it('types text and presses Enter', async () => {
+      const onKeyDown = jest.fn();
+      render(<input onKeyDown={onKeyDown} />);
+      const input = screen.getByRole('textbox');
+
+      await typeAndSubmit(input, 'hello');
+
+      expect(input).toHaveValue('hello');
+      expect(onKeyDown).toHaveBeenCalled();
+      // Check that the last keyDown event was Enter
+      const lastEvent = onKeyDown.mock.calls[onKeyDown.mock.calls.length - 1][0];
+      expect(lastEvent.keyCode).toBe(Keys.ENTER);
+    });
+  });
+
+  describe('clearAndType', () => {
+    it('clears existing value and types new text', async () => {
+      render(<input defaultValue="old value" />);
+      const input = screen.getByRole('textbox');
+
+      await clearAndType(input, 'new value');
+
+      expect(input).toHaveValue('new value');
+    });
+  });
+
+  describe('navigateWithKeys', () => {
+    it('navigates down with arrow keys', () => {
+      const onKeyDown = jest.fn();
+      render(<div role="listbox" onKeyDown={onKeyDown} />);
+      const listbox = screen.getByRole('listbox');
+
+      navigateWithKeys(listbox, 3, 'vertical');
+
+      expect(onKeyDown).toHaveBeenCalledTimes(3);
+      const events = onKeyDown.mock.calls.map((call) => call[0].keyCode);
+      expect(events).toEqual([Keys.ARROW_DOWN, Keys.ARROW_DOWN, Keys.ARROW_DOWN]);
+    });
+
+    it('navigates up with negative steps', () => {
+      const onKeyDown = jest.fn();
+      render(<div role="listbox" onKeyDown={onKeyDown} />);
+      const listbox = screen.getByRole('listbox');
+
+      navigateWithKeys(listbox, -2, 'vertical');
+
+      expect(onKeyDown).toHaveBeenCalledTimes(2);
+      const events = onKeyDown.mock.calls.map((call) => call[0].keyCode);
+      expect(events).toEqual([Keys.ARROW_UP, Keys.ARROW_UP]);
+    });
+
+    it('navigates horizontally', () => {
+      const onKeyDown = jest.fn();
+      render(<div role="tablist" onKeyDown={onKeyDown} />);
+      const tablist = screen.getByRole('tablist');
+
+      navigateWithKeys(tablist, 2, 'horizontal');
+
+      const events = onKeyDown.mock.calls.map((call) => call[0].keyCode);
+      expect(events).toEqual([Keys.ARROW_RIGHT, Keys.ARROW_RIGHT]);
+    });
+  });
+});