Comment faire le test d'unité avec angular-translate

c'est un problème connu, s'il vous plaît suivez la documentation ici: unité d'essai angulaire

La solution

malheureusement, ce problème est causé par la conception de Angular-translate. Pour contourner ces erreurs, tout ce que nous pouvons faire est de écraser notre configuration de module dans notre suite de test, qu'il ne utilisez un chargeur asynchrone. Quand il n'y a pas asynchrone chargeur, il n'y a pas de XHR et donc pas d'erreur.

alors comment réécrire notre configuration de module à l'exécution pour notre suite de test? Lors de l'instanciation d'un module angulaire, nous pouvons toujours appliquer une fonction en ligne qui est exécutée comme fonction de configuration. Ce la fonction de configuration peut être utilisée pour écraser les modules configuration puisque nous avons accès à tous les fournisseurs.

avec le fournisseur $ provide, nous pouvons construire une usine de chargeurs sur mesure, qui devrait alors être utilisé à la place du chargeur de fichiers statiques.

beforeEach(module('myApp', function ($provide, $translateProvider) {

  $provide.factory('customLoader', function () {
    // loader logic goes here
  });

  $translateProvider.useLoader('customLoader');

}));

s'il vous Plaît lisez la suite dans le lien ci-dessus prévues.

nous avons pris l'approche d'ignorer le chargeur de traduction dans les tests unitaires, plutôt que d'être forcé de modifier chacun des fichiers spec.

une façon de le faire pourrait être de séparer la configuration du chargeur dans un fichier séparé, puis de l'exclure dans karma.

Ainsi, par exemple, vous pouvez créer un fichier app-i18n-loader.js (toutes les autres configurations de modules a lieu dans un autre fichier):

    angular
    .module('myApp')
    .config(loaderConfig);

loaderConfig.$inject = ['$translateProvider', '$translatePartialLoaderProvider'];

function loaderConfig($translateProvider, $translatePartialLoaderProvider) {

    $translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: 'assets/i18n/{part}/{lang}.json'
    });

    $translatePartialLoaderProvider.addPart('myApp');
}

et dans votre Karma.conf.js exclure le fichier:

        files: [
        'bower_components/angular/angular.js',
        'bower_components/angular-mocks/angular-mocks.js',
        //...
        'bower_components/angular-translate/angular-translate.js',
        'bower_components/angular-translate-loader-partial/angular-translate-loader-partial.js',
        'app/**/*.mdl.js',
        'app/**/*.js'
    ],

    exclude: [
        'app/app-i18n-loader.js'
    ],

(Note: réponse modifiée à une solution qui ne nécessite pas de grunt/gulfp).

je voulais une solution,

1. ce qui n'était pas trop hacky
2. qui ne m'obligeait pas à changer le code de ma demande,
3. qui n'interférerait pas avec la capacité de charger des modules supplémentaires
4. et le plus important qui ne me demanderait pas de changer chaque test unique.

c'est ce que j'ai fini par dire:

// you need to load the 3rd party module first
beforeEach(module('pascalprecht.translate'));
// overwrite useStaticFilesLoader to get rid of request to translation file
beforeEach(module(function ($translateProvider) {
    $translateProvider.useStaticFilesLoader = function () {
    };
}));

en supposant que vous n'avez pas besoin des traductions pour vos tests unitaires, cela fonctionne très bien. Mettez juste la beforeEach au niveau global, de préférence dans son propre fichier à l'intérieur du dossier test. Il sera exécuté avant chaque autre test alors.

essayer de mettre à la méthode d'essai:

it('should ...', function() {
    httpMock.when('GET', 'scripts/i18n/locale-en.json').respond({});
    httpMock.expectGET('scripts/i18n/locale-en.json');
    scope.resetForm(); // Action which fires a http request
    httpMock.flush(); // Flush must be called after the http request
}

voir les exemples de Angular docs

consultez https://github.com/PascalPrecht/angular-translate/blob/master/test/unit/service/loader-static-files.spec.js comme référence.

en général, je recommande d'utiliser un chargeur de traduction standard pour les tests unitaires (sans les tracas des chargements http) ce qui signifie que vous pouvez fournir les étiquettes avec $translateProvider.translations() . Pourquoi? Parce que vous n'avez pas à tester la fonctionnalité de chargement à distance qui fait partie d'angular-translate projet.

j'ai rencontré ce problème avec les essais du rapporteur. Ma solution était de simuler des traductions comme celle-ci:

angular.module('app')
        .config(function ($translateProvider) {
            $translateProvider.translations('en', {});
            $translateProvider.preferredLanguage('en');
        })

maintenant aucun fichier de langue ne sont téléchargés, aucune chaîne de caractères ne sont traduits et je viens de tester contre les clés de chaîne de caractères dans les spécifications:

expect(element(by.css('#title')).getText()).toEqual('TITLE_TEXT');

aucune des solutions n'a fonctionné pour moi mais je suis venu avec ces solutions:

1) Si vous avez besoin d'utiliser scope.$apply() , ou devrait traiter avec les états dans votre test( après le $apply() la deuxième approche ne fonctionnera pas), outrepasser les traductions de votre application avec la méthode $translateProvider.translations() , en utilisant un plugin à chargez des fichiers JSON

beforeEach(module(function ($translateProvider) {
    $translateProvider.translations('en', readJSON('scripts/i18n/locale-en.json'));
}));

2) Si votre contrôleur testé dépend du service $translate vous pouvez utiliser un plugin pour chargez les fichiers JSON et combinez-les avec $httpBackend pour charger votre fichier local quand angular-translate le demande.

beforeEach(inject(function (_$httpBackend_) {
    $httpBackend = _$httpBackend_;

    $httpBackend.whenGET('scripts/i18n/locale-en.json').respond(readJSON('scripts/i18n/locale-en.json'));
    $httpBackend.flush();
})));

notez que ceci doit être en dessous de votre beforeEach(module('myApp')); ou vous obtiendrez une erreur $injector .

j'ai fait un service simulé simple pour $ traduire

$translate=function (translation) {
    return {
      then: function (callback) {
        var translated={};
        translation.map(function (transl) {
          translated[transl]=transl;
        });
        return callback(translated);
      }
    }
  };

exemple d'utilisation ici: https://gist.github.com/dam1/5858bdcabb89effca457

j'utilise ce modèle.

• ApplicationModule ensemble régulier angular-translate config.
• code d'essai charge "testModule" au lieu de "applicationModule"

// application module .js 
(function() {
  'use strict'; 
  
  angular
   .module('applicationModule', [
    'ngAnimate',
    'ngResource',
    'ui.router',
    'pascalprecht.translate'
  ])
  .config(['$stateProvider', '$urlRouterProvider', '$translateProvider', '$translatePartialLoaderProvider', config]);

  function config($stateProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
    // set routing ... 
        
    $translateProvider.useStaticFilesLoader({
      prefix: 'i18n/locale-',
      suffix: '.json'
    });

    $translateProvider.useMessageFormatInterpolation();
    $translateProvider.fallbackLanguage(['en']);
    $translateProvider
    .registerAvailableLanguageKeys(['en', 'ko'], {
      'en_US': 'en',
      'ko_KR': 'ko'
    })
    .determinePreferredLanguage(navigator.browserLanguage);

            
    $translateProvider.addInterpolation('$translateMessageFormatInterpolation');    
    $translateProvider.useSanitizeValueStrategy('escaped');
  }

})();

// test.module.js
(function() {
  'use strict';

  angular
    .module('testModule', ['applicationModule'])
    .config(['$translateProvider', '$translatePartialLoaderProvider', config])
    .run(['$httpBackend', run]);

  function config($translateProvider, $translatePartialLoaderProvider) {
    $translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: 'i18n/locale-en.json'
    });
    $translatePartialLoaderProvider.addPart('applicationModule');
  }

  function run($httpBackend) {
    $httpBackend.when('GET', 'i18n/locale-en.json').respond(200);
  }

})();


// someDirective.spec.js
describe("a3Dashboard", function() {
    beforeEach(module("testModule"))

    var element, $scope;
    beforeEach(inject(function($compile, $rootScope) {
        $scope = $rootScope;
        element = angular.element("<div>{{2 + 2}}</div>");
        $compile(element)($rootScope)
    }))

    it('should equal 4', function() {
      $scope.$digest();
      expect(element.html()).toBe("4");
    })

})

en retard à la table avec ceci, mais j'ai contourné ceci en spécifiant que Karma sert simplement les fichiers selon cette entrée dans karma.conf.js :

files: [
    ...
    {pattern: 'scripts/i18n/*.json', included: false, served: true},
    ...
]

la réponse pour 2016 est de pré-traiter votre json dans vos tests et de tester correctement le travail de traduction sur vos directives.

j'utilise Karma-ng-json2js-préprocesseur. Suivez toutes les étapes pour configurer votre karma.conf ensuite dans votre fichier de test, préprogrammez le fichier concerné en tant que module, puis définissez cette information dans $translateProvider.

beforeEach(module('myApp', '/l10n/english-translation.json'));

// Mock translations for this template
beforeEach(module(function($translateProvider, englishTranslation) {
    $translateProvider.translations('en_us', englishTranslation);
    $translateProvider.useSanitizeValueStrategy(null);
    $translateProvider.preferredLanguage('en_us');
}));

Note selon le plugin, il utilise votre nom de fichier pour générer un nom de module camelcased. Vous peut jouer avec la fonction à l'intérieur du module /lib, mais essentiellement il supprime tous les tirets, mais garde les underscores dans une camelCase. Donc en_us devient En_us.

vous aurez également besoin de dire à votre test qu'il attend ce fichier comme une GEt.

    $httpBackend.expect('GET', '/l10n/english-translation.json').respond(200);