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
...
아무것도하지 않지만 로그 출력에 노이즈를 추가합니다. 이 문제를 해결할 방법이 있습니까? (당연히 karma의 logLevel을 변경하지 않고,보고 싶습니다.)
답변
카르마를 구성하여로드 한 다음 요청시 제공해야하기 때문입니다.)
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 웹 서버를 사용하여 앱을 실행하는 경우 karma.conf.js에 추가 할 수 있습니다.
proxies: {
'/path/to/img/': 'http://localhost:8000/path/to/img/'
},
EDIT2 : 다른 서버를 사용하지 않거나 사용하지 않으려면 로컬 프록시를 정의 할 수 있지만 Karma가 사용중인 포트에 대한 액세스를 동적으로 제공하지 않기 때문에 karma가 9876 (기본값)이 아닌 다른 포트에서 시작하면 여전히 그 성가신 404를 얻으십시오 …
proxies = {
'/images/': '/base/images/'
};
관련 이슈 : https://github.com/karma-runner/karma/issues/872
답변
저에게 혼란스러운 퍼즐 조각은 ‘기본’가상 폴더였습니다. 그것이 당신의 조명기의 자산 경로에 포함될 필요가 있는지 모른다면 디버깅하기가 어려울 것입니다.
-으로 당 구성 문서
기본적으로 모든 자산은 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" />
그리고 나는 그 시점에서 프록시가 필요하지 않았습니다.
답변
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]}
],
...
}
답변
@glepretre의 답변에 따라 빈 .png 파일을 만들고이를 구성에 추가하여 404 경고를 숨 깁니다.
proxies: {
'/img/generic.png': 'test/assets/img/generic.png'
}
답변
수정하려면 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”는 카르마가 400 BAD REQUEST를 반환 함)
이제 ng test를 실행 한 후 다음 URL에서 “./src/assets/favicon.png”를 성공적으로 제공 할 수 있습니다. http : // localhost : 9876 / test / dummy.png
내 프로젝트에서 다음 npm 패키지 버전을 사용하고 있습니다.
- 카르마 v4.3.0
- 재스민 코어 v3.2.1
- 카르마 재스민 v1.1.2
- @ angular / cli v8.3.5
- 각도 v8.2.7
답변
구성 파일에 루트 경로가있는 경우 다음과 같이 사용할 수도 있습니다.
proxies: {
'/bower_components/': config.root + '/client/bower_components/'
}
