How to stop the angular-translate model from loading the JSON file in a test?

Question

My config file is:

angular.module('mean').config(['$routeProvider', '$translateProvider', '$locationProvider',
  function($routeProvider, $translateProvider, $locationProvider) {
    $routeProvider.
      when('/login', {
        templateUrl: '/views/login.html',
        controller: 'LoginController'
      }).
      when('/company', {
        templateUrl: '/views/company/dashboard.html',
        controller: 'CompanyController'
      }).
      otherwise({
          redirectTo: '/login'
      });

    $locationProvider.html5Mode(true);
    $translateProvider.useStaticFilesLoader({
      prefix: '/lang/',
      suffix: '.json'
    });
    $translateProvider.useCookieStorage();
    $translateProvider.preferredLanguage('en-US');
  }
]);

When running my test, it says: WARN [web-server]: 404: /lang/en-US.json

My test doesn't mention or include the translateProvider at all. I just have beforeEach(module('mean'));

So how can I stub out the translateProvider from my testing? I tried beforeEach(module('pascalprecht.translate', function() {}));, but that had no impact.

Thanks!

Answer 1

You will need a custom mocked-module, and then you'll have to load it instead of the original one(or after it, this way it will be overridden), in your karma.conf.

scripts/mocks/angular-translate.js:

!(function(angular){
   'use-strict';
    angular.module('pascalprecht.translate', []).
      filter('translate', function(){
             return function(input){return input};
      });
}(window.angular))

---

karma.conf:

files = [
    JASMINE,
    JASMINE_ADAPTER,
    'scripts/libs/angular.js',
    'scripts/libs/angular-mocks.js',
    'scripts/angular-translate.js', // Real module.
    'scripts/mocks/*.js', //Custom mocks.
    'scripts/specs/*.spec.js' // loads my spec file.
] 

Of course you'll have to mock the $translationProvider and it's methods as well, but I trust that I don't have to implement it for you.

This is the proper way to mock this module, you can always use a decorator in the config phase.

scripts/mocks/angular-translate-decorator.js

!(function(angular){
   'use-strict';
    angular.module('pascalprecht.translate.decorator', []).
       .config(function($translationProvider){
           $provide.decorator( '$translationProvider', [ "$delegate", function(  $delegate ){
                $delegate.useStaticFilesLoader = function(){return undefined};

           }
        });
}(window.angular))

This piece of file should also come after the original module at the karma.conf file, as the first one.