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

时间:2015-12-18 15:15:53

标签: angularjs unit-testing localization internationalization karma-runner

我正在尝试使用 angular-dynamic-local 更改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

在通过Karma运行时,无法识别在浏览器中运行应用程序时识别的此URL路径。

我错过了什么?

2 个答案:

答案 0 :(得分:2)

终于解决了。我们在这里发生了几件事。

  1. 我没有在 karma.conf.js 中加载语言环境。我之前曾尝试在 karma.conf.js 中加载 fr-ca 区域设置,但我删除了该线条,因为它违反了默认(美国)测试。事实证明我还需要加载 en-us 区域设置(然后重置 beforeEach 中的区域设置,我们将在#4中看到)。

    (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);
            }
        }
    })();
    
  2. 正如 martinoss 所述,我需要更改区域设置位置模式。在直接测试货币过滤器时,这很困难,因为没有可以更改 tmhDynamicLocale 提供程序的模块。在我的实际情况中,这不是问题,因为我正在测试包装货币过滤器的自定义过滤器。出于本文的目的,我创建了一个脑死亡的包装过滤器:

    expect(currencyFilter(50.17)).toBe("50,17 $");
    1. 前两项解决了404问题。但是法语 - 加拿大语言环境在$ -sign之前指定了一个空格,所以我将断言更改为expect(currencyFilter(50.17)).toBe("50,17\u00A0$");
      但这也不起作用。货币过滤器实际上是插入非中断空间。所以正确的断言是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$"); }); }); });

    2. tmhDynamicLocale.set 是异步的。此外,我们需要在每次测试之前将语言环境重置为默认值(US)。所以这是完整的规范(使用Jasmine 1.3):

      kombu/serialization.py

答案 1 :(得分:0)

这是因为 angular-dynamic-locale 在调用set-method时正在加载语言环境脚本(在您的情况下为fr-ca)。 您添加到 karma.conf.js 的文件来自 / base / angular / ...,这就是您获得404的原因。

您可以做的是更改thmDynamicLocaleProvider的localeProviderPattern以包含基本路径(在模块配置中):

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