Angular7 - 测试和构建

Angular7 - 测试和构建 首页 / Angular7入门教程 / 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';
}

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

Ng TestRun The Command

测试用例的状态显示在命令行上,如上所示,并且还将在浏览器中打开,如下所示-

Karma

如果发生任何报错,它将显示以下详细信息:

为此,让我们如下更改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';
}

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

无涯教程网

命令行中显示以下屏幕-

Command Line

浏览器中显示以下屏幕-

Karma Connected

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

构建Angular 7项目

在Angular中完成项目后,我们需要对其进行构建,以便将其用于生产环境中。

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

来源:LearnFk无涯教程网

需要在 src/environments 中定义构建配置,即production,staging,development,testing。

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

Environments

您可以将基于构建的文件添加到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文件夹,该文件夹将在构建后包含最终文件。

Ng BuildDist Folder

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

Dist

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

面试现场 -〔白海飞〕

深入浅出计算机组成原理 -〔徐文浩〕

黄勇的OKR实战笔记 -〔黄勇〕

编译原理之美 -〔宫文学〕

DevOps实战笔记 -〔石雪峰〕

To B市场品牌实战课 -〔曹林〕

流程型组织15讲 -〔蒋伟良〕

网络排查案例课 -〔杨胜辉〕

AI大模型系统实战 -〔Tyler〕

好记忆不如烂笔头。留下您的足迹吧 :)