title: angularjs directive testcase in jasmine
body: <p>Here is the plunker: <a href="https://plnkr.co/edit/ZPedqHkwjCgmLWw6594e?p=preview" rel="nofollow">https://plnkr.co/edit/ZPedqHkwjCgmLWw6594e?p=preview</a>
  There was some error when running the code on plunkr although it is running fine in local machine.</p>
  
  <p>This is the index.html:</p>
  
  <pre><code>&lt;div ng-app="MyServiceModule" ng-controller="MyController as MyCtrl" &gt;
      &lt;train-directive trains="MyCtrl.trainList" open-screen=MyCtrl.openTrainScreen(trainName)&gt;
      &lt;/train-directive&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is app.js:</p>
  
  <pre><code>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"}
                     ];
  }
  </code></pre>
  
  <p>This is directive.js:</p>
  
  <pre><code>angular.module('MyServiceModule').directive('trainDirective',trainDirective);
  trainDirective.$inject = ['$document'];
  
  function trainDirective($document)
  {
      return{
          restrict: 'E',
          templateUrl: 'dropdowndirective.tmplt.html',
  
          scope: {
              trains: '=',
              openScreen : '&amp;'
          },
  
           link: function(scope,element){
              scope.isPopupVisible = false;
  
              $document.bind('click', function(event){
  
  
  var isClickedElementChildOfPopup = element.find(event.target).length &gt; 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();
                  }
  
                });
          } 
      };
  }
  </code></pre>
  
  <p>And this is the template for the directive:</p>
  
  <pre><code>&lt;div class="aia__createQuoteBtn"&gt;TRAIN LIST&lt;/div&gt;
  
  &lt;ul data-ng-repeat="train in trains" data-ng-show="isPopupVisible"&gt;
  &lt;li data-ng-click="openScreen({trainName:train.trainName})"&gt;{{ train.trainName }}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I am writing test cases for the directive.</p>
  
  <p>I want to test the following points:</p>
  
  <p>Case 1.The directive's scope variables are binded properly or not.</p>
  
  <p>Case 2. I want to simulate the click function and check if the value of the variable   <code>isPopUpVisible</code> is toggling or not. </p>
  
  <p>For Case 1, I wrote the following test case:</p>
  
  <pre><code>expect(element.isolateScope().openScreen).toBeDefined();
  </code></pre>
  
  <p>and this is passing for the function defined but is there a way I can test 2-way binding for <code>scope.trains</code>.</p>
  
  <p>For Case 2, I wrote the following test case:</p>
  
  <pre><code> it('Should respond to click', function(){
            scope.isPopupVisible = false;
            scope.isClickedElementChildOfPopup = true;
            element.triggerHandler('click');
  
            expect(scope.isPopupVisible).toBe(true);
          });
  </code></pre>
  
  <p><code>scope</code> is defined in the following way:</p>
  
  <pre><code>scope = _$rootScope_.$new();    
  </code></pre>
  
  <p>But this test case is failing saying "<code>Expected false to be true</code>"
  I think I am not able to access the isPopupVisible variable of directive in the test case. I even tried with <code>element.isolateScope().isPopupVisible</code> but it is giving it as undefined.</p>
  
  <p>Any help is appreciated.</p>