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

fix(validate): reset validation state when modelValue becomes undefined

Browse source
This commit is contained in:
Thijs Louisse 2019-06-12 22:11:37 +02:00
parent 0b1cb9fe34
commit 9ba6e02f29
2 changed files with 43 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/validate/src/ValidateMixin.js
View file

@ -385,7 +385,13 @@ export const ValidateMixin = dedupeMixin(
* Other transitions (from Warning/Info) are not followed by a success message
*/
validate() {
if (this.modelValue === undefined) return;
if (this.modelValue === undefined) {
this.constructor.validationTypes.forEach(type => {
this[`${type}State`] = false;
this[type] = {};
});
return;
}
this.__oldValidationStates = this.getValidationStates();
this.constructor.validationTypes.forEach(type => {
this.validateType(type);

36
packages/validate/test/ValidateMixin.test.js
View file

@ -501,6 +501,36 @@ describe('ValidateMixin', () => {
expect(cbInfo.callCount).to.equal(2);
expect(cbSuccess.callCount).to.equal(1);
});
it('removes invalid states whenever modelValue becomes undefined', async () => {
const el = await fixture(html`
<${tag}
.errorValidators=${[[minLength, { min: 3 }]]}
.warningValidators=${[[minLength, { min: 5 }]]}
.infoValidators=${[[minLength, { min: 7 }]]}
.successValidators=${[[alwaysFalse]]}
>${lightDom}</${tag}>
`);
el.modelValue = 'a';
expect(el.warningState).to.equal(true);
expect(el.infoState).to.equal(true);
expect(el.successState).to.equal(true);
expect(el.error).to.not.eql({});
expect(el.warning).to.not.eql({});
expect(el.info).to.not.eql({});
expect(el.success).to.not.eql({});
el.modelValue = undefined;
expect(el.errorState).to.equal(false);
expect(el.warningState).to.equal(false);
expect(el.infoState).to.equal(false);
expect(el.successState).to.equal(false);
expect(el.error).to.eql({});
expect(el.warning).to.eql({});
expect(el.info).to.eql({});
expect(el.success).to.eql({});
});
});
describe(`Accessibility ${suffixName}`, () => {
@ -690,6 +720,9 @@ describe('ValidateMixin', () => {
const errorRenderer = defineCE(
class extends HTMLElement {
renderFeedback(validationStates, message) {
if (!message.list.length) {
return;
}
const validator = message.list[0].data.validatorName;
const showError = validationStates.error;
this.innerText = showError ? `ERROR on ${validator}` : '';
@ -982,6 +1015,9 @@ describe('ValidateMixin', () => {
const errorRenderer = defineCE(
class extends HTMLElement {
renderFeedback(validationStates, message) {
if (!message.list.length) {
return;
}
const validator = message.list[0].data.validatorName;
const hide =
message.list[0].data.validatorConfig &&