如何在 Visual Studio 2013 中使用 Karma 和 karma-ng-html2js-preprocessor 设置设置 angularjs 测试答案

【问题标题】：How to set set-up angularjs testing with Karma and karma-ng-html2js-preprocessor in visual studio 2013如何在 Visual Studio 2013 中使用 Karma 和 karma-ng-html2js-preprocessor 设置设置 angularjs 测试
【发布时间】：2015-03-24 03:00:53
【问题描述】：

我真的很难在 Visual Studio 中设置 angularjs 测试。由于我刚刚为此奋斗了几个小时，所以我想我会分享我的发现。

我的目标是让来自 Angular 网站的指令和控制器测试通过 (https://docs.angularjs.org/guide/unit-testing)。唯一的例外是指令使用 templateUrl 而不是 template。

指令：

app.directive('aGreatEye', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'ng-views/temp.html'
    };
});

模板：

<h1>lidless, wreathed in flame, {{1 + 1}} times</h1>

我已经按照本教程安装了 node 和 karma 并设置了我的项目 http://codeforcoffee.org/setting-up-angular-js-jasmine-and-karma-in-visual-studio/

我面临的问题是让预处理器工作。我不确定我实际面临的问题，但我认为归结为以下问题 * 预处理器模块未加载 * 模板没有被正确引用

【问题讨论】：

标签： angularjs visual-studio-2013 jasmine karma-runner

【解决方案1】：

我使用 npm 安装了 karma、karma-jasmine、karma-chrome-launcher 和 karma-ng-html2js-preprocessor。 npm 在解决方案文件夹中运行。

npm init
npm install karma --save-dev
npm install karma-jasmine --save-dev
npm install karma-chrome-launcher --save-dev
npm install karma-ng-html2js-preprocessor --save-dev

我还在 karma.conf.js 中添加了这个配置，其中 WebApplication1 是我的应用程序项目的名称

files: [
      'WebApplication1/Scripts/Angular/angular.js',
      'WebApplication1/Scripts/Angular/angular-ui-router.js',
      'WebApplication1/Scripts/Angular/angular-mocks.js',

      'WebApplication1/ng-scripts/*.js',

      'WebApplication1.Tests/ng-tests/*.js',

      'WebApplication1/ng-views/*.html',
    ],
ngHtml2JsPreprocessor: { stripPrefix: 'WebApplication1/', },
preprocessors: {'WebApplication1/ng-views/*.html': ['ng-html2js']},

需要去掉模板的前缀让我花了一段时间才弄明白。

我希望这对某人有帮助:)

【讨论】：