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

84

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ć)

javascript  unit-testing  angularjs  http-status-code-404  karma-runner 
— Jeanluca Scaljeri
źródło
Czy utrzymuje się w innej przeglądarce? Wiem, że są znane problemy z błędami 404 dla tego typu wywołań w FF.
— Nicholas Hazel,
to musi być fantomjs. Sprawdziłem Chrome, który pokazuje również 404. Pamiętaj, że są to ostrzeżenia, a nie błędy!
— Jeanluca Scaljeri
Czy używanie ng-src pomaga?
— Eitan Peer
niezła próba, ale daje ten sam wynik
— Jeanluca Scaljeri

Odpowiedzi:

109

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

— glepretre
źródło
4
W moim przypadku te obrazy nie istnieją. Rozwiązanie, które zapewniasz, zakłada, że ​​pliki istnieją, prawda?
— Jeanluca Scaljeri
Tak oczywiście! Myślę, że źle zrozumiałem, warto mieć błędy 404 dla nieistniejących plików, prawda? Chcesz ukryć ostrzeżenia związane z obrazami? Bez zmiany poziomu dziennika nie widzę rozwiązania, co więcej, które ukrywałoby inne ostrzeżenia, co byłoby ryzykowne. Dlaczego na przykład nie utworzyć pustych plików .png w folderze „test / img”? :)
— glepretre
Z jakiegoś powodu nie mogę zmusić go do pracy. Jaka jest dokładnie relacja między adresem URL używanym w kodzie HTML a wzorcem w karma.conf.js? Na przykład, jeśli mam obraz w pliku test / asset / img.png , jaki powinien być adres URL?
— Jeanluca Scaljeri
1
Przepraszam, to rozwiązanie powinno działać, ale wciąż otrzymuję błędy 404. Uważam, że jest to związane z brakiem implementacji w Karmie i jestem zaskoczony, że jesteśmy jedynymi, którzy to dostają. Znalazłem (trochę hackowy) sposób, aby to zadziałało, ale będziesz musiał uruchomić inny (internetowy) serwer równolegle z Karmą. Zmienię odpowiedź. ;)
— glepretre
3
W odpowiedzi na EDIT2, jeśli uruchomisz karmę na niestandardowym porcie, możesz uniknąć 404, łącząc się z pełnym identyfikatorem URI serwera karmy: (zakładając port: 9999)proxies = { '/images/': 'http://localhost:9999/base/images/' };
— Josh
18

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.

— Tom Elmore
źródło
To jest klinczer. Najlepsza odpowiedź wyjaśnia to, ale bardzo krótko - dzięki za rozszerzenie.
— jlb
10

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]}
    ],
    ...
}
— Jakub Żwirko
źródło
Czy zdarzyło Ci się zrobić z tego rzeczywistą paczkę? Chciałbym po prostu zainstalować to npm
— Akxe
Jeśli chcesz pominąć wszystkie żądania obrazów, po prostu sprawdź, req.headers.acceptczy zawiera imagei zwróć 204, jeśli tak.
— cleong
9

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'
}
— the_karel
źródło
3

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'
}
— Boris Yakubchik
źródło
3

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

Struktura projektu VSCode z lokalizacjami zasobów karma.conf.js.

— Jeff
źródło
Ten wgląd był dla mnie szczególnie pomocny, aby zrozumieć, że istnieje różnica (z punktu widzenia Karmy) w udostępnianiu plików w obszarze podstawowym i spoza obszaru podstawowego (co ostatecznie było moim problemem), co doprowadziło mnie do github.com/karma -runner / karma / issue / 2703 . Tak więc dziękuję za to wyjaśnienie.
— dpmott
2

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/'
}
— Gucu112
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.