在 Angular2 的单元测试过程中，我们通常会需要使用 provider 来 Mock 掉某些依赖的服务或组件。然而，手动创建这些 provider 通常显得十分麻烦和繁琐。为了解决这一问题，开发者们推出了 angular2-test-provider 这个 npm 包，使得我们可以更加方便地进行单元测试。
安装
使用 npm 进行安装：
npm install angular2-test-provider --save-dev
使用方式
在我们的单元测试代码中，我们可以通过下面的方式来使用 Mock 外部服务的 provider：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- ------ - ---- ------------------------
------ - ---- - ---- ----------------
------ - ---------- - ---- ------------------
------ -------------------------
------ - --------------- - ---- -------------------------
-- ----
------------
--------- ---------------
--------- -------------
--
----- ----------- -
----------------- ----- --
-
----------------------- -- -- -
------------- -- -
--------------------------------
------------- --------------
---------- -
-- ------ ------------------------ ----- --------
------------------------
-
---
---
---------- ------ --- ----------- --------------------- ----------- ------------ -- -
--------------------------------
----
---在上面的代码中，我们调用了 FakeHttpService.create() 方法来创建了一个 Mock 的 Http 服务，并将其注入到了我们的测试组件中。这样一来，在我们运行测试用例时，就可以轻松地 Mock 外部服务的返回结果了。
方法调用 Mock
如果我们需要 Mock 掉某个服务方法的返回结果，我们可以调用 FakeHttpService.when() 方法来指定服务的某个方法名，以及服务结束时需要返回的结果。
-- -------------------- ---- -------
----------------------- -- -- -
------------- -- -
--------------------------------
------------- --------------
---------- -
------------------------
-
---
---
---------- ---- ------- -------- -------------------- ------ ----------- ------------ ----- ----- -- -
-- ---- - ---------------- --
--------------------------- ---------------------------------------------------------
-----------------------------------
----------------- -- -
-----------------------------
---
----
---属性调用 Mock
除了方法调用之外，我们还可以通过 FakeHttpService.when() 方法来 Mock 掉服务的属性的值。以下代码展示了如何 Mock 掉 HttpModule 中的 XHRBackend 的 _browserXHR 属性：
-- -------------------- ---- -------
---------------------- -- -- -
------------- -- -
--------------------------------
-------- -------------
---------- -
------------------------
-
---
---
---------- ---- -------------- -------------- ------ ----- -- -
--------------------------- --------------------------
-------------
------ ----------------
-------- ----- ---------
--
---
--- ---------- - --------------------------------
--- -------------- - -
----- -- -- ---
----- -- -- ---
----------------- -- -- ---
--------- ----------------
-------- ----- -------- ---- ------------
--
--
--------------------- --------------------------
--------------------- --------------------------
--------------------- --------------------------------------
-- ---- ----
--------------------------- ------------------------------------------------------
--- --- - -------------
---------------------------------
-----------------------------------------------
-----------------------------------------------
-----------------------------------------------------------
----
---在上述代码中，我们调用了 FakeHttpService.when() 方法，指定了服务名以及需要 Mock 的属性名，然后返回了一个 Mock 对象。随后，我们使用 spyOn 方法来监控该属性被调用时的情况。
总结
通过了解如何使用 angular2-test-provider 包，我们可以更加方便地进行 Angular2 单元测试。通过 Mock 掉服务，我们可以更加专注于测试组件本身的逻辑，从而提高代码的质量和测试的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fca81e8991b448dd4fb