7

Jasmine を使用して、HTML データ値が AngularJS によって正しく信頼されていることを確認したいと思います。

コード

以下のコードはarticle、外部 API を介して を取得し、Angular を使用して$sceに保持されている html コンテンツを信頼し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に感謝)から、必要なヒントが得られました。トリックは、元の html 値を取得して返す$sce.getTrustedHtml()メソッドを使用することです。TrustedValueHolderType完全。

単体テストに合格

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