Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unit testing the output of $sce.trustAsHtml in Angular

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.

At first the blog posts were just displaying as text ie <p>Blog body</p>, rather than rendering as parsed HTML, until I discovered that you can use ng-bind-html in conjunction with the $sce service. This now works fine in terms of displaying the blog posts correctly.

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:

Controller

.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 < 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;
    });
})

unit test

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);
    });
});

When I run the above through the Karma test runner, I get the following response:

Chrome 31.0.1650 (Windows) home section HomeCtrl should get a list of blog posts FAILED
    Expected [ { body : { value : '<p>Post body.</p>
    ', summary : '<p>Summary.</p>
    ' }, created : '1388415860000', previewText : { $$unwrapTrustedValue : Function } }          ] to equal [ { body
: { value : '<p>Post body.</p>
    ', summary : '<p>Summary.</p>
    ' }, created : '1388415860000', previewText : { $$unwrapTrustedValue : Function } }     ].

I suspect the problem is due to the fact that $sce.trustAsHtml returns an object containing a function, rather than a string.

My question is, firstly, am I approaching this problem in the correct way?

Secondly, if so, how should I go about testing the output of $sce.trustAsHtml?

like image 830
Michael Bromley Avatar asked Jan 06 '14 09:01

Michael Bromley


People also ask

What is SCE trustAsHtml in AngularJS?

The ng-controller uses $sce (Strict Contextual Escaping) service which is used to mark the HTML as trusted using the trustAsHtml method. Note: Unless the HTML content is trusted using the $sce service, it will not be displayed using ng-bind-html directive.

What is used to run unit tests in Angular?

Karma. Karma is a test runner for JavaScript. Along with Jasmine, Karma is one of the default testing tools for Angular.

What the describe keyword is used for in Angular unit testing?

describe can be used to scope a number of tests to a single topic.

Why unit testing is important in Angular?

The purpose of unit tests is to test each individual piece of functionality of your app. This buys you granular guarantees about your app and ensures that your code will be more maintainable and easier to refactor when the time comes.


2 Answers

Since the answer given by michael-bromley didn't work for me I want to point out another solution. In my case I was using a filter that wraps each occurrence of a string in another string with a span that has a class of 'highlight'. In other words, I want words to be highlighted. Here is the code:

angular.module('myModule').filter('highlight', function ($sce) {
    return function (input, str) {
        return $sce.trustAsHtml((input || '').replace(new RegExp(str, 'gi'), '<span class=\"highlighted\">$&</span>'));
    };
});

I use the $sce service to trust the resulting value as HTML. To test this I need to use the $$unwrapTrustedValue function on the resulting value to get my test working:

it('01: should add a span with class \'highlight\' around each mathing string.', inject(function ($filter) {
    // Execute
    var result = $filter('highlight')('this str contains a str that will be a highlighted str.', 'str');

    // Test
    expect(result.$$unwrapTrustedValue()).toEqual('this <span class="highlighted">str</span> contains a <span class="highlighted">str</span> that will be a highlighted <span class="highlighted">str</span>.'); 
}));

UPDATE:

As @gugol kindly pointed out it is preferred not to use Angular internal methods like $$unwrapTrustedValue. A better approach is to use the public getTrustedHtml method on the $sce service. Like so:

it('01: should add a span with class \'highlight\' around each mathing string.', inject(function ($sce, $filter) {
    // Execute
    var result = $filter('highlight')('this str contains a str that will be a highlighted str.', 'str');

    // Test
    expect($sce.getTrustedHtml(result)).toEqual('this <span class="highlighted">str</span> contains a <span class="highlighted">str</span> that will be a highlighted <span class="highlighted">str</span>.');
}));
like image 93
Bas Slagter Avatar answered Oct 12 '22 00:10

Bas Slagter


You have to disable $sce using its provider before each test.

When $sce is disabled all $sce.trust* methods just return original value instead of a wrapper function.

beforeEach(module(function ($sceProvider) {
  $sceProvider.enabled(false);
}));

it('shall pass', inject(function($sce){
  expect($sce.trustAsHtml('<span>text</span>')).toBe('<span>text</span>');
}));

In your particular example just do this:

describe('HomeCtrl', function() {
  var $httpBackend, $rootScope, $sce, createController;

  beforeEach(module(function ($sceProvider) {
    $sceProvider.enabled(false);
  }));

  // rest of the file
});
like image 43
Arakir Avatar answered Oct 12 '22 02:10

Arakir