jak naprawić 404 ostrzeżenia dotyczące obrazów podczas testowania jednostki karmy

Testuję jednostkowo jedną z moich dyrektyw (angularjs), używając grunt / karma / phantomjs / jasmine. Moje testy działają dobrze

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();
    }));
    ....
});

ale dostaję te 404

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

Chociaż nic nie robią, dodają szum do danych wyjściowych dziennika. Czy jest sposób, aby to naprawić? (oczywiście bez zmiany logu karmy Poziom, bo chcę je zobaczyć)

To dlatego, że musisz skonfigurować karmę, aby ładowała się, a następnie służyła im na żądanie;)

W swoim pliku karma.conf.js powinieneś już mieć zdefiniowane pliki i / lub wzorce, takie jak:

// 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: [

],

// ...

Możesz zajrzeć tutaj, aby uzyskać więcej informacji :)

EDYCJA: Jeśli używasz serwera internetowego nodejs do uruchamiania aplikacji, możesz dodać to do karma.conf.js:

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

EDIT2: Jeśli nie używasz lub nie chcesz używać innego serwera, możesz zdefiniować lokalne proxy, ale ponieważ Karma nie zapewnia dostępu do używanego portu, dynamicznie, jeśli karma rozpocznie się na innym porcie niż 9876 (domyślnie), nadal dostać te irytujące 404 ...

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

Powiązany problem: https://github.com/karma-runner/karma/issues/872

Mylącym elementem układanki był dla mnie „podstawowy” wirtualny folder. Jeśli nie wiesz, że musi to być uwzględnione w ścieżkach zasobów Twoich urządzeń, będzie Ci trudno debugować.

Zgodnie z dokumentacją konfiguracji

Domyślnie wszystkie zasoby są udostępniane pod adresem http: // localhost: [PORT] / base /

Uwaga: może to nie być prawdą w przypadku innych wersji - jestem na 0.12.14 i zadziałało dla mnie, ale dokumenty 0.10 nie wspominają o tym.

Po określeniu wzorca plików:

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

Mógłbym użyć tego w moim urządzeniu:

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

W tym momencie nie potrzebowałem proxy.

Możesz stworzyć ogólne oprogramowanie pośredniczące w swoim karma.conf.js - trochę przesadzone, ale wykonało pracę za mnie

Najpierw zdefiniuj fałszywe obrazy 1px (użyłem 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'
  }
};

Następnie zdefiniuj funkcję oprogramowania pośredniego:

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();
}

Zastosuj oprogramowanie pośredniczące w konfiguracji karmy

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

Na podstawie odpowiedzi @ glepretre utworzyłem pusty plik .png i dodałem go do konfiguracji, aby ukryć ostrzeżenia 404:

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

Aby to naprawić, karma.conf.jspamiętaj, aby wskazać udostępniony plik z Twoimi serwerami proxy:

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'
}

Mimo że jest to stary wątek, zajęło mi kilka godzin, zanim mój obraz faktycznie został obsłużony z karmy, aby wyeliminować 404. Komentarze nie były po prostu wystarczająco szczegółowe. Wierzę, że mogę wyjaśnić rozwiązanie za pomocą tego zrzutu ekranu. Zasadniczo jedyną rzeczą, której brakowało w wielu komentarzach, jest fakt, że wartość proxy musi zaczynać się od „/ base” , mimo że base nie znajduje się w żadnej ze ścieżek do mojego folderu, ani nie jest w moich żądaniach.

(„podstawa” bez ukośnika w przód skutkowała zwróceniem przez karmę 400 ZŁEJ ŻĄDANIA)

Teraz po uruchomieniu testu ng mogę z powodzeniem udostępniać plik „./src/assets/favicon.png” z adresu URL: http: // localhost: 9876 / test / dummy.png

W moim projekcie używam następujących wersji pakietów npm:

• karma v4.3.0
• Jasmine-core v3.2.1
• karma-jasmine v1.1.2
• @ angular / cli v8.3.5
• kątowe v8.2.7

Jeśli masz ścieżkę główną gdzieś w pliku konfiguracyjnym, możesz również użyć czegoś takiego:

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