Skip to content

Commit

Permalink
refactor: make required and invalid properties use sync update (#8332)
Browse files Browse the repository at this point in the history
  • Loading branch information
web-padawan authored Dec 12, 2024
1 parent ece6317 commit eb8470d
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 8 deletions.
1 change: 1 addition & 0 deletions packages/custom-field/src/vaadin-custom-field-mixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export const CustomFieldMixin = (superClass) =>
type: String,
observer: '__valueChanged',
notify: true,
sync: true,
},

/**
Expand Down
2 changes: 2 additions & 0 deletions packages/field-base/src/validate-mixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export const ValidateMixin = dedupingMixin(
reflectToAttribute: true,
notify: true,
value: false,
sync: true,
},

/**
Expand All @@ -47,6 +48,7 @@ export const ValidateMixin = dedupingMixin(
required: {
type: Boolean,
reflectToAttribute: true,
sync: true,
},
};
}
Expand Down
12 changes: 4 additions & 8 deletions packages/field-base/test/validate-mixin.test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { expect } from '@vaadin/chai-plugins';
import { defineLit, definePolymer, fixtureSync, nextRender, nextUpdate } from '@vaadin/testing-helpers';
import { defineLit, definePolymer, fixtureSync, nextRender } from '@vaadin/testing-helpers';
import sinon from 'sinon';
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
Expand All @@ -16,36 +16,32 @@ const runTests = (defineHelper, baseMixin) => {
await nextRender();
});

it('should reflect required property to attribute', async () => {
it('should reflect required property to attribute', () => {
expect(element.hasAttribute('required')).to.be.false;

element.required = true;
await nextUpdate(element);
expect(element.hasAttribute('required')).to.be.true;
});

it('should reflect invalid property to attribute', async () => {
it('should reflect invalid property to attribute', () => {
expect(element.hasAttribute('invalid')).to.be.false;

element.invalid = true;
await nextUpdate(element);
expect(element.hasAttribute('invalid')).to.be.true;
});

it('should have manual validation disabled by default', () => {
expect(element.manualValidation).to.be.false;
});

it('should fire invalid-changed event on invalid property change', async () => {
it('should fire invalid-changed event on invalid property change', () => {
const spy = sinon.spy();
element.addEventListener('invalid-changed', spy);
element.invalid = true;
await nextUpdate(element);
expect(spy.calledOnce).to.be.true;

spy.resetHistory();
element.invalid = false;
await nextUpdate(element);
expect(spy.calledOnce).to.be.true;
});

Expand Down

0 comments on commit eb8470d

Please sign in to comment.