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

chore: - added test to assert that modelValue of lion-select is updated when the value or text of one or more options are changed

Browse source 
- added changeset
This commit is contained in:
Danny Moerkerke 2023-02-01 14:58:28 +01:00 committed by Thijs Louisse
parent 853c517ec0
commit a47a6e615b
3 changed files with 32 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/violet-ducks-suffer.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
lion-select: added test to assert that modelValue of lion-select is updated when the value or text of one or more options are changed

3
packages/ui/components/select/src/LionSelect.js
View file

@ -64,7 +64,8 @@ export class LionSelect extends LionFieldWithSelect {
this.__selectObserver = new MutationObserver(() => {
this._syncValueUpwards();
// We need to force computation of other values in case model didn't change
// TODO: consider bringing this generically in FormatMixin._syncValueUpwards
// This can happen when options are loaded asynchronously so the modelValue doesn't change
// The MutationObserver detects this and makes sure the modelValue is updated
this._calculateValues({ source: 'model' });
});

25
packages/ui/components/select/test/lion-select.test.js
View file

@ -44,6 +44,31 @@ describe('lion-select', () => {
expect(lionSelect.formattedValue).to.equal('');
});
it('updates the formattedValue correctly when the value for the selected option is updated', async () => {
const lionSelect = /** @type {LionSelect} */ (
await fixture(html`
<lion-select label="Foo item" .modelValue="${'nr2'}">
<select slot="input">
<option value="nr1">Item 1</option>
<option value="nr2"></option>
<option value="nr3"></option>
</select>
</lion-select>
`)
);
expect(lionSelect.serializedValue).to.equal('nr2');
expect(lionSelect.formattedValue).to.equal('');
const select = /** @type {HTMLSlotElement} */ (
lionSelect.shadowRoot?.querySelector('slot[name=input]')
).assignedElements()[0];
const options = select.querySelectorAll('option');
options[1].textContent = 'Item 2';
await aTimeout;
expect(lionSelect.formattedValue).to.equal('Item 2');
});
it('is accessible', async () => {
const lionSelect = await fixture(html`
<lion-select .modelValue="${'nr2'}">