comment fixer 404 avertissements pour les images pendant le karma de tests unitaires

Question

Je suis de l'unité de tester un de mes directives (angularjs) à l'aide de grunt/karma/phantomjs/jasmin.Mes tests fonctionnent très 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 ne reçois ces une erreur 404

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

Bien qu'ils ne font rien, ils ne ajouter du bruit à la sortie du journal.Est-il un moyen de résoudre ce problème ?(sans changer le karma logLevel bien sûr, parce que je veux les voir)

Answer 1

En effet, vous devez configurer Karma pour charger, puis servez-les à la demande;)

Dans votre fichier karma.conf.js Vous devez déjà avoir des fichiers et / ou des motifs définis 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 avoir un look ici pour plus d'informations :)

edit: Si vous utilisez un serveur Web NodeJS pour exécuter votre application, vous pouvez ajouter ceci à karma.conf.js:

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

Edit2: Si vous n'utilisez pas ou que vous n'utilisez pas un autre serveur, vous pouvez définir un proxy local, mais que Karma ne donne pas accès au port utilisé, de manière dynamique si Karma commence à une autrePort que 9876 (par défaut), vous obtiendrez toujours ces ennuyeux 404 ...

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

problème connexe: https://github.com/karma-runner/karma/issues/872

Answer 2

Le morceau déroutant du puzzle pour moi était le dossier virtuel "base".Si vous ne savez pas que cela doit être inclus dans les chemins d'actifs de vos appareils, vous trouverez du mal à déboguer.

As-par La documentation de configuration

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

Remarque: Cela peut ne pas être vrai pour d'autres versions - je suis sur 0.12.14 et cela a fonctionné pour moi, mais les 0,10 documents 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 luminaire:

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

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

Answer 3

Basé sur la réponse de @ glepretre, j'ai créé un fichier .png vide et ajouté ceci à la configuration pour masquer 404 avertissements:

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

Answer 4

Vous pouvez créer des middleware génériques dans votre karma.conf.js - bit sur le dessus mais le travail m'a fait pour moi

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

Définir ensuite 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]}
    ],
    ...
}

Answer 5

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

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

Answer 6

De fixer, dans votre karma.conf.js assurez-vous de pointer vers le fichier servi avec votre 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'
}

Answer 7

Même si c'est un vieux fil, il m'a fallu quelques heures pour que mon image soit réellement servie de Karma pour éliminer le 404. Les commentaires n'étaient tout simplement pas suffisamment approfondis. Je crois que je peux clarifier la solution avec cette capture d'écran. Essentiellement, la seule chose que de nombreux commentaires manquaient est le fait que la valeur proxy doit commencer par "/ base" , même si la base n'est dans aucun de mon dossier de cheminement, ni dans mes demandes.

("base" sans la barre oblique a entraîné une nouvelle demande de karma,

Maintenant après avoir exécuté NG Test , je peux servir avec succès "./src/assets/favicon.png" de l'URL: http:// localhost: 9876 / test / manneau.png

Dans mon projet, j'utilise les versions de forfait NPM suivantes:

• KARMA V4.3.0
• Jasmine-Core v3.2.1
• KARMA-JASMINE V1.1.2
• @ Angular / CLI V8.3.5
• angulaire V8.2.7