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

chore(combobox): add clarifying test for autocomplete/check

Browse source
This commit is contained in:
jorenbroekema 2022-09-17 11:39:36 +02:00 committed by Thijs Louisse
parent 18cbb5b476
commit b568bcd1dd
1 changed files with 64 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
packages/combobox/test/lion-combobox.test.js
View file

@ -1230,6 +1230,70 @@ describe('lion-combobox', () => {
expect(el2.checkedIndex).to.equal(-1);
});
it('resets "checkedIndex" when going from matched to another matched textbox value', async () => {
const el = /** @type {LionCombobox} */ (
await fixture(html`
<lion-combobox name="foo" autocomplete="both">
<lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
<lion-option .choiceValue="${'Chard'}">Chard</lion-option>
<lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
<lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
</lion-combobox>
`)
);
/** Goes from 2nd option Chard to 3rd option Chicory */
mimicUserTyping(el, 'ch');
await el.updateComplete;
expect(el.checkedIndex).to.equal(1);
mimicUserTyping(el, 'chi');
await el.updateComplete;
expect(el.checkedIndex).to.equal(2);
const el2 = /** @type {LionCombobox} */ (
await fixture(html`
<lion-combobox name="foo" autocomplete="both">
<lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
<lion-option .choiceValue="${'Chard'}">Chard</lion-option>
<lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
<lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
</lion-combobox>
`)
);
mimicUserTyping(el2, 'ch');
await el2.updateComplete;
expect(el2.checkedIndex).to.equal(1);
// 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"
// See next test for more clarification
mimicUserTyping(el2, 'cho');
await el2.updateComplete;
expect(el2.checkedIndex).to.equal(-1);
expect(getFilteredOptionValues(el2)).to.eql(['Artichoke']);
});
it('sets "checkedIndex" only if the match, matches from the beginning of the word', async () => {
const el = /** @type {LionCombobox} */ (
await fixture(html`
<lion-combobox name="foo" autocomplete="both">
<lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
<lion-option .choiceValue="${'Chard'}">Chard</lion-option>
<lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
<lion-option .choiceValue="${'Daikon'}">Daikon</lion-option>
</lion-combobox>
`)
);
// first match is Char'd', but better match is 'D'aikon
mimicUserTyping(el, 'd');
await el.updateComplete;
expect(el.checkedIndex).to.equal(3);
expect(getFilteredOptionValues(el)).to.eql(['Chard', 'Daikon']);
});
it('completes chars inside textbox', async () => {
const el = /** @type {LionCombobox} */ (
await fixture(html`