Question

以下是plunker：https://plnkr.co/edit/ZPedqHkwjCgmLWw6594e?p=preview 在plunkr上运行代码时出现了一些错误，尽管它在本地机器上运行正常。

这是index.html：

<div ng-app="MyServiceModule" ng-controller="MyController as MyCtrl" >
    <train-directive trains="MyCtrl.trainList" open-screen=MyCtrl.openTrainScreen(trainName)>
    </train-directive>
</div>

这是app.js：

angular.module('MyServiceModule',[]);
angular.module('MyServiceModule').controller('MyController',MyController);
function MyController()
{
    console.log('MyController');
    vm = this;

    vm.openTrainScreen = function(trainName)
    {
            alert("train type"+trainName);
    }

    vm.trainList = [
                         {"trainName":"Shatabdi","trainType":"AC"},
                         {"trainName":"Rajdhani","trainType":"SLEEPER"}
                   ];
}

这是directive.js：

angular.module('MyServiceModule').directive('trainDirective',trainDirective);
trainDirective.$inject = ['$document'];

function trainDirective($document)
{
    return{
        restrict: 'E',
        templateUrl: 'dropdowndirective.tmplt.html',

        scope: {
            trains: '=',
            openScreen : '&'
        },

         link: function(scope,element){
            scope.isPopupVisible = false;

            $document.bind('click', function(event){


var isClickedElementChildOfPopup = element.find(event.target).length > 0;


                if (isClickedElementChildOfPopup)
                    {
                    if(scope.isPopupVisible===true)
                        {
                        scope.isPopupVisible = false;
                        scope.$apply();
                        }
                    else{
                        scope.isPopupVisible = true;
                        scope.$apply();
                    }
                    }
                if (!isClickedElementChildOfPopup)
                {
                    scope.isPopupVisible = false;
                    scope.$apply();
                }

              });
        } 
    };
}

这是该指令的模板：

<div class="aia__createQuoteBtn">TRAIN LIST</div>

<ul data-ng-repeat="train in trains" data-ng-show="isPopupVisible">
<li data-ng-click="openScreen({trainName:train.trainName})">{{ train.trainName }}</li>
</ul>

我正在为该指令编写测试用例。

我想测试以下几点：

案例1.指令的范围变量是否正确绑定。

案例2.我想模拟点击功能并检查变量isPopUpVisible的值是否翻转。

对于案例1，我编写了以下测试用例：

expect(element.isolateScope().openScreen).toBeDefined();

这是为定义的函数传递但有一种方法可以测试scope.trains的双向绑定。

对于案例2，我编写了以下测试用例：

 it('Should respond to click', function(){
          scope.isPopupVisible = false;
          scope.isClickedElementChildOfPopup = true;
          element.triggerHandler('click');

          expect(scope.isPopupVisible).toBe(true);
        });

scope按以下方式定义：

scope = _$rootScope_.$new();

但是这个测试案例没有说“Expected false to be true” 我想我无法在测试用例中访问指令的isPopupVisible变量。我甚至尝试使用element.isolateScope().isPopupVisible，但它将其定义为未定义。

感谢任何帮助。

茉莉花中的angularjs指令测试用例

0 个答案: