Using Vue test utils with Jest, I am attempting to spy on an axios.get call which runs in my component's created() lifecycle hook. I would like to test that the promise has been fulfilled (i.e. was not rejected) based on a method that runs in the then() block, but not the catch() block.
The way I have the test setup right now, the spyOn always resolves because I am using .mockResolveValue(). I tried declaring mockResolveValue() in the it('') portion of the test, but it says the axios get is called 0 times when I do that.
DeptPrefs.vue
<script>
import axios from 'axios'
export default {
name: "DeptPrefs",
data () {
return {
...
}
},
async created () {
await this.getPrefs()
},
computed: {},
methods: {
async getPrefs () {
await axios.get('/coolsite/api/admin/getstuff?dept=216001')
.then(r => {
this.setDeptPrefs(r.data)
}).catch((e) => {})
}
...
</script>
And this is how the deptprefs.spec.js currently looks.
describe('when prefs created() hook loads', () => {
const localVue = createLocalVue()
localVue.use(Vuex)
...
const getPrefs = jest.spyOn(DeptPrefs.methods, 'getPrefs') // spy on getPrefs() method
jest.spyOn(axios, 'get').mockResolvedValue([]) // spy on axios .get() method
const wrapper = mount(DeptPrefs, {
...
})
it('makes an api call to get the dept prefs', async () => {
await expect(getPrefs).toHaveBeenCalled() // works fine
await expect(axios.get).toHaveBeenCalledTimes(1) // works fine
const setDeptPrefs = jest.spyOn(appModule.mutations, 'setDeptPrefs')
expect(setDeptPrefs).toHaveBeenCalledTimes(1) // this is the expectation in question. It's always 1.
})
})
So let's say I change the URL of the API call to be a non-existent route. The test will still say that the setDeptPrefs() method has been called 1 time. It shouldn't be called at all because the axios should've hit the catch block, where that method does not run.
I want to amend my test to reflect this; when the then() block is hit, setDeptPrefs should NOT be called. When it does, it should be.
Also please feel free to chime in on if this is something I should even be unit testing. I am trying to get a feel for what's test-worthy and what isn't.
Related
There are few existing questions on stack overflow with this error but none of them explains this error on stubbing axios. I took the boilerplate working example from sinonjs.org and tried to mock axios. It throws the error
TypeError: Attempted to wrap get which is already wrapped
Code below:
import Axios from 'axios';
var sandbox = require('sinon').createSandbox();
describe('axios.get method', function () {
beforeEach(function () {
// stub out the `axios` method
sandbox.stub(Axios, 'get');
});
afterEach(function () {
// completely restore all fakes created through the sandbox
sandbox.restore();
});
it('should be called once', function () {});
});
The reason why you got this error is that you stub the Axios.get method more than once. The code you provided works fine. So you need to call sanbox.restore() method to restore all fakes created through the sandbox before stubbing the method again. Please check your code DOES NOT stub the Axios.get method continuous.
E.g.
index.test.ts:
import Axios from 'axios';
import sinon from 'sinon';
const sandbox = sinon.createSandbox();
describe('axios.get method', () => {
let axiosGetStub;
beforeEach(() => {
axiosGetStub = sandbox.stub(Axios, 'get');
});
afterEach(() => {
sandbox.restore();
});
it('should be called once', () => {
Axios.get('http://localhost:3000');
sandbox.assert.calledOnce(axiosGetStub);
});
it('should be called once again', () => {
Axios.get('http://localhost:3000');
sandbox.assert.calledOnce(axiosGetStub);
});
});
unit test result:
axios.get method
✓ should be called once
✓ should be called once again
2 passing (29ms)
I am looking for some advice. I have been using protractor for a few weeks and just cannot get my tests to be consistent unless I use browser.sleep. I have tried helper functions as well as browser.wait(expectedCondition). I have reduced browser.sleep immensely, but protractor still just goes way to fast. I can never successfully run multiple tests unless I have a few browser.sleeps just so protractor can relax for a second. Here is an example:
The Test I need to select a user, delete that user and wait for a success message. Then I click the same user and click the activate button.
Outcome: Unless I have browser.sleep, my success messages do not even appear after deletion/activation. The tests fail because protractor is moving way too fast. Even with the expected conditions. My main problem is that protractor moves to fast for the angular web page. I have tried ifCLickable or isDisplayed but they do not fix the issue entirely. Here is the code:
async deleteUser() {
await sendClick(this.getNewUser());
await sendClick(this.getDelete());
await waitTillPresent(this.getDeleteConfirm());
await sendClick(this.getDeleteConfirm());
await waitTillPresent(this.getSuccessMsg())
expect(await page.getSuccessMsg().isDisplayed()).toBeTruthy();
}
async activateUser() {
await sendClick(this.getNewUser());
await waitTillPresent(this.getEditBtn())
await sendClick(this.getActive());
await waitTillPresent(this.getSuccessMsg())
expect(await page.getSuccessMsg().isDisplayed()).toBeTruthy();
}
Functions:
export async function sendClick(element: ElementFinder): Promise<boolean> {
try {
if(!await element.isDisplayed()) {
return false;
}
await browser.executeScript('arguments[0].click();', await element.getWebElement());
return true;
}
catch (err) {
return false;
}
}`
export async function waitTillPresent (element: ElementFinder, timeout: number = 10000) {
return browser.wait(() => {
return element.isPresent();
}, timeout);
}
My Question: Am I handling this correctly? Is there a better to ensure my tests are consistent? Before these tests, I visit a non-angular webpage. So I have to include the line browser.waitForAngularEnabled(false)
Does this mess with the async nature of angular? Thank you.
I worked the last few months on our e2e test suite to make it stable. I did not believe it's possible but I made it using correct wait functions and sometimes browser.sleep() as a last resort.
You have a correct approach for waiting for elements. But there are 2 problems regarding your implementation:
1) The function waitTillPresent() does exactly what its name stands for. But if you only wait until the element is present on the page it does not mean it's clickable or displayed. An element can be hidden and at the same time still be present. Please rename waitTillPresent() to waitTillDisplayed() and change it as follows:
export async function waitTillDisplayed(element: ElementFinder, timeout: number = 20000): Promise<boolean> {
let result = await browser.wait(() => element.isPresent(), timeout);
if(!result) {
return false;
}
return await browser.wait(element.isDisplayed(), timeout);
}
2) You should exceed the default timeout. Set it a bit higher like 20 to 25 seconds. Just play with it.
Unfortunately, I don't know how browser.waitForAngularEnabled(false) changes test behavior. We do not use it :)
Note:
These functions are all exactly the same:
function foo() { return 'hello world'; }
var foo = () => { return 'hello world'; };
var foo = () => 'hello world';
Play with arrow functions, it's syntactic sugar.
Cheers and gl!
I have below function and I am using it in expect.
function Create() {
var that = this;
// Goto home page of App.
// Async call
that.homePage();
// Async call
Utils.click(projectsSelectors.project_create, false, that.browser);
// Async call
Utils.elementIsVisible(stock_avatar, that.browser);
// Async call
Utils.fill(name_input, that.name, that.browser);
// Async call
stockAvatar.call(that);
// Async call
Utils.click(create_save, false, that.browser);
// Verify if it's created.
// Async call
return that.$is_Created();
}
But when I use like below
expect(Create()).to.eventually.equal(true);
The expectation is just passed without doing anything. The above Create method contains multiple asynchronous calls.
I even chained all the calls inside Create method, but still, the expectation is just passing without doing anything on the screen.
Your test method must return the promise
it("should do something", function()
{
return expect(Create()).to.eventually.equal(true);
}
I have a function to be called in some of my protractor tests which does some tasks that take more than the protractor default timeout (which seems to be 60 seconds)
I've read that you should be able to change the default timeout with "jasmine.DEFAULT_TIMEOUT_INTERVAL", however with the following code, the timeout still happens before the 4 minutes I have set up. Since I want to reuse this test part in the future, I cannot simply add it as a parameter to the test function.
Here is the sample code, can anyone tell me what I'm doing wrong?
describe('reset data', function() {
it('should reset data', function() {
jasmine.DEFAULT_TIMEOUT_INTERVAL = 240000;
browser.ignoreSynchronization = true;
// ... test code here
});
});
I get the following error, after the test fails after roughly 60 seconds:
Error: Timeout - Async callback was not invoked within timeout
specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
I have created two functions to override, then restore the default protractor timeouts: (Only tested in Chrome)
import { browser } from 'protractor';
export function DefaultTimeoutOverride(milliseconds: number) {
browser.driver.manage().timeouts().setScriptTimeout(milliseconds);
}
export function DefaultTimeoutRestore() {
browser.driver.manage().timeouts().setScriptTimeout(browser.allScriptsTimeout);
}
EDIT
I have now created a helper function ('itTO') that wraps Jasmine's 'it' statement and applies the timeout automatically :)
import { browser } from 'protractor';
export function itTO(expectation: string, assertion: (done: DoneFn) => void, timeout: number): void {
it(expectation, AssertionWithTimeout(assertion, timeout), timeout);
}
function AssertionWithTimeout<T extends Function>(fn: T, timeout: number): T {
return <any>function(...args) {
DefaultTimeoutOverride(timeout);
const response = fn(...args);
DefaultTimeoutRestore();
return response;
};
}
function DefaultTimeoutOverride(milliseconds: number) {
browser.driver.manage().timeouts().setScriptTimeout(milliseconds);
}
function DefaultTimeoutRestore() {
browser.driver.manage().timeouts().setScriptTimeout(browser.allScriptsTimeout);
}
use like this:
itTO('should run longer than protractors default', async () => {
await delay(14000);
}, 15000);
const delay = ms => new Promise(res => setTimeout(res, ms))
Try his one instead:
By using a recursive function to identify if it is present.
function checkIfPresent(maxSec, elm, blnPresent) {
if (maxSec > 0) {
browser.sleep(1000).then(function() {
elm.isPresent().then(function(bln) {
if (bln != blnPresent) {
checkIfPresent(maxSec - 1, elm, blnPresent)
}
});
});
}
}
If you pass checkIfPresent(300000, elm, true)
It will check if the object is present every second, within 5mins.
Hope it helps. :)
Previous Comment:
I agree with the comment.
It should be declared on config file (conf.js)
jasmineNodeOpts: {
onComplete: null,
isVerbose: true,
showColors: true,
includeStackTrace: true,
defaultTimeoutInterval: 1000000
}
I am trying to wait for spinner to disappear and then for my steps to execute but nothing is working for me.
browser.wait(function () {
return this.spinner.isDisplayed().then(function (result) {
return !result;});}, 20000);
and i even tried with
browser.wait(function () {
return !browser.isElementPresent(this.spinner);}, 20000);
even with below method
browser.sleep(1000);
this.spinner.isPresent().then(function (result) {
if (result === true) {
var EC = protractor.ExpectedConditions;
browser.wait(EC.invisibilityOf(this.spinner), 10000);}});
then only thing that works is
browse.sleep(10000);
i don't want to use sleep in my code. can anyone help me with how to wait for complete http request to complete and then process with testing
you should consider using Expected Conditions since they return true/false based on current conditions
http://www.protractortest.org/#/api?view=ProtractorExpectedConditions.prototype.invisibilityOf
so your test case would become:
browser.wait(EC.invisibilityOf(this.spinner),20000).then(function(){
...continue test, spinner gone
});
UPDATE
in order to use done, you would generally pass this cb into your it() function. This means your test could look like
describe("example describe",function(){
it("should be an example only", function(done){
request.get("www.google.com",function(res){
//done with async request, now call done
done();
})
})
});
Since your entire code isn't posted up here, you should have something similar to:
it("should wait for spinner to go bye-bye",function(done){
browser.wait(EC.invisibilityOf(this.spinner),20000).then(function(){
done()
});
});