angular 4 から 7 に更新しました。コード カバレッジ レポートを生成しようとすると、「ng test」コマンドはすべてのテスト ケースを適切に実行し、すべてのテスト ケースに合格しましたが、「ng test --code-coverage」は適切なレポートを生成していません。
生成される正しいレポートは次のとおりです。 ファイル polyfills.ts
実際のレポートには、すべての .ts ファイル report と html レポートがカバレッジ フォルダーに含まれている必要があります example ファイル
デモ スクリプト src/business
設定は以下の通りです。
angular.json -
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"codeCoverage": true,
"main": "scripts/test.ts",
"karmaConfig": "karma.conf.js",
"polyfills": "demo/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
tsconfig.spec.json -
"files": [
"../scripts/test.ts",
"../demo/polyfills.ts"
],
"include": [
"**/*.spec.ts"
]
test.ts -
const context = require.context('../src', true, /\.spec\.ts$/)
修理：
次のパッケージを package.json の devDependencies に追加します。"@angular-devkit/build-ng-packagr": "~0.6.3", b. "ng-packagr": "^3.0.0-rc.2"
npm install (または yarn install) を実行します
次のように、angular.json のプロジェクトの下に src フォルダーの新しいエントリを作成します。
"ui-demo-lib": { // name of library project, in this case for UI_Reports "root": "", "sourceRoot": "src", // root path of "projectType": "library", "prefix": "lib", "architect": { "build": { "builder": "@angular-devkit/build-ng-packagr:build", "options": { "tsConfig": "src/tsconfig.featurelib.json", } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/../scripts/test.ts", "tsConfig": "src/tsconfig.spec.json", "karmaConfig": "src/../karma.conf.js", "styles": [ "demo/styles/main.scss", "node_modules/ngx-toastr/toastr.css", ], "stylePreprocessorOptions": { // specific to UI_Demo "includePaths": [ "node_modules" ] } } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "src/tsconfig.featurelib.json", "src/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } } } }
この新しいエントリに関する注意:
• Angular CLI では、プロジェクトの下のすべてのファイル パスが sourceRoot パスで始まる必要があります。例: メインの test.ts ファイルが scripts/test (親レベル) にある場合、テスト オプションのメイン属性は src/../scripts/test.ts を指す必要があります。• angular.json の projects プロパティの外で、defaultProject プロパティをデモ アプリケーションに設定してください。src/ フォルダーが ui-demo-lib の場合、demo/ フォルダーは ui-demo になります。このようにして、既存のビルド関数は壊れません。
リポジトリの test.ts ファイルで、すべてのインポートを削除し、次のものに置き換えます。
import 'core-js/es7/reflect'; import 'zone.js/dist/zone'; import 'zone.js/dist/zone-testing'; import { getTestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
すべての手順を完了したら、必要に応じて追加のインポートを 1 つずつ追加してみてください。ただし、Angular 7 のテスト環境では上記のモジュールが必要です。他のモジュールは、いずれかのゾーン ファイルが使用されている場合 (async-testing など) にのみインポートする必要があります。次のモジュールは、リポジトリに関係なく互換性がなくなりました: • zone.js/dist/jasmine-patch
注: テストを指すパスが、テスト ファイルの場所に対して相対的であることを確認してください。UI_Demo は scripts/test.ts に test.ts ファイルがあるため、require.context('../src')
- src/tsconfig.spec.json で、files 属性に以下が含まれていることを確認します。a. test.ts ファイルの場所 (相対) b. polyfills.ts ファイルの場所 (相対、通常は demo フォルダーにあります)
- package.json 内: ng-test を使用するすべてのスクリプトを ng-test –project を使用するように変更します。b. PhantomJS への参照を置き換えて、代わりに ChromeHeadless を使用します。PhantomJS は、angular CLI V7 を介したカルマでは機能しません。c. 元。ng test –browsers=PhantomJS ------- ng test --project ui-demo-lib --browsers=ChomeHeadless
- オプション - tsconfig.spec.ts で、エントリ「**/ .d.ts」を include プロパティに追加します。
- 次のコマンドをテストします。ng test --project b. ng test --project --watch=false --browsers=ChromeHeadless –code-coverage c. gulp build-inline d. ng build --aot --output-path=dist (デフォルトでデモをビルドする必要があります)