Skip to content

Commit fdab308

Browse files
docs(ngMock/$httpBackend): fix testing example
Closes angular#3075
1 parent d57613c commit fdab308

File tree

1 file changed

+81
-56
lines changed

1 file changed

+81
-56
lines changed

src/ngMock/angular-mocks.js

Lines changed: 81 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -832,75 +832,100 @@ angular.mock.dump = function(object) {
832832
*
833833
*
834834
* # Unit testing with mock $httpBackend
835+
* The following code shows how to setup and use the mock backend in unit testing a controller.
836+
* First we create the controller under test
835837
*
836-
* <pre>
837-
// controller
838-
function MyController($scope, $http) {
839-
$http.get('/auth.py').success(function(data) {
840-
$scope.user = data;
841-
});
842-
843-
this.saveMessage = function(message) {
844-
$scope.status = 'Saving...';
845-
$http.post('/add-msg.py', message).success(function(response) {
846-
$scope.status = '';
847-
}).error(function() {
848-
$scope.status = 'ERROR!';
849-
});
850-
};
851-
}
852-
853-
// testing controller
854-
var $httpBackend;
838+
<pre>
839+
// The controller code
840+
function MyController($scope, $http) {
841+
var authToken;
855842
856-
beforeEach(inject(function($injector) {
857-
$httpBackend = $injector.get('$httpBackend');
843+
$http.get('/auth.py').success(function(data, status, headers) {
844+
authToken = headers('A-Token');
845+
$scope.user = data;
846+
});
858847
859-
// backend definition common for all tests
860-
$httpBackend.when('GET', '/auth.py').respond({userId: 'userX'}, {'A-Token': 'xxx'});
861-
}));
848+
$scope.saveMessage = function(message) {
849+
var headers = { 'Authorization': authToken };
850+
$scope.status = 'Saving...';
862851
852+
$http.post('/add-msg.py', message, { headers: headers } ).success(function(response) {
853+
$scope.status = '';
854+
}).error(function() {
855+
$scope.status = 'ERROR!';
856+
});
857+
};
858+
}
859+
</pre>
860+
*
861+
* Now we setup the mock backend and create the test specs.
862+
*
863+
<pre>
864+
// testing controller
865+
describe('MyController', function() {
866+
var $httpBackend, $rootScope, createController;
867+
868+
beforeEach(inject(function($injector) {
869+
// Set up the mock http service responses
870+
$httpBackend = $injector.get('$httpBackend');
871+
// backend definition common for all tests
872+
$httpBackend.when('GET', '/auth.py').respond({userId: 'userX'}, {'A-Token': 'xxx'});
873+
874+
// Get hold of a scope (i.e. the root scope)
875+
$rootScope = $injector.get('$rootScope');
876+
// The $controller service is used to create instances of controllers
877+
var $controller = $injector.get('$controller');
878+
879+
createController = function() {
880+
return $controller('MyController', {'$scope' : $rootScope });
881+
};
882+
}));
883+
884+
885+
afterEach(function() {
886+
$httpBackend.verifyNoOutstandingExpectation();
887+
$httpBackend.verifyNoOutstandingRequest();
888+
});
863889
864-
afterEach(function() {
865-
$httpBackend.verifyNoOutstandingExpectation();
866-
$httpBackend.verifyNoOutstandingRequest();
867-
});
868890
891+
it('should fetch authentication token', function() {
892+
$httpBackend.expectGET('/auth.py');
893+
var controller = createController();
894+
$httpBackend.flush();
895+
});
869896
870-
it('should fetch authentication token', function() {
871-
$httpBackend.expectGET('/auth.py');
872-
var controller = scope.$new(MyController);
873-
$httpBackend.flush();
874-
});
875897
898+
it('should send msg to server', function() {
899+
var controller = createController();
900+
$httpBackend.flush();
876901
877-
it('should send msg to server', function() {
878-
// now you don’t care about the authentication, but
879-
// the controller will still send the request and
880-
// $httpBackend will respond without you having to
881-
// specify the expectation and response for this request
882-
$httpBackend.expectPOST('/add-msg.py', 'message content').respond(201, '');
902+
// now you don’t care about the authentication, but
903+
// the controller will still send the request and
904+
// $httpBackend will respond without you having to
905+
// specify the expectation and response for this request
883906
884-
var controller = scope.$new(MyController);
885-
$httpBackend.flush();
886-
controller.saveMessage('message content');
887-
expect(controller.status).toBe('Saving...');
888-
$httpBackend.flush();
889-
expect(controller.status).toBe('');
890-
});
907+
$httpBackend.expectPOST('/add-msg.py', 'message content').respond(201, '');
908+
$rootScope.saveMessage('message content');
909+
expect($rootScope.status).toBe('Saving...');
910+
$httpBackend.flush();
911+
expect($rootScope.status).toBe('');
912+
});
891913
892914
893-
it('should send auth header', function() {
894-
$httpBackend.expectPOST('/add-msg.py', undefined, function(headers) {
895-
// check if the header was send, if it wasn't the expectation won't
896-
// match the request and the test will fail
897-
return headers['Authorization'] == 'xxx';
898-
}).respond(201, '');
915+
it('should send auth header', function() {
916+
var controller = createController();
917+
$httpBackend.flush();
918+
919+
$httpBackend.expectPOST('/add-msg.py', undefined, function(headers) {
920+
// check if the header was send, if it wasn't the expectation won't
921+
// match the request and the test will fail
922+
return headers['Authorization'] == 'xxx';
923+
}).respond(201, '');
899924
900-
var controller = scope.$new(MyController);
901-
controller.saveMessage('whatever');
902-
$httpBackend.flush();
903-
});
925+
$rootScope.saveMessage('whatever');
926+
$httpBackend.flush();
927+
});
928+
});
904929
</pre>
905930
*/
906931
angular.mock.$HttpBackendProvider = function() {

0 commit comments

Comments
 (0)