From 18a3b095f31d3d23f48d54cd38ca9a913f8d5d16 Mon Sep 17 00:00:00 2001
From: Sergey Vinogradov <mr.vursen@gmail.com>
Date: Wed, 11 Oct 2023 11:37:08 +0300
Subject: [PATCH] refactor and add more tests

---
 packages/field-base/src/clear-button-mixin.js |  2 +-
 .../src/vaadin-number-field-mixin.js          |  2 -
 .../number-field/test/value-commit.common.js  | 86 +++++++++++++------
 3 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/packages/field-base/src/clear-button-mixin.js b/packages/field-base/src/clear-button-mixin.js
index 3472c76c678..b6b62368ab2 100644
--- a/packages/field-base/src/clear-button-mixin.js
+++ b/packages/field-base/src/clear-button-mixin.js
@@ -103,7 +103,7 @@ export const ClearButtonMixin = (superclass) =>
      * @protected
      */
     _onClearAction() {
-      this.clear();
+      this._inputElementValue = '';
       // Note, according to the HTML spec, the native change event isn't composed
       // while the input event is composed.
       this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
diff --git a/packages/number-field/src/vaadin-number-field-mixin.js b/packages/number-field/src/vaadin-number-field-mixin.js
index d29ba85596e..c7680a8402f 100644
--- a/packages/number-field/src/vaadin-number-field-mixin.js
+++ b/packages/number-field/src/vaadin-number-field-mixin.js
@@ -436,9 +436,7 @@ export const NumberFieldMixin = (superClass) =>
      * @protected
      */
     _onClearAction(event) {
-      this.__keepCommittedValue = true;
       super._onClearAction(event);
-      this.__keepCommittedValue = false;
       this.__commitValueChange();
     }
 
diff --git a/packages/number-field/test/value-commit.common.js b/packages/number-field/test/value-commit.common.js
index d18dfd29d10..d4055ff3306 100644
--- a/packages/number-field/test/value-commit.common.js
+++ b/packages/number-field/test/value-commit.common.js
@@ -122,6 +122,25 @@ describe('value commit', () => {
         expectValueCommit('');
       });
     });
+
+    describe('value set programmatically', () => {
+      beforeEach(async () => {
+        numberField.value = '1234';
+        await nextUpdate(numberField);
+        valueChangedSpy.resetHistory();
+        validateSpy.resetHistory();
+      });
+
+      it('should not commit but validate on blur', () => {
+        numberField.blur();
+        expectValidationOnly();
+      });
+
+      it('should not commit on Enter', async () => {
+        await sendKeys({ press: 'Enter' });
+        expectNoValueCommit();
+      });
+    });
   });
 
   describe('unparsable input entered', () => {
@@ -284,27 +303,27 @@ describe('value commit', () => {
       await nextUpdate(numberField);
       expectValueCommit('-1');
     });
+  });
 
-    describe('arrow key committed', () => {
-      beforeEach(async () => {
-        await sendKeys({ press: 'ArrowUp' });
-        await nextUpdate(numberField);
-        valueChangedSpy.resetHistory();
-        validateSpy.resetHistory();
-        changeSpy.resetHistory();
-      });
+  describe('keyboard stepping committed', () => {
+    beforeEach(async () => {
+      await sendKeys({ press: 'ArrowUp' });
+      await nextUpdate(numberField);
+      valueChangedSpy.resetHistory();
+      validateSpy.resetHistory();
+      changeSpy.resetHistory();
+    });
 
-      it('should not commit but validate on blur', async () => {
-        numberField.blur();
-        await nextUpdate(numberField);
-        expectValidationOnly();
-      });
+    it('should not commit but validate on blur', async () => {
+      numberField.blur();
+      await nextUpdate(numberField);
+      expectValidationOnly();
+    });
 
-      it('should not commit on Enter', async () => {
-        await sendKeys({ press: 'Enter' });
-        await nextUpdate(numberField);
-        expectNoValueCommit();
-      });
+    it('should not commit on Enter', async () => {
+      await sendKeys({ press: 'Enter' });
+      await nextUpdate(numberField);
+      expectNoValueCommit();
     });
   });
 
@@ -327,25 +346,44 @@ describe('value commit', () => {
       await nextUpdate(numberField);
       expectValueCommit('-1');
     });
+  });
 
-    describe('click committed', () => {
+  describe('value control button click committed', () => {
+    beforeEach(async () => {
+      numberField.shadowRoot.querySelector('[part=increase-button]').click();
+      await nextUpdate(numberField);
+      valueChangedSpy.resetHistory();
+      validateSpy.resetHistory();
+      changeSpy.resetHistory();
+    });
+
+    it('should not commit but validate on blur', async () => {
+      numberField.blur();
+      await nextUpdate(numberField);
+      expectValidationOnly();
+    });
+
+    it('should not commit on Enter', async () => {
+      await sendKeys({ press: 'Enter' });
+      await nextUpdate(numberField);
+      expectNoValueCommit();
+    });
+
+    describe('value set programmatically', () => {
       beforeEach(async () => {
-        increaseButton.click();
+        numberField.value = '1234';
         await nextUpdate(numberField);
         valueChangedSpy.resetHistory();
         validateSpy.resetHistory();
-        changeSpy.resetHistory();
       });
 
-      it('should not commit but validate on blur', async () => {
+      it('should not commit but validate on blur', () => {
         numberField.blur();
-        await nextUpdate(numberField);
         expectValidationOnly();
       });
 
       it('should not commit on Enter', async () => {
         await sendKeys({ press: 'Enter' });
-        await nextUpdate(numberField);
         expectNoValueCommit();
       });
     });