7

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

代码

下面的代码article通过外部 api 获取 ，并使用 Angular$sce来信任article.Body.

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)
4

1 回答 1

10

我可以通过在过滤器的输出上使用 $sce.getTrustedHtml 来对我的过滤器进行茉莉花单元测试。如果您知道如何将 $sce 服务注入到测试中，这会很好。

例如

/** 
 * 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 <- $sce

如果有人能修好小提琴，那就太好了。

于 2013-11-28T03:05:44.223 回答