From f112aa726ae964fd83bae1e5a57d3e0b0085c761 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Thu, 12 Mar 2020 23:41:02 +1000 Subject: [PATCH 1/5] feat: support lazy modifier with setValue --- packages/test-utils/src/wrapper.js | 13 +++++++++++-- test/resources/components/component-with-input.vue | 3 +++ test/specs/wrapper/setValue.spec.js | 9 +++++++++ 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index ea31cf192..e4c34c9df 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -569,10 +569,19 @@ export default class Wrapper implements BaseWrapper { tagName === 'TEXTAREA' || tagName === 'SELECT' ) { - const event = tagName === 'SELECT' ? 'change' : 'input' // $FlowIgnore this.element.value = value - this.trigger(event) + + if (tagName === 'SELECT') { + this.trigger('change') + } else { + this.trigger('input') + } + + // for v-model.lazy, we need to trigger a change event, too. + if (tagName === 'INPUT' && this.element._vModifiers) { + this.trigger('change') + } } else { throwError(`wrapper.setValue() cannot be called on this element`) } diff --git a/test/resources/components/component-with-input.vue b/test/resources/components/component-with-input.vue index c9b8cf640..c161ee8c0 100644 --- a/test/resources/components/component-with-input.vue +++ b/test/resources/components/component-with-input.vue @@ -36,6 +36,8 @@ {{ textVal }} {{ selectVal }} {{ radioVal }} + + {{ lazy }} @@ -44,6 +46,7 @@ export default { name: 'component-with-input', data() { return { + lazy: '', checkboxVal: undefined, textVal: undefined, textareaVal: undefined, diff --git a/test/specs/wrapper/setValue.spec.js b/test/specs/wrapper/setValue.spec.js index 0f3e0bf73..215938f3d 100644 --- a/test/specs/wrapper/setValue.spec.js +++ b/test/specs/wrapper/setValue.spec.js @@ -28,6 +28,15 @@ describeWithShallowAndMount('setValue', mountingMethod => { expect(wrapper.text()).to.contain('input text awesome binding') }) + it('updates dom with input v-model.lazy', async () => { + const wrapper = mountingMethod(ComponentWithInput) + const input = wrapper.find('input#lazy') + input.setValue('lazy') + await Vue.nextTick() + + expect(wrapper.text()).to.contain('lazy') + }) + it('sets element of select value', () => { const wrapper = mountingMethod(ComponentWithInput) const select = wrapper.find('select') From 90fb6c18fbbd1a9594b4335d0dbb197538efdd06 Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Fri, 13 Mar 2020 19:55:37 +1000 Subject: [PATCH 2/5] fix: check lazy modifier --- packages/test-utils/src/wrapper.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index e4c34c9df..8db709790 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -579,7 +579,8 @@ export default class Wrapper implements BaseWrapper { } // for v-model.lazy, we need to trigger a change event, too. - if (tagName === 'INPUT' && this.element._vModifiers) { + // $FlowIgnore + if (tagName === 'INPUT' && this.element._vModifiers.lazy) { this.trigger('change') } } else { From 1b50e5e8212bbca87f35618facc2cefb3a0c99cc Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Fri, 13 Mar 2020 22:36:23 +1000 Subject: [PATCH 3/5] fix: add check for vModifiers --- packages/test-utils/src/wrapper.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index 8db709790..e327c0f0e 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -580,7 +580,11 @@ export default class Wrapper implements BaseWrapper { // for v-model.lazy, we need to trigger a change event, too. // $FlowIgnore - if (tagName === 'INPUT' && this.element._vModifiers.lazy) { + if ( + tagName === 'INPUT' && + this.element._vModifiers && + this.element._vModifiers.lazy + ) { this.trigger('change') } } else { From ad9c6439d2e17a1feca9fbccc82646ff4054b79b Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Fri, 13 Mar 2020 23:26:02 +1000 Subject: [PATCH 4/5] fix: include textarea in lazy check --- packages/test-utils/src/wrapper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index e327c0f0e..eae0acdc0 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -581,7 +581,7 @@ export default class Wrapper implements BaseWrapper { // for v-model.lazy, we need to trigger a change event, too. // $FlowIgnore if ( - tagName === 'INPUT' && + (tagName === 'INPUT' || tagName === 'TEXTAREA') && this.element._vModifiers && this.element._vModifiers.lazy ) { From cc63536d20972aff29cf0be4c9a95c291d3ead8e Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Fri, 13 Mar 2020 23:54:55 +1000 Subject: [PATCH 5/5] fix: skip lazy modifier spec for Vue 2.0 --- test/specs/wrapper/setValue.spec.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/test/specs/wrapper/setValue.spec.js b/test/specs/wrapper/setValue.spec.js index 215938f3d..867047098 100644 --- a/test/specs/wrapper/setValue.spec.js +++ b/test/specs/wrapper/setValue.spec.js @@ -1,5 +1,7 @@ import ComponentWithInput from '~resources/components/component-with-input.vue' import { describeWithShallowAndMount } from '~resources/utils' +import { itDoNotRunIf } from 'conditional-specs' +import { vueVersion } from '~resources/utils' import Vue from 'vue' describeWithShallowAndMount('setValue', mountingMethod => { @@ -28,14 +30,18 @@ describeWithShallowAndMount('setValue', mountingMethod => { expect(wrapper.text()).to.contain('input text awesome binding') }) - it('updates dom with input v-model.lazy', async () => { - const wrapper = mountingMethod(ComponentWithInput) - const input = wrapper.find('input#lazy') - input.setValue('lazy') - await Vue.nextTick() - - expect(wrapper.text()).to.contain('lazy') - }) + itDoNotRunIf( + vueVersion < 2.1, + 'updates dom with input v-model.lazy', + async () => { + const wrapper = mountingMethod(ComponentWithInput) + const input = wrapper.find('input#lazy') + input.setValue('lazy') + await Vue.nextTick() + + expect(wrapper.text()).to.contain('lazy') + } + ) it('sets element of select value', () => { const wrapper = mountingMethod(ComponentWithInput)