在angularJS的业力茉莉花单元测试中更改语言环境 [英] Changing locale in karma-jasmine unit test for angularJS

问题描述

我正在尝试使用 angular-dynamic-local 更改angularJS(正在通过Karma运行)的茉莉花单元测试中的语言环境.

I am attempting to change locale in a jasmine unit test for angularJS (being run through Karma) using angular-dynamic-local.

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错误:

The locale was never changed. The console indicates a 404 error:

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

似乎在通过Karma运行时无法识别此URL路径，该URL路径是在浏览器中运行应用程序时识别的.

It appears that this URL path, which is recognized when running the application in the browser, is not recognized when running through Karma.

我想念什么?

推荐答案

最终解决.我们这里发生了几件事.

Finally solved. We have several things going on here.

1. 我没有在 karma.conf.js 中加载语言环境.我曾经尝试过在 karma.conf.js 中加载 fr-ca 区域设置，但是我删除了该行，因为它违反了默认(美国)测试.原来，我还需要加载 zh-CN 语言环境(然后在#strong> beforeEach 中重设语言环境，就像我们在#4中看到的那样).

1. I was not loading the locale in karma.conf.js. I had tried loading the fr-ca locale in karma.conf.js once before, but I had deleted the line because it was breaking the default (US) test. Turns out that I need to load the en-us locale as well (and then reset the locale in beforeEach as we will see in #4).

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

如 martinoss 所述，我需要更改语言环境的位置模式.在直接测试货币过滤器时，这很困难，因为没有模块可以更改 tmhDynamicLocale 的提供程序.在我的实际情况中，这不是问题，因为我正在测试包装货币过滤器的自定义过滤器.出于这篇文章的目的，我创建了一个脑死亡包装器过滤器:

As martinoss correctly stated, I needed to change the locale location pattern. In a direct test of the currency filter, this is difficult, since there is no module on which to change tmhDynamicLocale's provider. In my real-world situation, this is not an issue, since I am testing a custom filter that is wrapping the currency filter. For the purposes of this post, I created a brain-dead wrapper filter:

(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$");

1. These first two items addressed the 404 problem. But the French-Canadian locale specifies a space before the $-sign, so I changed the assertion to expect(currencyFilter(50.17)).toBe("50,17 $");
   But that didn't work either. The currency filter is actually inserting a non-breaking space. So the correct assertion is expect(currencyFilter(50.17)).toBe("50,17\u00A0$");

tmhDynamicLocale.set 是异步的.另外，我们需要在每次测试之前将区域设置重置为默认设置(美国).这是完整的规格(使用Jasmine 1.3):

tmhDynamicLocale.set is asynchronous. Also, we need to reset the locale to the default (US) before each test. So here is the complete spec (using 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$");
        });
    });
});

这篇关于在angularJS的业力茉莉花单元测试中更改语言环境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！