angularjs - 如何使用 Jasmine 测试 AngularJS 可信 html？

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 已被正确信任。现在我想编写一个单元测试来证实这一点。

单元测试

这是我对 Jasmine 单元测试的尝试:

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

我希望有一种巧妙的方法，也许是一个 bool 标志，我可以用它来确定 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 服务注入(inject)到测试中，则效果很好。

例如

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

这会返回一个错误:

Unknown provider: $sceProvider <- $sce

如果有人能修复 fiddle ，那就太好了。