testing angularjs 1 factory method is automatically called inside a controller with jasmine

Question

I'm using ruby on rails with angularjs one, and testing it with teaspoon-jasmine for the first time and am running into issues. Basically, I have a controller that creates an empty array and upon load calls a factory method to populate that array. The Factory makes an http request and returns the data. Right now, i'm trying to test the controller, and i'm trying to test that 1) the factory method is called upon loading the controller, and 2) that the controller correctly assigns the returned data through it's callback. For a while I was having trouble getting a mocked factory to pass a test, but once I did, I realized I wasn't actually testing my controller anymore, but the code below passes. Any tips on how I can still get it to pass with mock, promises/callbacks, but accurately test my controller functionality. Or should I even test the this at all in my controller since it calls a factory method and just gives it a callback? My 3 files are below. Can anyone help here? It would be greatly appreciated

mainController.js

'use strict';


myApp.controller('mainController', [ 'mainFactory', '$scope', '$resource', function(factory, scope, resource){

 //hits the /games server route upon page load via the factory to grab the list of video games
 scope.games = [];

 factory.populateTable(function(data){
  scope.games = data;
 });



}]);

mainFactory.js

'use strict';


myApp.factory('mainFactory', ['$http', '$routeParams', '$location', function(http, routeParams, location) {
 var factory = {};

 factory.populateTable = function(callback) {
   http.get('/games')
   .then(function(response){
    callback(response.data);
   })
 };


 return factory;
}]);

And finally my mainController_spec.js file

'use strict';

describe("mainController", function() {

 var scope,
   ctrl,
   deferred,
   mainFactoryMock;

 var gamesArray = [
  {name: 'Mario World', manufacturer: 'Nintendo'},
  {name: 'Sonic', manufacturer: 'Sega'}
 ];

 var ngInject = angular.mock.inject;
 var ngModule = angular.mock.module;


 var setupController = function() {
  ngInject( function($rootScope, $controller, $q) {
   deferred = $q.defer();
   deferred.resolve(gamesArray);

   mainFactoryMock = {
    populateTable: function() {}
   };

   spyOn(mainFactoryMock, 'populateTable').and.returnValue(deferred.promise);

   scope = $rootScope.$new();
      ctrl = $controller('mainController', {
    mainFactory: mainFactoryMock,
    $scope: scope
   });
    })
 }

 beforeEach(ngModule("angularApp"));

 beforeEach(function(){
  setupController();
 });

 it('should start with an empty games array and populate the array upon load via a factory method', function(){
  expect(scope.games).toEqual([])

  mainFactoryMock.populateTable();

  expect(mainFactoryMock.populateTable).toHaveBeenCalled();
  
  mainFactoryMock.populateTable().then(function(d) {
        scope.games = d;
    });
    scope.$apply();  // resolve promise
  expect(scope.games).toEqual(gamesArray)
 })

});

Answer 1

Your code looks "non-standard" e.g still using scope.

If you are just starting with angular I hardly recommend you to read and follow this:

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

Angular controllers cannot be tested, extract the logic into factories/services and test from there.