I am using nock to intercept my http requests in a mocha / chai environment. Also i am using supertest and supertest-chai to query my own express server. Like this:
import { it } from 'mocha';
import chai, { should } from 'chai';
import request from 'supertest';
import supertestChai from 'supertest-chai';
import Joi from 'joi';
import chaiJoi from 'chai-joi';
// others
function itRespondsTo({ url, response, description, parameters = {} }) {
const maxAge = parameters.maxAge || serverConfig.defaultCacheAge;
const params = parameters ? `${Object.entries(parameters).map(([name, val]) => `&${name}=${val}`).join('&')}` : '';
const path = `/oembed?url=${encodeURIComponent(url)}${params}`;
const desc = description || `/oembed?url=${url}${params}`;
it(`should respond to ${desc}`, (done) => {
request(server)
.get(path)
.expect(200)
.expect('Content-Type', /json/)
.expect('Access-Control-Allow-Methods', 'GET')
.expect('Cache-Control', `public, max-age=${maxAge}`)
.expect(res => Object.values(OEMBED_TYPES).should.include(res.body.type)) // [1]
.expect(res => Joi.validate(res.body, OEMBED_SCHEMAS[res.body.type]).should.validate)
.expect(response)
.end(done);
});
}
describe('YouTube endpoint', () => {
beforeEach(() => {
nock(/youtube\.com/)
.reply(200, remoteResponse);
});
afterEach(() => {
nock.restore();
});
itRespondsTo({ url: 'https://youtu.be/m4hklkGvTGQ', response });
itRespondsTo({ url: 'https://www.youtube.com/embed/m4hklkGvTGQ', response });
itRespondsTo({ url: 'https://www.youtube.com/watch?v=m4hklkGvTGQ', response });
itRespondsTo({ url: 'https://www.youtube.com/?v=m4hklkGvTGQ', response });
});
When I run my tests, the first call of itRespondsTo will always throw an error:
1) YouTube endpoint "before each" hook for "should respond to /oembed?url=https://youtu.be/m4hklkGvTGQ":
TypeError: nock.reply is not a function
And it will always be the first call of itRespondsTo. If I remove the first call, the next call will throw the error and so on. I have no idea why this is happening.
I found the reason I got an error. I had to put a get in between:
nock('https://www.youtube.com')
.get('/oembed')
.query(true)
.reply(200, remoteResponse);
Related
I have aproblem when test Apollo.When I try query with apollo and graphql, i want response return error and partical data, so I set property errorPolicy:'all'. But its not work. I don't no why? Help please!
Here my code:
query { animal {
name
age }, school {
name
numberfd } } `
const { loading,data,error} = useQuery(GET_DASHBOARD_DATA, {
errorPolicy:'all',
onCompleted: (res) => {console.log("complete",res)},
onError : (res,data) => {console.log("ERRRR",res,data)},
})
and i want to receive:
{
error:[...], data:[animal:[...]] }
but its only response error.Here is Apollo's doc: https://www.apollographql.com/docs/react/data/error-handling/
onError type is onError?: (error: ApolloError) => void;. You don't have data inside onError callback.
After useQuery you can add:
console.log('data', data)
console.log('error', error)
I faced the same issue with errorPolicy: 'all', I only received the partial result inside onCompleted callback of useQuery, but no errors.
I created an ErrorLink like this:
private createErrorLink = () => {
return new ApolloLink((operation, forward) => {
return forward(operation).map((response) => {
// filter out errors you don't want to display
const errors = filterSomeErrors(response.errors);
if (errors && response?.data) {
response.data.errors = errors;
}
return response;
});
});
};
Now inside my onCompleted callback I get my data as well as errors. You will have to tweak your types a bit, because seems there is no errors field on response.data by default.
Mind that if you use onError from Apollo and return something from the link, it will retry your request containing errors!
I am trying to unit test a function which makes an async call using an Axios helper instance. I have attempted multiple ways of trying to unit test this but I can not seem to find any material online which has helped. I've been stuck on this problem for a few days which is frustrating so any help would be appreciated! Below are the Axios Helper file (api.js)
api.js
import axios from 'axios'
const API = (token = null) => {
let headers = {
'Content-Type': 'application/json',
'Ocp-Apim-Subscription-key': process.env.NEXT_PUBLIC_API_HEADER_SUBSCRIPTION_KEY
}
if (token) {
const tokenHeader = { Authorization: 'Bearer ' + token }
headers = { ...headers, ...tokenHeader }
}
const url = process.env.NEXT_PUBLIC_API_BASE_URL
const API = axios.create({
baseURL: url,
headers
})
return API
}
export default API
mocked API
export default {
post: jest.fn(() =>
Promise.resolve({
data: {}
})
),
get: jest.fn(() =>
Promise.resolve({
data: {}
})
)
}
action file
export const initiate2FA = (destinationValue) => async () => {
const twoFactorAuth = destinationValue
const res = await API().post('/foo', {
Destination: twoFactorAuth
})
return res
}
Action.test.js
import API from 'api/api'
import { initiate2FA } from 'actions/userActions'
jest.mock('api/api')
const mockedAxios = API
const dispatch = jest.fn()
describe('Initiate2FA function', () => {
it('bar', async () => {
mockedAxios.get.mockImplementationOnce(() => Promise.resolve({ status: 200 }))
const t = await dispatch(initiate2FA('test#test.com'))
console.log(t)
})
})
My issue with the above test file is that it returns an anonymous function and I do not know how to handle this to pass the unit test. The goal of the test is to make sure the function is called. I am not sure if I am approaching this the correct way or should change my approach.
Again, any suggestions would be great!
Mocking an API call is something you can mock on your own React component, instead of a function, and the best option would be to not mock anything on your component. Here you can read all about why you should not mock your API functions. At the end of the article, you're going to find a library called Mock Service Worker which you can use for your purpose.
The way you declare you have an actual HTTP called that needs to be mocked would be something like this:
rest.get('/foo', async (req, res, ctx) => {
const mockedResponse = {bar: ''};
return res(ctx.json(mockedResponse))
}),
If you just need to unit test a function, you can still use Mock Service Worker to resolve the HTTP request, and then test what happens after that. This would still be your first choice. And the test would look like:
// this could be in another file or on top of your tests.
rest.get('/foo', async (req, res, ctx) => {
const mockedResponse = {bar: ''};
return res(ctx.json(mockedResponse))
}),
// and this would be your test
describe('Initiate2FA function', () => {
it('bar', async () => {
const res = await initiate2FA('test#test.com');
expect(res).toBe({bar: '');
})
})
I'm at a loss at this point. I'm trying to test an interceptor:
TEST:
const testBedBase = {
imports: [HttpClientTestingModule],
providers: [
ApiService,
CacheService,
{ provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true }
]
};
describe('CacheInterceptor with cached data', () => {
let httpMock: HttpTestingController;
let apiService: ApiService;
let cacheService: CacheService;
beforeEach(() => {
TestBed.configureTestingModule(testBedBase);
httpMock = TestBed.get(HttpTestingController);
apiService = TestBed.get(ApiService);
cacheService = TestBed.get(CacheService);
});
afterEach(() => {
httpMock.verify();
});
it('should respond with cached data if available', async( () => {
const testUrl = `http://localhost:3000/api/v1/employee/123`;
spyOn(cacheService, 'get').and.returnValue(mockResponse);
apiService.getEmployee('123').subscribe(res => {
// apiService calls http://localhost:3000/api/v1/employee/123 as tested in the interceptor
expect(res).toBeTruthy();
expect(res).toBe(mockResponse);
});
const req = httpMock.expectOne(testUrl);
req.flush(mockResponse);
}));
})
intercept(req: HttpRequest<any>, next: HttpHandler) {
const cachedResponse = this.cache.get(req.url);
console.log(cachedResponse, req.url); // this returns the http://localhost:3000/api/v1/employee/123 as seen in the getEmployee request
return cachedResponse ? Observable.of(cachedResponse) : this.sendRequest(req, next);
}
To my understanding the spyOn(cacheService, 'get').and.returnValue(mockResponse); should set the response of the this.cache.get request in the interceptor, but it doesn't. And I continually get:
Failed: Expected one matching request for criteria "Match URL: http://localhost:3000/api/v1/employee/123", found none.
If I remove the spy, the error goes away, but I'm not stubbing the response from the service in that case.
jasmine 3.1.0
angular 7
So I had two things going on here. Since I was trying to return data and not send an actual HTTP Request, I should not be telling the httpMock to expect a request. I should be telling it httpMock.expectNone(testUrl). Secondly, the mockResponse that I was sending with the spy, was not an actual HttpResponse that the subscription was expecting, I was just sending an object. So I needed to make a:
new HttpResponse({ body: employee.data.employee, status: 200 });
to send back with the spy.
Hope this saves someone else hours of work :)
I have the following action and test case - when I run this test(jest) - I am seeing TypeError: Cannot read property 'data' of undefined in action creator, not sure what is missing here? I am providing mockData that is expected. is it because there is an async nested here? but i am using `.then but it still fails.
Action creator:
export const getUser = ({
uname,
apiendpoint,
}) => {
const arguments = {};
return async (dispatch) => {
await axiosHelper({ ---> this will return axios.get
arguments,
path: `${apiendpoint}/${uname}`,
dispatch,
}).then(async ({ data, headers }) => { -- getting error at this line.
dispatch({ type: GET_USER, payload: data });
dispatch({ type: GET_NUMBEROFUSERS, payload: headers });
});
};
};
Test:
describe('Get User Action', () => {
let store;
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
beforeEach(() => {
store = mockStore({
data: [],
});
});
afterEach(() => {
fetchMock.reset();
fetchMock.restore();
})
const arguments = {
uname: 'user123',
apiendpoint: 'test',
};
const url = 'https://www.localhost.com/blah/blah';
it('should get a User', () => {
fetchMock
.getOnce(url, {
data: mockData, -->external mock js file with user data {}
headers: {
'content-type': 'application/json'
}
});
const expectedActions = [
{
type: 'GET_USER',
data: mockData
},
{ type: 'GET_NUMBEROFUSERS' }
];
return store.dispatch(actions.getUser(arguments)).then(() => {
expect(store.getActions()).toEqual(expectedActions);
});
});
You are using await AND then on the same function (axiosHelper for example).
This is wrong usage and will lead to many errors of undefined.
You either use a callback-function or a .then() or an await but not 2 or all of them.
I recommend to watch some tutorials/explanations about async/await because it's really important to understand what a Promise is.
What's happening in your cas is that axiosHelper is executed 2 times, because if it's finished the then-part will fire up but at the exactly same time (because it's async) the await finishes and code-execution continues the parent flow. This brings up race-conditions and, as i said, will lead to undefined because you are executing the same logic twice or more.
im having this issue where i send a request to the API to retrieve all users, the login function is called(index.vue) when called it tries to go to api/users/all which in this case should return all the users in that collection.
using Postman the API returns the correct results and if i console.log the output in the routeUsers before i send the response back, it outputs all the correct data to the console
when it returns to index.vue, the response status code is 0.
ive had a look online and some things are mentioning about CORS Headers but i dont think thats applicable to me and other things about the response has been cancelled,
can anyone shed some light on this for me and help me try to fix it?!
API main.js
var app = express();
var users = require('./routes/routeUsers');
app.use('/users', users);
module.exports = app;
api/models/users.js
var db = require('../Utilities/db')
module.exports.all = function(cb) {
var collection = db.get().collection('users')
collection.find().toArray(function(err, docs) {
cb(err, docs)
})
}
api/routes/routeUsers.js
var express = require('express')
, router = express.Router()
var user = require('../models/users');
router.get('/all', function(req, res) {
user.all(function(err, users) {
res.send(users);
})
})
Index.vue
export default {
data: function () {
return {
username: '',
password: '',
users: []
}
},
methods: {
login: function() {
Vue.http.get('/api/users/all').then((response) => {
console.log("SUCCESS",response);
this.users = response.body;
console.log(users);
}, function (error) {
console.log("Error", error.status); // handle error
});
}
}
};
The issue was that the inputs were in a form tag. removed Form tag and worked fine.