Javascript 如何修复karma单元测试期间图像的404警告
我正在使用grunt/karma/phantomjs/jasmine对我的一条指令(angularjs)进行单元测试。我的测试很顺利Javascript 如何修复karma单元测试期间图像的404警告,javascript,unit-testing,angularjs,http-status-code-404,karma-runner,Javascript,Unit Testing,Angularjs,Http Status Code 404,Karma Runner,我正在使用grunt/karma/phantomjs/jasmine对我的一条指令(angularjs)进行单元测试。我的测试很顺利 describe('bar foo', function () { beforeEach(inject(function ($rootScope, $compile) { elm = angular.element('<img bar-foo src="img1.png"/>'); scope = $rootSc
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();
}));
....
});
尽管它们什么也不做,但会给日志输出添加噪声。有办法解决这个问题吗?(当然不改变业力的日志级别,因为我确实想看到它们)这是因为你需要配置业力来加载,然后在需要时为它们服务;) 在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服务器运行应用程序,您可以将其添加到karma.conf.js:
proxies: {
'/path/to/img/': 'http://localhost:8000/path/to/img/'
},
EDIT2:如果您不使用或想使用另一台服务器,您可以定义一个本地代理,但由于Karma不提供对正在使用的端口的访问,动态地,如果Karma在9876(默认值)以外的另一个端口启动,您仍然会得到那些恼人的404
proxies = {
'/images/': '/base/images/'
};
相关问题:根据@glepretre的回答,我创建了一个空的.png文件,并将其添加到配置中以隐藏404警告:
proxies: {
'/img/generic.png': 'test/assets/img/generic.png'
}
让我困惑的是“基本”虚拟文件夹。如果您不知道需要包含在设备的资产路径中,那么您将发现很难调试 依照 默认情况下,所有资产都在 注意:这可能不适用于其他版本-我使用的是0.12.14,它对我有效,但0.10文档没有提到它 指定文件模式后:
{ pattern: 'Test/images/*.gif', watched: false, included: false, served: true, nocache: false },
我可以在我的固定装置中使用:
<img src="base/Test/images/myimage.gif" />
我当时不需要代理。如果配置文件中有根路径,也可以使用如下内容:
proxies: {
'/bower_components/': config.root + '/client/bower_components/'
}
您可以在karma.conf.js中创建通用中间件 -有点过头了,但为我做了这件事 首先定义虚拟1px图像(我使用了base64): 然后定义中间件功能:
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();
}
在你的业力形态中应用中间件
{
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
middleware: ['surpassImage404sMiddleware'],
plugins: [
...
{'middleware:surpassImage404sMiddleware': ['value', surpassImage404sMiddleware]}
],
...
}
要修复此问题,请在您的
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”开头,即使base不在我的任何文件夹路径中,也不在我的请求中 (“base”没有正斜杠导致karma返回400个错误请求) 现在,在运行了ng测试之后,我可以从url成功地提供“/src/assets/favicon.png”: 在我的项目中,我使用以下npm包版本:
- karma v4.3.0
- jasmine core v3.2.1
- karma jasmine v1.1.2
- @angular/cli v8.3.5
- 角度v8.2.7
它是否在不同的浏览器中持久存在?我知道FF中这些类型的调用存在一些已知的404错误问题。它必须是phantomjs。我检查了显示404的Chrome。请注意,它们是警告,而不是错误!使用ng src有帮助吗?很好的尝试,但在我的情况下,这些图像不存在,但有相同的结果。您提供的解决方案假定文件存在,对吗?当然可以!我想我误解了,对不存在的文件有404个错误是有道理的,对吗?是否要隐藏与图像相关的警告?如果不更改日志级别,我看不到任何解决方案,而且,这将隐藏其他警告,这将是有风险的。为什么不在“test/img”文件夹中创建空的.png文件(例如:)很抱歉,这个解决方案应该有效,但我也不断收到404个错误。我相信这与业力缺乏实现有关,我很惊讶我们是唯一得到它的人。我找到了一个(有点黑)的方法让它工作,但你需要运行另一个(网络)服务器并行的业。我将编辑我的答案作为对EDIT2的响应,如果您在自定义端口上运行karma,您可以通过链接到karma服务器的完整URI来避免404:(假设
端口:9999
)代理={'/images/':'http://localhost:9999/base/images/' };
我发现'/images/:''
实际上足以抑制警告,并且不需要设置文件。这是关键。最上面的答案解释了这一点,但非常简单-谢谢你的扩展。你有没有把它做成一个真正的包?我很想只安装npm如果你想抑制所有图像请求,只需检查req.headers。接受查看它是否包含image
,如果包含,则返回204。这一见解特别有助于我理解基本区域内的文件服务存在差异(从Karma的角度来看),从根据地以外(这最终是我的问题),这导致我。所以,谢谢你的澄清。
{
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
middleware: ['surpassImage404sMiddleware'],
plugins: [
...
{'middleware:surpassImage404sMiddleware': ['value', surpassImage404sMiddleware]}
],
...
}
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'
}