javascript - quitar - solucionar error 404 not found

cómo arreglar 404 advertencias para imágenes durante la prueba de unidad de karma

Question

Estoy probando una unidad de mis directivas (angularjs) usando grunt / karma / phantomjs / jazmín. Mis pruebas funcionan 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 404

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 logLevel de karma, por supuesto, porque sí quiero verlos)

Answer 1

Basado en la respuesta de @ glepretre, creé un archivo .png vacío y lo agregué a la configuración para ocultar las advertencias 404:

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

Answer 2

Esto se debe a que necesita configurar el karma para cargar y luego atenderlo cuando lo solicite;)

En su archivo karma.conf.js ya debería tener archivos y / o patrones definidos 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: [

],

// ...

Puedes echar un vistazo here para más información :)

EDITAR: si usa un servidor web 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 quiere usar otro servidor, puede definir un proxy local, pero como Karma no proporciona acceso al puerto en uso, dinámicamente, si el karma comienza en otro puerto distinto de 9876 (predeterminado), seguirá obtener esos 404 molestos ...

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

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

Answer 3

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 dispositivos, le resultará difícil depurar.

Según 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 0.10 docs 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 momento.

Answer 4

Puedes crear un middleware genérico dentro de tu karma.conf.js - un poco por encima, pero me hizo el trabajo

Primero defina imágenes ficticias de 1px (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 conf de karma

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

Answer 5

Si tiene una ruta raíz en algún lugar de su archivo de configuración, también puede usar algo como esto:

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