我收到这个错误:
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());
最佳答案
问题就在这里,
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
关于javascript - 使用 webpack 的 Angular 1.6.4 组件单元测试找不到 DirectiveProvider,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44173180/