title: Unit testing the output of $sce.trustAsHtml in Angular
body: <p>I am writing a REST app in Angular and I want to write unit tests for it (of course!). I have a controller which gets a list of blog posts from a REST service in json and puts the summaries into the $scope, so I can display them in the view.</p>
  
  <p>At first the blog posts were just displaying as text ie <code>&lt;p&gt;Blog body&lt;/p&gt;</code>, rather than rendering as parsed HTML, until I discovered that you can use <a href="http://docs.angularjs.org/api/ng.directive:ngBindHtml" rel="noreferrer">ng-bind-html</a> in conjunction with the <a href="http://docs.angularjs.org/api/ng.$sce" rel="noreferrer">$sce service</a>. This now works fine in terms of displaying the blog posts correctly.</p>
  
  <p>The problem arises when unit testing. I am trying to mock a json response with some HTML and then test that my controller is correctly dealing with the HTML. Here is my code:</p>
  
  <h2>Controller</h2>
  
  <pre><code>.controller( 'HomeCtrl', function HomeController( $scope, $http, $sce ) {
      $scope.posts = {};
      $http.get('../drupal/node.json').success(function (data) {
          var posts;
          posts = data.list;
  
          for(var i = 0; i &lt; posts.length; i ++) {
              posts[i].previewText = $sce.trustAsHtml(posts[i].body.summary);
              posts[i].created = posts[i].created + '000'; // add milliseconds so it can be properly formatted 
          }
          $scope.posts = posts;
      });
  })
  </code></pre>
  
  <h2>unit test</h2>
  
  <pre><code>describe('HomeCtrl', function() {
      var $httpBackend, $rootScope, $sce, createController;
  
      beforeEach(inject(function ($injector) {
          // Set up the mock http service responses
          $httpBackend = $injector.get('$httpBackend');
  
          // Get hold of a scope (i.e. the root scope)
          $rootScope = $injector.get('$rootScope');
          // The $controller service is used to create instances of controllers
          var $controller = $injector.get('$controller');
  
          $sce = $injector.get('$sce');
  
          createController = function() {
              return $controller('HomeCtrl', {
                  '$scope': $rootScope
              });
          };
      }));
  
      it('should get a list of blog posts', function() {
          var rawResponse = {
              "list": [
                  {
                      "body": {
                          "value": "\u003Cp\u003EPost body.\u003C\/p\u003E\n",
                          "summary": "\u003Cp\u003ESummary.\u003C\/p\u003E\n"
                      },
                      "created": "1388415860"
                  }
              ]};
          var processedResponse = [{
                  "body": {
                      "value": "\u003Cp\u003EPost body.\u003C\/p\u003E\n",
                      "summary": "\u003Cp\u003ESummary.\u003C\/p\u003E\n"
                  },
                  "created": "1388415860000",
              previewText: $sce.trustAsHtml("\u003Cp\u003ESummary.\u003C\/p\u003E\n")
          }];
  
          $httpBackend.when('GET', '../drupal/node.json').respond(rawResponse);
          $httpBackend.expectGET("../drupal/node.json").respond(rawResponse);
          var homeCtrl = createController();
          expect(homeCtrl).toBeTruthy();
          $httpBackend.flush();
          expect($rootScope.posts).toEqual(processedResponse);
      });
  });
  </code></pre>
  
  <p>When I run the above through the Karma test runner, I get the following response:</p>
  
  <pre><code>Chrome 31.0.1650 (Windows) home section HomeCtrl should get a list of blog posts FAILED
      Expected [ { body : { value : '&lt;p&gt;Post body.&lt;/p&gt;
      ', summary : '&lt;p&gt;Summary.&lt;/p&gt;
      ' }, created : '1388415860000', previewText : { $$unwrapTrustedValue : Function } }          ] to equal [ { body
  : { value : '&lt;p&gt;Post body.&lt;/p&gt;
      ', summary : '&lt;p&gt;Summary.&lt;/p&gt;
      ' }, created : '1388415860000', previewText : { $$unwrapTrustedValue : Function } }     ].
  </code></pre>
  
  <p>I suspect the problem is due to the fact that <code>$sce.trustAsHtml</code> returns an object containing a function, rather than a string.</p>
  
  <p>My question is, firstly, <strong>am I approaching this problem in the correct way?</strong></p>
  
  <p>Secondly, if so, <strong>how should I go about testing the output of <code>$sce.trustAsHtml</code>?</strong></p>