Injecting a mock provider into an angular unit test

Question

I'm trying to figure out how to mock an angular provider for a unit test. In the following snippet I have a 'translate' provider that is used to determine which language will be displayed in a view by default. I'd like to inject a different version of this provider into my tests to ensure my app displays the right thing based on a provider's settings. What I'm doing right now clearly doesn't seem to be working. Thanks in advance for your help.

By the way, if you're wondering why a provider was used instead of something else like a service or a simple value, this is a contrived example that distills a problem I'm having in a larger application. I need to inject something into an application's config method, which means I need to mock a provider.

var app = angular.module('app', []);
app.config(function($provide) {
  $provide.provider('translate', function() {
    return {
      $get: function() {
        return {
          language: 'en'
        };
      }
    };
  });
});
app.controller('ctl', function($scope, translate) {
  if (translate.language === 'en') {
    $scope.greeting = "Welcome to the application.";
  } else {
    $scope.greeting = "Velkommen til appen.";
  }
});

// ---SPECS-------------------------
describe('App', function() {
  beforeEach(angular.mock.module('app'));

  describe('by default', function() {
    beforeEach(angular.mock.inject(
      function(_$compile_, _$rootScope_) {
        const viewHtml = $('#view');
        $compile = _$compile_;
        $rootScope = _$rootScope_;
        $rootScope.isOn = false;
        elm = $(viewHtml);
        $compile(elm)($rootScope);
        $rootScope.$digest();
      }));
    it('shows English', function() {
      expect(elm.text()).toMatch(/Welcome/);
    });
  });

  describe('without English specified', function() {
    beforeEach(angular.mock.module('app', function ($provide) {
      $provide.provider('translate', function () {
        return {
          $get: function () {
            return { preferredLanguage: 'no' };
          }
        };
      });
    }));
    beforeEach(angular.mock.inject(
      function(_$compile_, _$rootScope_) {
        const viewHtml = $('#view');
        $compile = _$compile_;
        $rootScope = _$rootScope_;
        $rootScope.isOn = false;
        elm = $(viewHtml);
        $compile(elm)($rootScope);
        $rootScope.$digest();
      }));
    it('shows Norwegian', function() {
      expect(elm.text()).toMatch(/Velkommen/);
    });
  });

});

// --- Runner -------------------------
(function() {
  var jasmineEnv = jasmine.getEnv();
  jasmineEnv.updateInterval = 1000;
  var htmlReporter = new jasmine.HtmlReporter();
  jasmineEnv.addReporter(htmlReporter);
  jasmineEnv.specFilter = function(spec) {
    return htmlReporter.specFilter(spec);
  };
  var currentWindowOnload = window.onload;
  window.onload = function() {
    if (currentWindowOnload) {
      currentWindowOnload();
    }
    execJasmine();
  };

  function execJasmine() {
    jasmineEnv.execute();
  }
})();

<link href="http://jasmine.github.io/1.3/lib/jasmine.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.angularjs.org/1.4.9/angular.js"></script>
<script src="http://code.angularjs.org/1.4.9/angular-mocks.js"></script>
<script src="http://jasmine.github.io/1.3/lib/jasmine.js"></script>
<script src="http://jasmine.github.io/1.3/lib/jasmine-html.js"></script>
<div ng-app="app">
  <div id="view" ng-controller="ctl">{{greeting}}</div>
</div>

Answer 1

you can do it like this: -

  beforeEach(module('app', function ($provide) {
         $provide.provider('translate', function() {
          return {
            $get: function() {
              return {
                language: 'fr'
              };
            }
          };
        });
    }));

you can also put the above code in a util method, that will take the language code as a parameter, so you don't spread above code everywhere.