javascript - comment réparer les 404 avertissements pour les images lors des tests unitaires de karma




unit-testing angularjs (4)

Basé sur la réponse de @ glepretre, j'ai créé un fichier .png vide et l'ai ajouté à la config pour cacher les 404 avertissements:

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

https://code.i-harness.com

Je suis en train de tester une de mes directives (angularjs) en utilisant grunt / karma / phantomjs / jasmine. Mes tests fonctionnent bien

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

mais je reçois ces 404

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

Bien qu'ils ne fassent rien, ils ajoutent du bruit à la sortie du journal. Y'a t'il un moyen d'arranger cela ? (sans changer le niveau de log du karma bien sûr, parce que je veux les voir)


C'est parce que vous devez configurer le karma pour le charger puis le servir quand vous le souhaitez;)

Dans votre fichier karma.conf.js, vous devriez déjà avoir défini des fichiers et / ou des modèles comme:

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

],

// ...

Vous pouvez jeter un oeil here pour plus d'informations :)

EDIT: Si vous utilisez un serveur web nodejs pour exécuter votre application, vous pouvez l'ajouter à karma.conf.js:

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

EDIT2: Si vous n'utilisez pas ou ne voulez pas utiliser un autre serveur, vous pouvez définir un proxy local mais comme Karma ne fournit pas l'accès au port utilisé dynamiquement, si le karma démarre sur un autre port que 9876 (par défaut), vous obtenir ces ennuyeux 404 ...

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

Numéro associé: https://github.com/karma-runner/karma/issues/872


Si vous avez un chemin racine quelque part dans votre fichier de configuration, vous pouvez également utiliser quelque chose comme ceci:

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

Vous pouvez créer un middleware générique à l'intérieur de votre karma.conf.js - un peu par-dessus, mais j'ai fait le travail pour moi

Définissez d'abord des images 1px factices (j'ai utilisé 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'
  }
};

Puis définissez la fonction de middleware:

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

Appliquez le middleware dans votre karma conf

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




karma-runner