在Karma / Jasmine測試中使用帶有角平移的平移過濾器

Question

我在自定義指令模板中使用angular-translate，例如：

 <!-- directive template -->
 <button>{{"ers.diagramComponent.resizeOriginalButton" | translate}</button>

我的json映射到此轉換值：

{
 "ers.diagramComponent.resizeOriginalButton": "Original"
}

我最初收到此錯誤：

Error: [$injector:unpr] Unknown provider: translateFilterProvider <- translateFilter

我通過添加以下內容糾正了該問題：

 <!-- This is at the top level, runs before all tests -->
 describe("Directive", function () {

    beforeEach(angular.mock.module("directive"));

    var mockFilter = function (value: any) {
         return value;
    };

    beforeEach(function () {
        angular.mock.module(function ($provide:any) {
            $provide.value("translateFilter", mockFilter);
        });
    });
 });

在這里找到以上內容： 如何在指令的單元測試中模擬角度平移過濾器

我現在正在嘗試使該轉換值與我的業力/茉莉花測試相匹配。 我失敗的測試看起來像這樣：

 var actualSizeHtml = diagramDirective.find("button").html();
 expect(actualSizeHtml).toEqual("Original");

我的考試不及格：

Expected 'ers.diagramComponent.resizeOriginalButton' to equal 'Original'.

因此，基本上我無法弄清楚如何翻譯“ ers.diagramComponent.resizeOriginalButton”，使其等於“ Original”，這正是測試所要尋找的。

這是我在組件中設置$ translateProvider的配置，resources文件夾包含我的鍵/值對的json：

angular.module("app",["pascalprecht.translate"]).config(["tmhDynamicLocaleProvider", function(tmhDynamicLocaleProvider) {
    $translateProvider.useStaticFilesLoader({
       prefix: "resources/locale-",
       suffix: ".json"
    });

    $translateProvider.preferredLanguage("en-us");
    $translateProvider.useSanitizeValueStrategy("escape");
}]);

但是該配置與我的測試無關。

Answer 1

看來您的測試對“ pascalprecht.translate”模塊一無所知，該模塊包含轉換過濾器。 您需要將“ pascalprecht.translate”模塊作為依賴項添加到“ directive”模塊，或執行以下操作：

describe("Directive", function () {

    beforeEach(angular.mock.module("directive", "pascalprecht.translate"));

    var mockFilter = function (value: any) {
         return value;
    };

    beforeEach(function () {
        angular.mock.module(function ($provide:any) {
            $provide.value("translateFilter", mockFilter);
        });
    });
 });

另外，你可以寫

module("directive", "pascalprecht.translate")

代替

angular.mock.module("directive", "pascalprecht.translate")