CODEWITHSUNDEEP
angularjsjasmine
mindparse
mindparse

Reputation: 7255

Unit testing a controller function that uses $filter('translate')

I have a controller function which returns a string concatenated with the return value of a translate filter:

$scope.getDetails = function(history) {
  return angular.fromJson(history.value).name + $filter('translate')('CATALOGUE_HISTORY.ADD_ACTION');
};

I'm now writing a test to check the function returns the expected string, and have so far put together the following:

'use strict';
    describe('CatalogueHistoryController', function() {
      var $controller, $filter, $scope, controller, history;

      beforeEach(function() {
        module('app');
      });
      beforeEach(inject(function(_$controller_, _$filter_) {
        $controller = _$controller_;
        $filter = _$filter_;
      }));
      beforeEach(function() {
        $scope = {};
        $httpBackend.expectGET('assets/locale/en_gb.json').respond({})
        controller = $controller('CatalogueHistoryController', {
          $scope: $scope,
          $filter: $filter
        });
      });
      describe('$scope.getDetails', function() {
        beforeEach(function() {
          history = {
            value: "{\"id\":3,\"name\":\"Some Name\"}"
          };
        });
        it('should produce an add message', function() {
          expect($scope.getDetails(history)).toEqual('Some Name was added to the catalogue');
        });
      });
    });

When the test runs it fails with:

Expected 'Some NameCATALOGUE_HISTORY.ADD_ACTION' to equal 'Some Name was added to the catalogue'.

Do I need to mock out the translate filter in some way for the specific CATALOGUE_HISTORY.ADD_ACTION id?

EDIT

I am currently configuring angular translate like so:

angular.module('app').config(function($translateProvider) {
  $translateProvider.useStaticFilesLoader({
    prefix: 'assets/locale/',
    suffix: '.json'
  });
  $translateProvider.preferredLanguage('en_gb');
  $translateProvider.useSanitizeValueStrategy('sanitize');
});

Upvotes: 1

Views: 647

Answers (1)

Aurelio
Aurelio

Reputation: 25802

I would mock the $filter and inject the mocked version of it.

Your goal in this specific test is to test your own function, not to test the filter. The filter test belongs to the filter implementation.

There are arguably many ways to mock a filter, here's one about the translate filter itself.

Once you make sure that whenever you call $filter('translate')('has been entered'); in your test it just returns the string you pass (i.e. 'has been entered' in this case) your test will be as simple as:

  describe('$scope.getDetails', function() {
    beforeEach(function() {
      history = {
        value: "{\"id\":3,\"name\":\"Some Name\"}"
      };
    });
    it('should produce an add message', function() {
      expect($scope.getDetails(history)).toEqual('Some Name has been entered');
    });
  });

Upvotes: 2

Related Questions