Question

我想使用Jasmine来确保AngularJS正确信任html数据值。

代码

下面的代码通过外部api获取article，并使用Angular的$sce信任article.Body中保存的html内容。

getArticle: ->
    defer = @$q.defer()
    @getContent(url).then (result) =>
        article = result.data
        article.Body = @$sce.trustAsHtml article.Body
        defer.resolve article
    defer.promise

此代码有效，并且当我逐步执行它时，我可以看到返回的数据并且html属性article.Body已被正确信任。现在我想写一个确认这一点的单元测试。

单元测试

以下是我对茉莉花单元测试的尝试：

describe 'when getArticle is called with valid articleId', ->
    it "should call getContent and return article with trusted html", ->
        getContentDefer = @$q.defer()
        spyOn(@contentService, 'getContent').andReturn getContentDefer.promise

        article = {Id:'1', Body: '<div>test</div>'}  

        @contentService.getArticle(article.Id).then (response) =>
            expect(response.Body instanceof TrustedValueHolderType).toBeTruthy()

        getContentDefer.resolve {data:article}
        @$rootScope.$digest()

您可以看到我正在尝试确保返回的response.Body是AngularJS类型的实例：TrustedValueHolderType。我不知道这是不是一个好主意，但无论如何，它不起作用，我收到以下错误：

ReferenceError: TrustedValueHolderType is not defined

我希望有一个简洁的方法，也许是一个布尔标志，我可以用它来确定article.Body是可信赖的html还是只是一个普通的html字符串。

更新

下面接受的答案（感谢@avowkind）给了我需要的提示。诀窍是使用$sce.getTrustedHtml()方法获取TrustedValueHolderType并返回原始html值。完美。

通过单元测试

ddescribe 'getArticle', ->
    it "should return an article with trusted html", ->
        getContentDefer = @$q.defer()
        spyOn(@contentService, 'getContent').andReturn getContentDefer.promise
        body = '<div>test</div>'
        article = {Id:'1', Body: body}
        @contentService.getArticle(article.Id, @token).then (response) =>
            expect(@$sce.getTrustedHtml(response.Body)).toEqual(body)

Answer 1

我可以通过在过滤器的输出上使用$ sce.getTrustedHtml来对jasmine单元测试我的过滤器。如果您知道如何将$ sce服务注入测试，这可以正常工作。

e.g

/** 
 * A filter used to wrap code in the <pre> tag
 */ 
myApp.filter( 'code', ['$sce', function($sce) {
      return function(input) {
          var html = (input != "")? '<pre>' + input + '</pre>' : input;
          return $sce.trustAsHtml(html);

      };
}]);

// test output
it('wraps pre around input: ', function() {
   expect($sce.getTrustedHtml(codeFilter("Hello"))).toEqual("<pre>Hello</pre>");
} );

这适用于我的本地系统测试。然而，我试图建立一个示例小提琴 http://jsfiddle.net/avowkind/vfWr3/1/

并返回错误未知提供者：$ sceProvider＆lt; - $ sce
如果有人能解决那个很棒的小提琴。

安德鲁

如何使用Jasmine测试AngularJS可信赖的html？

1 个答案: