角度1.xジャスミンでテスト：テンプレートでのデータ出力を検証するためにテンプレートをコンパイルする

Question

こんにちは私は段落、アンカータグ、および{{header.title || translate}}の変数を持つhtmlテンプレートをユニットテストしようとしていますが、それは動作するように見えませんでした。私は取得されたHTMLテンプレートを取得し、それがコンパイルされても同じです。テンプレートでは、私はまだ{{user}}を参照してください。彼らの誰も実際にコンパイルされていないようです。

現在のテンプレート出力：

<h1>{{header.title | translate}}</h1> 
<h2>{{homeCtrl.name}}</h2> 

予想される出力：

<h1>Cake Blogger</h1> 
<h2>Alexandria</h2> 

テストスイート：

(function() { 
    'use strict'; 

    describe('home.tpl.html', function() { 
    var scope, controller, createController, template, element, rootScope; 

    beforeEach(module('Templates')); 
    beforeEach(module('mainApp')); 

    /** 
     @name: home.tpl.html 
     @description: Inject and set test related objects 
     @param {Service} rootScope - Used to get the language 
     @param {Compiler} $templateCache - Holding the compiled template 
     @param {Injector} $compile - Compiles an HTML string or DOM 
    */ 
    beforeEach(inject(
     function(_$controller_, _$rootScope_, $templateCache, $compile) { 
     scope = _$rootScope_.$new(); 
     createController = function() { 
      return _$controller_('homeCtrl', { 
      '$scope': scope 
     }); 
     }; 

     controller = createController(); 

     rootScope = _$rootScope_; 
     template = $templateCache.get('home.tpl.html'); 
     element = $compile(template)(rootScope); 

     // var ctrl = element.controller('homeCtrl'); 
     rootScope.$digest(); 
     console.log("home page", element); 
    })); 

    /** 
    @name: Describe Block - home.tpl.html 
    @description: Test cases related to home.tpl.html 
    */ 
    describe('home.tpl.html tests', function() { 
    fit('should have "Alexandria"', function() { 
     expect(element.html()).toContain("Alexandria"); 
    }); 
    }); 
}); 
})(); 

カルマファイル：

files: ['list of files'], 

port: 8080, 

browsers: [ 
    'PhantomJS' 
], 

plugins: [ 
    'karma-phantomjs-launcher', 
    'karma-jasmine', 
    'karma-ng-html2js-preprocessor', 
], 

preprocessors: { 
    'app/**/*.tpl.html': 'html2js' 
}, 

ngHtml2JsPreprocessor: { 
    'moduleName': 'Templates', 
    'stripPrefix': 'app/' 
} 

package.json

{ 
    "name": "", 
    "private": true, 
    "devDependencies": { 
    "autoprefixer-core": "^5.2.1", 
    "grunt": "^0.4.5", 
    "grunt-angular-templates": "^0.5.7", 
    "grunt-concurrent": "^1.0.0", 
    "grunt-contrib-clean": "^0.6.0", 
    "grunt-contrib-compass": "^1.0.0", 
    "grunt-contrib-concat": "^0.5.0", 
    "grunt-contrib-connect": "^0.9.0", 
    "grunt-contrib-copy": "^0.7.0", 
    "grunt-contrib-cssmin": "^0.12.0", 
    "grunt-contrib-htmlmin": "^0.4.0", 
    "grunt-contrib-imagemin": "^1.0.0", 
    "grunt-contrib-jshint": "^0.11.0", 
    "grunt-contrib-uglify": "^0.7.0", 
    "grunt-contrib-watch": "^0.6.1", 
    "grunt-filerev": "^2.1.2", 
    "grunt-google-cdn": "^0.4.3", 
    "grunt-jscs": "^1.8.0", 
    "grunt-karma": "*", 
    "grunt-modernizr": "^1.0.2", 
    "grunt-newer": "^1.1.0", 
    "grunt-ng-annotate": "^0.9.2", 
    "grunt-ng-constant": "^2.0.1", 
    "grunt-postcss": "^0.5.5", 
    "grunt-svgmin": "^2.0.0", 
    "grunt-usemin": "^3.0.0", 
    "grunt-wiredep": "^2.0.0", 
    "jasmine-core": "^2.4.1", 
    "jit-grunt": "^0.9.1", 
    "jshint-stylish": "^1.0.0", 
    "karma": "^0.13.22", 
    "karma-coverage": "^0.5.5", 
    "karma-fixture": "^0.2.6", 
    "karma-jasmine": "*", 
    "karma-json-fixtures-preprocessor": "0.0.6", 
    "karma-json-preprocessor": "^0.3.3", 
    "karma-junit-reporter": "^1.2.0", 
    "karma-ng-html2js-preprocessor": "~0.1.0", 
    "karma-phantomjs-launcher": "*", 
    "phantomjs": "^2.1.7", 
    "time-grunt": "^1.0.0" 
    }, 
    "engines": { 
    "node": ">=0.10.0" 
    }, 
    "scripts": { 
    "test": "grunt test" 
    }, 
    "dependencies": {} 
} 

私は、このようなポストplunker exampleからこのplunkerとして読んだ記事によると、これは正しく動作する必要があります。私はおそらくコントローラがスコープにバインドされていないと考えているので、$digestを実行すると、テンプレートがコントローラを見つけられない可能性があります。

役立つ情報：

• それは私もscope.$digest()としてそれを試してみましたrootscope.$digest()を言う、私はまた、$apply()を使用してみました。私はTemplateCache
• を使用していますngHtml2JsPreprocessor
• を使用しています
• 私が使用しています$compile

リンクは閲覧：

• how to access controller in directive [jasmine]
• $compile not compiling templates in Karma/Jasmine
• Don't work $compile in Jasmine Karma Angular
• Unit Testing AngularJS directive with templateUrl

これが機能しない理由のすべてのヘルプは非常に感謝しています。テンプレートは返されますが、テンプレート内の角度は決してコンパイルされません。 Alexandriaではなく、常に{{homeCtrl.name}}と表示されます。

アップデート1.1

私が翻訳し{{ヘッダーので、おそらく考えています。タイトル| translate}} is not working that maybe angle-translate (module: pascalprecht.translate`）が実際に正しく動作していないため、コントローラがバインドに失敗する原因となります。調査を続ける。

Answer 1

angular-translateを注入した後、| translateフィルタが機能し、$ compileの後に期待される変換された値が得られます。一例として、このplunkerを参照してください：あなたの問題につながる

http://plnkr.co/edit/j8rbnMI067YntllwTcGi?p=preview

一つの可能​​性のある理由はタイミングである - あなたは大きな翻訳配列/ JSONを持っており、それはロードに時間がかかりますが、ジャスミンテストはすでに開始され、終了したとそれらが完全にロードされ、準備が整う前に。その後、ジャスミンはテスト中に翻訳されていない文字列を表示します。いくつかの実験の後2017年6月30日

を更新しました

---

、私はそれが.useStaticFilesLoaderか$.getJSON()のかどうか、任意の非同期JSONローダーことを確認することができ、ジャスミンの前に実行されることはありません。例としてhttp://plnkr.co/edit/nreUd52iqOVvwLPMNtJA?p=previewを参照してください。静的ローダーはページビューで正常に動作しますが、ユニットテストは失敗します。

可能な方法の1つは、.useStaticFilesLoaderを完全に削除することです。代わりに、​​を使用して、ビルドプロセス中に翻訳を挿入することができます。例のgruntタスク：

// replace string with json 
replace: { 
    dist: { 
    options: { 
     patterns: [ 
     { 
      match: /\"JSONEN\"/, 
      replacement: '<%= grunt.file.read("app/resources/en.json") %>' 
     } 
     ] 
    }, 
    files: [ 
     {expand: true, flatten: true, src: ['app/scripts/app.js'], dest: 'public/'} 
    ] 
    } 
}