如何存根img调用

时间:2014-10-15 16:20:15

标签: javascript unit-testing backbone.js jasmine marionette

如果它相关我使用茉莉,骨干和木偶。

我有一个视图,它在模型api调用中动态构建和img url。 当我将该视图渲染出来进行测试时,我自然会为这些img调用获得404.

因此可以存根/模拟根<img src="some-url">

查看(coffeescript)

@App.module "DocumentPacket.Documents.Views", (Views, App, Backbone, Marionette, $, _) ->
    class Views.Document extends Marionette.ItemView
        template: JST["app/scripts/document_packet/documents/views/templates/document.ejs"]
        serializeData: ->
            data = @model.toJSON()
            data.frontUrl = "https://my-api/documentimages/" + @model.get('frontKey')
            data.backUrl  = "https://my-api/documentimages/" + @model.get('backKey')
            data

模板

<img src="<%= frontUrl %>" alt="">
<img src="<%= backUrl %>" alt="">

测试(coffeescript)

describe "DocumentPacket Document View", ->
    beforeEach ->
        @model = new Backbone.Model
            id       : 42
            packetId : 1
            frontKey : "11111111-1111-1111-1111-111111111111"
            backKey  : "22222222-2222-2222-2222-222222222222"

        @view = new App.PaymentDocumentPacket.Documents.Views.Document
            model: @model

    it 'builds the front and back urls in the serialized data', ->
        serializedData = @view.serializeData()

        expect(serializedData.FrontUrl).toEqual("https://my-api/documentimages/11111111-1111-1111-1111-111111111111")
        expect(serializedData.BackUrl).toEqual("https://my-api/documentimages/22222222-2222-2222-2222-222222222222")

    it "displays the front and back images", ->
        @view.render()
        serializedData = @view.serializeData()

        expect(@view.ui.frontSide).toHaveAttr('src', serializedData.FrontUrl)
        expect(@view.ui.frontSide.length).toEqual(1)

        expect(@view.ui.backSide).toHaveAttr('src', serializedData.BackUrl)
        expect(@view.ui.backSide.length).toEqual(1)

运行测试时,浏览器中的控制台输出是:

GET https://my-api/documentimages/11111111-1111-1111-1111-111111111111 404 not found
GET https://my-api/documentimages/22222222-2222-2222-2222-222222222222 404 not found

现在这是技术上正确的行为,因为这是一个测试,并且该图像实际上并不存在。但随着越来越多的测试,这个视图在测试中被渲染很多,我的浏览器控制台被堵塞并且很难捕捉到真正的错误

它是第二个测试,特别是@view.render()与模板中导致这些的<img>相结合。

所以,毕竟...... 有没有办法存根/模拟本机img src调用? 我可以采取不同的方法吗?

1 个答案:

答案 0 :(得分:0)

我通常看到为消除各种其他资产的404而做的是包含某种只响应空200的中间件。使用jasmine ruby​​ gem,您可以添加自己的自定义中间件到它运行的机架服务器来完成此任务。