unit-testing - 在 Angular 中对 $sce.trustAsHtml 的输出进行单元测试

Question

我正在用 Angular 编写一个 REST 应用程序，我想为它编写单元测试(当然!)。我有一个 Controller ，它从 json 中的 REST 服务获取博客文章列表，并将摘要放入 $scope，因此我可以在 View 中显示它们。

起初，博客文章只是显示为文本，即 <p>Blog body</p> ，而不是呈现为已解析的 HTML，直到我发现您可以使用 ng-bind-html结合 $sce service .现在，这在正确显示博客文章方面效果很好。

单元测试时出现问题。我正在尝试使用一些 HTML 模拟 json 响应，然后测试我的 Controller 是否正确处理 HTML。这是我的代码:

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

单元测试

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

当我通过 Karma 测试运行程序运行上述内容时，我得到以下响应:

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 } }     ].

我怀疑问题是由于 $sce.trustAsHtml返回一个包含函数的对象，而不是字符串。

我的问题是，首先， 我是否以正确的方式解决这个问题？

其次，如果是， 我应该如何测试 $sce.trustAsHtml 的输出?

Answer 1

您必须在每次测试之前使用其提供程序禁用 $sce。

当 $sce 被禁用时，所有 $sce.trust* 方法只返回原始值而不是包装函数。

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

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

在您的特定示例中，只需执行以下操作:

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

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

  // rest of the file
});