jeudi 28 janvier 2016

Injecting a mock provider into an angular unit test

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.

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://ift.tt/1PDkSU9" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ift.tt/208tayk"></script>
<script src="http://ift.tt/1PDkSUb"></script>
<script src="http://ift.tt/208taym"></script>
<script src="http://ift.tt/1PDkV26"></script>
<div ng-app="app">
  <div id="view" ng-controller="ctl">{{greeting}}</div>
</div>

Aucun commentaire:

Enregistrer un commentaire