title: Jasmine - How to test a stylesheet directive
body: <p>I have written a directive that interrogates the current URL, and loads the corresponding freestyle. The problem i am facing is how can i test the link function:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html lang="en" ng-app="myApp"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;CSS Test&lt;/title&gt;
      &lt;link get-style-directive /&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>app.directive('getStyleDirective', ["$compile", "$location", 
  
  function($compile, $location) {
      return {
          replace: true,
          scope: true,
          link: function(scope, element, attrs) {
  
              var urlValue = $location.absUrl();
              var getCSSFile;
  
              if (urlValue.indexOf("red") &gt; -1) {
                 getCSSFile= 'red';
              }
              else if (urlValue.indexOf("blue") &gt; -1) {
                 getCSSFile= 'blue';
              }
              else if (urlValue.indexOf("orange") &gt; -1) {
                 getCSSFile= 'orange';
              }
              else {
                getCSSFile = 'black';
              }
  
              var jqLiteWrappedElement = angular.element('&lt;link href="../asset/css/' + getCSSFile + '.css" rel="stylesheet" /&gt;');
              element.replaceWith(jqLiteWrappedElement);
              $compile(jqLiteWrappedElement)(scope);
          }
      };
  }]);
  </code></pre>
  
  <p>Test:</p>
  
  <pre><code>describe('Unit testing great quotes', function() {
    var $compile,
        $rootScope;
  
    beforeEach(module('myApp'));
  
    beforeEach(inject(function(_$compile_, _$rootScope_){
      $compile = _$compile_;
      $rootScope = _$rootScope_;
    }));
  
    it('Replaces the element with the appropriate content', function() {
      var element = $compile("&lt;link get-style-directive /&gt;")($rootScope);
      console.log(element);
  
      $rootScope.$digest();
  
      it('should have 1 link tag', function () {
          expect(element[0].querySelectorAll('link').length).toEqual(1);
      });
  
      //it('if urlValue is blank getCSSFile should be black', function () {
      //
      //});
    });
  });
  </code></pre>
  
  <p>The above test was failing so i added a console.log to element and can see in the console:</p>
  
  <pre><code>Object[link.ng-scope]
  </code></pre>