如何使用Jasmine测试AngularJS受信任的html？

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

代码

下面的代码通过外部api获取

文章

，并使用Angular的

$sce

来信任

文章.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

已被正确信任。现在我想写一个单元测试来证实这一点

单元测试

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)

以下是我对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()

我希望有一种简洁的方法，也许是一个布尔标志，可以用来确定

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)

ddescribe'getArticle'，->
它“应该返回带有可信html的文章”，->
getContentDefer=@$q.defer（）
spyOn（@contentService，'getContent'）。andReturn getContentDefer.promise
正文=‘测试’
article={Id:'1'，Body:Body}
@contentService.getArticle（article.Id，@token）.then（response）=>
expect（@$sce.getTrustedHtml（response.Body））.toEqual（Body）

我可以在过滤器的输出上使用$sce.getTrustedHtml对过滤器进行单元测试。如果您知道如何将$sce服务注入到测试中，那么这就可以了

e、 g

/**
*用于在标记中包装代码的筛选器
*/ 
myApp.filter（'code'，['$sce'，函数（$sce）{
返回函数（输入）{
var html=（输入！=“”）？“”+input+“”：输入；
返回$sce.trustAsHtml（html）；
};
}]);
//测试输出
它（'环绕输入：'，函数（）{
expect（$sce.getTrustedHtml（codeFilter（“Hello”））.toEqual（“Hello”）；
} );

这适用于我的本地系统测试。然而，我试图建立一个例子来摆弄它

---

这将返回一个错误未知提供程序：$sceProvider我已经更新了您的小提琴，所以它现在显示通过测试（请参阅）。我更新了您的外部引用以使用angular的最新版本，在

angular sanitize.js

库中添加了一个外部引用（对于

$sce

是必需的），并在您的应用程序模块声明中添加了

'ngSanitize'

注入引用：-）

$sce.getTrustedHtml（）

完成了这个任务。请参阅上面更新的单元测试。

/** 
 * 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>");
} );