在 angularJS 的 karma-jasmine 单元测试中更改语言环境

Question

我正在尝试使用 angular-dynamic-local 在 Jasmine 单元测试中更改 AngularJS（通过 Karma 运行）的语言环境。

describe('currency filter', function () {
    var currencyFilter;
    var tmhDynamicLocale;

    beforeEach(function () {
        module('tmh.dynamicLocale');

        inject(function ($injector) {
            var $filter = $injector.get('$filter');
            currencyFilter = $filter('currency');
            tmhDynamicLocale = $injector.get('tmhDynamicLocale');
        });
    });

    it('formats US currency in standard form', function () {
        expect(currencyFilter(50.17)).toBe("$50.17");
    });

    it('formats French Canadian value with $ at end and comma for decimal', function () {
        tmhDynamicLocale.set('fr-ca');
        expect(currencyFilter(50.17)).toBe("50,17$");
    });
});

第二次测试失败：

Expected '$50.17' to be '50,17$'.

语言环境从未改变。控制台提示404错误：

WARN [web-server]: 404: /angular/i18n/angular-locale_fr-ca.js

这个在浏览器中运行应用程序时识别的URL路径，通过Karma运行时似乎无法识别。

我错过了什么？

Answer 1

终于解决了。我们这里有几件事情要做。

1. 我没有在 karma.conf.js 中加载语言环境。我之前曾尝试在 karma.conf.js 中加载 fr-ca 语言环境，但我删除了该行，因为它违反了默认（美国）测试。结果我还需要加载 en-us 语言环境（然后在 beforeEach 中重置语言环境，我们将在 #4 中看到）。

   files: [
       ...
       'bower_components/angular-i18n/angular-locale_en-us.js',
       'bower_components/angular-i18n/angular-locale_fr-ca.js',
       ...
   ],
   

2. 正如 ma​​rtinoss 正确指出的那样，我需要更改语言环境位置模式。在货币过滤器的直接测试中，这很困难，因为没有可以更改 tmhDynamicLocale 提供程序的模块。在我的实际情况中，这不是问题，因为我正在测试一个包含货币过滤器的自定义过滤器。出于本文的目的，我创建了一个脑死亡包装过滤器：

   (function() {
       angular
           .module('currencyFilterWrapper', [
               'tmh.dynamicLocale'
           ])
           .config(['tmhDynamicLocaleProvider', function(tmhDynamicLocaleProvider) {
               tmhDynamicLocaleProvider.localeLocationPattern('base/bower_components/angular-i18n/angular-locale_{{locale}}.js');
   }])
           .filter('doCurrency', doCurrency)
       ;
   
       function doCurrency($filter) {
           return function(input) {
               return $filter('currency')(input);
           }
       }
   })();
   

   1. 前两项解决了 404 问题。但是法语-加拿大语言环境在 $ 符号之前指定了一个空格，所以我将断言更改为 expect(currencyFilter(50.17)).toBe("50,17 $");
      但这也没有用。货币过滤器实际上是插入一个不间断空格。所以正确的断言是expect(currencyFilter(50.17)).toBe("50,17\u00A0$");

   2. tmhDynamicLocale.set 是异步的。此外，我们需要在每次测试之前将语言环境重置为默认值（美国）。所以这里是完整的规范（使用 Jasmine 1.3）：

      describe('currency filter', function () {
          var currencyFilter;
          var tmhDynamicLocale;
      
          function setLocale(locale) {
              var localeSet;
      
              runs(function () {
                  tmhDynamicLocale.set(locale)
                      .then(function () {
                          localeSet = true;
                      });
              });
      
              waitsFor(function () {
                  return localeSet;
              }, 'setting locale', 100);
          }
      
          beforeEach(function () {
              module('currencyFilterWrapper');
              module('tmh.dynamicLocale');
      
              inject(function ($injector) {
                  var $filter = $injector.get('$filter');
                  currencyFilter = $filter('doCurrency');
                  tmhDynamicLocale = $injector.get('tmhDynamicLocale');
              });
      
              setLocale('en-us');
          });
      
          it('formats US currency in standard form', function () {
              expect(currencyFilter(50.17)).toBe("$50.17");
          });
      
          it('formats French Canadian value with $ at end and comma for decimal', function () {
              setLocale('fr-ca');
      
              runs(function () {
                  expect(currencyFilter(50.17)).toBe("50,17\u00A0$");
              });
          });
      });
      

Answer 2

这是因为 angular-dynamic-locale 在调用 set-method 时正在加载语言环境脚本（在您的情况下为 fr-ca）。 您添加到 karma.conf.js 的文件是从 /base/angular/... 提供的，这就是您得到 404 的原因。

您可以做的是更改 thmDynamicLocaleProvider 的 localeProviderPattern 以包含基本路径（在模块配置中）：

tmhDynamicLocaleProvider.localeLocationPattern('base/angular/i18n/angular-locale_{{locale}}.js');