fix: tests for keyboard typing (#2371)

Author: okadurin

.changeset/green-chefs-live.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': minor
+---
+
+[combobox] change mimicUserTyping test helper function async and use sendKeys() internally

.eslintrc.cjs

@@ -17,6 +17,7 @@ module.exports = {
     },
     {
       files: [
+        '**/test-helpers/**/*.js',
         '**/test-suites/**/*.js',
         '**/test/**/*.js',
         '**/test-node/**/*.{j,mj}s',

packages/ui/components/combobox/test-helpers/combobox-helpers.js

@@ -1,4 +1,5 @@
 import { getListboxMembers } from '@lion/ui/listbox-test-helpers.js';
+import { sendKeys } from '@web/test-runner-commands';
 
 /**
  * @typedef {import('@lion/ui/combobox.js').LionCombobox} LionCombobox
@@ -34,17 +35,15 @@ export function getComboboxMembers(el) {
 
 /**
  * @param {LionCombobox} el
- * @param {string} value
+ * @param {string} keys
  */
-// TODO: add keys that actually make sense...
-export function mimicUserTyping(el, value) {
+export async function mimicUserTyping(el, keys) {
   const { _inputNode } = getComboboxMembers(el);
-  _inputNode.dispatchEvent(new Event('focusin', { bubbles: true }));
-  // eslint-disable-next-line no-param-reassign
-  _inputNode.value = value;
-  _inputNode.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-  _inputNode.dispatchEvent(new KeyboardEvent('keyup', { key: value }));
-  _inputNode.dispatchEvent(new KeyboardEvent('keydown', { key: value }));
+  _inputNode.value = '';
+  _inputNode.focus();
+  await sendKeys({
+    type: keys,
+  });
 }
 
 /**

packages/ui/components/combobox/test/lion-combobox.test.js

@@ -25,13 +25,13 @@ describe('MatchesOption validation', () => {
     config.node = el;
     const validator = new MatchesOption();
 
-    mimicUserTyping(el, 'Artichoke');
+    await mimicUserTyping(el, 'Artichoke');
     await el.updateComplete;
 
     isEnabled = validator.execute('Artichoke', undefined, config);
     expect(isEnabled).to.be.false;
 
-    mimicUserTyping(el, 'Foo');
+    await mimicUserTyping(el, 'Foo');
     await el.updateComplete;
 
     isEnabled = validator.execute('Foo', undefined, config);