CODEWITHSUNDEEP
angularjsunit-testingjasmine
user3716084
user3716084

Reputation: 3

Unit Testing AngularJS Controller via Jasmine

I'm a complete rookie when it comes to unit testing with Jasmine and unit testing in general. My recent task has me trying to unit test an AngularJS controller. Below you'll see my code and what I've tried and most of it has failed to get me where I need to go. Any help would be appreciated!!

Controller 

 angular
       .module('TDE')
       .controller('LocationController', ['$rootScope', '$scope', '$location', '$window', '$document', 'LocationService', 'HeaderFooterService', 'SearchService', 'TranslationService', 'MTDE_CONFIG', 'LocationPartnerAssignmentService', 'ExperimentService', function ($rootScope, $scope, $location, $window, $document, $LocationService, $HeaderFooterService, $SearchService, $TranslationService, $MTDE_CONFIG, $LocationPartnerAssignmentService, $ExperimentService) {

       //some non important code
       //What I'm trying to test
       $scope.boolTest= function(var){
          return true; //this method only returns true
       }
       //all I'm after is basic understanding, I've done countless searches but I can't get it

  //other code

Helper File (Test File)

beforeEach(function () {
        angular.mock.module('LocationController'); //
        inject(function ($injector) {
            //$rootScope = $injector.get('$rootScope');
            //$scope = $rootScope.$new();
            //ctrl = $injector.get('$controller')("LocationController", { $scope: $scope });
            //Neither ctrl really functions that well

            injector = $injector;
            ctrl = $injector.get('$controller');
            scope = $injector.get('$rootScope').$new();
        });
    });

Spec.html

<!-- jasmine source -->
    <link rel="shortcut icon" type="image/png" href="spec/lib/jasmine-1.2.0/jasmine_favicon.png">
    <link rel="stylesheet" type="text/css" href="spec/lib/jasmine-1.2.0/jasmine.css">
    <script type="text/javascript" src="spec/lib/jasmine-1.2.0/jasmine.js"></script>
    <script type="text/javascript" src="spec/lib/jasmine-1.2.0/jasmine-html.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.1.0/angular-mocks.js"></script>

    <!-- include source files here... -->
    <script type="text/javascript" src="js/Location/LocationController.js"></script>
    <!-- include spec files here... -->
    <script type="text/javascript" src="spec/RTHelper.js"></script>

As of right now I am stuck, I can get really basic tests to work like a + b and verify the result, however I can not gain (at least I think) access to the $scope like I need for that method.

Current Error is No module: LocationController

I've tried it by using 'TDE' but nothing, someone please help me!

Upvotes: 0

Views: 1489

Answers (1)

DrDyne
DrDyne

Reputation: 1602

Sorry for the previous link, I didn't quite understand your problem there.

If you are setting up unit tests, I recommend you check Karma (http://karma-runner.github.io/0.12/index.html) which is the easiest way to test Angular code and integrate in a CI environment.

Anyway, here's an example of testing a basic controller in Jasmine:

function MyControllerCtrl ($scope, Service) {
  $scope.something = true;
  $scope.set = Service.set;
};

describe('MyControllerCtrl', function () {

  // load the controller's module using angular.mock.module
  beforeEach(module('myApp'));

  var subject
    , $scope
    , Service = { // mock the Service service
        set: function () {},
      }
    ;

  beforeEach(inject(function ($controller, $rootScope) {
    $scope = $rootScope.$new(); // create a new clean scope
    subject = $controller('MyControllerCtrl', {
      Service: Service,
      $scope: $scope,
    });

  }));

  it('should do something', function () {
    expect($scope.something).toEqual(true);
  });

  it('bind Service.set', function () {
    expect($scope.set).toEqual(Service.set);
  });

});

The idea behind this is that before each test, you pass the controller your mocked services ($scope is nothing but a service), then you test that the controller does what it has to do.

In your case, you can expect($scope.boolTest()).toEqual(true);

Upvotes: 1

Related Questions