title: Jasmine unit testing an element is not :hidden
body: <p>I have an AngularJS directive that I am writing tests for. I have recreated the problem in this plunk: <a href="http://plnkr.co/edit/gHoGwI6TZhsgKVwIb1uI?p=preview" rel="nofollow">http://plnkr.co/edit/gHoGwI6TZhsgKVwIb1uI?p=preview</a></p>
  
  <p>Can anyone tell me why the second test fails and how to fix it?</p>
  
  <p>Code:</p>
  
  <pre><code>var app = angular.module("myApp", []);
  app.directive("myDirective", function() {
    return {
      template: "&lt;div&gt;Hello this is my directive!&lt;/div&gt;"
    }
    });
  
  describe("Testing hidden", function() {
    var $compile, $scope, $document;
  
    beforeEach(inject(function(_$compile_, $rootScope, _$document_){
      $compile = _$compile_;
      $scope = $rootScope.$new();
      $document = _$document_;
    }));
  
    function getElement() {
      var element = angular.element("&lt;div my-directive&gt;&lt;/div&gt;");
      $compile(element)($scope);
      return element;
    }
  
    it("passes", function() {
      var element = getElement();
      expect(element.is(":hidden")).toBe(true); // Passes
    });
  
    it("fails", function() {
      var element = getElement();
      $document.body.append(element);
      element.show();
      expect(element.is(":hidden")).toBe(false); // Fails
    });
  
    });
  </code></pre>