ファイル

files配列は、ブラウザに読み込まれ、Karmaによって監視および提供されるファイルを決定します。

files #

型: 配列 デフォルト値: なし (必須プロパティ) 説明: 各項目は、文字列({ pattern: "<string>" }と同等)または以下のプロパティを持つオブジェクトです。

pattern #

  • 型: 文字列
  • デフォルト値: なし (必須プロパティ)
  • 説明: マッチングに使用するパターン。パターンの解決方法については、以下を参照してください。

type #

  • 型: 文字列
  • デフォルト値: ファイル拡張子に基づいて型を自動判別します。失敗した場合はjsになります。
  • 可能な値
    • css - <link rel="stylesheet">タグを使用して読み込みます。
    • html - HTML Importsを使用して読み込みます。この機能は非推奨であり、最新のブラウザでは動作しません。
    • js - <script></script>タグを使用して読み込みます。
    • module - <script type="module"></script>タグを使用して読み込みます。
    • dom - ファイルの内容をページにインラインで埋め込みます。これは、例えば、HTMLとJSを組み合わせたコンポーネントをテストする場合に使用できます。
  • 説明: 型は、ファイルを読み込むメカニズムを決定します。

watched #

  • 型: ブール値
  • デフォルト値: true
  • 説明: autoWatchtrueの場合、watchedがtrueに設定されているすべてのファイルが変更の監視対象になります。

included #

  • 型: ブール値

  • デフォルト値: true

  • 説明: ファイルを<script>タグを使用してブラウザに読み込むべきですか?Require.jsなどを使用して手動で読み込む場合はfalseを使用します。

    複数のパターンが異なるincludeプロパティで同じファイルをカバーしている場合、最も具体的なパターンが優先されます。

    パターンの具体度は6タプルで定義されます。タプルが大きいほど、具体度が低くなります: (nglob parts, nglob star, nstar, next glob, nrange, noptional)。タプルは辞書順で比較されます。

    nglob partsは、ブラケットセクションが展開された後のパターンの数です。例えば、パターン{0...9}nglob parts=10になります。タプルの残りの部分は、各展開されたパターンのうち最も非具体的なものとして決定されます。

served #

  • 型: ブール値
  • デフォルト値: true
  • 説明: Karmaのウェブサーバーによってファイルを提供する必要がありますか?

nocache #

  • 型: ブール値
  • デフォルト値: false
  • 説明: Karmaのウェブサーバーによる各リクエストで、ファイルがディスクから提供される必要がありますか?

integrity #

  • 型: 文字列
  • デフォルト値: undefined
  • 説明: パターンが絶対URLの場合、リソースを読み込む<script>または<link>タグにintegrity HTML属性の値を設定します。

パターンマッチングとbasePath #

  • すべての相対パターンの解決には、まずbasePathが使用されます。
  • basePathが相対パスである場合、設定ファイルのあるディレクトリを基準に解決されます。
  • 最終的に、すべてのパターンはglobを使用してファイルに解決されるため、test/unit/**/*.spec.jsのようなminimatch式を使用できます。

順序 #

  • パターンの順序は、ファイルがブラウザに読み込まれる順序を決定します。
  • 単一のパターンに一致する複数のファイルは、アルファベット順にソートされます。
  • 各ファイルは正確に一度だけ読み込まれます。複数のパターンが同じファイルに一致する場合、最初の1つのパターンにのみ一致した場合と同じように読み込まれます。

プリプロセッサ変換 #

プリプロセッサの設定によっては、読み込まれたファイルが変換され、ネイティブ形式で利用できなくなる可能性があります。例えば、html2jsプリプロセッサが有効になっている場合、実際の.htmlファイルは提供されず、window.__html__['my.html']として利用可能になります。プリプロセッサの詳細については、こちらを参照してください。

完全な例 #

さまざまなオプションを示す完全な例を以下に示します。

files: [

  // Detailed pattern to include a file. Similarly other options can be used
  { pattern: 'lib/angular.js', watched: false },
  // Prefer to have watched false for library files. No need to watch them for changes

  // simple pattern to load the needed testfiles
  // equal to {pattern: 'test/unit/*.spec.js', watched: true, served: true, included: true}
  'test/unit/*.spec.js',

  // this file gets served but will be ignored by the watcher
  // note if html2js preprocessor is active, reference as `window.__html__['compiled/index.html']`
  {pattern: 'compiled/index.html', watched: false},

  // this file only gets watched and is otherwise ignored
  {pattern: 'app/index.html', included: false, served: false},

  // this file will be served on demand from disk and will be ignored by the watcher
  {pattern: 'compiled/app.js.map', included: false, served: true, watched: false, nocache: true}
],

別のサーバーからのファイルの読み込み #

パターンは絶対URLにすることもできます。これにより、Karmaによって提供されないファイルを含めることができます。

config.set({
  files: [
    'https://example.com/my-lib.js',
    { pattern: 'https://example.com/my-lib', type: 'js' }
  ]
})

絶対URLには、通常のファイルパスと比較していくつかの特別なルールがあります。

  • グロビングはサポートされていません。そのため、各URLは別々のパターンとして指定する必要があります。
  • ほとんどの通常のオプションはサポートされていません。
    • watchedは常にfalseです。
    • includedは常にtrueです。
    • servedは常にfalseです。
    • nocacheは常にfalseです。

アセットの読み込み #

デフォルトでは、すべてのアセットはhttp://localhost:[PORT]/base/で提供されます。

画像を読み込む例

files: [
  {pattern: 'test/images/*.jpg', watched: false, included: false, served: true, nocache: false}
],

パターンは、指定された画像アセットに一致するglobです。画像はテストではないため、watchedとincludedは必要ありません。ただし、ブラウザに提供する必要があります。

この場合、画像はhttp://localhost:[PORT]/base/test/images/[MY IMAGE].jpgでアクセスできます。

URLのbaseは、basePathを参照していることに注意してください。baseを置き換えるまたは独自に提供する必要はありません。

さらに、プロキシを使用できます。

proxies: {
  "/img/": "http://localhost:8080/base/test/images/"
},

これで、test/images内の画像はhttp://localhost:8080/img/[MY IMAGE].jpgで取得できます。

使用するポートに8080を変更してください。

プロトコル、ホスト名、ポートを指定せずにプロキシを使用することもできます。

proxies: {
  "/img/": "/base/test/images/"
},

Webサーバーの機能 #

  • 範囲リクエスト.
  • ファイルのメモリ内キャッシュ。
  • ファイルの更新を監視します。
  • ファイルパスを変更するためのプロキシ。
  • カスタムミドルウェアのサポート (middleware設定オプション)。