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

84

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

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

javascript  unit-testing  angularjs  http-status-code-404  karma-runner 
— Жанлука Скальери
источник
Сохраняется ли это в другом браузере? Я знаю, что есть некоторые известные проблемы с ошибками 404 для этих типов вызовов в FF.
— Николас Хейзел
это должны быть фантомы. Я проверил Chrome, который тоже показывает 404. Учтите, что это предупреждения, а не ошибки!
— Jeanluca Scaljeri
Помогает ли использование ng-src?
— Эйтан Пеер
хорошая попытка, но результат тот же
— Jeanluca Scaljeri

Ответы:

109

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

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

— глепретр
источник
4
В моем случае этих изображений не существует. Предлагаемое вами решение предполагает, что файлы существуют, верно?
— Jeanluca Scaljeri
Да, конечно! Думаю, я неправильно понял, имеет смысл иметь 404 ошибки для несуществующих файлов, верно? Вы хотите скрыть предупреждения, связанные с изображениями? Без изменения уровня журнала я не вижу решения, более того, которое скрывало бы другие предупреждения, что было бы рискованно. Почему бы, например, не создать пустые файлы .png в папке "test / img"? :)
— glepretre
По какой-то причине не могу заставить его работать. Какова именно связь между URL-адресом, используемым в HTML, и шаблоном в karma.conf.js? Например, если у меня есть изображение в test / assets / img.png , каким должен быть URL-адрес?
— Jeanluca Scaljeri
1
Приношу свои извинения, это решение должно работать, но я тоже получал ошибку 404. Я считаю, что это связано с отсутствием реализации в Karma, и я удивлен, что мы единственные, кто это получил. Я нашел (немного хакерский) способ заставить это работать, но вам нужно будет запустить другой (веб-сервер) параллельно с Karma. Отредактирую свой ответ. ;)
— glepretre
3
В ответ на EDIT2, если вы запускаете карму на настраиваемом порту, вы можете избежать ошибок 404, связавшись с полным URI сервера кармы: (при условии port: 9999)proxies = { '/images/': 'http://localhost:9999/base/images/' };
— Джош
18

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

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

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

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

— Том Элмор
источник
Это решающий аргумент. Верхний ответ объясняет это, но очень кратко - спасибо за расширение.
— jlb
10

Вы можете создать общее промежуточное ПО внутри своего 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]}
    ],
    ...
}
— Якуб Свирко
источник
Вы когда-нибудь превращали его в настоящую упаковку? Я хотел бы просто установить это npm
— Akxe
Если вы хотите подавить все запросы изображений, просто проверьте, req.headers.acceptсодержит ли он, imageи верните 204, если это так.
— cleong
9

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

proxies: {
  '/img/generic.png': 'test/assets/img/generic.png'
}
— the_karel
источник
3

Чтобы исправить это, 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'
}
— Борис Якубчик
источник
3

Несмотря на то, что это старая ветка, мне потребовалось пару часов, чтобы фактически обработать мое изображение из кармы, чтобы устранить 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

Структура проекта VSCode с расположением ресурсов karma.conf.js

— Джефф
источник
Это понимание было особенно полезно для меня, чтобы понять, что есть разница (с точки зрения Кармы) для обслуживания файлов в базовой области и за пределами базовой области (что в конечном итоге было моей проблемой), что затем привело меня к github.com/karma -runner / карма / вопросы / 2703 . Итак, спасибо за это разъяснение.
— dpmott
2

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

proxies: {
  '/bower_components/': config.root + '/client/bower_components/'
}
— Gucu112
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.