how to fix images causing "karma WARN [web-server]: 404"?

Question

I have an angular directive with a template that is doing something like:

<img ng-src="{{url}}" />

In my test, I am setting the scope so that url points to a fictitious image... Karma then says:

WARN [web-server]: 404: /fake.png

So I go into my karma config file and add to the files array:

{pattern: 'spec/javascripts/fixtures/**/*.png', watched: false, included: false, served: true},

And then added proxies:

proxies: {
  '/fake.png': 'spec/javascripts/fixtures/assets/fake.png'
}

...

Now I get:

WARN [proxy]: failed to proxy spec/javascripts/fixtures/assets/fake.png ([object Object])

?

That path is correct, and there is a real image called fake.png there.

The basePath in my config is also properly set to the root of my project...

Answer 1

If you don't care about showing the actual image in the tests this is enough:

proxies: {
  '/fake.png': ''
}

Answer 2

I figured it out through random trial and error. Apparently you have to use the magic word "base" in your path.

proxies: {
  '/fake.png': '/base/spec/javascripts/fixtures/assets/fake.png'
}

now it works, but let's be honest, prepending "/base" just seems like nonsense.

Answer 3

I'd like to comment, but I don't have enough rep, as I am a SO newbie. /base is the base path from the karma config. You specify that in

module.exports = function () {
    return {
        ...
        basePath: '../',
        ...
    }    
}

When you do that, the base part is automatically prepended to the pattern. So there is not really nonsense going on, but incomplete configuration. Have a great one :)