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

StackOverflow https://stackoverflow.com//questions/21067710

Вопрос

Я выполняю модульное тестирование одной из своих директив (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: Если вы не используете или хотите использовать другой сервер, вы можете определить локальный прокси, но, как карма не обеспечивает доступ к порту, используемую, если карма начинается на другомПорт, чем 9876 (по умолчанию), вы все равно получите эти раздражающие 404 ... 

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

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

Другие советы

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

as-per Документация конфигурации

По умолчанию Все активы подаются в http:// localhost: [Порт] / База /

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы исправить, в вашем 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" , даже если база не в каком-либо моей папке, а также не в моих запросах.

(«База» без форвардной косые, привело к карме, возвращая 400 плохой запрос)

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top