HTML:
<ul id="listONE">
<li class="{{isSel}}" ng-repeat="person in people" ng-click="selPersonToChange(this)">{{person.nome +" - "+ person.citta}}</li>
</ul>
使用AngularJS(1.3.1)编写我的script.js:
mymod.controller("maincontroller", function($scope){
$scope.people = [
{ name: "name1", city: "city1" },
{ name: "name2", city: "city2" },
{ name: "name3", city: "city3" }
];
$scope.oldIndex = 0;
$scope.oldPerson = 0;
$scope.selPersonToChange = function(){
$scope.personToChange.person = this.person;
$scope.personToChange.index = this.$index;
lis = document.getElementById("listONE").getElementsByTagName("li");//here it report an error
for(i=0; i<lis.length; i++){ lis[i].className = ""; }
lis[this.$index].className = "selected";
return true;
}
Jasmine tdd:
Jasmine tdd.js:
describe("myApp", function(){
beforeEach(module("mymod"));
describe("maincontroller", function(){
var scope;
var ctrl;
var els;
beforeEach(inject(function($rootScope, $controller, $compile){
scope = $rootScope.$new();
ctrl = $controller("maincontroller", {$scope:scope});
els = $compile('<ul id="listONE"><li class="{{isSel}}" ng-repeat="person in people" ng-click="selPersonToChange(this)">{{person.nome +" - "+ person.citta}}</li></ul>')(scope);
scope.$digest();
console.log(els.html());
}));
it("Is ul #listONE null or undefined?", function(){
expect(scope.selPersonToChange()).toEqual(true);
});
});
});
真正的问题是“document.getElementById('listONE')”,因为它返回给我“listONE”不存在。
答案 0 :(得分:1)
您的控制器无法找到该元素,因为在您的测试中,您并没有告诉AngularJS加载&#34;任何观点。您只是实例化了不加载html的控制器。
如果您在应用中使用ngRoute模块,您可以尝试在测试中注入并使用$location服务以强制加载路径,这涉及使用控制器并加载指定的模板。让我们说你有/some/path
路径使用你的控制器和你的HTML。你可以在断言之前做$location.path('/some/path')
和$rootScope.$apply()
。
如果您不使用ngRoute,我猜您可以尝试$compile测试中定义的模板,其中包含一些<div ng-controller="maincontroller">...</div>
代码。