我使用Angular 1.5.5和Jasmine作为测试框架。目前我必须做这样的事情,以便测试通过:
function createController(bindings) {
return $componentController('myController', null, bindings);
}
beforeEach(inject(function (_$componentController_) {
$componentController = _$componentController_;
}));
describe('on pages updated', function () {
beforeEach(function () {
controller = createController({prop1: 0, prop2: 0});
controller.$onInit(); // you see I have to explitcitly call this $onInit function
});
it('should update isSelected and currentPage', function () {
expect(controller.prop1).toBe(0);
expect(controller.prop2).toBe(0);
controller.prop1= 1;
controller.prop2= 2;
controller.$onChanges(controller); // and $onChanges here as well
expect(controller.prop1).toBe(1);
expect(controller.prop2).toBe(2);
});
});
答案 0 :(得分:7)
github中有一个问题:https://github.com/angular/angular.js/issues/14129
基本上它按预期工作,而不是自动调用$onInit
或$onChanges
。
执行$ onInit没有意义(或低意义),我解释一下:$ componentController是实例控制器的一种替代$ controller,但它不是创建由controllerProvider注册的控制器实例,而是创建实例通过指令注册的控制器(满足组件定义的控制器)。所以,一旦你拥有了控制器的实例,就可以手动调用$ onInit,以及控制器的所有生命周期,这个想法是你正在测试一个控制器,而不是一个指令(及其关系)。
答案 1 :(得分:0)
我不知道这是否会有所帮助,但对于测试组件我会做以下
beforeEach(module('templates'));
var element;
var scope;
beforeEach(inject(function ($rootScope, $compile) {
scope = $rootScope.$new();
scope.draw = new ol.source.Vector({ wrapX: false });
element = angular.element('<custom-element draw="draw"></custom-element>');
element = $compile(element)(scope);
}));
var controller;
beforeEach(inject(function ($rootScope, $componentController) {
scope = $rootScope.$new();
scope.draw = new ol.source.Vector({ wrapX: false });
controller = $componentController('customElement', {draw: new ol.source.Vector({ wrapX: false })}, { $scope: scope });
}));
和$ onInit()以及$ onChanges()会自动触发
答案 2 :(得分:0)
您需要从元素的编译版本中引用控制器。如下图所示:
describe('Component: Test Method', function () {
beforeEach(inject(function (_$rootScope_) {
scope = _$rootScope_.$new();
}));
it('should set value of selectedPackage to null after $onChanges event', inject(function ($compile) {
// Trigger 1st $onChanges
scope.selectedPackage = 'packageCode';
var element = angular.element('<select-my-tv selected-package="selectedPackage"></select-my-tv>');
element = $compile(element)(scope);
scope.$digest();
//Extract the Controller reference from compiled element
var elementController = element.isolateScope().$ctrl;
// Assert
expect(elementController.selectedPackage).toBeNull();
}));
});
});