简介
angular-lib-test 是一个基于 Angular 框架的测试库，提供了一系列的工具能够帮助你更加简洁高效地编写单元测试和集成测试。
安装
首先确保你已经按照 Angular 官方文档搭建好了 Angular 项目，然后通过 npm 安装 angular-lib-test:
npm install angular-lib-test --save-dev
安装完成后，在你的项目中引入 angular-lib-test 并初始化：
import { TestBed } from 'angular-core/testing';
import { AngularLibTestModule } from 'angular-lib-test';
beforeEach(() => {
TestBed.configureTestingModule({
imports: [AngularLibTestModule],
});
});常用工具
Mock
假设我们有一个组件 MyComponent，它的模板中使用了一个 @Input() 属性 name，那么我们在编写测试用例时需要传递一个输入来测试：
-- -------------------- ---- -------
----------------------- -- -- -
--- ---------- ------------
--- -------- ------------------------------
------------- -- -
--------------------------------
------------- --------------
---
------- - -------------------------------------
--------- - --------------------------
---
---------- -------- -- -- -
-------------------------------
---
---------- ------- ------- -- -- -
-------------- - --------
------------------------
-------------------------------------------------------------------------------------------------
---
---这样的代码看起来并不太优雅，而且每次测试都需要手动传入输入。为了避免这些问题，我们可以使用 Mock：
-- -------------------- ---- -------
------ - ---- - ---- -------------------
----------------------- -- -- -
--- ---------- ------------
--- -------- ------------------------------
--- ----- ------------------
------------- -- -
---- - --- ------------------
--------------------------------
------------- --------------
---------- -
- -------- ------------ --------- ---- --
--
---
------- - -------------------------------------
--------- - --------------------------
---
---------- -------- -- -- -
-------------------------------
---
---------- ------- ------- -- -- -
--------------------- ---------
------------------------
-------------------------------------------------------------------------------------------------
---
---其中，Mock 可以轻松地生成一个组件的替身，它内置了一系列的方法，能够轻松地对组件的属性，方法以及生命周期函数进行模拟和定制。
Spy
在一些场景下，我们需要对某个函数进行监控，记录它的调用次数，参数和返回值等信息，这时候可以使用 Spy。
举个例子，我们有一个组件 MyComponent，它包含一个按钮和一个函数 submit，当按钮被点击时，submit 函数会被触发：
<button (click)="submit()">Submit</button>
-- -------------------- ---- -------
------------
--------- -------------------
--------- -------- ------------------------------------
--
------ ----- ----------- -
--------- ---- -
-- ---- ----- ----
-
-我们现在需要测试 MyComponent，并断言 submit 函数是否被正确调用，这时候可以使用 Spy：
-- -------------------- ---- -------
------ - --- - ---- -------------------
----------------------- -- -- -
--- ---------- ------------
--- -------- ------------------------------
--- ---------- ----
------------- -- -
--------- - --- -------------------------- ----------
--------------------------------
------------- --------------
---
------- - -------------------------------------
--------- - --------------------------
---
---------- -------- -- -- -
-------------------------------
---
---------- ---- ------ -- ------- -- -- -
-------------------------------------------------------------------
----------------------------------------
---
---其中，Spy 可以对全局的函数，对象的属性，以及某个类的原型方法进行监控和复写。
示例代码
以上是 angular-lib-test 的一些常用工具，下面是一个完整的测试用例：
-- -------------------- ---- -------
------ - ------- - ---- -----------------------
------ - -- - ---- ----------------------------
------ - --------------------- ---- - ---- -------------------
------ - ----------- - ---- -----------------
----------------------- -- -- -
--- ---------- ------------
--- -------- ------------------------------
--- ----- ------------------
------------- -- -
---- - --- ------------------
--------------------------------
------------- --------------
-------- -----------------------
---------- -
- -------- ------------ --------- ---- --
--
---
------- - -------------------------------------
--------- - --------------------------
---
---------- -------- -- -- -
-------------------------------
---
---------- ------- ------- -- -- -
--------------------- ---------
------------------------
-------------------------------------------------------------------------------------------------
---
---------- ---- ------ -- ------- -- -- -
----- --------- - ----------------------
-------------------------------------------------------------------
----------------------------------------
---
---------- ---- ------- -- -- -
----- ------ - ---------------------------------------------
----- -------- - --- -------------------------
-------------- - ------
------------------------
----------------------------------- ------
----------------------------------------------------
---
---总结
angular-lib-test 是一个非常优秀的测试库，提供了 Mock 和 Spy 等常用工具，能够极大地简化 Angular 单元测试和集成测试的编写。如果你还没有使用过它，不妨在下一个项目中尝试一下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e381e8991b448d77d9