👶🏽 💅🏼 📯 サービスコントロールパネル。パート3.偵察 🈹 👨🏽‍🔬 ㊙️

前のパートでは、APIとフロントエンドとのインターフェースに関するストーリーを終了しました。この記事では、フロントエンド自体について説明し、通常は最後に向かって展開するトピックから始めます。テスト。

ファイル編成

手始めに、angular-cliによって形成されるプロジェクトの構造。不要なため、ファイルの一部がフィルタリングされました。

Angularの単体テストは、AngularおよびKarma自体のユーティリティであるJasmineに基づいています。これらのパッケージの説明は公式ウェブサイトで提供されているので、私はそれを複製しません。要するに、Jasmineは基本的なテストに必要な機能を提供するフレームワークです。Angularユーティリティを使用するとテスト環境を使用でき、Karmaはテストを実行できます。

テストファイル自体には、拡張子の前にspecを追加して名前が付けられます。このパターンによると：* .spec.ts Karmaはそれらを見つけます。テストの場所に関するコンセンサスはありません。すべてのアプリケーションテスト用に、テストオブジェクトと別のディレクトリに「近い」場所を許可しました。 Angularチームには、オブジェクトの隣にテストを配置するという利点があります。

そのようなテストは見つけやすいです。
アプリケーションの一部にテストがないことがすぐにわかります。
エンティティのソースコードを移動するときは、テストも移動することを忘れないでください。
エンティティのソースコードの名前を変更するとき、テストの名前も忘れないでください。

angle-cliで提案されたオプションを選択しました-テストはオブジェクトの隣にあります。

カルマのセットアップ

Angularアプリケーションをテストするためのエントリポイントは、src / test.tsファイルです。このファイルは、必要なすべてのパッケージをインポートし、* .spec.tsテンプレートを使用してテストファイルを収集し、テスト実行システム（この場合はKarma）を開始します。プロジェクト作成後のファイル自体は次のようになります。

// This file is required by karma.conf.js and loads recursively all the .spec and framework files import 'zone.js/dist/long-stack-trace-zone'; import 'zone.js/dist/proxy.js'; import 'zone.js/dist/sync-test'; import 'zone.js/dist/jasmine-patch'; import 'zone.js/dist/async-test'; import 'zone.js/dist/fake-async-test'; import { getTestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. declare const __karma__: any; declare const require: any; // Prevent Karma from running prematurely. __karma__.loaded = function () {}; // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting() ); // Then we find all the tests. const context = require.context('./', true, /\.spec\.ts$/); // And load the modules. context.keys().map(context); // Finally, start Karma to run the tests. __karma__.start();

ここで、私が遭遇した問題に注意を払いたいと思います。インポートの順序は重要であり、変更する価値はありません。そうしないと、ルートが非常に暗黙的であるエラーに対応することができます。したがって、インポートリストの最後にサードパーティのパッケージを追加し、ファイルの先頭に/ * tslint：disable * /フラグを追加してリンターを無効にするか、このファイルをその構成から除外することをお勧めします。

テストを記述する前に、それらを実行するKarmaを構成する必要があります。初期構成は次のとおりです。

 // Karma configuration file, see link for more information // https://karma-runner.github.io/1.0/config/configuration-file.html module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular/cli'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), require('@angular/cli/plugins/karma'), require('karma-mocha-reporter'), ], client:{ clearContext: false // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { reports: [ 'html', 'lcovonly' ], fixWebpackSourcePaths: true }, angularCli: { environment: 'dev' }, reporters: ['mocha'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false }); };

可能なすべてのKarma設定の説明は、議論のための別個のトピックであるため、使用するもののみに焦点を当てます。

browsers ：実行するブラウザーのリスト。完全なChromeが使用されているため、メモリ消費量の少ないChromeHeadlessを使用することを好みます。ただし、使用するにはChrome> = 59が必要であることに注意してください。
logLevel ：より詳細なログを取得するために、「スクリプトエラー」などのエラーが発生した場合にLOG_ERRORとLOG_DEBUGを使用します。許可される値は5です。
1. config.LOG_DISABLE
2. config.LOG_ERROR
3. config.LOG_WARN
4. config.LOG_INFO
5. config.LOG_DEBUG
レポーター ：メッセージと結果の表示を担当する配列。 npmjsのオープンスペースでは、ほぼすべての出力デザインを見つけることができます。私にとっては、コンソール用のkarma-mocha-reporter、ブラウザでの出力用のistanbul-thresholdを決定しました。 mochaが提供するログはコンソールにとって非常に有益であり、Istanbulはブラウザへの出力を提供してくれました（logLevel：config.LOG_DEBUGとともにブラウザの完全起動を使用します。
プラグイン 名前が示すように、これはカルマが使用するプラグインの配列です。ここでは、コードカバレッジを表示および計算するためのレポーター、ブラウザー、プラグインを見つけることができます。利用可能なプラグインのリストはこちら（https://www.npmjs.com/browse/keyword/karma-plugin）にあります。
標準構成では、 filesパラメーターはありません。そのパラメーターの値のリストは、テスト中にKarmaによってダウンロードされます。このリストを使用して、標準のテーママテリアルを追加し、そのテーマに関する警告を削除します。

アプリケーションは次のとおりです。
```
 files: [{ pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: true }],
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
```
含まれているパラメーターには、監視されているアセンブリ内のファイルが含まれます-ファイル内の変更を追跡します。

また、 プリプロセッサパラメータを使用して、APIコードカバレッジチェックをオフにします。

 preprocessors: { '!(./src/api)': ['coverage'] },

これで、準備フェーズが完了し、テストを実行できます。 angle-cliを使用して形成されたプロジェクトの場合、ng testコマンドが使用されます。これにはいくつかのオプションがありますが、そのうち--sourcemapについて言及したいと思います。名前に基づいて、このパラメーターにはテストのソースマップが含まれます。しかし、これは「XMLHttpRequest：failed to load」というエラーが原因です。このパラメーターにfalseを設定すると、この問題が解決します。

コンポーネントテスト

Angularコンポーネントの最初で最も重要なテストツールはTestBedです。彼女のアイデアは、コンポーネントモジュールと同じですが、テスト環境で作成され、アプリケーションから分離された別個のモジュールを作成することです。

TestBedを作成するには、 configureTestingModuleメソッドが呼び出され、メタデータオブジェクトが渡されます。このメソッドは、コンポーネントが元の状態になるように、各テストの前に非同期で呼び出す必要があります。 beforeEach（async（）=> {}）;というメソッドがあります。

 beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], }).compileComponents(); }));

例からわかるように、テスト用のコンポーネントの配列を宣言します（この場合は1つのみ）。将来的には、作業に必要なコンポーネントの追加、モジュール、ディレクティブ、およびパイプのインポートが可能になります。 configureTestingModuleメソッドはTestBedクラスを返します。これにより、compileComponentsなどの静的メソッドを呼び出すことができます。このメソッドは、モジュールのすべてのコンポーネントを非同期的にコンパイルし、テンプレートとスタイルを「インライン」に変換します。その後、TestBed.createComponent（）メソッドを使用して、コンポーネントインスタンスを同期的に受信できます。このメソッドはComponentFixtureのインスタンスを返します。これにより、DebugElementを介してコンポーネントとそのDOMに直接アクセスできます。

最も単純なコンポーネントテストの結果ファイル

 import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], }).compileComponents(); })); it('should create the app', async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); it(`should have as title 'app'`, async(() => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app.title).toEqual('app'); })); it('should render title in a h1 tag', async(() => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); })); });

コンポーネントコード

 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; }

コンポーネントテンプレート

 <div style="text-align:center"> <h1> Welcome to {{title}}! </h1> </div>

依存関係のあるコンポーネントのテスト

開発者は、実際のサービスを使用してはならず、テストに「スタブ」を追加する必要があるという事実に焦点を当てています。

コンポーネントコード

 import {Component} from '@angular/core'; import {SomeServiceService} from "./some-service.service"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; name: string; constructor(private someService: SomeServiceService) { this.name = this.someService.getName(); } }

テストコード：

 import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from './app.component'; import { SomeServiceService } from "./some-service.service"; const SomeServiceStub = { getName: () => 'some name' }; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], providers: [ //   { provide: SomeServiceService, useValue: SomeServiceStub } ] }).compileComponents(); })); it('token should test component with dependency', () => { //   root-injector //       ,        beforeEach const someService = TestBed.get(SomeServiceService); expect(someService.getName()).toEqual('some name'); }); // ,    inject,   ,    root-injector. //  ,      it('token should test component with dependency', inject(([SomeServiceService], (someService: SomeServiceService)) => { const someService = TestBed.get(SomeServiceService); expect(someService.getName()).toEqual('some name'); })); });

この場合、SomeServiceの動作を繰り返すオブジェクト、つまりgetNameメソッドを含むオブジェクトを使用します。実際のサービスの代わりにそれを使用するには、「stub」の値を値としてserviceおよびuseValueを指定し、providerプロパティを持つオブジェクトをプロバイダー配列に追加する必要があります。

SwaggerベースのAPIを使用しているため、サーバーと通信するためのサービスを記述する必要はありません。残っているのは、メソッドを呼び出して結果を処理することだけです。そしてここで、メソッドの実装を放棄し、インジェクターを介してサービスを取得する余裕があります。

これは、MockBackendを使用して行われます。つまり、サービスではなく、バックエンド自体を置き換えています。

コンポーネントコード

 @Component({ selector: 'app-login', templateUrl: 'login.component.html', styleUrls: ['login.component.less'] }) export class LoginComponent implements OnInit { loading: boolean; loginForm: FormGroup; error: any; constructor(private router: Router, private authService: UserService, private fb: FormBuilder, private ref: ChangeDetectorRef) { } ngOnInit() { this.loading = false; this.loginForm = this.fb.group({ login: [''], password: [''] }); } get login() { return this.loginForm.get('login'); } get password() { return this.loginForm.get('password'); } submit() { this.loading = true; this.submitted = true; //     const data = { 'login': this.loginForm.controls['login'].value, 'password': this.loginForm.controls['password'].value }; //    //    -    /home/main //      400  401 -    this.authService.signIn(data).subscribe( resp => this.router.navigateByUrl('/home/main'), error => { this.loading = false; error.status === 401 || error.status === 400 ? this.error = {errorText: error.title} : ''; this.ref.detectChanges(); } ); } }

テストコード

 class MockError extends Response implements Error { name: any; message: any; } describe('LoginComponent', () => { let component: LoginComponent; let fixture: ComponentFixture<LoginComponent>; let mockBackend: MockBackend; const authUrl = 'login_url'; const testUser = { login: 'test', password: 'test' }; const successResponse = new Response( new ResponseOptions({ status: 200, body: '' }) ); const errorResponse = new MockError( new ResponseOptions({ type: ResponseType.Error, status: 401, body: JSON.stringify({ status: 401, title: 'Unauthorized', } ) }) ); beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [LoginComponent], imports: [ FormsModule, HttpModule, RouterTestingModule.withRoutes([]), ], providers: [ AuthService, {provide: XHRBackend, useClass: MockBackend} ], }).compileComponents(); mockBackend = TestBed.get(XHRBackend); mockBackend.connections.subscribe((connection: MockConnection) => { if (connection.request.method === RequestMethod.Post) { expect(connection.request.url).toEqual(authUrl); (connection.request.getBody() === JSON.stringify(testUser)) ? connection.mockRespond(successResponse) : connection.mockError(errorResponse); } else { connection.mockError(errorResponse); } }); })); beforeEach(() => { fixture = TestBed.createComponent(LoginComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); it('should login correctly', inject([Router], (router: Router) => { const spy = spyOn(router, 'navigateByUrl'); const login = component.loginForm.controls['login']; const password = component.loginForm.controls['password']; login.setValue('test'); password.setValue('test'); fixture.detectChanges(); component.submit(); fixture.detectChanges(); const navArgs = spy.calls.first().args[0]; expect(navArgs).toEqual('/home/main'); })); it('should fail login', () => { const login = component.loginForm.controls['login']; const password = component.loginForm.controls['password']; const errorResponse = { errorText: 'Unauthorized' }; login.setValue('testad'); password.setValue('testad'); fixture.detectChanges(); component.submit(); fixture.detectChanges(); expect(component.error).toEqual(errorResponse); }); });

ログイン、フォームからのパスワードを取得し、特定のURLに送信し、リンク「home / main」をクリックするか、エラーを処理して表示するコンポーネントがあります。

サービスのスタブを使用せず、そのメソッドを実装しないために、MockBackendを使用します。MockBackendは、要求を処理し、事前定義された応答を返します。これを行うには、まずMockBackendを宣言し、予想されるURLを指定して、リクエストに含める必要があるデータを決定します。

 let mockBackend: MockBackend; const authUrl = 'login_url'; const testUser = { login: 'test', password: 'test' };

次に、答えがどのように見えるかを決定します。要求が成功すると空の応答が返され、誤った応答はステータス401とエラー名の応答を返すとします。

 const successResponse = new Response( new ResponseOptions({ status: 200, body: '' }) ); const errorResponse = new MockError( new ResponseOptions({ type: ResponseType.Error, status: 401, body: JSON.stringify({ status: 401, title: 'Unauthorized', } ) }) );

さらに、テストモジュールを構成した後、MockBackendを取得して接続をサブスクライブします。 POSTメソッドを想定し、リクエストのURLを上記で示したものに一致させます。また、要求本文が期待どおりであることを確認してください。

 mockBackend = TestBed.get(XHRBackend); mockBackend.connections.subscribe((connection: MockConnection) => { if (connection.request.method === RequestMethod.Post) { expect(connection.request.url).toEqual(authUrl); (connection.request.getBody() === JSON.stringify(testUser)) ? connection.mockRespond(successResponse) : connection.mockError(errorResponse); } else { connection.mockError(errorResponse); } });

テストで行わなければならないことは、ルーターを取得することです（リクエストが成功すると移行が行われるため）、ログイン情報を入力し、移行が完了したことを確認します。

 it('should login correctly', inject([Router], (router: Router) => { const spy = spyOn(router, 'navigateByUrl'); const login = component.loginForm.controls['login']; const password = component.loginForm.controls['password']; login.setValue('test'); password.setValue('test'); fixture.detectChanges(); component.submit(); fixture.detectChanges(); const navArgs = spy.calls.first().args[0]; expect(navArgs).toEqual('/home/main'); }));

入力データと出力データを使用してコンポーネントをテストする

ご存じのように、コンポーネントは@Inputおよび@Outputデコレーターとプロパティを介してデータを交換できます。たとえば、次のように：

親コンポーネント：

 import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<child-comp [userName]="name" [userSurname]="surname"></child-comp>' }) export class ParentComponent { name = 'Some name'; surname = 'Some surname'; }

ChildComponent：

 import { Input, Component} from '@angular/core'; @Component({ selector: 'child-comp', template: `<p> : {{userName}}</p> <p> : {{userSurname}}</p>` }) export class ChildComponent{ @Input() userName: string; @Input() userSurname:string; }

親コンポーネントのテストを正しく実行するには、宣言配列で子コンポーネントを宣言する必要があります。

parent.component.spec.ts

 import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {ParentComponent} from './parent.component'; import {ChildComponent} from '../child/child.component'; describe('ParentComponent', () => { let component: ParentComponent; let fixture: ComponentFixture<ParentComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ParentComponent, ChildComponent] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(ParentComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); });

また、子コンポーネントの場合は、入力パラメーターを渡す必要があります。最も簡単な方法は、コンポーネントの作成後にそれらの値を手動で指定することです。

child.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ChildComponent } from './child.component'; describe('ChildComponent', () => { let component: ChildComponent; let fixture: ComponentFixture<ChildComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ ChildComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(ChildComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); component.userName = 'some name'; expect(component.userName).toEqual('some name'); }); });

サービスコントロールパネル。 パート3.偵察