カルマユニットテスト中に画像の404警告を修正する方法


84

grunt / karma / phantomjs / jasmineを使用して、ディレクティブの1つ(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を変更せずに、見たいので)


別のブラウザで持続しますか?FFでのこれらのタイプの呼び出しの404エラーにはいくつかの既知の問題があることを私は知っています。
ニコラスヘーゼル2014年

それはphantomjsでなければなりません。404も表示されているChromeを確認しました。これらは警告であり、エラーではないことに注意してください。
Jeanluca Scaljeri 2014年

ng-srcの使用は役に立ちますか?
Eitan Peer

良い試みですが、同じ結果が得られます
Jeanluca Scaljeri 2014年

回答:


109

これは、カルマをロードして要求されたときにそれらを提供するように構成する必要があるためです;)

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/'
};

関連する問題:https//github.com/karma-runner/karma/issues/872


4
私の場合、これらの画像は存在しません。あなたが提供する解決策は、ファイルが存在することを前提としていますよね?
Jeanluca Scaljeri 2014年

はい、もちろん!私は誤解していると思います。存在しないファイルに対して404エラーがあるのは理にかなっていますよね?画像に関連する警告を非表示にしますか?ログレベルを変更しないと、さらに、リスクのある他の警告を隠す解決策はありません。たとえば、「test / img」フォルダに空の.pngファイルを作成してみませんか?:)
glepretre 2014年

どういうわけか私はそれを動かすことができません。HTMLで使用されているURLとkarma.conf.jsのパターンの関係は正確には何ですか?たとえば、test / assets / img.pngに画像がある場合、URLはどうなりますか?
Jeanluca Scaljeri 2014年

1
申し訳ありませんが、このソリューションは機能するはずですが、404エラーも発生し続けました。これはカルマでの実装の欠如に関連していると私は信じており、私たちだけがそれを取得していることに驚いています。これを機能させるための(少しハッキーな)方法を見つけましたが、Karmaと並行して別の(Web)サーバーを実行する必要があります。答えを編集します。;)
glepretre 2014年

3
EDIT2に応答して、カスタムポートでカルマを実行する場合、カルマサーバーの完全なURIにリンクすることで404を回避できます:(仮定port: 9999proxies = { '/images/': 'http://localhost:9999/base/images/' };
Josh

18

私にとってパズルの紛らわしい部分は、「ベース」仮想フォルダーでした。それをフィクスチャのアセットパスに含める必要があるかどうかわからない場合は、デバッグが難しいことがわかります。

構成ドキュメントに従って

デフォルトでは、すべてのアセットは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" />

その時点ではプロキシは必要ありませんでした。


これがクリンチャーです。一番上の答えはこれを説明していますが、非常に簡単です-拡大してくれてありがとう。
jlb 2016

10

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]}
    ],
    ...
}

実際のパッケージにしたことはありますか?私はちょうどNPMこれをインストールするのが大好きだ
Akxe

すべての画像リクエストを抑制したいreq.headers.accept場合は、含まれているかどうかを確認し、含まれているimage場合は204を返します。
cleong

9

@glepretreの回答に基づいて、空の.pngファイルを作成し、これを構成に追加して404警告を非表示にしました。

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

3

修正するには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'
}

3

古いスレッドですが、404を排除するために、実際にカルマから画像を提供するのに数時間かかりました。コメントは十分ではありませんでした。このスクリーンショットで解決策を明確にできると思います。基本的に、多くのコメントが欠落していることの1つは、ベースがフォルダーパスのいずれにも含まれておらず、リクエストにも含まれていない場合でも、プロキシ値は「/ 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

karma.conf.jsアセットの場所を持つVSCodeプロジェクト構造


この洞察は、ベースエリア内とベースエリア外(最終的には私の問題)でファイルを提供することには(カルマの観点から)違いがあることを理解するのに特に役立ちました。それが私をgithub.com/karmaに導きました。 -ランナー/カルマ/問題/ 2703。それで、この説明に感謝します。
dpmott

2

構成ファイルのどこかにルートパスがある場合は、次のようなものを使用することもできます。

proxies: {
  '/bower_components/': config.root + '/client/bower_components/'
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.