title: Unit test collapse behaviour of a div element in Angular-JS
body: <p>I have a simple form that I want to be shown on a button click. i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user. 
  The first problem i am facing is: 
  using this code </p>
  
  <pre><code>function AngularUI($scope, $window) {
  
  
      $scope.collapse = function (selector) {
          angular.element(selector).collapse();
      }
  }  
  </code></pre>
  
  <p>and </p>
  
  <pre><code>&lt;div class="ang-ui-test"&gt;
      &lt;button ng-click="collapse('#collapsible')"&gt;
          using angular.element
      &lt;/button&gt;
  
      &lt;div id="collapsible" class="collapse"&gt;
          some thing in here ...... !
      &lt;/div&gt;
  
  
      &lt;button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo"&gt;
          simple collapsible
      &lt;/button&gt;
  
      &lt;div id="demo" class="collapse in"&gt;This one work properly&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>the second one that does not uses angular.element.collapse works properly. </p>
  
  <p>The second problem is : how do I test the behavior mentioned above.  </p>
  
  <p>on the first button press, the one that uses angular.element if the div is hidden it is shown but, it does not hide the collapsible after it is shown. 
  ( i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user. </p>
  
  <p>thanks in advance. </p>