Angular7：测试和构建项目

  本章将讨论以下主题：

•   测试Angular 7项目

•   构建Angular 7项目

测试Angular 7项目

  在项目设置过程中，我们已经安装了测试所需的软件包。每个新组件、服务、指令等都有一个. spec.ts文件。我们将使用 jasmine来编写我们的测试用例。

  对于添加到组件、服务、指令或创建的任何其他文件的任何更改，您可以将测试用例包含在各自的. spec.ts文件中。所以大部分单元测试都可以在开始的时候进行。

  为了运行测试用例，使用的命令如下

ng test

  以下是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.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'angular7-app';
}

  现在让我们运行命令来查看测试用例的运行。

  测试用例状态显示在如上所示的命令行中，也将在浏览器中打开，如下所示。

  如果出现任何故障，它将显示以下详细信息。

  为此，让我们按如下方式更改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.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'angular7-app';
}

  这里测试用例将失败，下面是命令行和浏览器中显示的细节。

命令行输出

  命令行中将显示以下屏幕。

浏览器输出

  浏览器中将显示以下屏幕。

  项目中所有失败的测试用例都将显示在命令行和浏览器中，如上所示。

  同样，您可以为您的服务、指令和将要添加到项目中的新组件编写测试用例。

构建Angular 7项目

  一旦你完成了Angular的项目，我们需要构建它，以便它可以用于生产或陈述。

  构建的配置，即生产、阶段、开发、测试需要在您的src/环境中定义。

  目前，我们在src/环境中定义了以下环境

  您可以根据您的构建将文件添加到src/environment中，即environment.staging.ts、enviornment.testing.ts等。

  目前，我们将努力营造适合生产的环境。文件environment.ts包含默认环境设置和文件的详细信息，如下所示

export const environment = {
   production: false
};

  为了构建用于生产的文件，我们需要使生产在环境中是真实的。

export const environment = {
   production: true
};

  默认环境文件必须导入组件内部，如下所示。

app.component.ts

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

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

  我们正在尝试的从默认到生产的环境替换在angular.json文件替换部分中定义如下。

"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文件夹，该文件夹将在构建后包含最终文件。

  最终文件构建在dist/ 文件夹中，它可以托管在您端的生产服务器上。