как исправить 404 предупреждения для изображений во время модульного тестирования кармы

Я тестирую одну из своих директив (angularjs), используя grunt / karma / phantomjs / jasmine. Мои тесты проходят нормально

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();
    }));
    ....
});

но я получаю эти 404

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

Хотя они ничего не делают, они добавляют шум в вывод журнала. Есть способ исправить это? (конечно, не меняя уровень журнала кармы, потому что я хочу их видеть)

Это потому, что вам нужно настроить карму для загрузки, а затем обслуживать их по запросу;)

В вашем файле karma.conf.js вы уже должны были определить файлы и / или шаблоны, например:

// 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: [

],

// ...

Вы можете посмотреть здесь, чтобы узнать больше :)

РЕДАКТИРОВАТЬ: Если вы используете веб-сервер nodejs для запуска своего приложения, вы можете добавить это в karma.conf.js:

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

EDIT2: если вы не используете или не хотите использовать другой сервер, вы можете определить локальный прокси, но поскольку Karma не предоставляет доступ к используемому порту, динамически, если карма начинается на другом порту, чем 9876 (по умолчанию), вы все равно будете получить эти надоедливые 404 ...

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

Связанная проблема: https://github.com/karma-runner/karma/issues/872

Непонятным для меня фрагментом головоломки была «базовая» виртуальная папка. Если вы не знаете, что нужно включить в пути к ресурсам ваших приспособлений, вам будет сложно отлаживать.

Согласно документации по конфигурации

По умолчанию все ресурсы обслуживаются по адресу http: // localhost: [PORT] / base /

Примечание: это может быть неверно для других версий - я использую 0.12.14, и это сработало для меня, но в документах 0.10 об этом не упоминается.

После указания шаблона файлов:

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

Я мог бы использовать это в своем приспособлении:

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

И в тот момент мне не понадобился прокси.

Вы можете создать общее промежуточное ПО внутри своего karma.conf.js - немного чересчур, но сделало всю работу за меня

Сначала определите фиктивные изображения размером 1px (я использовал 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'
  }
};

Затем определите функцию промежуточного программного обеспечения:

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();
}

Примените промежуточное ПО в своей karma conf

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

Основываясь на ответе @ glepretre, я создал пустой файл .png и добавил его в конфигурацию, чтобы скрыть предупреждения 404:

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

Чтобы исправить это, karma.conf.jsобязательно укажите обслуживаемый файл с вашими прокси:

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'
}

Несмотря на то, что это старая ветка, мне потребовалось пару часов, чтобы фактически обработать мое изображение из кармы, чтобы устранить 404. Комментарии были просто недостаточно тщательными. Я считаю, что могу прояснить решение с помощью этого снимка экрана. По сути, единственное, чего не хватало во многих комментариях, - это тот факт, что значение прокси должно начинаться с "/ base" , даже если base не указан ни в одном из путей к моей папке, ни в моих запросах.

(«база» без косой черты привела к тому, что карма вернула 400 ПЛОХОЙ ЗАПРОС)

Теперь после запуска ng test я могу успешно обслуживать "./src/assets/favicon.png" с URL-адреса: http: // localhost: 9876 / test / dummy.png.

В своем проекте я использую следующие версии пакетов npm:

• карма v4.3.0
• жасмин-ядро v3.2.1
• карма-жасмин v1.1.2
• @ angular / cli v8.3.5
• угловой v8.2.7

Если у вас есть корневой путь где-то в вашем файле конфигурации, вы также можете использовать что-то вроде этого:

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