web-dev-qa-db-ja.com

angular-cliで1つのテスト仕様のみを実行する方法

Angular-CLI（ベータ20）でAngular2プロジェクトをビルドしています。

選択した1つの仕様ファイルのみに対してテストを実行する方法はありますか？

私は以前、Angular2クイックスタートに基づいたプロジェクトを持っていましたが、手動で仕様をジャスミンファイルに追加できました。しかし、カルマテスト以外でこれを設定する方法や、Angular-CLIビルドでカルマテストを特定のファイルに制限する方法はわかりません。

angularjasmineangular-cli
63
Zielu

.spec.tsファイルのそれぞれには、次のようにdescribeブロックにすべてのテストがグループ化されています。

describe('SomeComponent', () => {...}

describe関数名の前にfを付けることで、この単一ブロックのみを簡単に実行できます。

fdescribe('SomeComponent', () => {...}

そのような関数がある場合、他のdescribeブロックは実行されません。ところでit => fitでも同様のことができます。また、「ブラックリスト」バージョン-xもあります。そう：

  • fdescribeおよびfitにより、onlyこの方法でマークされた関数が実行されます
  • xdescribeおよびxitにより、この方法でマークされたall but関数が実行されます
137
Tomek Sułkowski

srcフォルダー内のtest.tsファイルを構成します。

const context = require.context('./', true, /\.spec\.ts$/);

/\.spec\.ts$/をテストするファイル名に置き換えます。例：/app.component\.spec\.ts$/

これは、app.component.spec.tsに対してのみテストを実行します。

45
Aish Anu

コマンドラインから選択するファイルを制御できるようにしたい場合は、Angular 7で管理できます。

要約すると、@angular-devkit/build-angular:browserをインストールし、カスタムwebpackプラグインを作成して、テストファイルの正規表現を渡す必要があります。例えば：

angular.json-テストビルダーを@angular-devkit/build-angular:browserから変更し、カスタム構成ファイルを設定します。

...

        "test": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js"
            },
...

extra-webpack.config.js-コマンドラインから正規表現を読み取るwebpack構成を作成します。

const webpack = require('webpack');
const FILTER = process.env.KARMA_FILTER;
let KARMA_SPEC_FILTER = '/.spec.ts$/';
if (FILTER) {
  KARMA_SPEC_FILTER = `/${FILTER}.spec.ts$/`;
}
module.exports = {
  plugins: [new webpack.DefinePlugin({KARMA_SPEC_FILTER})]
}

test.ts-仕様を編集

...
// Then we find all the tests.
declare const KARMA_CONTEXT_SPEC: any;
const context = require.context('./', true, KARMA_CONTEXT_SPEC);

次に、次のように使用してデフォルトをオーバーライドします。

KARMA_FILTER='somefile-.*\.spec\.ts$' npm run test

ここのバックストーリー を文書化しました。タイプとミスリンクについては事前に謝罪します。正しい方向を示してくれた@ Aish-Anuによる上記の答えに感謝します。

5
6EQUJ5

次のように Angular CLI （ngコマンド）で特定のファイルのみをテストできます。

ng test --main ./path/to/test.ts

詳細なドキュメントは https://angular.io/cli/test にあります

これはスタンドアロンライブラリファイルでは機能しますが、angular components/services/etcでは機能しないことに注意してください。これは、angularファイルが他のファイルに依存しているためです（つまり、Angular 7のsrc/test.ts）。悲しいことに、--mainフラグは複数の引数を取りません。

4
iislucas

これはAngular 7で機能しています。これは、ngコマンドの--mainオプションに基づいています。このオプションが文書化されておらず、変更される可能性があるかどうかはわかりませんが、私にとってはうまくいきます。スクリプトセクションのpackage.jsonファイルに行を追加します。そこでng testコマンドで--mainオプションを使用して、実行する.spec.tsファイルへのパスを指定します。例えば

"test 1": "ng test --main E:/WebRxAngularClient/src/app/test/shared/my-date-utils.spec.ts",

このようなスクリプトを実行すると、スクリプトを実行できます。 npmセクションの「test 1」をクリックして、Webstormで実行します。

3
user2367418

私は、うなり声を使ってこの問題を自分で解決しました。私は下に無愛想なスクリプトを持っています。スクリプトは、特定のテストのコマンドラインパラメーターを実行してtest.tsのコピーを作成し、この特定のテスト名をそこに配置します。

これを実行するには、まず次を使用してgrunt-cliをインストールします。

npm install -g grunt-cli

Package.jsonに以下の単調な依存関係を追加します。

"grunt": "^1.0.1",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-copy": "^1.0.0",
"grunt-exec": "^2.0.0",
"grunt-string-replace": "^1.3.1"

それを実行するには、以下のgruntファイルをルートフォルダーにGruntfile.jsとして保存します。次に、コマンドラインから次のように実行します。

grunt --target=app.component

これにより、app.component.spec.tsが実行されます。

Gruntファイルは次のとおりです。

/*
This gruntfile is used to run a specific test in watch mode. Example: To run app.component.spec.ts , the Command is: 
grunt --target=app.component
Do not specific .spec.ts. If no target is specified it will run all tests.
*/
module.exports = function(grunt) {
var target = grunt.option('target') || '';
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    clean: ['temp.conf.js','src/temp-test.ts'],
    copy: {
      main: {
        files: [
             {expand: false, cwd: '.', src: ['karma.conf.js'], dest: 'temp.conf.js'},
             {expand: false, cwd: '.', src: ['src/test.ts'], dest: 'src/temp-test.ts'}
             ],
      }
    },
    'string-replace': {
          dist: {
            files: {
              'temp.conf.js': 'temp.conf.js',
              'src/temp-test.ts': 'src/temp-test.ts'
            },
            options: {
              replacements: [{
                pattern: /test.ts/ig,
                replacement: 'temp-test.ts'
              },
              {
                pattern: /const context =.*/ig,
                replacement: 'const context = require.context(\'./\', true, /'+target+'\\\.spec\\\.ts$/);'
              }]
            }
        }
    },
    'exec': {
        sleep: {
          //The sleep command is needed here, else webpack compile fails since it seems like the files in the previous step were touched too recently
          command: 'ping 127.0.0.1 -n 4 > nul',
          stdout: true,
          stderr: true
        },
        ng_test: {
          command: 'ng test --config=temp.conf.js',
          stdout: true,
          stderr: true
        }
    }
  });

  // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-string-replace');
    grunt.loadNpmTasks('grunt-exec');
  // Default task(s).
  grunt.registerTask('default', ['clean','copy','string-replace','exec']);

};
2
vanval