茉莉花 - 为什么它给我一个简单的getElementsByTagName(...)的错误

时间:2014-03-21 12:32:39

标签: javascript angularjs tdd jasmine

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”不存在。

1 个答案:

答案 0 :(得分:1)

您的控制器无法找到该元素,因为在您的测试中,您并没有告诉AngularJS加载&#34;任何观点。您只是实例化了不加载html的控制器。

如果您在应用中使用ngRoute模块,您可以尝试在测试中注入并使用$location服务以强制加载路径,这涉及使用控制器并加载指定的模板。让我们说你有/some/path路径使用你的控制器和你的HTML。你可以在断言之前做$location.path('/some/path')$rootScope.$apply()

如果您不使用ngRoute,我猜您可以尝试$compile测试中定义的模板,其中包含一些<div ng-controller="maincontroller">...</div>代码。