Chutzpah 无法通过简单的 AngularJS Jasmine 测试答案

【问题标题】：Cannot get simple AngularJS Jasmine test to pass with ChutzpahChutzpah 无法通过简单的 AngularJS Jasmine 测试
【发布时间】：2016-08-12 12:54:32
【问题描述】：

我有一个非常简单的jasmine 单元测试，目标是测试AngularJS 控制器上的简单操作，如下所示：

/// <reference path="../src/jasmine.js"/>
/// <reference path="../../Scripts/angular.js"/>
/// <reference path="../../Scripts/angular-mocks.js"/>
/// <reference path="../../Scripts/angular-ui-router.js"/>
/// <reference path="../../Scripts/angular-route.js"/>
/// <reference path="../../Scripts/angular-resource.js"/>
/// <reference path="../../Scripts/angular-ui/ui-bootstrap.js"/>
/// <reference path="../../app/app.js"/>
/// <reference path="../../app/controllers/myController.js"/>

describe("my Controller", function () {

   var scope, ctrl, vm;

   beforeEach(module("app"));

   beforeEach(inject(function ($controller, $rootScope) {
      scope = $rootScope.$new();
      ctrl = $controller(MyController, { $scope: scope });
      vm = ctrl;
   }));

   it("sets the title", function() {          
      expect(vm.title).toBe("This is the title");
   });


});

使用以下任一方法开始上述测试通过：

打开包含相同引用的SpecRunner.html，并在jasmine 默认测试运行程序中显示通过单元测试
如果通过 ReSharper 测试运行程序运行，则无需修改即可通过测试（此工具并不重要，只是显示使用另一个测试运行程序通过了测试；测试不是罪魁祸首）

但是，无论我何时使用 Chutzpah 执行以下任何操作，测试都会失败：

使用chutzpah.console.exe从命令行运行
使用VS.NET中打开的右键菜单运行JS测试

每次出现以下错误：

错误：[$injector:modulerr] 无法实例化模块应用程序由于：[$injector:nomod] 模块 “应用程序”不可用！你要么拼错了模块名称或忘记加载它。如果注册一个模块，请确保您将依赖项指定为第二个参数。

所以如果AngularJS 引用不包括在内，这是一个非常典型的错误。但是，正如您在上面看到的，它们肯定包含在内，其他测试运行者看到它们并且测试通过了。无论我是从命令行运行单元测试还是在 VS.NET 中查看输出，错误都是相同的。

我什至从命令行打开了/trace 参数并查看了chutzpah.log 文件。果然是找到了 Angular 参考文件，所以我不确定为什么测试失败了。

我已经看到了大量关于此的帖子，解决方案始终是缺少参考。这里不是这种情况，我被困住了。使用 Chutzpah 使这个测试通过我缺少什么？

【问题讨论】：

你也检查了路径吗？
绝对是的。如前所述，其他测试运行者通过这些路径引用通过了此测试。同样在查看 chutzpah 日志时，我可以看到它在正确的路径中找到引用并将它们添加到本地测试工具中。
您能否将您正在尝试的内容与 Chutzpah 源代码中包含的几个 AngularJS 示例进行比较 (github.com/mmanela/chutzpah/tree/master/Samples/Angular)
@MatthewManela - 我已经把你的样品倒过来了，归结为我无法让angular.mock.module 工作。我将您的示例提取到我的项目中并且它们运行了，但您没有致电 angular.mock.module。我看到另一个 Git 问题：github.com/mmanela/chutzpah/issues/444。有趣的是，“运行 JS 测试”选项显示：Module 'app' is not available! 作为错误。如果我使用 same 测试运行“在浏览器中打开”，TypeError: Class constructor StatesProvider cannot be invoked without 'new' 同样是的，我确实添加了对 ui-router.js 的引用
我建议您获取在浏览器中打开的 HTML 文件，复制并修改它以便您的测试运行。一旦你这样做了，我们就可以对 Chutzpah 需要生成的内容进行逆向工程

标签： angularjs visual-studio unit-testing jasmine chutzpah

【解决方案1】：

我建议对 Angular 项目使用 chutzpah.json settings file。我把我的放在我项目的根目录下，在 web.config 旁边。您可以通过这种方式在一个地方指定依赖项，这在 Angular 项目快速增长时非常有用。我不能确定，但我认为您的应该如下所示：

{
  "Framework": "jasmine",
  "FrameworkVersion": "1",
  "References": [
    { "Path": "./Scripts/angular/angular.js" },
    {        
      "Path": "./Scripts/angular",
      "Includes": [ "*.js" ]
    },
    { "Path": "./Scripts/angular-ui/ui-bootstrap.js" },   
    { "Path": "./app/app.js" },
    {        
      "Path": "./app",
      "Includes": [ "*.js" ]
    }                 
  ],
  "Tests": [
    { "Includes": [ "*.spec.js" ] }
  ]
}

这将在 jasmine 版本 1 上运行。我不知道你如何它将包括与“./Scripts/angular*.js”匹配的所有内容以及与“./app/*.js”匹配的所有内容（包括 sub -目录）。当您添加新的角度参考和应用模块时，您不需要修改此配置（一旦您开始工作）。

【讨论】：

仅供参考，我已经尝试过这个（添加 .json 设置文件），但无法正常工作。那时我决定简化事情，只使用 Chutzpah 来获得一个针对 AngularJS 的 single 目标单元测试。如果我可以让我的简单示例正常工作，我将重新使用设置文件。
我从来没有以简单的方式成功，但我的代码有很多依赖项，它从屏幕上消失了。希望你能弄清楚并告诉我们。我提供的设置文件是否也失败了？
第一次使用v2。第二，该设置文件是为您的项目特定的文件路径定制的，因此它不会像我的那样工作。但是我的设置文件确实包含Framework、References 和Tests 部分。

【解决方案2】：

我相信通过彻底的测试我已经确定了原因。问题很可能是我在我的测试中使用的Angular.js 文件中使用了ES6 类。

问题是Chutzpah 使用的PhantomJS 不支持ES6 和class 关键字，因此它会失败（请参阅this 进行验证）。我能够在非Angular 样本中重现。我使用了老式的ES5 样式IIFE，现在简单的测试通过了。这就是它在 Chrome 和 ReSharper 中工作的原因，它们使用 Chrome 作为默认测试浏览器，Chrome 支持 ES6 class 关键字。如果我让ReSharper 使用PhantomJS 而不是Chrome，那么我的简单测试也会失败。

根本问题似乎是PhantomJS 及其缺乏对ES6 语法的支持。

这是我在为此研究了几个星期后写的一篇关于我的发现的博客文章。它更详细地解释了编写非 ES5 投诉代码并将其与 Chutzpah 和 PhantomJS 一起使用的问题：

Chutzpah and non-ES5 JavaScript for Unit Testing is Problematic

【讨论】：