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

fix(form-core): fire initial modelValue lit update after registration

Browse source
This commit is contained in:
jorenbroekema 2020-10-14 12:13:55 +02:00
parent 9fcb67f0ec
commit 188fe50770
2 changed files with 58 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/form-core/src/choice-group/ChoiceGroupMixin.js
View file

@ -49,8 +49,8 @@ const ChoiceGroupMixinImplementation = superclass =>
this.__isInitialModelValue = false; this.__isInitialModelValue = false;
this.registrationComplete.then(() => { this.registrationComplete.then(() => {
this._setCheckedElements(value, checkCondition); this._setCheckedElements(value, checkCondition);
this.requestUpdate('modelValue');
}); });
this.requestUpdate('modelValue');
} else { } else {
this._setCheckedElements(value, checkCondition); this._setCheckedElements(value, checkCondition);
this.requestUpdate('modelValue'); this.requestUpdate('modelValue');

57
packages/listbox/test-suites/ListboxMixin.suite.js
View file

@ -1,4 +1,5 @@
import { Required } from '@lion/form-core'; import { Required } from '@lion/form-core';
import sinon from 'sinon';
import { expect, html, fixture as _fixture, unsafeStatic } from '@open-wc/testing'; import { expect, html, fixture as _fixture, unsafeStatic } from '@open-wc/testing';
import { LionOptions } from '@lion/listbox'; import { LionOptions } from '@lion/listbox';
import '@lion/listbox/lion-option.js'; import '@lion/listbox/lion-option.js';
@ -109,6 +110,62 @@ export function runListboxMixinSuite(customConfig = {}) {
expect(el.formElements[2].checked).to.be.true; expect(el.formElements[2].checked).to.be.true;
}); });
it('requests update for modelValue when checkedIndex changes', async () => {
const el = await fixture(html`
<${tag} name="gender" .modelValue=${'other'}>
<${optionTag} .choiceValue=${'male'}></${optionTag}>
<${optionTag} .choiceValue=${'female'}></${optionTag}>
<${optionTag} .choiceValue=${'other'}></${optionTag}>
</${tag}>
`);
expect(el.checkedIndex).to.equal(2);
const spy = sinon.spy(el, 'requestUpdate');
el.setCheckedIndex(1);
expect(spy).to.have.been.calledWith('modelValue', 'other');
});
it('requests update for modelValue after click', async () => {
const el = await fixture(html`
<${tag} name="gender" .modelValue=${'other'}>
<${optionTag} .choiceValue=${'male'}></${optionTag}>
<${optionTag} .choiceValue=${'female'}></${optionTag}>
<${optionTag} .choiceValue=${'other'}></${optionTag}>
</${tag}>
`);
expect(el.checkedIndex).to.equal(2);
const spy = sinon.spy(el, 'requestUpdate');
el.formElements[0].click();
expect(spy).to.have.been.calledWith('modelValue', 'other');
});
it('requests update for modelValue when checkedIndex changes for multiple choice', async () => {
const el = await fixture(html`
<${tag} name="gender" multiple-choice .modelValue=${['other']}>
<${optionTag} .choiceValue=${'male'}></${optionTag}>
<${optionTag} .choiceValue=${'female'}></${optionTag}>
<${optionTag} .choiceValue=${'other'}></${optionTag}>
</${tag}>
`);
expect(el.checkedIndex).to.eql([2]);
const spy = sinon.spy(el, 'requestUpdate');
el.setCheckedIndex(1);
expect(spy).to.have.been.calledWith('modelValue', sinon.match.array.deepEquals(['other']));
});
it('requests update for modelValue after click for multiple choice', async () => {
const el = await fixture(html`
<${tag} name="gender" multiple-choice .modelValue=${['other']}>
<${optionTag} .choiceValue=${'male'}></${optionTag}>
<${optionTag} .choiceValue=${'female'}></${optionTag}>
<${optionTag} .choiceValue=${'other'}></${optionTag}>
</${tag}>
`);
expect(el.checkedIndex).to.eql([2]);
const spy = sinon.spy(el, 'requestUpdate');
el.formElements[0].click();
expect(spy).to.have.been.calledWith('modelValue', sinon.match.array.deepEquals(['other']));
});
it(`has a fieldName based on the label`, async () => { it(`has a fieldName based on the label`, async () => {
const el1 = await fixture(html` const el1 = await fixture(html`
<${tag} label="foo"></${tag}> <${tag} label="foo"></${tag}>