如何在业力单位测试期间修复404个图像的警告

StackOverflow https://stackoverflow.com//questions/21067710

题

我使用咕噜咕噜/ karma / phantomjs / jasmine测试我的指令之一（Angularjs）。我的测试运行罚款

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

但我确实得到了这些404s 

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

虽然它们无效，但它们会为日志输出添加噪点。有没有办法解决这个问题 ？（当然没有改变业力的Loglevel，因为我要看到它们）

有帮助吗？

解决方案

是因为您需要配置Karma加载，然后在请求时为它们提供服务;）

在您的karma.conf.js文件中，您应该已经定义了已定义的文件和/或模式：

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

],

// ...
.

你可以看一下这里更多信息:)

编辑：如果使用nodejs web-server运行您的应用程序，则可以将此添加到Karma.conf.js：

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

edit2：如果您不使用或想要使用另一个服务器，您可以定义本地代理，但随着业力不提供对端口的访问，动态地，如果Karma从另一个开始港口比9876（默认），你仍然会得到那些烦人的404 ... 

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

相关问题： https://github.com/karma-runner/karma/issues/872>

其他提示

我的困惑是我的难题是'基础'虚拟文件夹。如果您不知道需要包含在固定装置的资产路径中，您将难以调试。

oS-per 配置文档

默认情况下，所有资产都在 http：// localhost：[端口] / base /

注意：其他版本可能不是真的 - 我在0.12.14，它为我工作，但0.10文档不提。

指定文件模式：

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

我可以在我的夹具中使用它：

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

，我在那一点不需要代理。

基于@ glepretre的答案，我创建了一个空的.png文件并将其添加到配置中以隐藏404警告：

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

您可以在Karma.conf.js内创建通用中间件 - 朝上顶部，但为我的工作是

首先定义虚拟1px图像（我使用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'
  }
};
.

然后定义中间件功能：

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

应用中间件在您的Karma conf

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

如果在配置文件中有root路径，您也可以使用这样的内容：

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

修复，在您的karma.conf.js中，请务必使用代理程序指向服务的文件：

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'
}
.

即使它是一个旧的线程，我花了几个小时才能实际上得到我的形象，实际上是从业力的服务，以消除404.评论只是不够彻底。我相信我可以用这个屏幕截图澄清解决方案。基本上，许多评论缺失的一件事是代理价值必须从“/ base”开始，即使基站不在任何文件夹图案中，也不是我的请求。

（没有前向斜线的“基础”导致业力返回400个不良请求）

现在在运行 ng test 后，我可以从URL成功服务“./src/assets/favicon.png”： http：// localhost：9876 / test / dummy.png

在我的项目中，我使用以下NPM包版本：

  • Karma V4.3.0
  • Jasmine-Core V3.2.1
  • Karma-Jasmine V1.1.2
  • @ Angular / Cli V8.3.5
  • Angular V8.2.7

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top