How to stub an img call

Question

If its relevant I'm using jasmine, backbone, and marionette.

I have a view that is dynamically building and img url off of a key on a model api call. When I go to render that view out for a test I naturally get 404s for those img calls.

So is it possible to stub/mock a root <img src="some-url">

View (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

Template

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

Tests (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)

The console output in the browser when I run the test is:

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

Now this is the technically correct behavior, since this is a test and that image doesn't actually exist. But with more and more tests this view gets rendered a lot in the tests and my browser console is getting clogged and making it difficult to catch real errors

Its the 2nd test, specifically the @view.render() combined with the <img> in the template that is causing these.

So, after all of that... Is there a way to stub/mock a native img src call? Is there a different approach I can take?

This appears to be a duplicate of http://stackoverflow.com/questions/7035466/check-if-file-exists-but-prevent-404-error-in-console-from-showing-up (and the short version of it is that there is no known way to prevent img load errors from appearing in the browser console). The only other solution I could see would be to wrap every single img `URL` in your code with some sort of `orTestVersion(originalSrc)` function which returns a known valid img src in test mode (and just returns `originalSrc` otherwise) ... but that would make a mess of your code just to slightly cleanup the console. — machineghost, Oct 15 '14 at 17:48
As I guess your main problem is to manage all the console errors. I can suggest you just filter them by regexp using ChromeDevTools filter options. For your case you could remove all unnecessary 404 errors for images just using "first_url|second_url". — vvahans, Oct 15 '14 at 20:32
@VahanVardanyan is there a 'not' filter of some kind. I.e. show all errors not containing that url — JonathanW, Oct 15 '14 at 20:53
Use "?!" regexp pattern. Like `"GET (?!https://my-api/documentimages/11111111-1111-1111-1111-111111111111|https://my-api/documentimages/22222222-2222-2222-2222-222222222222)"` — vvahans, Oct 15 '14 at 21:21

score 0 · Answer 1 · answered Nov 13 '14 at 21:32

What I've usually seen done to eliminate the 404s for various other assets is to include some kind of middleware that just responds with an empty 200. With the jasmine ruby gem, you can add your own custom middleware to the rack server that it runs to accomplish this.

How to stub an img call

1 Answers1