I have a component with two buttons like this:
<a id="config-delete-button" class="btn btn-sm btn-danger pull-right" v-if="is_this_admin && !configDeleted" @click="deleteConfig">Delete</a>
<a id="config-undelete-button" class="btn btn-sm btn-primary pull-right" v-if="is_this_admin && configDeleted" @click="unDeleteConfig">Undelete</a>
In my tests, the delete testcase passed as wrapper.find was unable to find the button.But undelete testcase is not able to find the undelete button.
Test code:
describe ('config undelete method', () => {
it ('positive case', async () => {
stub.withArgs(apiCalls.configDescribe.method, sinon.match.any).returns(Promise.resolve(mockAPI.config.config_describe));
stub.withArgs(apiCalls.configUnDelete.method, sinon.match.any).returns(Promise.resolve(1));
const wrapper = shallow(ConfigDescribeComponent, {
localVue,
propsData: {
name: JSON.stringify("linux_rhel7"),
config_type:JSON.stringify("client")
},
computed: {
api: function () {
return ctlApi;
}
}
});
await flushPromises();
wrapper.vm.configDeleted = true;
// Circumvent any sweetAlert popups by forcing resolve
const stub_sweetAlert = sinon.stub().returns(Promise.resolve(1))
wrapper.setMethods({ $sweetAlert: stub_sweetAlert });
// Behind the scenes, this method will be called: wrapper.vm.deleteConfig();
const unDeleteButton = wrapper.findAll('#config-undelete-button').at(0);
unDeleteButton.trigger('click');
await flushPromises();
// Wait until Vue has performed the actual DOM update after we trigger some state change.
localVue.nextTick(() => {
stub.withArgs(apiCalls.configUnDelete.method, sinon.match.any).should.have.been.called;
});
});
});
describe ('config delete method', () => {
it ('positive case', async () => {
stub.withArgs(apiCalls.configDescribe.method, sinon.match.any).returns(Promise.resolve(mockAPI.config.config_describe));
stub.withArgs(apiCalls.configDelete.method, sinon.match.any).returns(Promise.resolve(1));
const wrapper = shallow(ConfigDescribeComponent, {
localVue,
propsData: {
name: JSON.stringify("linux_rhel7"),
config_type:JSON.stringify("client")
},
computed: {
api: function () {
return ctlApi;
}
}
});
await flushPromises();
// Circumvent any sweetAlert popups by forcing resolve
const stub_sweetAlert = sinon.stub().returns(Promise.resolve(1))
wrapper.setMethods({ $sweetAlert: stub_sweetAlert });
// Behind the scenes, this method will be called: wrapper.vm.deleteConfig();
const deleteButton = wrapper.findAll('#config-delete-button').at(0);
deleteButton.trigger('click');
await flushPromises();
// Wait until Vue has performed the actual DOM update after we trigger some state change.
localVue.nextTick(() => {
stub.withArgs(apiCalls.configDelete.method, sinon.match.any).should.have.been.called;
});
});
});
Is there any dependency here? Like the wrapper still has the previous data of delete button and unable to flush it? These 2 calls are inside another describe call. There I am initializing stub in beforeEach and doing stub.restore in afterEach
