Cómo corregir 404 advertencias para imágenes durante las pruebas de la unidad de karma

Question

Soy una unidad probando una de mis directivas (angularjs) con Grunt / Karma / Phantomjs / Jasmine.Mis pruebas se ejecutan 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();
    }));
    ....
});

pero obtengo estos 404s

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

Aunque no hacen nada, sí agregan ruido a la salida de registro.¿Hay alguna manera de arreglar esto?(sin cambiar el loglo de Karma, por supuesto, porque quiero verlos)

Answer 1

es porque necesita configurar karma para que se cargue y luego los sirva cuando se solicite;)

En su archivo karma.conf.js ya debería haber definido archivos y / o patrones como:

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

],

// ...

Puede tener una apariencia aquí para más información :)

Editar: Si usa un servidor web de nodejs para ejecutar su aplicación, puede agregar esto a karma.conf.js:

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

Edit2: Si no usa o desea usar otro servidor, puede definir un proxy local, pero como Karma no proporciona acceso al puerto en uso, dinámicamente, si Karma comienza en otroPuerto que 9876 (predeterminado), aún obtendrá esos molestos 404 ...

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

problema relacionado: https://github.com/karma-runner/karma/issues/872

Answer 2

La pieza confusa del rompecabezas para mí fue la carpeta virtual 'BASE'.Si no sabe que debe incluirse en las rutas de activos de sus accesorios, le resultará difícil depurar.

As-por la documentación de configuración

Por defecto, todos los activos se sirven en http:// localhost: [PORT] / BASE /

NOTA: Esto puede no ser cierto para otras versiones: estoy en 0.12.14 y funcionó para mí, pero los documentos de 0.10 no lo mencionan.

Después de especificar el patrón de archivos:

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

Podría usar esto en mi accesorio:

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

y no necesitaba el proxy en ese punto.

Answer 3

Basado en la respuesta de @ Glepretre, he creado un archivo .png vacío y agregó esto a la configuración para ocultar 404 advertencias:

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

Answer 4

Puede crear middleware genérico dentro de su karma.conf.js - bit sobre la parte superior, pero hizo el trabajo por mí

Primero definen imágenes de 1px diapositivas (he usado 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'
  }
};

luego defina la función 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();
}

Aplicar middleware en su karma conf

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

Answer 5

Si tiene ruta de root en algún lugar de su archivo de configuración, también puede usar algo como este:

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

Answer 6

Para corregir, en su karma.conf.js, asegúrese de apuntar al archivo servido con sus proxies:

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

A pesar de que es un hilo viejo, me tomó un par de horas para que mi imagen realmente se sirve de karma para eliminar el 404. Los comentarios no fueron lo suficientemente profundos. Creo que puedo aclarar la solución con esta captura de pantalla. Esencialmente, la única cosa que faltaban muchos comentarios es el hecho de que el valor de proxy debe comenzar con "/ base" , aunque la base no está en ninguna de las patillas de mi carpeta, ni en mis solicitudes.

("base" sin la barra delantera resultó en karma que devuelve una solicitud de 400 malas)

Ahora después de ejecutar ng test , puedo servir con éxito "./src/assets/favicon.png" de la URL: http:// localhost: 9876 / prueba / diumy.png

En mi proyecto estoy usando las siguientes versiones de paquete NPM:

• karma v4.3.0
• jazmine-core v3.2.1
• karma-jasmine v1.1.2
• @ angular / cli v8.3.5
• angular v8.2.7