在前端开发过程中，我们经常会使用很多第三方库和框架来提高我们的开发效率和代码质量。而 npm 是一个非常流行的第三方包管理工具，里面有非常多的包可以供我们使用。
今天，我要介绍的是一个用于 Angular 4.x 开发的测试框架库 —— ng4-test，它提供了一系列有用的工具和函数来帮助我们进行单元测试和端到端测试。本文将详细介绍如何使用 ng4-test，并通过几个示例来让大家更好地理解。
安装
使用 npm 进行安装：
npm install ng4-test --save-dev
安装完成后，我们可以在项目的 node_modules 目录下找到 ng4-test 包。
使用
在项目中引入 ng4-test 包中的指令和服务：
-- -------------------- ---- -------
------ - ------- - ---- ------------------------
------ - ------------------------ --------------------- - ---- -------------------------------
------ - ---------------- - ---- -----------
----------------------- -- -- -
---------------- -- -- -
--------------------------------
-------- -
------------------------
-----------------
--
------------- -------------
-----------------------
---
---在这个例子中，我们使用了 HttpClientTestingModule 和 HttpTestingController 这两个 @angular/common/http/testing 中的指令和服务，以及 Ng4TestingModule 服务。
示例
单元测试
在这个例子中，我们将展示如何编写一个简单的组件单元测试。
<!-- my.component.html -->
<p>{{ message }}</p>-- -------------------- ---- ------- -- --------------- ------ - --------- - ---- ---------------- ------------ --------- --------------- ------------ ---------------------- -- ------ ----- ----------- - ------- - ------- -------- -
-- -------------------- ---- -------
-- --------------------
------ - -------- ---------------- - ---- ------------------------
------ - -- - ---- ----------------------------
------ - ----------- - ---- -----------------
----------------------- -- -- -
--- ---------- ------------
--- -------- ------------------------------
---------------- -- -- -
----- --------------------------------
------------- --------------
-----------------------
---
------------- -- -
------- - -------------------------------------
--------- - --------------------------
------------------------
---
---------- -------- -- -- -
-------------------------------
---
---------- ------- --- --------- -- -- -
----- -------------- - ------------------------------------------------------
----------------------------------------------------------------
---
---在这个例子中，我们首先使用 TestBed 初始化了组件，然后使用 fixture.detectChanges() 触发更新，最后通过 fixture.debugElement.query(By.css()) 来获取元素，并通过 expect() 断言元素的内容是否符合预期。
端到端测试
在这个例子中，我们将展示如何编写一个简单的端到端测试。
<!-- app.component.html --> <my-component></my-component>
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {}-- -------------------- ---- -------
-- ---------------
------ - -------- ------- - ---- -------------
------ - ---------- - ---- -----------
------------ ----- -- -- -
--- ----------- -----------
---------------- -- -- -
---------- - --- -------------
----- ---------------------------
---
---------- ------- --- ------- ---- --- ----------- ----- -- -- -
----- -------------- - ----- ----------------------------------
------------ ------------------------------------------- ---------
---
--------------- -- -- -
-- ------ ---- ----- --- -- ------ ------- ---- --- -------
----- ---- - ----- --------------------------------------------------
-----------------------------------------------------
------ ---------------------
----
---
---在这个例子中，我们使用了 protractor 来进行端到端测试，使用了 Ng4E2eTest 服务来初始化测试环境，并通过 navigateTo() 方法跳转到应用页面；然后通过 getElement() 方法获取元素，并使用 expect() 断言元素的内容是否符合预期。
结束语
通过本教程介绍，我们已经了解了如何安装、使用以及编写 ng4-test 的单元测试和端到端测试。希望这篇文章对你的学习和开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005578281e8991b448d481c