Angular 1.x Тестирование с Jasmine: компиляция шаблона не работает для проверки вывода данных в шаблон

Question

Angular 1.x Тестирование с Jasmine: компиляция шаблона не работает для проверки вывода данных в шаблон

Я пытаюсь провести модульное тестирование 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": {}
}

Согласно сообщениям, которые я прочитал, например, этот плункер из примера пост плункера, это должно работать правильно. Я думаю, что, возможно, контроллер не привязан к объему, так что когда $digest работает шаблон не может найти контроллер, может быть.

Полезная информация:

Где это говорит rootscope.$digest() Я тоже пробовал как scope.$digest() Я также пытался использовать $apply(),
я использую ngHtml2JsPreprocessor
я использую TemplateCache
я использую $compile

Просмотренные ссылки:

Шаблон возвращается, но угол в шаблоне никогда не компилируется. Всегда видя {{homeCtrl.name}} вместо Alexandria,

Обновление 1.1

Я думаю, возможно, так как перевод {{header.title | translate}} не работает, что может быть angular-translate (Модуль: pascalprecht.translate) на самом деле не работает должным образом, а затем вызывает сбой привязки контроллера. Продолжим расследование.

3

angularjs unit-testing jasmine karma-jasmine angular-templatecache

Источник

user4518455 28 июн '17 в 18:11

1 ответ

Другие вопросы по тегам angularjs unit-testing jasmine karma-jasmine angular-templatecache

user1157201 29 июн '17 в 02:38 2017-06-29 02:38 · Answer 1 · 2017-06-29 02:38

После введения angular-translate | translate Фильтр просто работает и выдает ожидаемое переведенное значение после $compile. Посмотрите на этот поршень в качестве примера:

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

Одной из возможных причин, которая приводит к вашей проблеме, является синхронизация - предположим, у вас есть большой массив translate / json, и загрузка занимает некоторое время, но тестирование Jasmine уже начинается и заканчивается, прежде чем они будут полностью загружены и готовы. Тогда Жасмин увидит непереведенную строку во время тестов.

Обновлено 2017-06-30

После нескольких экспериментов, я могу подтвердить, что любой асинхронный загрузчик JSON, будь то .useStaticFilesLoader или же $.getJSON(), не будет исполнен до Жасмин. См. Например, http://plnkr.co/edit/nreUd52iqOVvwLPMNtJA?p=preview, статический загрузчик отлично работает для просмотра страниц, но не проходит модульный тест.

Один из возможных способов - это угробить .useStaticFilesLoader полностью. Вместо этого мы можем использовать grunt-replace внедрить переводы в процессе сборки. Пример выполнения задачи:

// 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/'}
    ]
  }
}