Vue3 upgrade: fix unit tests for DatePicker.vue

[leodube-aot]

Description: The DatePicker component has already been upgraded to Vue 3, but the unit tests for the component also need to get upgraded. Some work has already been done towards this on the feature branch, ~but there is an issue with including the DateMixin~ The mixin problem appears to be resolved, however there are still a few other problems with the DatePicker unit tests.

• [ ] Replace VueWrapper with VueWrapper<DatePicker>. You can ignore the error "Cannot use namespace as a type" if it appears.
• [ ] Replace wrapper.vm.$data.dateText references with wrapper.vm.date. The data type will also have to be changed from string to Date.
• [ ] Replace await Vue.nextTick() with await nextTick().
• [ ] Figure out why triggering a click to open a v-menu doesn't update the DOM (see code below). It will update the internal component values (ex. displayPicker will update to true), but it still won't be able to find the v-date-picker component. The v-menu component may need to be stubbed out based on this thread.

wrapper.find('#date-text-field').trigger('click')
await nextTick()

[cameron-eyds]

@leodube-aot Small comment with regards to item #4, any v-menu, v-select, dialog etc in Vuetify3 is rendered in an overlay wrapper at the dom root. It's quite annoying for scoped styling without slots and in the test environment etc. In the test env you have 2 options (that i'm aware of)..

• I believe using the attach prop on the component will allow you access the menu within the test wrapper
• You could probably find the v-menu in the overlay outside the test wrapper you create by referencing the document.See the screenshot, in this example we are actually cleaning up the triggered overlays between tests but same idea.