用茉莉花测试Angular 1.X:编译模板无法验证模板中的数据输出

我正在尝试单元测试一个HTML模板，该模板在段落，锚标签和{{header.title || translate}}中具有变量，但是无论我尝试过哪些帖子，它似乎都无法正常工作。我获得了检索到的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示例中读到了这样的plunker，这应该可以正常工作。我认为也许控制器没有绑定到范围，因此当$digest运行模板时，可能找不到控制器。

有用的信息：

在说rootscope.$digest()的情况下，我也尝试使用scope.$digest()，我也尝试使用$apply()。
我正在使用ngHtml2JsPreprocessor
我正在使用TemplateCache
我正在使用$compile

链接查看：

如何访问指令[茉莉]
$编译不编译业力/茉莉花中的模板
不要在茉莉花业力中工作$编译
使用TemplateUrl的单位测试AngularJS指令

模板返回，但模板中的角永远不会编译。总是看到{{homeCtrl.name}}而不是Alexandria。

更新1.1

我在想，也许是因为翻译{{header.title | translate}}无法正常工作，也许angular-translate(模块：pascalprecht.translate(实际上无法正常工作，然后导致控制器也会失败绑定。将继续调查。

注入angular-translate后| translate过滤器刚刚起作用，并且在$编译后可以产生预期的翻译值。以一个例子为例：

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

导致您的问题的一个可能原因是时间 - 假设您的翻译数组/JSON大，并且加载需要一段时间，但是茉莉花测试已经开始和完成，才能满足并准备就绪。然后，茉莉花将在测试过程中看到未翻译的串。

更新了2017-06-30

经过几个实验，我可以确认任何异步JSON加载器，无论是.useStaticFilesLoader还是$.getJSON()，都不会在茉莉花之前执行。请参阅http://plnkr.co/edit/nreud52iqovvwlpmntja?p=preview作为示例，静态加载程序可用于页面视图，但单位测试失败。

一种可能的方法是完全抛弃.useStaticFilesLoader。相反，我们可以使用grunt-replace在构建过程中注入翻译。示例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/'}
    ]
  }
}

相关内容

最新更新

热门标签：