无涯教程-Angular7 - 测试和构建

本章将讨论以下内容-

• To Test Angular 7 Project
• To Build Angular 7 Project

测试Angular 7项目

在项目设置过程中，已经安装了所需的测试软件包。为每个新组件，服务，指令等创建一个 .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.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/environments 中定义构建配置，即production，staging，development，testing。

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

您可以将基于构建的文件添加到src/environment中，即environment.staging.ts，enviornment.testing.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.component.html',
   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

现在让我们运行build命令进行生产，该命令将在我们的项目中创建一个dist文件夹，该文件夹将在构建后包含最终文件。

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

参考链接

https://www.learnfk.com/angular7/angular7-testing-and-building-project.html