如何存根 img 调用答案

【问题标题】：How to stub an img call如何存根 img 调用
【发布时间】：2014-10-15 16:20:15
【问题描述】：

如果相关的话，我会使用茉莉花、骨干和木偶。

我有一个在模型 api 调用上动态构建和 img url 的视图。当我去渲染该视图进行测试时，我自然会为这些 img 调用得到 404。

那么是否可以存根/模拟根<img src="some-url">

查看（咖啡脚本）

@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="">

测试（咖啡脚本）

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 调用？我可以采取其他方法吗？

【问题讨论】：

这似乎是 stackoverflow.com/questions/7035466/… 的副本（它的简短版本是没有已知的方法可以防止 img 加载错误出现在浏览器控制台中）。我能看到的唯一其他解决方案是使用某种orTestVersion(originalSrc) 函数将代码中的每一个img URL 包装起来，该函数在测试模式下返回一个已知的有效img src（否则只返回originalSrc）......但这会让你的代码变得一团糟，只是为了稍微清理一下控制台。
我猜你的主要问题是管理所有控制台错误。我可以建议您使用 ChromeDevTools 过滤器选项通过正则表达式过滤它们。对于您的情况，您可以仅使用“first_url|second_url”删除所有不必要的图像 404 错误。
@VahanVardanyan 是否有某种“非”过滤器。 IE。显示所有不包含该 url 的错误
使用“？！”正则表达式模式。喜欢"GET (?!https://my-api/documentimages/11111111-1111-1111-1111-111111111111|https://my-api/documentimages/22222222-2222-2222-2222-222222222222)"
@JonathanW 你用正则表达式成功了吗？

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

【解决方案1】：

我通常看到为消除各种其他资产的 404 所做的做法是包含某种中间件，该中间件仅以空 200 响应。使用 jasmine ruby gem，您可以将自己的自定义中间件添加到机架服务器它运行来完成这个。

【讨论】：