Skip to content

Commit

Permalink
fix: reset _hasInputValue on programmatic value clear (#622)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mukherjeesudebi
mukherjeesudebi authored Apr 27, 2023
1 parent 9731cfd commit 202917d
Show file tree
Hide file tree
Showing 7 changed files with 257 additions and 129 deletions.
4 changes: 3 additions & 1 deletion src/vaadin-text-field-mixin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,7 +297,8 @@
},

/**
* When true, the input element has a non-empty value entered by the user.
* Whether the input element has a non-empty value.
*
* @protected
*/
_hasInputValue: {
Expand Down Expand Up @@ -824,6 +825,7 @@
}

clear() {
this._hasInputValue = false;
this.value = '';
}

Expand Down
69 changes: 45 additions & 24 deletions test/email-field-events.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,37 +18,58 @@
</test-fixture>
<script>
describe('events', () => {
let emailField, input;
let emailField, input, hasInputValueChangedSpy, valueChangedSpy;

describe('has-input-value-changed event', () => {
beforeEach(async() => {
emailField = fixture('email-field');
input = emailField.inputElement;
});

it('should fire the event on input value presence change', async() => {
const hasInputValueChangedSpy = sinon.spy();
hasInputValueChangedSpy = sinon.spy();
valueChangedSpy = sinon.spy();
emailField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
input.value = 'foo';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;

hasInputValueChangedSpy.reset();
input.value = '';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
emailField.addEventListener('value-changed', valueChangedSpy);
});

it('should not fire the event on input if input value presence has not changed', async() => {
const hasInputValueChangedSpy = sinon.spy();
emailField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
input.value = 'foo';
input.dispatchEvent(new CustomEvent('input'));
hasInputValueChangedSpy.reset();

input.value = 'foobar';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.called).to.be.false;

describe('without user input', () => {
it('should fire the event once when entering input', async() => {
input.value = 'foo';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
});

it('should not fire the event on programmatic clear', async() => {
emailField.clear();
expect(hasInputValueChangedSpy.called).to.be.false;
});
});

describe('with user input', () => {
beforeEach(async() => {
input.value = 'foo';
input.dispatchEvent(new CustomEvent('input'));
hasInputValueChangedSpy.reset();
valueChangedSpy.reset();
});

it('should not fire the event when modifying input', async() => {
input.value = 'foobar';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.called).to.be.false;
});

it('should fire the event once when removing input', async() => {
input.value = '';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
});

it('should fire the event once on programmatic clear', async() => {
emailField.clear();
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
});
});
});
});
Expand Down
61 changes: 41 additions & 20 deletions test/integer-field-events.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,37 +18,58 @@
</test-fixture>
<script>
describe('events', () => {
let integerField, input;
let integerField, input, hasInputValueChangedSpy, valueChangedSpy;

describe('has-input-value-changed event', () => {
beforeEach(async() => {
integerField = fixture('integer-field');
input = integerField.inputElement;
hasInputValueChangedSpy = sinon.spy();
valueChangedSpy = sinon.spy();
integerField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
integerField.addEventListener('value-changed', valueChangedSpy);
});

it('should fire the event on input value presence change', async() => {
const hasInputValueChangedSpy = sinon.spy();
integerField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
input.value = '5';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
describe('without user input', () => {
it('should fire the event once when entering input', async() => {
input.value = '5';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
});

hasInputValueChangedSpy.reset();
input.value = '';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
it('should not fire the event on programmatic clear', async() => {
integerField.clear();
expect(hasInputValueChangedSpy.called).to.be.false;
});
});

it('should not fire the event on input if input value presence has not changed', async() => {
const hasInputValueChangedSpy = sinon.spy();
integerField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
input.value = '5';
input.dispatchEvent(new CustomEvent('input'));
hasInputValueChangedSpy.reset();
describe('with user input', () => {
beforeEach(async() => {
input.value = '5';
input.dispatchEvent(new CustomEvent('input'));
hasInputValueChangedSpy.reset();
valueChangedSpy.reset();
});

it('should not fire the event when modifying input', async() => {
input.value = '56';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.called).to.be.false;
});

it('should fire the event once when removing input', async() => {
input.value = '';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
});

input.value = '56';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.called).to.be.false;
it('should fire the event once on programmatic clear', async() => {
integerField.clear();
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
});
});
});
});
Expand Down
61 changes: 41 additions & 20 deletions test/number-field-events.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,37 +18,58 @@
</test-fixture>
<script>
describe('events', () => {
let numberField, input;
let numberField, input, hasInputValueChangedSpy, valueChangedSpy;

describe('has-input-value-changed event', () => {
beforeEach(async() => {
numberField = fixture('number-field');
input = numberField.inputElement;
hasInputValueChangedSpy = sinon.spy();
valueChangedSpy = sinon.spy();
numberField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
numberField.addEventListener('value-changed', valueChangedSpy);
});

it('should fire the event on input value presence change', async() => {
const hasInputValueChangedSpy = sinon.spy();
numberField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
input.value = '5';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
describe('without user input', () => {
it('should fire the event once when entering input', async() => {
input.value = '5';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
});

hasInputValueChangedSpy.reset();
input.value = '';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
it('should not fire the event on programmatic clear', async() => {
numberField.clear();
expect(hasInputValueChangedSpy.called).to.be.false;
});
});

it('should not fire the event on input if input value presence has not changed', async() => {
const hasInputValueChangedSpy = sinon.spy();
numberField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
input.value = '5';
input.dispatchEvent(new CustomEvent('input'));
hasInputValueChangedSpy.reset();
describe('with user input', () => {
beforeEach(async() => {
input.value = '5';
input.dispatchEvent(new CustomEvent('input'));
hasInputValueChangedSpy.reset();
valueChangedSpy.reset();
});

it('should not fire the event when modifying input', async() => {
input.value = '56';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.called).to.be.false;
});

it('should fire the event once when removing input', async() => {
input.value = '';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
});

input.value = '56';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.called).to.be.false;
it('should fire the event once on programmatic clear', async() => {
numberField.clear();
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
});
});
});
});
Expand Down
61 changes: 41 additions & 20 deletions test/password-field-events.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,37 +18,58 @@
</test-fixture>
<script>
describe('events', () => {
let passwordField, input;
let passwordField, input, hasInputValueChangedSpy, valueChangedSpy;

describe('has-input-value-changed event', () => {
beforeEach(async() => {
passwordField = fixture('password-field');
input = passwordField.inputElement;
hasInputValueChangedSpy = sinon.spy();
valueChangedSpy = sinon.spy();
passwordField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
passwordField.addEventListener('value-changed', valueChangedSpy);
});

it('should fire the event on input value presence change', async() => {
const hasInputValueChangedSpy = sinon.spy();
passwordField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
input.value = 'foo';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
describe('without user input', () => {
it('should fire the event once when entering input', async() => {
input.value = 'foo';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
});

hasInputValueChangedSpy.reset();
input.value = '';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
it('should not fire the event on programmatic clear', async() => {
passwordField.clear();
expect(hasInputValueChangedSpy.called).to.be.false;
});
});

it('should not fire the event on input if input value presence has not changed', async() => {
const hasInputValueChangedSpy = sinon.spy();
passwordField.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
input.value = 'foo';
input.dispatchEvent(new CustomEvent('input'));
hasInputValueChangedSpy.reset();
describe('with user input', () => {
beforeEach(async() => {
input.value = 'foo';
input.dispatchEvent(new CustomEvent('input'));
hasInputValueChangedSpy.reset();
valueChangedSpy.reset();
});

it('should not fire the event when modifying input', async() => {
input.value = 'foobar';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.called).to.be.false;
});

it('should fire the event once when removing input', async() => {
input.value = '';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
});

input.value = 'foobar';
input.dispatchEvent(new CustomEvent('input'));
expect(hasInputValueChangedSpy.called).to.be.false;
it('should fire the event once on programmatic clear', async() => {
passwordField.clear();
expect(hasInputValueChangedSpy.calledOnce).to.be.true;
expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
});
});
});
});
Expand Down
Loading

0 comments on commit 202917d

Please sign in to comment.