javascript - 使用 webpack 的 Angular 1.6.4 组件单元测试找不到 DirectiveProvider

Question

我收到这个错误:

Error: [$injector:unpr] Unknown provider: checkListDirectiveProvider <- checkListDirective
why would $componentController issue an unknown directive provider error?

查看angular mocks的源码，问题出在这里:

return function $componentController(componentName, locals, bindings, ident) {
  // get all directives associated to the component name
  var directives = $injector.get(componentName + 'Directive');

当我注册一个组件时，为什么$injector 会尝试寻找指令？

module("app").component("checkList", new CheckListComponent());

长话短说

^{(了解更多背景信息)}
我的测试(使用 webpack)结构如下:

var mocks = require("angular");
require("angular-mocks");
require("../app.js");
require("./CheckListComponent.js");

describe("component: check list component",
    function () {
        var q;
        var r;

        beforeEach(() => mocks.module("app"));
        beforeEach(inject(function (_$componentController_, $q, $rootScope) {
            $componentController = _$componentController_;
            q = $q;
            r = $rootScope;
        }));

        it("show question should calculate correct answers",
            function () {
                var bindings = {};
                var ctrl = $componentController("checkList", null, bindings);
                expect(ctrl.showQuestion).toBeDefined();
            });
    });

我想了解为什么这不起作用。深入调试器我可以看到 mocks.module("app")._invokeQueue 似乎包含已注册的组件，那么为什么 $componentController 无法创建它？

组件的完整源代码( typescript )是:

/**
 * the component wrapper.
 */
export class CheckListComponent implements ng.IComponentOptions {

    controllerAs: string = "cl";
    bindings: any;
    controller: any;
    templateUrl: string;

    /**
     * @constructor create a new instance of the component.
     */
    constructor() {
        this.bindings = { checkList: "<" };
        this.controller = CheckListController;
        this.templateUrl = "compliance/checklist/component";
    }
}

module("app").component("checkList", new CheckListComponent());

Answer 1

问题就在这里，

var mocks = require("angular");

这将导致 mocks.module("app") 成为 angular.module("app")，这在测试中什么都不做。测试中没有加载任何模块，app 单元不可用于注入(inject)，包括 checkList 组件。

应该是

var angular = require("angular");
require("angular-mocks");
...
beforeEach(() => angular.mock.module("app"));

错误是由于 Angular 组件是指令(解释见this answer)，而指令是提供者。 $componentController 所做的就是获取包含指令定义对象的提供程序实例并实例化其 controller 属性。

错误指的是:

Error: [$injector:unpr] Unknown provider: checkListDirectiveProvider <- checkListDirective