Angular7 测试和构建项目
本章将讨论以下主题：
- 测试 Angular 7 项目
- 构建 Angular 7 项目
测试 Angular 7 项目
在项目设置期间，已经安装了测试所需的包。有一个 .spec.ts 为每个新组件、服务、指令等创建的文件。我们将使用 jasmine 来编写我们的测试用例。
对于添加到你的组件、服务、指令或创建的任何其他文件的任何更改，你可以将你的测试用例包含在相应的 .spec.ts 文件中。因此，大多数单元测试都可以在一开始就涵盖。
要运行测试用例，使用的命令如下 -
ng test
下面是 app.component.spec.ts 文件 app.component.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'); // 改变
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!');
});
});
在上面的文件中，测试用例检查标题， 角 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/environment 中定义了以下环境：
你可以将基于你构建的文件添加到 src/environment，即 environment.staging.ts、environment.testing.ts 等。
目前，我们将尝试构建生产环境。文件 环境.ts 包含默认环境设置和文件详细信息如下：
export const environment = {
production: false
};
要构建用于生产的文件，我们需要使 生产：真实 在 environment.ts 中如下：
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 .可以在此处添加 staging 或 testing 等附加配置，如下例所示：
"configurations": {
"production": { ... },
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
]
}
}
所以运行构建的命令如下：
ng build --configuration = production // 用于生产环境 ng build --configuration = staging // 用于说明环境
现在让我们运行 build 命令进行生产，该命令将在我们的项目中创建一个 dist 文件夹，该文件夹将包含构建后的最终文件。
最终文件构建在 dist/ 文件夹中，该文件夹可以托管在你端的生产服务器上。
