як виправити 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: [

],

// ...

Ви можете подивитися тут для отримання додаткової інформації :)

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

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

Відповідно до документації конфігурації

За замовчуванням усі активи обслуговуються за адресою 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 - трохи зверху, але зробило це за мене

Спочатку визначте фіктивні зображення розміром 1 піксель (я використовував 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]}
    ],
    ...
}

На основі відповіді @ 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 я можу успішно обслуговувати "./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/'
}