我使用grunt / 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();
}));
....
});
但我确实得到了这些404
WARN [web-server]: 404: /img1.png
WARN [web-server]: 404: /img2.png
...
虽然它们什么也不做,但它们确实会在日志输出中添加噪音。有没有办法来解决这个问题 ? (当然,不改变业力的logLevel,因为我确实希望看到它们)
答案 0 :(得分:101)
这是因为您需要将业力配置为加载,然后在请求时提供它们;)
在你的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: [
],
// ...
您可以查看here了解更多信息:)
编辑:如果您使用nodejs网络服务器来运行您的应用,您可以将其添加到karma.conf.js:
proxies: {
'/path/to/img/': 'http://localhost:8000/path/to/img/'
},
EDIT2:如果您不使用或想要使用其他服务器,您可以定义本地代理但由于Karma无法提供对正在使用的端口的访问,如果karma在另一个上启动端口比9876(默认),你仍然会得到那些恼人的404 ......
proxies = {
'/images/': '/base/images/'
};
答案 1 :(得分:16)
按照the configuration documentation
默认情况下,所有资产都在http://localhost:[PORT]/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" />
那时我并不需要代理。
答案 2 :(得分:8)
根据@ glepretre的回答,我创建了一个空的.png文件并将其添加到配置中以隐藏404警告:
proxies: {
'/img/generic.png': 'test/assets/img/generic.png'
}
答案 3 :(得分:7)
您可以在karma.conf.js中创建通用中间件 - 超过顶部,但为我做了工作
首先定义虚拟1px图像(我使用过base64):
set
然后定义中间件功能:
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'
}
};
在karma conf中应用中间件
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();
}
答案 4 :(得分:2)
如果您的配置文件中有某个根路径,您也可以使用以下内容:
proxies: {
'/bower_components/': config.root + '/client/bower_components/'
}
答案 5 :(得分:1)
要解决此问题,请确保您的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'
}
答案 6 :(得分:0)
尽管它的线程很旧,但花了我几个小时才使我的形象真正从业力中消失,以消除404。评论还不够彻底。我相信我可以通过此屏幕截图阐明解决方案。本质上,很多评论都缺少一件事,就是 proxy值必须以“ / base” 开头,即使base不在我的任何文件夹路径中,也不在我的请求中。
(没有正斜杠的“基本”导致业力返回400错误请求)
现在,在运行 ng测试之后,我可以通过以下网址成功投放“ ./src/assets/favicon.png”:http://localhost:9876/test/dummy.png
在我的项目中,我使用以下npm软件包版本: