How to fix 404 warnings for images during karma modulation testing

Question

I am testing one of my directives (angularjs) using grunt / karma / phantomjs / jasmine. My tests pass fine

describe('bar foo', function () { beforeEach(inject(function ($rootScope, $compile) { elm = angular.element('<img bar-foo src="img1.png"/>'); scope = $rootScope.$new(); $compile(elm)(); scope.$digest(); })); .... }); 

but i get these 404s

 WARN [web-server]: 404: /img1.png WARN [web-server]: 404: /img2.png ... 

Although they do nothing, they add noise to the output trap. Is there any way to fix this? (without changing karma logLevel, of course, because I really want to see them)

Answer 1

This is because you need to configure karma for download, and then serve them on request;)

In your karma.conf.js file you should already have certain files and / or templates, for example:

 // list of files / patterns to load in the browser files : [ {pattern: 'app/lib/angular.js', watched: true, included: true, served: true}, {pattern: 'app/lib/angular-*.js', watched: true, included: true, served: true}, {pattern: 'app/lib/**/*.js', watched: true, included: true, served: true}, {pattern: 'app/js/**/*.js', watched: true, included: true, served: true}, // add the line below with the correct path pattern for your case {pattern: 'path/to/**/*.png', watched: false, included: false, served: true}, // important: notice that "included" must be false to avoid errors // otherwise Karma will include them as scripts {pattern: 'test/lib/**/*.js', watched: true, included: true, served: true}, {pattern: 'test/unit/**/*.js', watched: true, included: true, served: true}, ], // list of files to exclude exclude: [ ], // ... 

You can look here for more information :)

EDIT: If you use the nodejs web server to run your application, you can add it to the karma.conf.js file:

 proxies: { '/path/to/img/': 'http://localhost:8000/path/to/img/' }, 

EDIT2: If you are not using or do not want to use another server, you can define a local proxy server, but since Karma does not provide access to the port used, dynamically, if karma starts from a port other than 9876 (by default), you will still get annoying 404 ...

 proxies = { '/images/': '/base/images/' }; 

Associated issue: https://github.com/karma-runner/karma/issues/872

Answer 2

The confusing piece of the puzzle for me was the “base” virtual folder. If you do not know what to include in the path to the resources of your devices, it will be difficult for you to debug.

As-per setup documentation

By default, all assets are stored in http: // localhost: [PORT] / base /

Note: this may not be true for other versions - I am on 12/0/14 and this worked for me, but the 0.10 docs don't mention it.

After specifying the file template:

 { pattern: 'Test/images/*.gif', watched: false, included: false, served: true, nocache: false }, 

I could use this in my application:

 <img src="base/Test/images/myimage.gif" /> 

And at this moment I do not need a proxy.

Answer 3

Based on @glepretre's answer, I created an empty .png file and added it to the config to hide 404 warnings:

 proxies: { '/img/generic.png': 'test/assets/img/generic.png' } 

Answer 4

You can create common middleware inside your karma.conf.js - a little more than that, but you did the work for me

First define dummy 1px images (I used base64):

 const DUMMIES = { png: { base64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==', type: 'image/png' }, jpg: { base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD3+iiigD//2Q==', type: 'image/jpeg' }, gif: { base64: 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=', type: 'image/gif' } }; ; base64, / 9j / 4AAQSkZJRgABAQEAYABgAAD / 2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL / 2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL / wAARCAABAAEDASIAAhEBAxEB / 8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL / 8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4 + Tl5ufo6erx8vP09fb3 + Pn6 / 8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL / 8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3 + Pn6 / 9oADAMBAAIRAxEAPwD3 + iiigD // 2Q ==', const DUMMIES = { png: { base64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==', type: 'image/png' }, jpg: { base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD3+iiigD//2Q==', type: 'image/jpeg' }, gif: { base64: 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=', type: 'image/gif' } }; 

Then define the middleware function:

 function surpassImage404sMiddleware(req, res, next) { const imageExt = req.url.split('.').pop(); const dummy = DUMMIES[imageExt]; if (dummy) { // Table of files to ignore const imgPaths = ['/another-cat-image.png']; const isFakeImage = imgPaths.indexOf(req.url) !== -1; // URL to ignore const isCMSImage = req.url.indexOf('/cms/images/') !== -1; if (isFakeImage || isCMSImage) { const img = Buffer.from(dummy.base64, 'base64'); res.writeHead(200, { 'Content-Type': dummy.type, 'Content-Length': img.length }); return res.end(img); } } next(); } 

Apply middleware in your config.

 { basePath: '', frameworks: ['jasmine', '@angular/cli'], middleware: ['surpassImage404sMiddleware'], plugins: [ ... {'middleware:surpassImage404sMiddleware': ['value', surpassImage404sMiddleware]} ], ... } 

Answer 5

If you have a root path somewhere in your configuration file, you can also use something like this:

 proxies: { '/bower_components/': config.root + '/client/bower_components/' } 

Answer 6

To fix, in your karma.conf.js be sure to point to the serviced file with your proxies:

 files: [ { pattern: './src/img/fake.jpg', watched: false, included: false, served: true }, ], proxies: { '/image.jpg': '/base/src/img/fake.jpg', '/fake-avatar': '/base/src/img/fake.jpg', '/folder/0x500.jpg': '/base/src/img/fake.jpg', '/undefined': '/base/src/img/fake.jpg' }