web-dev-qa-db-fra.com

comment résoudre les 404 avertissements d'images lors des tests unitaires de karma

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 logLevel du karma bien sûr, parce que je veux les voir)

javascriptunit-testingangularjshttp-status-code-404karma-runner
75
Jeanluca Scaljeri

C’est parce que vous devez configurer karma pour charger puis les servir à la demande;)

Dans votre fichier karma.conf.js, vous devriez déjà avoir des fichiers définis et/ou des motifs tels que:

// 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 ici pour plus d'infos :)

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 souhaitez pas utiliser un autre serveur, vous pouvez définir un proxy local, mais Karma ne fournissant pas l'accès au port utilisé. , dynamiquement, si le karma démarre sur un autre port que 9876 (par défaut), vous aurez toujours ces 404 ennuyeux ...

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

Problème lié: https://github.com/karma-runner/karma/issues/872

103
glepretre

La pièce déroutante du puzzle pour moi était le dossier virtuel 'base'. Si vous ne savez pas que cela doit être inclus dans les chemins d'accès aux ressources de vos appareils, vous aurez du mal à déboguer.

As-per la documentation de configuration

Par défaut, tous les actifs sont servis à http: // localhost: [PORT]/base /

Note: cela peut ne pas être vrai pour les autres versions - je suis sur 0.12.14 et cela a fonctionné pour moi mais les documents de 0.10 ne le mentionnent pas.

Après avoir spécifié le modèle de fichiers:

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

Je pourrais utiliser ceci dans mon appareil:

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

Et je n'avais pas besoin du proxy à ce moment-là.

16
Tom Elmore

Vous pouvez créer un middleware générique dans votre karma.conf.js - un peu au-dessus, mais avez fait le travail pour moi

Commencez par définir des images factices 1px (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 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();
}

Appliquer le middleware dans votre karma conf

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

Sur la base de la réponse de @ glepretre, j'ai créé un fichier .png vide et l'a ajouté à la configuration pour masquer 404 avertissements:

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

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/'
}
2
Gucu112

Pour réparer, dans votre karma.conf.js assurez-vous de pointer le fichier servi avec vos mandataires:

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