Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: handle null in set data #896

Merged
merged 2 commits into from Aug 4, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 7 additions & 5 deletions packages/test-utils/src/recursively-set-data.js
@@ -1,10 +1,12 @@
import { isPlainObject } from 'shared/validators'

export function recursivelySetData (vm, target, obj) {
Object.keys(obj).forEach(key => {
const val = obj[key]
if (isPlainObject(val)) {
recursivelySetData(vm, target[key], val)
export function recursivelySetData (vm, target, data) {
Object.keys(data).forEach(key => {
const val = data[key]
const targetVal = target[key]

if (isPlainObject(val) && isPlainObject(targetVal)) {
recursivelySetData(vm, targetVal, val)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like you just add a check to see if targetVal is a plain object, why does this solve the problem?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

null isn't a plain object, so we call Vue.set on the target property, rather than recursively setting.

} else {
vm.$set(target, key, val)
}
Expand Down
47 changes: 47 additions & 0 deletions test/specs/wrapper/setData.spec.js
Expand Up @@ -190,6 +190,53 @@ describeWithShallowAndMount('setData', mountingMethod => {
expect(wrapper.vm.anObject.propA.prop2).to.equal('b')
})

it('handles undefined values', () => {
const TestComponent = {
template: `
<div>
{{undefinedProperty && undefinedProperty.foo}}
</div>
`,
data: () => ({
undefinedProperty: undefined
})
}
const wrapper = mountingMethod(TestComponent)
wrapper.setData({
undefinedProperty: {
foo: 'baz'
}
})
expect(wrapper.text()).to.contain('baz')
})

it('handles null values', () => {
const TestComponent = {
template: `
<div>{{nullProperty && nullProperty.foo}}</div>
`,
data: () => ({
nullProperty: null
})
}
const wrapper = mountingMethod(TestComponent)
wrapper.setData({
nullProperty: {
foo: 'bar',
another: null
}
})
expect(wrapper.text()).to.contain('bar')
wrapper.setData({
nullProperty: {
another: {
obj: true
}
}
})
expect(wrapper.vm.nullProperty.another.obj).to.equal(true)
})

it('does not merge arrays', () => {
const TestComponent = {
template: '<div>{{nested.nested.nestedArray[0]}}</div>',
Expand Down
4 changes: 2 additions & 2 deletions test/specs/wrapper/setMethods.spec.js
Expand Up @@ -6,7 +6,7 @@ import { describeWithShallowAndMount } from '~resources/utils'
describeWithShallowAndMount('setMethods', mountingMethod => {
it('sets component data and updates nested vm nodes when called on Vue instance', () => {
const wrapper = mountingMethod(ComponentWithMethods)
const someMethod = () => console.log('hey')
const someMethod = () => {}
wrapper.setMethods({ someMethod })
expect(wrapper.vm.someMethod).to.equal(someMethod)
})
Expand All @@ -25,7 +25,7 @@ describeWithShallowAndMount('setMethods', mountingMethod => {
wrapper.find('.toggle').trigger('click')
expect(wrapper.vm.isActive).to.be.true
// Replace the toggle function so that the data supposedly won't change
const toggleActive = () => console.log('overriden')
const toggleActive = () => {}
wrapper.setMethods({ toggleActive })
wrapper.find('.toggle').trigger('click')
expect(wrapper.vm.isActive).to.be.true
Expand Down