diff --git a/src/vue-wrapper.ts b/src/vue-wrapper.ts index aaf2cc3c9..e71b2e939 100644 --- a/src/vue-wrapper.ts +++ b/src/vue-wrapper.ts @@ -1,7 +1,7 @@ import { ComponentPublicInstance, nextTick, App } from 'vue' + import { ShapeFlags } from './utils/vueShared' import { config } from './config' - import { DOMWrapper } from './dom-wrapper' import { FindAllComponentsSelector, FindComponentSelector } from './types' import { createWrapperError } from './error-wrapper' @@ -197,6 +197,13 @@ export class VueWrapper { return nextTick() } + setData(data: Record) { + // lodash.merge merges by *reference* so this will update + // any existing data with the newly passed data. + merge(this.componentVM.$data, data) + return nextTick() + } + trigger(eventString: string, options?: TriggerOptions) { const rootElementWrapper = new DOMWrapper(this.element) return rootElementWrapper.trigger(eventString, options) diff --git a/tests/setData.spec.ts b/tests/setData.spec.ts new file mode 100644 index 000000000..d88436cdf --- /dev/null +++ b/tests/setData.spec.ts @@ -0,0 +1,67 @@ +import { mount } from '../src' + +describe('setData', () => { + it('causes nested nodes to re-render', async () => { + const Comp = { + template: `
Show
`, + data() { + return { show: false } + } + } + + const wrapper = mount(Comp) + expect(wrapper.find('#show').exists()).toBe(false) + + await wrapper.setData({ show: true }) + + expect(wrapper.find('#show').exists()).toBe(true) + }) + + it('runs watch function when data is updated', async () => { + const Comp = { + template: `
{{ sideEffect }}
`, + data() { + return { msg: '', sideEffect: '' } + }, + watch: { + msg() { + this.sideEffect = 'side effect' + } + } + } + const wrapper = mount(Comp) + expect(wrapper.html()).not.toContain('side effect') + + await wrapper.setData({ msg: 'foo' }) + + expect(wrapper.html()).toContain('side effect') + }) + + it('updates a single property of a complex object', async () => { + const Comp = { + template: `
Qux: {{ foo.qux }}. Baz: {{ foo.bar.baz }}
`, + data() { + return { + foo: { + qux: 'will not change', + bar: { + baz: 'old val' + } + } + } + } + } + const wrapper = mount(Comp) + expect(wrapper.html()).toBe('
Qux: will not change. Baz: old val
') + + await wrapper.setData({ + foo: { + bar: { + baz: 'new val' + } + } + }) + + expect(wrapper.html()).toBe('
Qux: will not change. Baz: new val
') + }) +})