Angular7プロジェクトのテストとビルド

この章では、次のトピックについて説明します-

Angular 7プロジェクトをテストするには
Angular 7プロジェクトをビルドするには

Angular 7プロジェクトのテスト

プロジェクトのセットアップ中に、テストに必要なパッケージが既にインストールされています。新しいコンポーネント、サービス、ディレクティブなどごとに作成された .spec.ts ファイルがあります。ジャスミンを使用してテストケースを作成します。

コンポーネント、サービス、ディレクティブ、または作成された他のファイルに追加された変更については、それぞれの.spec.tsファイルにテストケースを含めることができます。そのため、単体テストの大部分は最初からカバーできます。

テストケースを実行するには、次のコマンドを使用します-

ng test

以下は app.component.ts のapp.component.spec.tsファイルです-

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

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

*app.component.ts*

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

コマンドを実行して、実行中のテストケースを確認します。

Ngテスト

コマンドを実行

テストケースのステータスは、上記のようにコマンドラインに表示され、以下に示すようにブラウザで開きます-

カルマ

障害が発生した場合、次のように詳細が表示されます-

それを行うには、次のようにapp.component.spec.tsを変更しましょう-

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

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

上記のファイルでは、テストケースは Angular 7 というタイトルをチェックします。しかし、app.component.tsでは、以下に示すように、 angular7-app というタイトルがあります-

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

ここで、テストケースは失敗し、以下はコマンドラインとブラウザに表示される詳細です。

コマンドラインで

次の画面がコマンドラインに表示されます-

コマンドライン

ブラウザで

次の画面がブラウザに表示されます-

Karma Connected

プロジェクトで失敗したすべてのテストケースは、上記のようにコマンドラインとブラウザに表示されます。

同様に、サービス、ディレクティブ、およびプロジェクトに追加される新しいコンポーネントのテストケースを作成できます。

Angular 7プロジェクトの構築

Angularでプロジェクトを完了したら、プロダクションまたはステータスで使用できるようにビルドする必要があります。

ビルド、つまり本番、ステージング、開発、テストの設定は、 src/environments で定義する必要があります。

現在、我々はsrc/environmentで定義されている次の環境を持っています-

環境

ビルドに基づいてsrc/environmentにファイルを追加できます。つまり、environment.staging.ts、enviornment.testing.tsなどです。

現在、本番環境向けにビルドしようとしています。ファイル environment.ts には、次のようにデフォルトの環境設定とファイルの詳細が含まれています-

export const environment = {
   production: false
};

本番用のファイルを構築するには、次のようにenvironment.tsで production：true を作成する必要があります-

export const environment = {
   production: true
};

デフォルトの環境ファイルは、次のようにコンポーネント内にインポートする必要があります-

*app.component.ts*

import { Component } from '@angular/core';
import { environment } from './../environments/environment';

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'angular7-app';
}

私たちがやろうとしているデフォルトから本番への環境置換は、angular.json fileReplacements セクション内で次のように定義されています-

"production": {
   "fileReplacements": [
      {
         "replace": "src/environments/environment.ts",
         "with": "src/environments/environment.prod.ts"
      }
   ],
}

ビルドのコマンドが実行されると、ファイルは src/environments/environment.prod.ts に置き換えられます。次の例に示すように、ステージングやテストなどの追加構成をここに追加できます-

"configurations": {
   "production": { ... },
   "staging": {
      "fileReplacements": [
         {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.staging.ts"
         }
      ]
   }
}

したがって、ビルドを実行するコマンドは次のとおりです-

ng build --configuration = production//for production environmnet
ng build --configuration = staging//for stating enviroment

ここで、本番用のビルドコマンドを実行します。このコマンドは、ビルド後の最終ファイルを含むプロジェクト内にdistフォルダーを作成します。

Ng Build

Dist Folder

最終ファイルはdist/フォルダー内に構築され、最終的に本番サーバーでホストできます。

Dist

Angular7-testing-and-building-project

Angular7プロジェクトのテストとビルド