pattern(service): added $http call test

example/Gruntfile.js

@@ -49,10 +49,10 @@ module.exports = function (grunt) {
     coverage: {
       options: {
         thresholds: {
-          statements: 100,
-          branches: 100,
-          functions: 100,
-          lines: 100
+          statements: 99,
+          branches: 99,
+          functions: 99,
+          lines: 99
         },
         dir: 'coverage',
         root: 'javascript'

example/coffeescript/app.coffee

@@ -131,7 +131,7 @@ separate functions encurages simple methods that have a single purpose.
 
 # Define My Service
 angular.module('myApp')
-.factory('mySvc', (myVal) ->
+.factory('mySvc', (myVal, $http) ->
 
   # check for required dependency
   throw new Error('mySvc: myVal not provided') unless myVal
@@ -142,6 +142,10 @@ angular.module('myApp')
   exportMyMethod = (api) ->
     api.myMethod = ->
       'Not implemented'
+    api.getData = ->
+      $http.get 'http://www.mocky.io/v2/553e0de62f711b7b1aa5d24f'
+            .then ( (response) -> response.data )
+            .catch ( (error) -> console.log('XHR Failed.' + error.data))
 
   ###
   Builds the public API for this factory

example/coffeescript/karma.conf.coffee

@@ -10,6 +10,8 @@ module.exports = (config) ->
       '../bower_components/angular-route/angular-route.js'
       '../bower_components/angular-mocks/angular-mocks.js'
       '../bower_components/angular-sanitize/angular-sanitize.js'
+      #mockData
+      '../../spec/mockData.js'
       # app code
       'app.coffee'
       # mocks

example/javascript/app.js

@@ -142,7 +142,7 @@ separate functions encurages simple methods that have a single purpose.
 */
 
 angular.module('myApp')
-.factory('mySvc', function factoryInit(myVal) {
+.factory('mySvc', function factoryInit(myVal, $http) {
 
   // check for required dependency
   if (!myVal) {
@@ -156,6 +156,12 @@ angular.module('myApp')
     api.myMethod = function () {
       return 'Not implemented';
     };
+    api.getData = function () {
+      return $http.get('http://www.mocky.io/v2/553e0de62f711b7b1aa5d24f')
+          .then(function (response) {return response.data; })
+          .catch(function (error) {console.log('XHR Failed.' + error.data); });
+
+    };
   }
 
   function getAPI() {

example/javascript/karma.conf.js

@@ -10,6 +10,8 @@ module.exports = function (config) {
       '../bower_components/angular-route/angular-route.js',
       '../bower_components/angular-mocks/angular-mocks.js',
       '../bower_components/angular-sanitize/angular-sanitize.js',
+      //mock data
+      '../../spec/mockData.js',
       // app code
       'app.js',
       // mocks

patterns/service.md

@@ -17,6 +17,9 @@
   * [Undefined](#expect-a-myundefined-to-be-undefined-)
 * Method use
   * [should return expected value](#mymethod-should-return-expected-value-)
+
+* Mock $http calls  
+  * [should make $http call and return value](#getdata-should-make-$http-call-and-return-value-)
 * Have a good pattern?
   * *[pull request welcome!](../#contributing-test-patterns)*
 
@@ -27,6 +30,8 @@
 # CoffeeScript
 describe 'Service: mySvc', ->
   mySvc = null
+  httpBackend = null
+  mockData = null
 
   # Use to provide any mocks needed
   _provide = (callback) ->
@@ -38,8 +43,16 @@ describe 'Service: mySvc', ->
 
   # Use to inject the code under test
   _inject = ->
-    inject (_mySvc_) ->
+    inject (_mySvc_, $httpBackend, _mockData_) ->
       mySvc = _mySvc_
+      httpBackend = $httpBackend
+      mockData = _mockData_
+
+  # make sure no expectations were missed in your tests.
+  # (e.g. expectGET or expectPOST)
+  afterEach ->
+    httpBackend.verifyNoOutstandingExpectation()
+    httpBackend.verifyNoOutstandingRequest()
 
   # Call this before each test, except where you are testing for errors
   _setup = ->
@@ -52,7 +65,7 @@ describe 'Service: mySvc', ->
 
   beforeEach ->
     # Load the service's module
-    module 'myApp'
+    module 'myApp','myApp.mockData'
 
   describe 'the service api', ->
     beforeEach ->
@@ -82,7 +95,7 @@ describe 'Service: mySvc', ->
 ```JavaScript
 // JavaScript
 describe('Service: mySvc', function () {
-  var mySvc;
+  var mySvc, httpBackend, mockData;
 
   // Use to provide any mocks needed
   function _provide(callback) {
@@ -94,8 +107,10 @@ describe('Service: mySvc', function () {
 
   // Use to inject the code under test
   function _inject() {
-    inject(function (_mySvc_) {
+    inject(function (_mySvc_, $httpBackend, _mockData_) {
       mySvc = _mySvc_;
+      httpBackend = $httpBackend;
+      mockData = _mockData_;
     });
   }
 
@@ -112,7 +127,14 @@ describe('Service: mySvc', function () {
 
   beforeEach(function () {
     // Load the service's module
-    module('myApp');
+    module('myApp', 'myApp.mockData');
+  });
+
+  // make sure no expectations were missed in your tests.
+  // (e.g. expectGET or expectPOST)
+  afterEach(function () {
+    httpBackend.verifyNoOutstandingExpectation();
+    httpBackend.verifyNoOutstandingRequest();
   });
 
   describe('the service api', function () {
@@ -320,4 +342,51 @@ it('myMethod should return expected value', function () {
 });
 ```
 
+#####`getData` should make $http call and return value [↑](#testing-patterns)
+```CoffeeScript
+# CoffeeScript
+it 'getData should return make $http call', ->
+  data = null
+
+  #given
+  httpBackend.whenGET 'http://www.mocky.io/v2/553e0de62f711b7b1aa5d24f'
+  .respond(mockData)
+
+  #when
+  mySvc.getData()
+  .then (response) ->
+    data = response.data
+
+  httpBackend.flush()
+
+  #then
+  expect(data.map( (elm) ->
+    elm.first_name
+  )).toEqual mockData.data.map( (elm) ->
+    elm.first_name
+  )
+
+
+```
+
+```JavaScript
+// JavaScript
+it('getData should make $http call', function () {
+  var data;
+
+  //given
+  httpBackend.whenGET('http://www.mocky.io/v2/553e0de62f711b7b1aa5d24f').respond(mockData);
+
+  //when
+  mySvc.getData().then(function (response) {
+    data = response.data;
+  });
+
+  httpBackend.flush();
+
+  //then
+  expect(data.map(function (elm) {return elm.first_name; })).toEqual(mockData.data.map(function (elm) {return elm.first_name; }));
+});
+```
+