카르마 장치 테스트 중 이미지에 대한 경고 404개를 수정하는 방법

카르마 장치 테스트 중 이미지에 대한 경고 404개를 수정하는 방법

유닛에서 Grunt/Karma/Phantomjs/jasmin을 사용하여 지시(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
...

아무것도 하지 않지만 로그 출력에 노이즈가 추가됩니다.이 문제를 해결할 방법이 있습니까? (물론 보고 싶기 때문에 카르마의 log Level을 변경하지 않고)

이는 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 웹 서버를 사용하여 앱을 실행하는 경우 karma.conf.js에 추가할 수 있습니다.

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

EDIT2 : 다른 서버를 사용하지 않거나 사용하는 경우 로컬 프록시를 정의할 수 있지만 카르마는 사용 중인 포트에 대한 액세스를 제공하지 않으므로 카르마가 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();
}

업보에 미들웨어를 적용

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

@glepretre의 답변을 바탕으로 404 경고를 숨기기 위해 빈 .png 파일을 만들고 이를 설정에 추가했습니다.

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'에서 슬래시가 없는 경우 카르마가 400 BAD REQUEST를 반환함)

ng 테스트를 실행하면http://localhost:9876/test/dummy.png에서 ".src/assets/favicon.png"을 정상적으로 처리할 수 있습니다.

프로젝트에서는 다음 npm 패키지 버전을 사용하고 있습니다.

• 카르마 v4.3.0
• 재스민 코어 v3.2.1
• 업보 버전 1.1.2
• @syslog/cli v8.3.5
• 각도 v8.2.7

컨피규레이션파일 어딘가에 루트 패스가 있는 경우는, 다음과 같은 것도 사용할 수 있습니다.

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

중인 하여 URL을 반환할 수 .200"$"로 시작하는 URL의 경우 Angular 자신의 URL에서 가져옵니다.

카르마.conf.displays

module.exports = function (config) {
  config.set({
    middleware: ['fake-url'],
    plugins: [
      // ...
      {
        'middleware:fake-url': [
          'factory',
          function () {
            // Middleware that avoids triggering 404s during tests that need to reference
            // image paths. Assumes that the image path will start with `/$`.
            // Credit: https://github.com/angular/components/blob/59002e1649123922df3532f4be78c485a73c5bc1/test/karma.conf.js
            return function (request, response, next) {
              if (request.url.indexOf('/$') === 0) {
                response.writeHead(200);
                return response.end();
              }

              next();
            };
          },
        ],
      },
    ]
  });
}

foo.spec.ts

img.src = '/$/foo.jpg'; // No 404 warning! :-)

언급URL : https://stackoverflow.com/questions/21067710/how-to-fix-404-warnings-for-images-during-karma-unit-testing