ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: tests for keyboard typing (#2371)

Browse source
This commit is contained in:
Oleksii Kadurin 2024-10-14 16:03:13 +02:00 committed by GitHub
parent 96b09e56d1
commit 27af6be0db
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 127 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/green-chefs-live.md Normal file
View file

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

1
.eslintrc.cjs
View file

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

17
packages/ui/components/combobox/test-helpers/combobox-helpers.js
View file

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

219
packages/ui/components/combobox/test/lion-combobox.test.js
View file

@ -63,12 +63,13 @@ describe('lion-combobox', () => {
const visibleOptions = () => options.filter(o => o.getAttribute('aria-hidden') !== 'true'); const visibleOptions = () => options.filter(o => o.getAttribute('aria-hidden') !== 'true');
async function performChecks() { async function performChecks() {
mimicUserTyping(el, 'c'); await mimicUserTyping(el, 'c');
await el.updateComplete; await el.updateComplete;
expect(visibleOptions().length).to.equal(4); expect(visibleOptions().length).to.equal(4, `autocompleteMode is ${el.autocomplete}`);
mimicUserTyping(el, ''); // Remove [hard], [c]
await mimicUserTypingAdvanced(el, ['Backspace', 'Backspace']);
await el.updateComplete; await el.updateComplete;
expect(visibleOptions().length).to.equal(0); expect(visibleOptions().length).to.equal(0, `autocompleteMode is ${el.autocomplete}`);
} }
el.autocomplete = 'none'; el.autocomplete = 'none';
@ -96,7 +97,7 @@ describe('lion-combobox', () => {
const options = el.formElements; const options = el.formElements;
const visibleOptions = () => options.filter(o => o.style.display !== 'none'); const visibleOptions = () => options.filter(o => o.style.display !== 'none');
mimicUserTyping(el, 'cha'); await mimicUserTyping(el, 'cha');
await el.updateComplete; await el.updateComplete;
expect(visibleOptions().length).to.equal(1); expect(visibleOptions().length).to.equal(1);
el.reset(); el.reset();
@ -119,7 +120,7 @@ describe('lion-combobox', () => {
const options = el.formElements; const options = el.formElements;
const visibleOptions = () => options.filter(o => o.getAttribute('aria-hidden') !== 'true'); const visibleOptions = () => options.filter(o => o.getAttribute('aria-hidden') !== 'true');
mimicUserTyping(el, 'cha'); await mimicUserTyping(el, 'cha');
await el.updateComplete; await el.updateComplete;
expect(visibleOptions().length).to.equal(1); expect(visibleOptions().length).to.equal(1);
expect(el.opened).to.be.true; expect(el.opened).to.be.true;
@ -144,7 +145,7 @@ describe('lion-combobox', () => {
const { _listboxNode } = getComboboxMembers(el); const { _listboxNode } = getComboboxMembers(el);
async function open() { async function open() {
mimicUserTyping(el, 'ch'); await mimicUserTyping(el, 'ch');
return el.updateComplete; return el.updateComplete;
} }
@ -178,10 +179,10 @@ describe('lion-combobox', () => {
const visibleOptions = () => options.filter(o => o.getAttribute('aria-hidden') !== 'true'); const visibleOptions = () => options.filter(o => o.getAttribute('aria-hidden') !== 'true');
async function performChecks() { async function performChecks() {
mimicUserTyping(el, 'c'); await mimicUserTyping(el, 'c');
await el.updateComplete; await el.updateComplete;
expect(visibleOptions().length).to.equal(4); expect(visibleOptions().length).to.equal(4);
mimicUserTyping(el, ''); await mimicUserTyping(el, '');
await el.updateComplete; await el.updateComplete;
expect(visibleOptions().length).to.equal(options.length); expect(visibleOptions().length).to.equal(options.length);
} }
@ -252,7 +253,7 @@ describe('lion-combobox', () => {
const { _listboxNode, _inputNode } = getComboboxMembers(el); const { _listboxNode, _inputNode } = getComboboxMembers(el);
async function open() { async function open() {
mimicUserTyping(el, 'ch'); await mimicUserTyping(el, 'ch');
return el.updateComplete; return el.updateComplete;
} }
@ -326,7 +327,7 @@ describe('lion-combobox', () => {
</lion-combobox> </lion-combobox>
`) `)
); );
mimicUserTyping(el, '30'); await mimicUserTyping(el, '30');
await el.updateComplete; await el.updateComplete;
expect(el.hasFeedbackFor).to.include('error'); expect(el.hasFeedbackFor).to.include('error');
expect(el.validationStates).to.have.property('error'); expect(el.validationStates).to.have.property('error');
@ -512,7 +513,7 @@ describe('lion-combobox', () => {
`) `)
); );
const options = el.formElements; const options = el.formElements;
mimicUserTyping(el, 'a'); await mimicUserTyping(el, 'a');
await el.updateComplete; await el.updateComplete;
const visibleOptions = () => options.filter(o => o.style.display !== 'none'); const visibleOptions = () => options.filter(o => o.style.display !== 'none');
@ -575,15 +576,15 @@ describe('lion-combobox', () => {
await el.updateComplete; await el.updateComplete;
// FIXME: fix properly for Webkit // FIXME: fix properly for Webkit
// expect(_inputNode.value).to.equal('Aha', `autocomplete mode ${autocompleteMode}`); // expect(_inputNode.value).to.equal('Aha', `autocompleteMode is ${autocompleteMode}`);
expect(el.checkedIndex).to.equal(0, `autocomplete mode ${autocompleteMode}`); expect(el.checkedIndex).to.equal(0, `autocompleteMode is ${autocompleteMode}`);
mimicUserTyping(el, 'Ah'); await mimicUserTyping(el, 'Ah');
await el.updateComplete; await el.updateComplete;
expect(_inputNode.value).to.equal('Ah', `autocomplete mode ${autocompleteMode}`); expect(_inputNode.value).to.equal('Ah', `autocompleteMode is ${autocompleteMode}`);
await el.updateComplete; await el.updateComplete;
expect(el.checkedIndex).to.equal(-1, `autocomplete mode ${autocompleteMode}`); expect(el.checkedIndex).to.equal(-1, `autocompleteMode is ${autocompleteMode}`);
} }
el.autocomplete = 'none'; el.autocomplete = 'none';
@ -631,7 +632,7 @@ describe('lion-combobox', () => {
await el.updateComplete; await el.updateComplete;
expect(el.modelValue).to.eql([]); expect(el.modelValue).to.eql([]);
mimicUserTyping(el, ' '); await mimicUserTyping(el, ' ');
await el.updateComplete; await el.updateComplete;
mimicKeyPress(_inputNode, 'Enter'); mimicKeyPress(_inputNode, 'Enter');
await el.updateComplete; await el.updateComplete;
@ -653,7 +654,7 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
expect(el.checkedIndex).to.equal(0); expect(el.checkedIndex).to.equal(0);
mimicUserTyping(el, 'Foo'); await mimicUserTyping(el, 'Foo');
_inputNode.dispatchEvent(new Event('input')); _inputNode.dispatchEvent(new Event('input'));
await el.updateComplete; await el.updateComplete;
@ -676,7 +677,7 @@ describe('lion-combobox', () => {
el.requireOptionMatch = false; el.requireOptionMatch = false;
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(el, 'Art'); await mimicUserTyping(el, 'Art');
await el.updateComplete; await el.updateComplete;
await mimicUserTypingAdvanced(el, ['Delete']); await mimicUserTypingAdvanced(el, ['Delete']);
@ -768,7 +769,7 @@ describe('lion-combobox', () => {
expect(el.modelValue).to.eql(['Chard']); expect(el.modelValue).to.eql(['Chard']);
expect(el.checkedIndex).to.eql([1]); expect(el.checkedIndex).to.eql([1]);
mimicUserTyping(el, 'Foo'); await mimicUserTyping(el, 'Foo');
await el.updateComplete; await el.updateComplete;
mimicKeyPress(_inputNode, 'Enter'); mimicKeyPress(_inputNode, 'Enter');
await el.updateComplete; await el.updateComplete;
@ -776,7 +777,7 @@ describe('lion-combobox', () => {
expect(el.modelValue).to.eql(['Chard', 'Foo']); expect(el.modelValue).to.eql(['Chard', 'Foo']);
expect(el.checkedIndex).to.eql([1]); expect(el.checkedIndex).to.eql([1]);
mimicUserTyping(el, 'Bar'); await mimicUserTyping(el, 'Bar');
await el.updateComplete; await el.updateComplete;
mimicKeyPress(_inputNode, 'Enter'); mimicKeyPress(_inputNode, 'Enter');
await el.updateComplete; await el.updateComplete;
@ -804,7 +805,7 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(el, 'Foo'); await mimicUserTyping(el, 'Foo');
await el.updateComplete; await el.updateComplete;
mimicKeyPress(_inputNode, 'Enter'); mimicKeyPress(_inputNode, 'Enter');
await el.updateComplete; await el.updateComplete;
@ -812,7 +813,7 @@ describe('lion-combobox', () => {
expect(el.modelValue).to.eql(['Foo']); expect(el.modelValue).to.eql(['Foo']);
expect(el.checkedIndex).to.eql([]); expect(el.checkedIndex).to.eql([]);
mimicUserTyping(el, 'Bar'); await mimicUserTyping(el, 'Bar');
await el.updateComplete; await el.updateComplete;
mimicKeyPress(_inputNode, 'Enter'); mimicKeyPress(_inputNode, 'Enter');
await el.updateComplete; await el.updateComplete;
@ -842,7 +843,7 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(el, 'Artist'); await mimicUserTyping(el, 'Artist');
await el.updateComplete; await el.updateComplete;
mimicKeyPress(_inputNode, 'Enter'); mimicKeyPress(_inputNode, 'Enter');
await el.updateComplete; await el.updateComplete;
@ -870,7 +871,7 @@ describe('lion-combobox', () => {
await el.updateComplete; await el.updateComplete;
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(el, 'Art'); await mimicUserTyping(el, 'Art');
await el.updateComplete; await el.updateComplete;
await mimicUserTypingAdvanced(el, ['Backspace']); await mimicUserTypingAdvanced(el, ['Backspace']);
await el.updateComplete; await el.updateComplete;
@ -902,7 +903,7 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
el.modelValue = []; el.modelValue = [];
mimicUserTyping(el, 'Art'); await mimicUserTyping(el, 'Art');
await el.updateComplete; await el.updateComplete;
await mimicUserTypingAdvanced(el, ['Delete']); await mimicUserTypingAdvanced(el, ['Delete']);
await el.updateComplete; await el.updateComplete;
@ -981,7 +982,7 @@ describe('lion-combobox', () => {
expect(el.opened).to.equal(false); expect(el.opened).to.equal(false);
// step [2] // step [2]
mimicUserTyping(el, 'c'); await mimicUserTyping(el, 'c');
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
@ -993,7 +994,7 @@ describe('lion-combobox', () => {
// step [4] // step [4]
await el.updateComplete; await el.updateComplete;
mimicUserTyping(el, 'c'); await mimicUserTyping(el, 'c');
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
}); });
@ -1012,7 +1013,7 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(el, 'art'); await mimicUserTyping(el, 'art');
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
expect(_inputNode.value).to.equal('Artichoke'); expect(_inputNode.value).to.equal('Artichoke');
@ -1036,7 +1037,7 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(el, 'art'); await mimicUserTyping(el, 'art');
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
expect(_inputNode.value).to.equal('Artichoke'); expect(_inputNode.value).to.equal('Artichoke');
@ -1062,7 +1063,7 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(el, 'art'); await mimicUserTyping(el, 'art');
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
expect(_inputNode.value).to.equal('Artichoke'); expect(_inputNode.value).to.equal('Artichoke');
@ -1088,7 +1089,7 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(el, 'art'); await mimicUserTyping(el, 'art');
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
expect(_inputNode.value).to.equal('Artichoke'); expect(_inputNode.value).to.equal('Artichoke');
@ -1114,13 +1115,14 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(el, 'art'); await mimicUserTyping(el, 'art');
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
expect(_inputNode.value).to.equal('Artichoke'); expect(_inputNode.value).to.equal('Artichoke');
expect(el.checkedIndex).to.equal(0); expect(el.checkedIndex).to.equal(0);
mimicUserTyping(el, ''); // await mimicUserTyping(el, '');
await sendKeys({ press: 'Backspace' });
await el.updateComplete; await el.updateComplete;
el.opened = false; el.opened = false;
await el.updateComplete; await el.updateComplete;
@ -1169,7 +1171,7 @@ describe('lion-combobox', () => {
`) `)
); );
mimicUserTyping(el, 'aaa'); await mimicUserTyping(el, 'aaa');
expect(el.opened).to.be.false; expect(el.opened).to.be.false;
}); });
@ -1194,7 +1196,7 @@ describe('lion-combobox', () => {
`) `)
); );
mimicUserTyping(el, 'aaaa'); await mimicUserTyping(el, 'aaaa');
expect(el.opened).to.be.true; expect(el.opened).to.be.true;
}); });
@ -1219,10 +1221,10 @@ describe('lion-combobox', () => {
`) `)
); );
mimicUserTyping(el, 'aaaa'); await mimicUserTyping(el, 'aaaa');
expect(el.opened).to.be.true; expect(el.opened).to.be.true;
mimicUserTyping(el, 'aaa'); await mimicUserTyping(el, 'aaa');
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.be.false; expect(el.opened).to.be.false;
}); });
@ -1243,7 +1245,7 @@ describe('lion-combobox', () => {
const options = el.formElements; const options = el.formElements;
expect(el.opened).to.equal(false); expect(el.opened).to.equal(false);
mimicUserTyping(el, 'art'); await mimicUserTyping(el, 'art');
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
@ -1284,7 +1286,7 @@ describe('lion-combobox', () => {
const options = el.formElements; const options = el.formElements;
expect(el.opened).to.equal(false); expect(el.opened).to.equal(false);
mimicUserTyping(el, 'art'); await mimicUserTyping(el, 'art');
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
await el.updateComplete; await el.updateComplete;
@ -1531,7 +1533,7 @@ describe('lion-combobox', () => {
</lion-combobox> </lion-combobox>
`) `)
); );
mimicUserTyping(el, 'ch'); await mimicUserTyping(el, 'ch');
await el.updateComplete; await el.updateComplete;
expect(getFilteredOptionValues(el)).to.eql(['Artichoke', 'Chard', 'Chicory']); expect(getFilteredOptionValues(el)).to.eql(['Artichoke', 'Chard', 'Chicory']);
}); });
@ -1547,7 +1549,7 @@ describe('lion-combobox', () => {
</lion-combobox> </lion-combobox>
`) `)
); );
mimicUserTyping(el, 'ch'); await mimicUserTyping(el, 'ch');
await el.updateComplete; await el.updateComplete;
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
@ -1556,7 +1558,7 @@ describe('lion-combobox', () => {
expect(_inputNode.selectionEnd).to.equal(_inputNode.value.length); expect(_inputNode.selectionEnd).to.equal(_inputNode.value.length);
// We don't autocomplete when characters are removed // We don't autocomplete when characters are removed
mimicUserTyping(el, 'c'); // The user pressed backspace (number of chars decreased) await mimicUserTyping(el, 'c'); // The user pressed backspace (number of chars decreased)
expect(_inputNode.value).to.equal('c'); expect(_inputNode.value).to.equal('c');
expect(_inputNode.selectionStart).to.equal(_inputNode.value.length); expect(_inputNode.selectionStart).to.equal(_inputNode.value.length);
}); });
@ -1574,7 +1576,7 @@ describe('lion-combobox', () => {
); );
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(el, 'ch'); await mimicUserTyping(el, 'ch');
await el.updateComplete; await el.updateComplete;
expect(getFilteredOptionValues(el)).to.eql(['Artichoke', 'Chard', 'Chicory']); expect(getFilteredOptionValues(el)).to.eql(['Artichoke', 'Chard', 'Chicory']);
expect(_inputNode.value).to.equal('ch'); expect(_inputNode.value).to.equal('ch');
@ -1591,7 +1593,7 @@ describe('lion-combobox', () => {
</lion-combobox> </lion-combobox>
`) `)
); );
mimicUserTyping(el, 'ch'); await mimicUserTyping(el, 'ch');
await el.updateComplete; await el.updateComplete;
expect(getFilteredOptionValues(el)).to.eql([ expect(getFilteredOptionValues(el)).to.eql([
'Artichoke', 'Artichoke',
@ -1653,7 +1655,7 @@ describe('lion-combobox', () => {
</lion-combobox> </lion-combobox>
`) `)
); );
mimicUserTyping(el, 'ch'); await mimicUserTyping(el, 'ch');
await el.updateComplete; await el.updateComplete;
expect(getFilteredOptionValues(el)).to.eql([ expect(getFilteredOptionValues(el)).to.eql([
'Artichoke', 'Artichoke',
@ -1675,11 +1677,11 @@ describe('lion-combobox', () => {
`) `)
); );
mimicUserTyping(el, 'ch'); await mimicUserTyping(el, 'ch');
await el.updateComplete; await el.updateComplete;
expect(el.checkedIndex).to.equal(1); expect(el.checkedIndex).to.equal(1);
mimicUserTyping(el, 'cho'); await mimicUserTyping(el, 'cho');
await el.updateComplete; await el.updateComplete;
expect(el.checkedIndex).to.equal(-1); expect(el.checkedIndex).to.equal(-1);
@ -1695,12 +1697,12 @@ describe('lion-combobox', () => {
`) `)
); );
mimicUserTyping(el2, 'ch'); await mimicUserTyping(el2, 'ch');
await el2.updateComplete; await el2.updateComplete;
expect(el2.checkedIndex).to.equal(1); expect(el2.checkedIndex).to.equal(1);
// Also works when 'diminishing amount of chars' // Also works when 'diminishing amount of chars'
mimicUserTyping(el2, 'x'); await mimicUserTyping(el2, 'x');
await el2.updateComplete; await el2.updateComplete;
expect(el2.checkedIndex).to.equal(-1); expect(el2.checkedIndex).to.equal(-1);
}); });
@ -1718,11 +1720,11 @@ describe('lion-combobox', () => {
); );
/** Goes from 2nd option Chard to 3rd option Chicory */ /** Goes from 2nd option Chard to 3rd option Chicory */
mimicUserTyping(el, 'ch'); await mimicUserTyping(el, 'ch');
await el.updateComplete; await el.updateComplete;
expect(el.checkedIndex).to.equal(1); expect(el.checkedIndex).to.equal(1);
mimicUserTyping(el, 'chi'); await mimicUserTyping(el, 'chi');
await el.updateComplete; await el.updateComplete;
expect(el.checkedIndex).to.equal(2); expect(el.checkedIndex).to.equal(2);
@ -1737,14 +1739,14 @@ describe('lion-combobox', () => {
`) `)
); );
mimicUserTyping(el2, 'ch'); await mimicUserTyping(el2, 'ch');
await el2.updateComplete; await el2.updateComplete;
expect(el2.checkedIndex).to.equal(1); expect(el2.checkedIndex).to.equal(1);
// match-mode all ensures the user sees Artichoke option, but it's not // match-mode all ensures the user sees Artichoke option, but it's not
// auto-completed or auto-selected, because it doesn't start with "cho" // auto-completed or auto-selected, because it doesn't start with "cho"
// See next test for more clarification // See next test for more clarification
mimicUserTyping(el2, 'cho'); await mimicUserTyping(el2, 'cho');
await el2.updateComplete; await el2.updateComplete;
expect(el2.checkedIndex).to.equal(-1); expect(el2.checkedIndex).to.equal(-1);
expect(getFilteredOptionValues(el2)).to.eql(['Artichoke']); expect(getFilteredOptionValues(el2)).to.eql(['Artichoke']);
@ -1763,7 +1765,7 @@ describe('lion-combobox', () => {
); );
// first match is Char'd', but better match is 'D'aikon // first match is Char'd', but better match is 'D'aikon
mimicUserTyping(el, 'd'); await mimicUserTyping(el, 'd');
await el.updateComplete; await el.updateComplete;
expect(el.checkedIndex).to.equal(3); expect(el.checkedIndex).to.equal(3);
expect(getFilteredOptionValues(el)).to.eql(['Chard', 'Daikon']); expect(getFilteredOptionValues(el)).to.eql(['Chard', 'Daikon']);
@ -1782,7 +1784,7 @@ describe('lion-combobox', () => {
); );
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(el, 'ch'); await mimicUserTyping(el, 'ch');
await el.updateComplete; await el.updateComplete;
expect(_inputNode.value).to.equal('Chard'); expect(_inputNode.value).to.equal('Chard');
expect(_inputNode.selectionStart).to.equal('ch'.length); expect(_inputNode.selectionStart).to.equal('ch'.length);
@ -1794,10 +1796,10 @@ describe('lion-combobox', () => {
expect(_inputNode.selectionStart).to.equal('chic'.length); expect(_inputNode.selectionStart).to.equal('chic'.length);
expect(_inputNode.selectionEnd).to.equal('Chicory'.length); expect(_inputNode.selectionEnd).to.equal('Chicory'.length);
// Diminishing chars, but autocompleting // Diminishing chars, but autocompletion
mimicUserTyping(el, 'ch'); await mimicUserTypingAdvanced(el, ['Backspace', 'Backspace', 'Backspace']); // Ch
await el.updateComplete; await el.updateComplete;
expect(_inputNode.value).to.equal('ch'); expect(_inputNode.value).to.equal('Ch');
expect(_inputNode.selectionStart).to.equal('ch'.length); expect(_inputNode.selectionStart).to.equal('ch'.length);
expect(_inputNode.selectionEnd).to.equal('ch'.length); expect(_inputNode.selectionEnd).to.equal('ch'.length);
}); });
@ -1903,7 +1905,7 @@ describe('lion-combobox', () => {
`) `)
); );
mimicUserTyping(el, 'ch'); // ch await mimicUserTyping(el, 'ch'); // ch
await el.updateComplete; // Ch[ard] await el.updateComplete; // Ch[ard]
expect(el.activeIndex).to.equal(1); expect(el.activeIndex).to.equal(1);
expect(el.checkedIndex).to.equal(1); expect(el.checkedIndex).to.equal(1);
@ -1931,7 +1933,7 @@ describe('lion-combobox', () => {
`) `)
); );
mimicUserTyping(el, 'ch'); await mimicUserTyping(el, 'ch');
await el.updateComplete; await el.updateComplete;
expect(el.activeIndex).to.equal(1); expect(el.activeIndex).to.equal(1);
expect(el.checkedIndex).to.equal(1); expect(el.checkedIndex).to.equal(1);
@ -1941,8 +1943,8 @@ describe('lion-combobox', () => {
expect(el.activeIndex).to.equal(2); expect(el.activeIndex).to.equal(2);
expect(el.checkedIndex).to.equal(2); expect(el.checkedIndex).to.equal(2);
// Diminishing chars, but autocompleting // Diminishing chars, but autocompletion
mimicUserTyping(el, 'a'); await mimicUserTypingAdvanced(el, ['Backspace', 'Backspace', 'Backspace', 'Backspace', 'a']); // a
await el.updateComplete; await el.updateComplete;
expect(el.activeIndex).to.equal(0); expect(el.activeIndex).to.equal(0);
expect(el.checkedIndex).to.equal(0); expect(el.checkedIndex).to.equal(0);
@ -1962,7 +1964,7 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(el, 'char'); await mimicUserTyping(el, 'char');
expect(_inputNode.value).to.equal('char'); expect(_inputNode.value).to.equal('char');
await el.updateComplete; // Char await el.updateComplete; // Char
@ -1989,7 +1991,7 @@ describe('lion-combobox', () => {
); );
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(el, 'ch'); await mimicUserTyping(el, 'ch');
await el.updateComplete; await el.updateComplete;
expect(_inputNode.value).to.equal('Chard'); expect(_inputNode.value).to.equal('Chard');
expect(_inputNode.selectionStart).to.equal('Ch'.length); expect(_inputNode.selectionStart).to.equal('Ch'.length);
@ -2066,9 +2068,10 @@ describe('lion-combobox', () => {
// Arrange // Arrange
const el = /** @type {MyEl} */ (await fixture(html`<${wrappingTag}></${wrappingTag}>`)); const el = /** @type {MyEl} */ (await fixture(html`<${wrappingTag}></${wrappingTag}>`));
await el.combobox.registrationComplete; await el.combobox.registrationComplete;
const { _inputNode } = getComboboxMembers(el.combobox);
// Act (start typing) // Act (start typing)
mimicUserTyping(el.combobox, 'l'); await mimicUserTypingAdvanced(el.combobox, ['l']);
// simulate fetching data from server // simulate fetching data from server
el.clearOptions(); el.clearOptions();
await el.updateComplete; await el.updateComplete;
@ -2078,14 +2081,13 @@ describe('lion-combobox', () => {
await el.updateComplete; await el.updateComplete;
// Assert // Assert
const { _inputNode } = getComboboxMembers(el.combobox);
expect(_inputNode.value).to.equal('lorem'); expect(_inputNode.value).to.equal('lorem');
expect(_inputNode.selectionStart).to.equal(1); expect(_inputNode.selectionStart).to.equal(1);
expect(_inputNode.selectionEnd).to.equal(_inputNode.value.length); expect(_inputNode.selectionEnd).to.equal(_inputNode.value.length);
expect(getFilteredOptionValues(el.combobox)).to.eql(['lorem', 'dolor']); expect(getFilteredOptionValues(el.combobox)).to.eql(['lorem', 'dolor']);
// Act (continue typing) // Act (continue typing)
mimicUserTyping(el.combobox, 'lo'); await mimicUserTypingAdvanced(el.combobox, ['o']);
// simulate fetching data from server // simulate fetching data from server
el.clearOptions(); el.clearOptions();
await el.updateComplete; await el.updateComplete;
@ -2101,7 +2103,7 @@ describe('lion-combobox', () => {
expect(getFilteredOptionValues(el.combobox)).to.eql(['lorem', 'dolor']); expect(getFilteredOptionValues(el.combobox)).to.eql(['lorem', 'dolor']);
// We don't autocomplete when characters are removed // We don't autocomplete when characters are removed
mimicUserTyping(el.combobox, 'l'); // The user pressed backspace (number of chars decreased) await mimicUserTypingAdvanced(el.combobox, ['Backspace', 'Backspace']);
expect(_inputNode.value).to.equal('l'); expect(_inputNode.value).to.equal('l');
expect(_inputNode.selectionStart).to.equal(_inputNode.value.length); expect(_inputNode.selectionStart).to.equal(_inputNode.value.length);
}); });
@ -2148,7 +2150,7 @@ describe('lion-combobox', () => {
); );
const options = el.formElements; const options = el.formElements;
mimicUserTyping(/** @type {LionCombobox} */ (el), 'c'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'c');
await el.updateComplete; await el.updateComplete;
expect(options[0]).lightDom.to.equal(`<span aria-label="Artichoke">Arti<b>c</b>hoke</span>`); expect(options[0]).lightDom.to.equal(`<span aria-label="Artichoke">Arti<b>c</b>hoke</span>`);
@ -2158,7 +2160,7 @@ describe('lion-combobox', () => {
`<span aria-label="Victoria Plum">Vi<b>c</b>toria Plum</span>`, `<span aria-label="Victoria Plum">Vi<b>c</b>toria Plum</span>`,
); );
mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
await el.updateComplete; await el.updateComplete;
expect(options[0]).lightDom.to.equal(`<span aria-label="Artichoke">Arti<b>ch</b>oke</span>`); expect(options[0]).lightDom.to.equal(`<span aria-label="Artichoke">Arti<b>ch</b>oke</span>`);
@ -2166,7 +2168,7 @@ describe('lion-combobox', () => {
expect(options[2]).lightDom.to.equal(`<span aria-label="Chicory"><b>Ch</b>icory</span>`); expect(options[2]).lightDom.to.equal(`<span aria-label="Chicory"><b>Ch</b>icory</span>`);
expect(options[3]).lightDom.to.equal(`Victoria Plum`); expect(options[3]).lightDom.to.equal(`Victoria Plum`);
mimicUserTyping(/** @type {LionCombobox} */ (el), 'D'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'D');
await el.updateComplete; await el.updateComplete;
expect(options[0]).lightDom.to.equal(`Artichoke`); expect(options[0]).lightDom.to.equal(`Artichoke`);
@ -2200,7 +2202,7 @@ describe('lion-combobox', () => {
); );
const options = el.formElements; const options = el.formElements;
mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
await el.updateComplete; await el.updateComplete;
expect(options[0]).lightDom.to.equal( expect(options[0]).lightDom.to.equal(
@ -2230,7 +2232,7 @@ describe('lion-combobox', () => {
); );
const options = el.formElements; const options = el.formElements;
mimicUserTyping(/** @type {LionCombobox} */ (el), 'c'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'c');
await el.updateComplete; await el.updateComplete;
expect(options[0]).lightDom.to.equal(`<span aria-label="Artichoke">Arti<b>c</b>hoke</span>`); expect(options[0]).lightDom.to.equal(`<span aria-label="Artichoke">Arti<b>c</b>hoke</span>`);
@ -2569,12 +2571,13 @@ describe('lion-combobox', () => {
// expect(_inputNode.value).to.equal('Aha', autocompleteMode); // expect(_inputNode.value).to.equal('Aha', autocompleteMode);
expect(el.checkedIndex).to.equal(0, autocompleteMode); expect(el.checkedIndex).to.equal(0, autocompleteMode);
mimicUserTyping(el, 'Arti'); await mimicUserTypingAdvanced(el, ['A', 'r', 't', 'i']);
await el.updateComplete; await el.updateComplete;
expect(_inputNode.value).to.equal('Arti', autocompleteMode); expect(_inputNode.value).to.equal('Arti', `autocompleteMode is ${autocompleteMode}`);
await el.updateComplete; await el.updateComplete;
expect(el.checkedIndex).to.equal(-1, autocompleteMode); expect(el.checkedIndex).to.equal(-1, `autocompleteMode is ${autocompleteMode}`);
_inputNode.value = '';
} }
el.autocomplete = 'none'; el.autocomplete = 'none';
@ -2648,7 +2651,7 @@ describe('lion-combobox', () => {
); );
const options = el.formElements; const options = el.formElements;
mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
await el.updateComplete; await el.updateComplete;
expect(options[0]).lightDom.to.equal( expect(options[0]).lightDom.to.equal(
@ -2664,7 +2667,7 @@ describe('lion-combobox', () => {
`<div data-key>Victoria Plum</div><small>Prunus domestica</small>`, `<div data-key>Victoria Plum</div><small>Prunus domestica</small>`,
); );
mimicUserTyping(/** @type {LionCombobox} */ (el), 'D'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'D');
await el.updateComplete; await el.updateComplete;
expect(options[0]).lightDom.to.equal(`<div data-key>Artichoke</div><small>Cardoon</small>`); expect(options[0]).lightDom.to.equal(`<div data-key>Artichoke</div><small>Cardoon</small>`);
@ -2690,7 +2693,7 @@ describe('lion-combobox', () => {
</lion-combobox> </lion-combobox>
`) `)
); );
mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha');
await el.updateComplete; await el.updateComplete;
expect(el.activeIndex).to.equal(1); expect(el.activeIndex).to.equal(1);
}); });
@ -2735,7 +2738,7 @@ describe('lion-combobox', () => {
// does not set active at all until user selects // does not set active at all until user selects
await setup(el, 'none'); await setup(el, 'none');
mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha');
await el.updateComplete; await el.updateComplete;
expect(el.activeIndex).to.equal(-1); expect(el.activeIndex).to.equal(-1);
expect(el.opened).to.be.true; expect(el.opened).to.be.true;
@ -2749,7 +2752,7 @@ describe('lion-combobox', () => {
// does not set active at all until user selects // does not set active at all until user selects
await setup(el, 'list'); await setup(el, 'list');
mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha');
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.be.true; expect(el.opened).to.be.true;
expect(el.activeIndex).to.equal(-1); expect(el.activeIndex).to.equal(-1);
@ -2762,9 +2765,9 @@ describe('lion-combobox', () => {
// Example 3. List with Inline Autocomplete (mostly, but with aria-autocomplete="inline") // Example 3. List with Inline Autocomplete (mostly, but with aria-autocomplete="inline")
await setup(el, 'inline'); await setup(el, 'inline');
mimicUserTyping(/** @type {LionCombobox} */ (el), ''); await mimicUserTyping(/** @type {LionCombobox} */ (el), '');
await el.updateComplete; await el.updateComplete;
mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha');
await el.updateComplete; await el.updateComplete;
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.be.true; expect(el.opened).to.be.true;
@ -2781,9 +2784,9 @@ describe('lion-combobox', () => {
// https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html // https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
// Example 3. List with Inline Autocomplete // Example 3. List with Inline Autocomplete
await setup(el, 'both'); await setup(el, 'both');
mimicUserTyping(/** @type {LionCombobox} */ (el), ''); await mimicUserTyping(/** @type {LionCombobox} */ (el), '');
await el.updateComplete; await el.updateComplete;
mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha');
await el.updateComplete; await el.updateComplete;
mimicKeyPress(_inputNode, 'Enter'); mimicKeyPress(_inputNode, 'Enter');
expect(el.activeIndex).to.equal(1); expect(el.activeIndex).to.equal(1);
@ -2803,27 +2806,27 @@ describe('lion-combobox', () => {
); );
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha');
await el.updateComplete; await el.updateComplete;
expect(el.activeIndex).to.equal(1); expect(el.activeIndex).to.equal(1);
mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
await el.updateComplete; await el.updateComplete;
mimicUserTyping(/** @type {LionCombobox} */ (el), 'chi'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'chi');
// Chard no longer matches, so should switch active to Chicory // Chard no longer matches, so should switch active to Chicory
await el.updateComplete; await el.updateComplete;
expect(el.activeIndex).to.equal(2); expect(el.activeIndex).to.equal(2);
// select artichoke // select artichoke
mimicUserTyping(/** @type {LionCombobox} */ (el), 'artichoke'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'artichoke');
await el.updateComplete; await el.updateComplete;
mimicKeyPress(_inputNode, 'Enter'); mimicKeyPress(_inputNode, 'Enter');
mimicUserTyping(/** @type {LionCombobox} */ (el), ''); await mimicUserTyping(/** @type {LionCombobox} */ (el), '');
await el.updateComplete; await el.updateComplete;
// change selection, active index should update to closest match // change selection, active index should update to closest match
mimicUserTyping(/** @type {LionCombobox} */ (el), 'vic'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'vic');
await el.updateComplete; await el.updateComplete;
expect(el.activeIndex).to.equal(3); expect(el.activeIndex).to.equal(3);
}); });
@ -2842,7 +2845,7 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
// Select something // Select something
mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'cha');
await el.updateComplete; await el.updateComplete;
mimicKeyPress(_inputNode, 'Enter'); mimicKeyPress(_inputNode, 'Enter');
expect(el.activeIndex).to.equal(1); expect(el.activeIndex).to.equal(1);
@ -2854,7 +2857,7 @@ describe('lion-combobox', () => {
el.formElements.forEach(option => expect(option.active).to.be.false); el.formElements.forEach(option => expect(option.active).to.be.false);
// change selection, active index should update to closest match // change selection, active index should update to closest match
mimicUserTyping(/** @type {LionCombobox} */ (el), 'vic'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'vic');
await el.updateComplete; await el.updateComplete;
expect(el.activeIndex).to.equal(3); expect(el.activeIndex).to.equal(3);
}); });
@ -2906,7 +2909,7 @@ describe('lion-combobox', () => {
); );
expect(el.formElements[1].active).to.equal(false); expect(el.formElements[1].active).to.equal(false);
mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
await el.updateComplete; await el.updateComplete;
expect(elProts._activeDescendantOwnerNode.getAttribute('aria-activedescendant')).to.equal( expect(elProts._activeDescendantOwnerNode.getAttribute('aria-activedescendant')).to.equal(
null, null,
@ -2931,7 +2934,7 @@ describe('lion-combobox', () => {
const el2Prots = getComboboxMembers(el2); const el2Prots = getComboboxMembers(el2);
mimicUserTyping(/** @type {LionCombobox} */ (el2), 'ch'); await mimicUserTyping(/** @type {LionCombobox} */ (el2), 'ch');
await el2.updateComplete; await el2.updateComplete;
expect(el2Prots._activeDescendantOwnerNode.getAttribute('aria-activedescendant')).to.equal( expect(el2Prots._activeDescendantOwnerNode.getAttribute('aria-activedescendant')).to.equal(
el2.formElements[1].id, el2.formElements[1].id,
@ -2939,7 +2942,7 @@ describe('lion-combobox', () => {
expect(el2.formElements[1].active).to.equal(true); expect(el2.formElements[1].active).to.equal(true);
el2.autocomplete = 'list'; el2.autocomplete = 'list';
mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
await el2.updateComplete; await el2.updateComplete;
expect(el2Prots._activeDescendantOwnerNode.getAttribute('aria-activedescendant')).to.equal( expect(el2Prots._activeDescendantOwnerNode.getAttribute('aria-activedescendant')).to.equal(
el2.formElements[1].id, el2.formElements[1].id,
@ -2949,7 +2952,7 @@ describe('lion-combobox', () => {
it('adds aria-label to highlighted options', async () => { it('adds aria-label to highlighted options', async () => {
const [el, options] = await fruitFixture({ autocomplete: 'both', matchMode: 'all' }); const [el, options] = await fruitFixture({ autocomplete: 'both', matchMode: 'all' });
mimicUserTyping(/** @type {LionCombobox} */ (el), 'choke'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'choke');
await el.updateComplete; await el.updateComplete;
const labelledElement = options[0].querySelector('span[aria-label="Artichoke"]'); const labelledElement = options[0].querySelector('span[aria-label="Artichoke"]');
expect(labelledElement).to.not.be.null; expect(labelledElement).to.not.be.null;
@ -2969,7 +2972,7 @@ describe('lion-combobox', () => {
); );
const options = el.formElements; const options = el.formElements;
mimicUserTyping(/** @type {LionCombobox} */ (el), 'choke'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'choke');
await el.updateComplete; await el.updateComplete;
const labelledElement = options[0].querySelector('span[aria-label=" Artichoke Cardoon "]'); const labelledElement = options[0].querySelector('span[aria-label=" Artichoke Cardoon "]');
expect(labelledElement).to.not.be.null; expect(labelledElement).to.not.be.null;
@ -3054,7 +3057,7 @@ describe('lion-combobox', () => {
); );
// activate opened listbox // activate opened listbox
mimicUserTyping(el, 'ch'); await mimicUserTyping(el, 'ch');
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
@ -3077,7 +3080,7 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
mimicUserTyping(el, 'art'); await mimicUserTyping(el, 'art');
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
@ -3102,7 +3105,7 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
const options = el.formElements; const options = el.formElements;
mimicUserTyping(el, 'art'); await mimicUserTyping(el, 'art');
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
@ -3132,7 +3135,7 @@ describe('lion-combobox', () => {
const { _inputNode } = getComboboxMembers(el); const { _inputNode } = getComboboxMembers(el);
const options = el.formElements; const options = el.formElements;
mimicUserTyping(el, 'art'); await mimicUserTyping(el, 'art');
await el.updateComplete; await el.updateComplete;
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
@ -3205,7 +3208,7 @@ describe('lion-combobox', () => {
it('will suggest partial matches (in the middle of the word) when set to "all"', async () => { it('will suggest partial matches (in the middle of the word) when set to "all"', async () => {
const [el] = await fruitFixture(); const [el] = await fruitFixture();
mimicUserTyping(/** @type {LionCombobox} */ (el), 'c'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'c');
await el.updateComplete; await el.updateComplete;
expect(getFilteredOptionValues(/** @type {LionCombobox} */ (el))).to.eql([ expect(getFilteredOptionValues(/** @type {LionCombobox} */ (el))).to.eql([
'Artichoke', 'Artichoke',
@ -3217,7 +3220,7 @@ describe('lion-combobox', () => {
it('will only suggest beginning matches when set to "begin"', async () => { it('will only suggest beginning matches when set to "begin"', async () => {
const [el] = await fruitFixture({ matchMode: 'begin' }); const [el] = await fruitFixture({ matchMode: 'begin' });
mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
await el.updateComplete; await el.updateComplete;
expect(getFilteredOptionValues(/** @type {LionCombobox} */ (el))).to.eql([ expect(getFilteredOptionValues(/** @type {LionCombobox} */ (el))).to.eql([
'Chard', 'Chard',
@ -3236,10 +3239,10 @@ describe('lion-combobox', () => {
return option.value === curValue; return option.value === curValue;
} }
el.matchCondition = onlyExactMatches; el.matchCondition = onlyExactMatches;
mimicUserTyping(/** @type {LionCombobox} */ (el), 'Chicory'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'Chicory');
await el.updateComplete; await el.updateComplete;
expect(getFilteredOptionValues(/** @type {LionCombobox} */ (el))).to.eql(['Chicory']); expect(getFilteredOptionValues(/** @type {LionCombobox} */ (el))).to.eql(['Chicory']);
mimicUserTyping(/** @type {LionCombobox} */ (el), 'Chicor'); await mimicUserTyping(/** @type {LionCombobox} */ (el), 'Chicor');
await el.updateComplete; await el.updateComplete;
expect(getFilteredOptionValues(/** @type {LionCombobox} */ (el))).to.eql([]); expect(getFilteredOptionValues(/** @type {LionCombobox} */ (el))).to.eql([]);
}); });

4
packages/ui/components/combobox/test/validators.test.js
View file

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