Как исправить 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();
    }));
    ....
});

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

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

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

ОТВЕТЫ

Ответ 1

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

В вашем файле 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: [

],

// ...

Вы можете посмотреть здесь для получения дополнительной информации:)

EDIT: Если вы используете веб-сервер 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

Ответ 2

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

As-per документация по настройке

По умолчанию все активы хранятся в 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" />

И в этот момент мне не нужен прокси.

Ответ 3

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

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

Ответ 4

Вы можете создать общее промежуточное программное обеспечение внутри своего 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();
}

Примените промежуточное программное обеспечение в вашей конф.

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

Ответ 5

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

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

Ответ 6

Чтобы исправить, в вашем 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'
}

Ответ 7

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

("база" без косой черты привела к тому, что карма вернула 400 BAD REQUEST)

Теперь после запуска 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
  • angular v8.2.7

VSCode project structure with karma.conf.js assets locations