Hi I have a component that gets the prop "access" and a computed property into a setter when access changes I call this.$emit('update:access', val) which updates the property in the parent via :access.sync="access". The problem is that my tests break when it needs to change this property.
If I use wrapper.setData({ accessComputed: 2 }) nothing updated If I use wrapper.setData({ access: 2 }) I have error with mutation props Maybe it's related to .sync? I will be grateful for any help
child component
props:{
access:{
type: Number,
required: true
},
},
computed:{
accessComputed:{
get() {
return this.access
},
set(val) {
this.$emit('update:access', val)
}
},
},
methods:{
changeTypeAccess(){
this.$nextTick(() => {
switch (this.accessComputed){
case 2:
this.generatePassword()
break;
case 3:
this.generateLink()
break;
}
});
}
}
parent
<AccessType
:access.sync="access"
/>
test spec
import { shallowMount, createLocalVue } from "@vue/test-utils"
import AccessType from '../../assets/components/AccessType'
const localVue = createLocalVue()
describe('testing access type component', () => {
let wrapper;
beforeEach(() => {
wrapper = shallowMount(AccessType, {
localVue,
propsData: {
access: 1,
},
computed: {
accessComputed:{
get() {
return this.access;
},
set(val) {
this.$emit('update:password', val)
}
},
}
})
});
test('test call diff methods by change type access', async () => {
let generatePasswordSpy = jest.spyOn(wrapper.vm, 'generatePassword')
let generateLinkSpy = jest.spyOn(wrapper.vm, 'generateLink')
wrapper.setData({ accessComputed: 2 })
wrapper.vm.changeTypeAccess()
await wrapper.vm.$nextTick()
expect(generatePasswordSpy).toHaveBeenCalled()
wrapper.setData({ access: 3 })
wrapper.vm.changeTypeAccess()
await wrapper.vm.$nextTick()
expect(generateLinkSpy).toHaveBeenCalled()
})
})