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

Я тестирую одну из моих директив (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
...

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

5 67
javascript angularjs http-status-code-404 unit-testing karma-runner

5 ответов:

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

В вашей карме.конф.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.конф.js:

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

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

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

связанный вопрос:https://github.com/karma-runner/karma/issues/872

94

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

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

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

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

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

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

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

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

и мне не нужен был прокси в тот момент.

17

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

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

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

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

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