grunt-karma 无法在 generator-cg-angular 脚手架项目 Gruntfile 中使用 grunt-angular-templates 找到 templateCache 模板

Question

我使用 (Yeoman) generator-cg-angular 构建我的 AngularJS 网络应用程序，并且我正在尝试 运行 单元测试 而不使用 html 2js 预处理器，但是我好像遗漏了什么。

我更改了文件夹树

应客户要求，我将 index.html、app.js 和 app.less 移动到名为 app 的文件夹中，因此现在文件夹结构如下所示：

|--- Gruntfile.js //the Gruntfile.js is in the root folder, just like this generator does out-of-the-box
|___dist
|___unit-test-results
|___node_modules
|___bower_components
|___app
     |____app.js
     |____app.less
     |____index.html
     |____directives
            |____test-directive
                   |____test-directive.js
                   |____test-directive.less
                   |____test-directive.html
                   |____test-directive-spec.js

我的业力任务

karma: {
      options: {
        frameworks: ['jasmine'],
        files: [  //this files data is also updated in the watch handler, if updated change there too
          '<%= dom_munger.data.appjs %>',
          'bower_components/angular-mocks/angular-mocks.js',
          '<%= ngtemplates.main.dest %>',
          'directive/**/*.html',
          createFolderGlobs('*-spec.js')
        ],
        logLevel:'ERROR',
        reporters:['mocha','html'],
        autoWatch: false, //watching is handled by grunt-contrib-watch
        singleRun: true,
        htmlReporter: {
          outputFile: 'unit-test-results/unit-tests'+ grunt.template.today('yyyymmdd') +'.html',

          // Optional
          pageTitle: 'Unit Tests',
          groupSuites: true,
          useCompactStyle: true
        }
      },
      all_tests: {
        browsers: ['Chrome','Firefox']
      },
      during_watch: {
        browsers: ['PhantomJS']
      },
    },

test-directive-spec.js

describe('testDirective', function() {

  beforeEach(module('myApp'));
  beforeEach(module('directive/test-directive/test-directive.html')); //manually written

  var scope,compile;

  beforeEach(inject(function($rootScope,$compile) {
    scope = $rootScope.$new();
    compile = $compile;
  }));

  it('should ...', function() {

    var element = compile('<test-directive></test-directive>')(scope);
    scope.$digest();
    expect(element.text()).toBe('hello world');

  });
});

grunt test 失败

当我运行grunt test这样配置的时候

grunt.registerTask('test',['dom_munger:read','karma:all_tests']);

html 报告文件说他测试失败，因为找不到模板

Error: [$injector:modulerr] Failed to instantiate module directive/test-directive/test-directive.html due to:
Error: [$injector:nomod] Module 'directive/test-directive/test-directive.html' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

所以我尝试像这样将 ngtemplates 任务添加到 g运行t 测试

grunt.registerTask('test',['dom_munger:read','ngtemplates','karma:all_tests']);

像这样配置ngtemplates

ngtemplates: {
      main: {
        options: {
            module: pkg.name,
            htmlmin:'<%= htmlmin.main.options %>',
            url: function(url){ return url.replace('app/','')}
        },
        src: [createFolderGlobs('*.html'),'!'+ indexHtmlPath +'index.html','!_SpecRunner.html'],
        dest: 'temp/templates.js'
      }
    }

并在临时文件夹

中生成以下内容templates.js

angular.module('myApp').run(['$templateCache', function($templateCache) {
  'use strict';

  $templateCache.put('directive/test-directive/test-directive.html',
    "<div>hello world</div>"
  );

}]);

但是html记者还是说找不到模板。 我做错了什么？ 这是我的 package.json

{
  "name": "myApp",
  "version": "0.0.0",
  "devDependencies": {
    "eslint": "^3.16.1",
    "eslint-config-angular": "^0.5.0",
    "eslint-plugin-angular": "^1.6.1",
    "grunt": "~0.4",
    "grunt-angular-templates": "~0.5",
    "grunt-browser-output": "0.1.0",
    "grunt-contrib-clean": "~0.5",
    "grunt-contrib-concat": "~0.3",
    "grunt-contrib-connect": "~0.6",
    "grunt-contrib-copy": "~0.5",
    "grunt-contrib-cssmin": "~0.7",
    "grunt-contrib-htmlmin": "~0.1",
    "grunt-contrib-jshint": "~0.9",
    "grunt-contrib-less": "~0.8",
    "grunt-contrib-uglify": "~0.2",
    "grunt-contrib-watch": "~0.6",
    "grunt-dom-munger": "~3.4",
    "grunt-file-exists": "^0.1.4",
    "grunt-karma": "~0.8.3",
    "grunt-ng-annotate": "^1.0.1",
    "grunt-replace": "^1.0.1",
    "grunt-timer": "^0.6.0",
    "karma": "~0.12.6",
    "karma-chrome-launcher": "~0.1.3",
    "karma-firefox-launcher": "~0.1.3",
    "karma-htmlfile-reporter": "^0.3.5",
    "karma-jasmine": "~0.1.5",
    "karma-mocha-reporter": "^2.2.2",
    "karma-ng-html2js-preprocessor": "^1.0.0",
    "karma-phantomjs-launcher": "~0.1.4",
    "load-grunt-tasks": "~0.2"
  }
}

Answer 1

经过大量的键盘换脸，我找到了这个解决方案：

• 从 karma.options.files 任务配置中删除 directive/**/*.html，因为 a) 它不强制执行项目 "folders-by-feature" 结构和b) 而不是从 '<%= ngtemplates.main.dest %>' 中获取模板，它已经足够可靠了，您只需要将 grunt test 任务更改为 grunt.registerTask('test',['dom_munger:read','ngtemplates','karma:all_tests']);

• 从test-directive-spec.js中删除beforeEach(module('directive/test-directive/test-directive.html'));，因为它看起来与前面描述的ngtemplates机制冲突，使模板不可用；