wake-up-neo.com

wie 404 Warnungen für Bilder während des Karma-Unit-Tests behoben werden

Ich teste eine meiner Anweisungen (Angular Js) mit Grunzen/Karma/Phantom Js/Jasmin. Meine Tests laufen gut

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

aber ich bekomme diese 404s

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

Obwohl sie nichts tun, fügen sie der Protokollausgabe Rauschen hinzu. Gibt es eine Möglichkeit, dies zu beheben? (ohne karmas logLevel natürlich zu ändern, weil ich sie sehen will)

75

Das liegt daran, dass Sie Karma konfigurieren müssen, um es zu laden, und sie dann bedienen müssen, wenn Sie dazu aufgefordert werden;)

In Ihrer karma.conf.js-Datei sollten Sie bereits Dateien und/oder Muster wie die folgenden definiert haben:

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

],

// ...

Sie können einen Blick werfen hier für weitere Informationen :)

BEARBEITEN: Wenn Sie einen nodejs-Webserver zum Ausführen Ihrer App verwenden, können Sie dies zu karma.conf.js hinzufügen:

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

EDIT2: Wenn Sie keinen anderen Server verwenden oder verwenden möchten, können Sie einen lokalen Proxy definieren, da Karma jedoch keinen Zugriff auf den verwendeten Port bietet Dynamisch, wenn Karma auf einem anderen Port als 9876 (Standard) startet, erhalten Sie immer noch die nervigen 404 ...

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

Zugehöriges Problem: https://github.com/karma-runner/karma/issues/872

103
glepretre

Das verwirrende Teil des Puzzles war für mich der virtuelle Basisordner. Wenn Sie nicht wissen, dass dies in den Asset-Pfaden Ihrer Geräte enthalten sein muss, ist das Debuggen schwierig.

As-per die Konfigurationsdokumentation

Standardmäßig werden alle Assets unter http: // localhost: [PORT]/base / bereitgestellt

Hinweis: Dies gilt möglicherweise nicht für andere Versionen - ich bin auf 0.12.14 und es hat für mich funktioniert, aber die 0.10-Dokumente erwähnen es nicht.

Nach dem Festlegen des Dateimusters:

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

Ich könnte dies in meinem Gerät verwenden:

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

Und ich brauchte den Proxy zu diesem Zeitpunkt nicht.

16
Tom Elmore

Sie können generische Middleware in Ihrer karma.conf.js erstellen - etwas übertrieben, haben aber den Job für mich erledigt

Definieren Sie zuerst Dummy-1px-Bilder (ich habe base64 verwendet):

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

Definieren Sie dann die Middleware-Funktion:

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

Wenden Sie Middleware in Ihrem Karma-Conf an

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

Basierend auf der Antwort von @ glepretre habe ich eine leere .png-Datei erstellt und diese zur Konfiguration hinzugefügt, um 404-Warnungen auszublenden:

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

Wenn Sie irgendwo in Ihrer Konfigurationsdatei einen Root-Pfad haben, können Sie auch Folgendes verwenden:

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

Zu beheben, in Ihrem karma.conf.js Stellen Sie sicher, dass Sie mit Ihren Proxys auf die bereitgestellte Datei verweisen:

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'
}
1
Boris Yakubchik