Due to some infrastructure changes (namely servers & VPNs) there are times I want to run our application in an offline mode. I've been able to implement this with ngMockE2E however it seems to be an all or nothing approach, meaning you have to explicitly set every single HTTP request out of the app.
Is there a way to have it assume that unless you have explicitly set a route/url to be handled that it will automatically call a generic passThrough() operation?
Currently I am doing this:
noSrvc = $location.search().hasOwnProperty 'nosrvc'
#
# templates
#
$httpBackend.whenGET /(\.htm|\.html)$/
.passThrough();
#
# session
#
rqst = $httpBackend.whenGET /(api\/users\/current)$/
if !noSrvc then rqst.passThrough() else rqst.respond {"user":{
# doing something similar for every single service call in the app... gets tedious after about 3-4
Most everything I've read on the subject deals with unit testing and doesn't really address the implied passthrough unless otherwise stated.
That's the recipe I've used for whitelisting
app.run(function ($httpBackend) {
// mocked requests, should come first
$httpBackend.when('GET', 'mock').respond(200, {});
// whitelisted real requests, should come last
angular.forEach(['GET', 'DELETE', 'JSONP', 'HEAD', 'PUT', 'POST', 'PATCH'], function (method) {
$httpBackend.when(method).passThrough();
});
});
And I'm quite sure that precedence matters here.
Related
when I set the $http to cache requests, I still see duplicate requests (with the same url and same data) sent to the server from browser network,
$http.post(url, data, {cache:true} ).success(function(response) {
I have following questions:
Is this a right behaviour?
Can we cache post requests?
Is this the right way to do so or should I be doing it manually with the $cachefactory ?
From the docs:
Only GET and JSONP requests are cached.
If you want to cache POST-requests you would have to do it manually. You will need to make a service/factory that caches responses and serves as a layer before $http. You can use $cacheFactory or just a plain object.
function cacheService($http, $q){
var cache = {};
this.callSomething = function(postData){
let deferred = $q.defer();
let hash = angular.toJson(postData);
if(cache[hash]){
deferred.resolve(cache[hash]);
} else {
$http.post('path/to/resource', postData).then(function(response){
cache[hash] = response;
deferred.resolve(response);
});
}
return deferred.promise;
}
}
This is a simple example, you could of course use the same principle and make a more generalized service that takes an URL, postData and a cache object and returns a function that does the request and caches it.
I am not sure about cache working. But you can use $cacheFactory for same.
app.factory('Cache', function ($cacheFactory) {
return $cacheFactory('Cache');
});
app.controller('MyController', function ($scope, $http, Cache) {
$http.post(url, data, {cache:Cache} ).success(function(response) {}
});
EDIT:
Only GET and JSONP requests are cached.
The cache key is the request URL including search parameters; headers are not considered.
Cached responses are returned asynchronously, in the same way as responses from the server.
If multiple identical requests are made using the same cache, which is not yet populated, one request will be made to the server and remaining requests will return the same response.
A cache-control header on the response does not affect if or how responses are cached.
AngularJS documentation mentions that:
Only GET and JSONP requests are cached.
$http.get(url, {cache: true}) caches the HTTP response in the default cache object (created with $cacheFactory).
Items on the $cachefactory are stored as key-value pairs. The url specified on the $http object is used as the key for the cached value (to be returned). This is one of the reasons it works well with GET which only depends on the URL being hit.
In case of a POST request, the data being sent will also affect the response besides the URL being hit which makes caching a POST request much more complex (since the request will also have to become a part of the key). From the W3 specs:
The actual function performed by the POST method is determined by the
server and is usually dependent on the Request-URI.
The action performed by the POST method might not result in a resource
that can be identified by a URI.
Responses to this method are not cacheable, unless the response
includes appropriate Cache-Control or Expires header fields.
If your data is simple, this SO link might prove a bit useful.
Due to some infrastructure changes (namely servers & VPNs) there are times I want to run our application in an offline mode. I've been able to implement this with ngMockE2E however it seems to be an all or nothing approach, meaning you have to explicitly set every single HTTP request out of the app.
Is there a way to have it assume that unless you have explicitly set a route/url to be handled that it will automatically call a generic passThrough() operation?
Currently I am doing this:
noSrvc = $location.search().hasOwnProperty 'nosrvc'
#
# templates
#
$httpBackend.whenGET /(\.htm|\.html)$/
.passThrough();
#
# session
#
rqst = $httpBackend.whenGET /(api\/users\/current)$/
if !noSrvc then rqst.passThrough() else rqst.respond {"user":{
# doing something similar for every single service call in the app... gets tedious after about 3-4
Most everything I've read on the subject deals with unit testing and doesn't really address the implied passthrough unless otherwise stated.
That's the recipe I've used for whitelisting
app.run(function ($httpBackend) {
// mocked requests, should come first
$httpBackend.when('GET', 'mock').respond(200, {});
// whitelisted real requests, should come last
angular.forEach(['GET', 'DELETE', 'JSONP', 'HEAD', 'PUT', 'POST', 'PATCH'], function (method) {
$httpBackend.when(method).passThrough();
});
});
And I'm quite sure that precedence matters here.
I would like to intercept all $http calls made by various services and return an object which is declared inside the interceptor a.k.a. hardcoded data.
The request interceptor provided by Angular seems to only be able to change and return the HTTP config object.
How can I manipulate the data returned without actually calling a server?
Thanks.
To use $httpBackend from MockE2E to provide mock API responses, either for testing purposes, or to provide a mock API to develop the client against if the server API is not available, firstly you need to include angular-mocks.js as this contains ngMockE2E.
Then you need to add a module something like:
angular.module('mockBackend', [ 'ngMockE2E'])
.run(function($httpBackend) {
phones = [{name: 'phone1'}, {name: 'phone2'}];
// returns the current list of phones
$httpBackend.whenGET('/phones').respond(phones);
// adds a new phone to the phones array
$httpBackend.whenPOST('/phones').respond(function(method, url, data) {
var phone = angular.fromJson(data);
phones.push(phone);
return [200, phone, {}];
});
$httpBackend.whenGET(/^\/templates\//).passThrough();
//...
});
The above is taken from the docs at https://docs.angularjs.org/api/ngMockE2E/service/$httpBackend - you would need to set up in here all your API endpoints that you want to return mock data for, along with any that you want real data for, eg. in the above any requests for 'templates' uses .passThrough to still forward these requests to the server, but returns mock data for API calls to '/phones'.
As far as how to turn this off and on goes it will depend on how you have your angular build process set up. If you do not want any of this in your production version you could put the above in a separate mockbackend.js file and add
angular.module('myApp').requires.push('mockBackend');
to the bottom of the file - where 'myApp' would be your app module. For your production files you can then have your build process (manual or automated) remove the angular-mocks.js and mockbackend.js requires from your index.html file and all your api calls will revert to calling the server.
If you wanted to vary if the mock backend is used or not during development you could pass a constant into the mockBackend module and use this to decided if real or mock data is returned, eg. if you have a constant 'DEV' which is a simple boolean:
if (DEV === true) {
$httpBackend.whenGET('/phones').respond(phones);
} else {
$httpBackend.whenGET(/phones).passThrough();
}
I have a Jasmine test that is coded like this:
it ("should send correct message to server to get data, and correctly set up scope when receiving it", function(){
$httpBackend.when('GET', 'https://localhost:44300/api/projectconfiguration/12').respond(fakedDtoBase);
$routeParams.projectId=fakeId; // user asks for editing project
scope.$apply(function(){
var controller=controllerToTest(); // so controller gets data when it is created
});
expect(scope.projectData).toEqual(fakedDtoBase);
});
and it kind of works, but I get the error:
Error: Unexpected request: GET views/core/main/main.html
No more request expected
at $httpBackend (C:/SVN/src/ClientApp/client/bower_components/angular-mocks/angular-mocks.js:1207:9)
at sendReq (C:/SVN/src/ClientApp/client/bower_components/angular/angular.js:7800:9)
at $http.serverRequest (C:/SVN/src/ClientApp/client/bower_components/angular/angular.js:7534:16)
(more stack trace)....
I do realise that I can mock every other call. But let's say I do not care what else my test wants to load as it may call few other things.
How I can make sure that every other requests just "happen silently", maybe offering a single dummy response for everything else?
Your test fails because a request is made which you haven't specified.
Try to add:
$httpBackend.when('GET', 'views/core/main/main.html').respond(fakedMainResponse);
Of course you should also define fakedMainResponse.
Please take a look also at the documentation (section Request Expectations vs Backend Definitions) which says:
Request expectations provide a way to make assertions about requests
made by the application and to define responses for those requests.
The test will fail if the expected requests are not made or they are
made in the wrong order.
The second paramete of $httpBackend.when is actually a RegExp. So if you provide a RegExp that will match all other requests it should work.
For those who are using the httpBackend to mock http calls in EndToEnd tests or just mocking the entire http calls for the application the solution is to add the following code in the app config section (change the regexp according your template's location):
$httpBackend.whenGET(/^\/templates\//).passThrough();
Reference: https://docs.angularjs.org/api/ngMockE2E/service/$httpBackend
Tested with angularjs 1.4 to fix similar problem while integrating ui-router
I think it's also important to notice that if you have a $digest(), your expectation should follow the $digest, like so:
_$rootScope_.$digest();
$httpBackend.when('GET', 'views/core/main/main.html').respond(fakedMainResponse);
// ...
$httpBackend.flush(); // And remember to flush at the end
you only need to add setTimeout and done property to your flush to prevent it
it('should get data in callback funcion', function (done) {
$httpBackend.whenGET(/\/my-endpoint/).respond(mockDataResponse);
apiFactory.getCurrencyFormat('en', function (res, err) {
expect(res.a).to.deep.equal(generalMock.a);
expect(res.b).to.deep.equal(generalMock.b);
});
setTimeout(function () {
done();
$httpBackend.flush();
}, 200);
});
I have a data service in my application that is responsible for retrieving information for my controllers. This information might come from local storage, window or an ajax request. The problem I am facing is the $q promise responses don't look like $http responses.
this.getContactDetails = function(data) {
// The first time this method is called, we expect contact details to be preloaded on the page.
// We want to read and return that object then remove it from the page so subsequent requests are to the server.
if(typeof $window.preloadData.contact !== 'undefined') {
var contactDetails = JSON.parse(JSON.stringify($window.preloadData.contact));
delete $window.preloadData.contact;
// Since the method call should always have the same return type, we manually create a deferred object and set the resolution using the $q service.
var deferred = $q.defer();
deferred.resolve(contactDetails);
return deferred.promise;
}
var request = requests.contactDetails.get;
return $http(request);
};
The $q service does a nice job here but it resolves as the object it was given. I wouldn't really expect it to wrap the response. I know $httpBackend could accomplish this.
$httpBackend.whenGET(request).respond(contactDetails);
But the service is used in the MockE2E library and I doubt this was its intended use. I am not sure how to call this off afterwards or what would happen if I used it twice on the same request but I can figure out these questions. My other concern is that there doesn't seem to be a way to pass the same config object to $httpBackend as I do to $http. $httpBackend only accepts a method, url, body and headers, while $http config allows me to specify parameters.
Currently my work-around is simply to create and $http-like wrapper myself.
var contactDetails = JSON.parse(JSON.stringify({
data: $window.preloadData.contact
}));
But I don't find this very elegant. Is there a better/correct way to do this?
You can implement your storage layer as a $cacheFactory and add it to $httpProvider during the configuration phase.
From the docs:
When the cache is enabled, $http stores the response from the server in the specified cache. The next time the same request is made, the response is served from the cache without sending a request to the server.
Hence, if you provide your own implementation of a cache with the following methods:
{object} info() — Returns id, size, and options of cache.
{{*}} put({string} key, {*} value) — Puts a new key-value pair into the cache and returns it.
{{*}} get({string} key) — Returns cached value for key or undefined for cache miss.
{void} remove({string} key) — Removes a key-value pair from the cache.
{void} removeAll() — Removes all cached values.
{void} destroy() — Removes references to this cache from $cacheFactory.
You can return values read from localStorage, session cookies, etc. and they will be treated as there were data sent from the server, just without the AJAX request.