refactor: update checked property to use sync: true in Lit (#8247)

vaadin · Nov 29, 2024 · de17f90 · de17f90
1 parent 06b9802
commit de17f90
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 63 deletions.
diff --git a/packages/checkbox/test/checkbox.common.js b/packages/checkbox/test/checkbox.common.js
@@ -41,40 +41,33 @@ describe('checkbox', () => {
       expect(getComputedStyle(checkbox).display).to.equal('none');
     });
 
-    it('should toggle checked property on input click', async () => {
+    it('should toggle checked property on input click', () => {
       input.click();
-      await nextUpdate(checkbox);
       expect(checkbox.checked).to.be.true;
 
       input.click();
-      await nextUpdate(checkbox);
       expect(checkbox.checked).to.be.false;
     });
 
-    it('should toggle checked property on label click', async () => {
+    it('should toggle checked property on label click', () => {
       label.click();
-      await nextUpdate(checkbox);
       expect(checkbox.checked).to.be.true;
 
       label.click();
-      await nextUpdate(checkbox);
       expect(checkbox.checked).to.be.false;
     });
 
-    it('should toggle checked property on required indicator click', async () => {
+    it('should toggle checked property on required indicator click', () => {
       const indicator = checkbox.shadowRoot.querySelector('[part="required-indicator"]');
       indicator.click();
-      await nextUpdate(checkbox);
       expect(checkbox.checked).to.be.true;
 
       indicator.click();
-      await nextUpdate(checkbox);
       expect(checkbox.checked).to.be.false;
     });
 
-    it('should not toggle checked property on label link click', async () => {
+    it('should not toggle checked property on label link click', () => {
       link.click();
-      await nextUpdate(checkbox);
       expect(checkbox.checked).to.be.false;
     });
 

diff --git a/packages/checkbox/test/validation.common.js b/packages/checkbox/test/validation.common.js
@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, nextFrame, nextRender, nextUpdate } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 
@@ -49,13 +49,11 @@ describe('validation', () => {
       expect(checkbox.checkValidity()).to.be.true;
     });
 
-    it('should validate when toggling checked property', async () => {
+    it('should validate when toggling checked property', () => {
       checkbox.checked = true;
-      await nextUpdate(checkbox);
       expect(validateSpy.calledOnce).to.be.true;
 
       checkbox.checked = false;
-      await nextUpdate(checkbox);
       expect(validateSpy.calledTwice).to.be.true;
     });
 

diff --git a/packages/field-base/src/checked-mixin.js b/packages/field-base/src/checked-mixin.js
@@ -30,6 +30,7 @@ export const CheckedMixin = dedupingMixin(
             value: false,
             notify: true,
             reflectToAttribute: true,
+            sync: true,
           },
         };
       }

diff --git a/packages/field-base/test/checked-mixin.test.js b/packages/field-base/test/checked-mixin.test.js
@@ -1,47 +1,52 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fire, fixtureSync } from '@vaadin/testing-helpers';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineLit, definePolymer, fire, fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { CheckedMixin } from '../src/checked-mixin.js';
 import { InputController } from '../src/input-controller.js';
 
-customElements.define(
-  'checked-mixin-element',
-  class extends CheckedMixin(DelegateFocusMixin(ControllerMixin(PolymerElement))) {
-    static get template() {
-      return html`<div>
+const runTests = (defineHelper, baseMixin) => {
+  const tag = defineHelper(
+    'checked-mixin',
+    `
+      <div>
         <slot></slot>
         <slot name="input"></slot>
-      </div>`;
-    }
-
-    constructor() {
-      super();
-
-      this._setType('checkbox');
-      this.addController(
-        new InputController(this, (input) => {
-          this._setInputElement(input);
-          this._setFocusElement(input);
-          this.stateTarget = input;
-        }),
-      );
-    }
-  },
-);
-
-describe('checked-mixin', () => {
+      </div>
+    `,
+    (Base) =>
+      class extends CheckedMixin(DelegateFocusMixin(baseMixin(Base))) {
+        constructor() {
+          super();
+
+          this._setType('checkbox');
+        }
+
+        ready() {
+          super.ready();
+
+          this.addController(
+            new InputController(this, (input) => {
+              this._setInputElement(input);
+              this._setFocusElement(input);
+              this.stateTarget = input;
+            }),
+          );
+        }
+      },
+  );
+
   let element, input, link;
 
   describe('default', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       element = fixtureSync(`
-        <checked-mixin-element>
+        <${tag}>
           I accept <a href="#">the terms and conditions</a>
-        </checked-mixin-element>
+        </${tag}>
       `);
-
+      await nextRender();
       link = element.querySelector('a');
       input = element.querySelector('[slot=input]');
     });
@@ -94,8 +99,9 @@ describe('checked-mixin', () => {
 
   describe('delegation', () => {
     describe('checked property', () => {
-      beforeEach(() => {
-        element = fixtureSync(`<checked-mixin-element checked></checked-mixin-element>`);
+      beforeEach(async () => {
+        element = fixtureSync(`<${tag} checked></${tag}>`);
+        await nextRender();
         input = element.querySelector('[slot=input]');
       });
 
@@ -107,4 +113,12 @@ describe('checked-mixin', () => {
       });
     });
   });
+};
+
+describe('CheckedMixin + Polymer', () => {
+  runTests(definePolymer, ControllerMixin);
+});
+
+describe('CheckedMixin + Lit', () => {
+  runTests(defineLit, PolylitMixin);
 });
diff --git a/packages/radio-group/src/vaadin-lit-radio-button.js b/packages/radio-group/src/vaadin-lit-radio-button.js
@@ -29,22 +29,6 @@ class RadioButton extends RadioButtonMixin(ElementMixin(ThemableMixin(PolylitMix
     return radioButtonStyles;
   }
 
-  static get properties() {
-    return {
-      /**
-       * True if the element is checked.
-       * @type {boolean}
-       */
-      checked: {
-        type: Boolean,
-        value: false,
-        notify: true,
-        reflectToAttribute: true,
-        sync: true,
-      },
-    };
-  }
-
   /** @protected */
   render() {
     return html`