I want to create a unit test for the following vuejs method with Karma.
removeClass(e) {
if (!this.$el.contains(e.target)) {
this.isActive = false;
}
}
How can I mock the data from the if statement to get the return back?
describe('removeClass()', () => {
it('should return false', () => {
vm.removeClass();
expect(vm.isActive).toBe(false);
});
});
I fixed this with:
spyOn(vm.$el, 'contains').and.returnValue(false);
Related
I am having vue3 app with vite and vitest and trying to mock the Quasar useQuasar composable which I am using in my custom Composable like:
// useLoginRequestBuilder.ts
import { makeUserAuthentication } from "#/main/factories"
import { useQuasar } from "quasar"
export function useLoginRequestBuilder() {
const $q = useQuasar()
async function login() {
try {
$q.loading.show()
const auth = makeUserAuthentication()
return await auth.signinRedirect()
} catch (e) {
console.log(e)
$q.loading.hide()
$q.notify({
color: "red-4",
textColor: "white",
icon: "o_warning",
message: "Login Failed!",
})
}
}
return {
login,
}
}
and I am trying to mock quasar in tests like:
// useLoginRequestBuilder.spec.ts
import { useLoginRequestBuilder } from "#/main/builders"
vi.mock("quasar", () => ({ // <--- this is not really mocking quasar
useQuasar: () => ({
loading: {
show: () => true,
hide: () => true,
},
}),
}))
const spyAuth = vi.fn(() => Promise.resolve(true))
vi.mock("#/main/factories", () => ({
makeUserAuthentication: () => ({
signinRedirect: () => spyAuth(),
}),
}))
describe("test useLoginRequestBuilder", () => {
test("should call signinRedirect", async () => {
const { login } = useLoginRequestBuilder()
const sut = await login()
expect(sut).toBe(true)
})
})
vi.mock("quasar"... is failing to mock quasar and I am getting below error. That means, it failed to mock and failed to get the $q.loading.... object.
TypeError: Cannot read properties of undefined (reading 'loading')
I understand that there is a separate testing lib for quasar, here but I think this is not really the case here.
Bordering on a necro-post, but I had a similar issue that the mocking factory wasn't creating the plugins being used in non-Vue components, and had to mock each call individually in the end.
Though I'd add it here for anyone else
vitest.mock("quasar", () => vi.fn()); // this doesn't mock out calls
// use individual mocks as below
import { Loading } from "quasar";
vi.spyOn(Loading, "show").mockImplementation(() => vi.fn());
vi.spyOn(Loading, "hide").mockImplementation(() => vi.fn());
how to write unit test under this situation?
Vue Documents like this:
function alwaysEnabled() {
return false;
}
const actionDisabledFunctions = {
[CASE_ACTIONS.FLAG_CASE]: alwaysEnabled,
};
how do I write unit test inside describe?
describe('actionDisabledFunctions[CASE_ACTIONS.FLAG_CASE]', () => {
it('', () => {
});
});
This is the first time I am working on Jasmine unit test framework and I am trying to write unit test for the following lines of code in a component in Angular.
this.subscriptions.push(
this.store.select(authSelectors.getAuthError).subscribe((error) =\> {
if (error) {
this.loading = false;
this.utility.showErrorMessage(error);
if (this.loginForm) {
this.loginForm.reset();
} } }) );
Below is the code that I tried
describe('ngOnInit testing', () =\> {
it('Validate form', () =\> {
let mockError = new Observable\<any\>();
const storespy = jasmine.createSpyObj("Store",\['select'\]);
storespy.select.and.callFake((error: string) =\> {
switch(error) {
case authSelectors.getAuthError.toString(): return mockError;
default: return;
} });
if(mockError != null) { expect(utilityServiceSpy.showErrorMessage).toHaveBeenCalled();
} }) })
But this test case is failing with error:
Error: Expected spy UtilityService.showErrorMessage to have been called.
Am I doing anything wrong here?
I am trying to write a unit test for a function that does an async call, but it doesnt seem to alter the data prop, maybe I am doing something wrong.
Check the code below:
getSomething() {
MyService.getThis().then(
response => {
this.status = true;
}
).catch(error => {})
}
TestCase:
describe('test', () => {
beforeEach(() => {
// To ignore the created hook, but this doesnt work, any idea?
spyOn(CustomerData, 'created');
spyOn(MyService, 'getThis').and.returnValue(Promise.resolve(list));
});
wrapper = shallowMount(MyComponent, {
propsData: {
data: {}
},
});
it('should work', () => {
wrapper.vm.getSomething();
expect(wrapper.vm.status).toBeTruthy();
});
});
}
The status should be true, but it is false, but if I print the value of status in the getSomething() function it is indeed true. I have no idea what the issue can be.
update:
In the test case I wrote
it('should work', async () => {
await wrapper.vm.getSomething();
expect(wrapper.vm.status).toBeTruthy();
}
and this seems to work. Is this a good way to solve it? Would love to hear other solutions.
Also I am very interested if it is possible to ignore the created hook, I havent been able to figure that out yet.
Code that running inside getSomething() is asynchronous. MyService.getThis() returns promise, and its execution takes time, in case if you fetching some data from remote serivce.
So first of all you need to return promise from getSomething()
getSomething() {
return MyService.getThis()
.then(response => { this.status = true; })
.catch(error => {})
}
And inside the test you need to return promise outside, to let jest know that your test is asynchronous.
it('should work', () => {
return wrapper.vm.getSomething().then(() => {
expect(wrapper.vm.status).toBeTruthy();
});
});
Or as you mentioned in the edited part you can use async version:
it('should work', async () => {
await getSomething();
expect(wrapper.vm.status).toBeTruthy();
});
I have the following function that uses bind to bind a context to the then chains. When i try and test it, it throws
TypeError: redisClient.hgetallAsync(...).bind is not a function
myFunc() {
let self = this;
return redisClient.hgetallAsync('abcde')
.bind({ api: self })
.then(doStuff)
.catch(err => {
// error
});
}
Test
let redisClient = { hgetallAsync: sinon.stub() };
describe('myFunc', () => {
beforeEach(() => {
redisCLient.hgetallAsync.resolves('content!');
});
it('should do stuff', () => {
return myFunc()
.should.eventually.be.rejectedWith('Internal Server Error')
.and.be.an.instanceOf(Error)
.and.have.property('statusCode', 500);
});
});
The hgetallAsync stub is returning a plain JS Promise rather than a Bluebird promise.
To use a Bluebird promise, you need to tell Sinon to do so using .usingPromise().
let redisClient = { hgetallAsync: sinon.stub().usingPromise(bluebird.Promise) };
Documentation Link:
http://sinonjs.org/releases/v4.1.2/stubs/#stubusingpromisepromiselibrary