Data fields of type date are not set over wrapper.setData.

[sparlampe]

Version

1.0.0-beta.20

Reproduction link

https://codepen.io/sparlampe/pen/wxBqOy

Steps to reproduce

In a unit test try to use wrapper.setData to set a field of type date like so wrapper.setData(someDateField: new Date())

What is expected?

someDateField should be equal to the current date

What is actually happening?

if the default value is undefined, after setDate is executed, the field has value {}.

---

This seems to happen because of the merging of objects in the vue-test-utils code. At some point vue-test-util calculates the source object and the target object.

The target object is calculated as follows: Object(vm.someDateField) which gives {} if someDateField is initially undefined. The the source object is explored for keys like so: Object.keys(new Date()), which gives [].

So eventually we have an empty target object with no fields from the source object to be transferred to the target.

[eddyerburgh]

Thanks for the detailed bug report, and sorry for the issues this has caused you.

Yes this is a bug with Vue Test Utils, and is part of a wider bug we have with asynchrnous DOM updates.

A temporary workaround if to run your tests asynchronously:

it("allows setting selectedDate", () => {
  let wrapper = shallow(demo, {sync: false});
  let testDate = new Date()
  wrapper.setData({selectedDate: testDate})
  setTimeout(() => {
  wrapper.vm.selectedDate.should.be.equal(testDate)
  done()  
  })
});

[sparlampe]

@eddyerburgh, thank you for the feedback.

I have updated the pen to add an asynchronous version of the test. Both fail, the original synchronous and the newly added asynchronous.

Am I missing something basic?

[eddyerburgh]

So there are two issues here—firstly the sync issue.

Secondly, it appears there's a bug when you use the component returned from Vue.component. If you shallowMount demoElement instead, that works. Could you please create a new issue with the codepen you provided so that I can track it and fix it?

I'm closing the original sync issue in favor of #676

[sparlampe]

@eddyerburgh Thanks for the feedback. I don't really get what you mean by saying

If you shallowMount componentEl instead, that works

could you please elaborate?

[eddyerburgh]

Sorry, I wrote the wrong variable name.

In your example you have a demoElement component options object. If you mount this with Vue Test Utils (rather than registering a component with Vue.component), setData works as expected.

[sparlampe]

Hi, @eddyerburgh, no luck with options object either. It does not work, see the updated pen. However, I think, I now see where we are talking past each other.

My issue is about setting data property of type Date not setting data in general. So setData works for example for String but not for Date. See the updated pen.

As I wrote in my first post, I think the reason is that vue-test-utils tries to merge data fields of type Date as if they were POJOs by looping over the keys. However, the keys array of a Date instance is empty.