Sharing Top Content from the Angular-sphere.

[SOLVED] Testing Angular $resource with external service- Angular.js Recipes

  • I’m trying to make some basic tests on REST requests I’m doing using Angular $resource.
  • The problems comes out when I start making some tests on the services.
  • Here is a sample test where I mock the HTTP request using $httpBackend and I make a request to the mocked URL.
  • I’m sure about this because if a request to another URL is made, the test suite automatically raises an error.
  • Here the test code.

You were very close, the only thing missing was a call to the $httpBackend.flush();. The working test looks like follows:

it(‘returns a JSON’, inject(function(Device) {
var device = Device.get({ id: ’50c61ff1d033a9b610000001′ });
$httpBackend.flush();
expect(device.name).toEqual(‘Light’);
}));

and a live test in plunker: http://plnkr.co/edit/Pp0LbLHs0Qxlgqkl948l?p=preview

You might also want to check docs for the $httpBackend mock.


@angular_recipe: Testing Angular $resource with external service #Angular #AngularJS

I’m trying to make some basic tests on REST requests I’m doing using Angular $resource. The service code works just fine.

‘use strict’; angular.module(‘lelylan.services’, [‘ngResource’]). factory(‘Device’, [‘Settings’, ‘$resource’, ‘$http’, function(Settings, $resource, $http) { var token = ‘df39d56eaa83cf94ef546cebdfb31241327e62f8712ddc4fad0297e8de746f62’; $http.defaults.headers.common[“Authorization”] = ‘Bearer ‘ + token; var resource = $resource( ‘http://localhost:port/devices/:id’, { port: ‘:3001’, id: ‘@id’ }, { update: { method: ‘PUT’ } } ); return resource; }]);

I’m using the Device resource inside a directive and it works. The problems comes out when I start making some tests on the services. Here is a sample test where I mock the HTTP request using $httpBackend and I make a request to the mocked URL.

Unluckily it does not return anything, although the request is made. I’m sure about this because if a request to another URL is made, the test suite automatically raises an error. I’ve been spending lot of time, but no solutions. Here the test code.

‘use strict’; var $httpBackend; describe(‘Services’, function() { beforeEach(module(‘lelylan’)); beforeEach(inject(function($injector) { var uri = ‘http://localhost:3001/devices/50c61ff1d033a9b610000001’; var device = { name: ‘Light’, updated_at: ‘2012-12-20T18:40:19Z’ }; $httpBackend = $injector.get(‘$httpBackend’); $httpBackend.whenGET(uri).respond(device) })); describe(‘Device#get’, function() { it(‘returns a JSON’, inject(function(Device) { device = Device.get({ id: ’50c61ff1d033a9b610000001′ }); expect(device.name).toEqual(‘Light’); })); }); });

As the device is not loaded this is the error.

Expected undefined to equal ‘Light’. Error: Expected undefined to equal ‘Light’.

I’ve tried also using the following solution, but it doesn’t get into the function to check the expectation.

it(‘returns a JSON’, inject(function(Device) { device = Device.get({ id: ’50c61ff1d033a9b610000001′ }, function() { expect(device.name).toEqual(‘Light’); }); }));

Any suggestion or link to solve this problem is really appreciated. Thanks a lot.

. The working test looks like follows:

it(‘returns a JSON’, inject(function(Device) { var device = Device.get({ id: ’50c61ff1d033a9b610000001′ }); $httpBackend.flush(); expect(device.name).toEqual(‘Light’); }));

and a live test in plunker: http://plnkr.co/edit/Pp0LbLHs0Qxlgqkl948l?p=preview

You might also want to check docs for the $httpBackend mock.

In later versions of angular, I’m using 1.2.0rc1 you also need to call this within a $apply or call $digest on a scope. The resource call isn’t made unless you do something like this:

Angular.js Recipes are structured in a Cookbook format featuring recipes that contain problem statements and solutions. A detailed explanation follows each problem statement of the recipe. This is usually contained within the solution; however, an optional discussion section can often contain other useful information helping to demonstrate how the solution works.

Angular.js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Lost? Begin by working through Angular’s Getting Started Guide to get yourself up-and-running.

[SOLVED] Testing Angular $resource with external service- Angular.js Recipes

Comments are closed, but trackbacks and pingbacks are open.