在编写现代Web应用程序时，单页面应用程序（SPA）已经成为了流行的开发方式。SPA架构在很多方面简化了Web前端应用程序的开发，但同样也给测试带来了挑战。在SinonJS中，可以使用spy()函数和stub()函数来跟踪单页面应用程序中的变化。
什么是SinonJS
SinonJS是一个JavaScript测试工具库，提供了调试工具，例如spy（间谍），stub（掐头去尾），mock（模拟）等。SinonJS专门用于在浏览器或Node.js上下文中进行JavaScript测试。
在此之前，我们先来看看单页面应用程序的特点：
单页面应用程序
单页面应用程序（SPA）使用Ajax和HTML5来创建异步Web应用程序，无需使用完整的站点刷新。SPA将所有页面的内容加载到一个HTML文件中，并使用JavaScript动态更改内容，从而创建一个响应性，动态性和更具交互性的应用程序。SPA应用程序通常包含以下几个部分：
- HTML：这是应用程序的主HTML文件。所有内容加载到此文件中，因此它通常很大。JavaScript在此文件中执行。
- CSS：通常使用一种CSS框架为SPA应用程序创建视觉元素。
- JavaScript：应用程序的主要功能在JavaScript中实现。
SinonJS的spy()和stub()函数
SinonJS是一个JavaScript测试工具库，主要用于实现所谓的测试替身（test doubles），包括测试掐头去尾网站，间谍（spy）和模仿（mocking）对象。
spy()函数：在SinonJS中，spy（间谍）是指替代一个函数，用于记录该函数的调用情况。spy（间谍）实际上是一个函数，它记录所调用函数的参数，返回值和调用次数。stub()函数：用于创建一个替代函数，控制并记录其行为。stub（掐头去尾）实际上是一个函数，可以用于暂时替换应用程序中的某个函数，以便在测试时更改其行为。
下面我们就先来看一个spy()方法和stub()方法的详细例子：
例子
假设我们有一个计算器应用程序，我们要记录用户输入的数字和运算符以及计算机执行的结果。下面是一个计算器应用程序的示例：
---------------
--- ---- - -
------ --
---- -------- ------ ----- -
---------- - ---- - -----
------ -----------
--
--------- -------- ------ ----- -
---------- - ---- - -----
------ -----------
--
--------- -------- ------ ----- -
---------- - ---- - -----
------ -----------
--
------- -------- ------ ----- -
---------- - ---- - -----
------ -----------
-
-现在我们要在SinonJS中跟踪该应用程序的任何更改（例如键入数字或单击运算符按钮）。为此，我们将使用SinonJS中的spy()函数和stub()函数。
在这个例子中，我们将使用sinon.spy()函数和sinon.stub()函数来“窃听”用户的操作和控制计算过程。首先，第一步是为测试文件设置一些数据，如下所示：
-- ----------
-- ------ --------- --- ----------- --------- --
--- ------ - ------------------
--- ----- - -----------------
--- ---- - --------------------------------
--- -----------
--- -------
--- ------------
--- -------------
--- -----------
-------------- --- --- ---- ---------- -------- -- -
------------------- -- -
---------- - -----
------ - --------------------- -------
----------- - --------------------- ------------
------------ - ---------------------- ----------- -------- -- -
---
---------- - ---------------------- --------- -------- -- -
---
---
------------------ -- -
-----------------
----------------------
-----------------------
---------------------
---在上面的代码中，我们使用sinon.spy()和sinon.stub()函数创建spy和stub对象。在beforeEach()函数开始时，我们为整个测试套件设置所有必要的变量。在这种情况下，我们为每个函数都创建了一个sinon对象。重新分配每个.spy() / .force()调用将更改spy对象（每个测试套件重新分配相同的spy对象，这可能会导致不一致的结果）。为了避免这种情况，SinonJS使用.restore()方法，该方法返回所有spy和stub对象（我们在使用它们之后还原它们）。
下面是使用sinon进行窃听的例子：
-------- --- --------- ---- ---------- -------- -- -
----------------- ---
----------------------
--------------------------- ----
----------------------- ---
---------------------------
--------------------------------- ----
--------------------------
-------------------------------
---在上面的代码中，我们首先调用calculator.add()和calculator.subtract()函数，在这里，我们在调用这些函数之后使用例如spyAdd.called的语句验证sinon spy对象的行为是否如预期所示。但不仅如此，我们还可以使用其他方法来验证其他方面。例如，我们可以将sinon.spy.calledOnce函数用于检查已被调用的次数。
下面是使用sinon进行掐头去尾的例子：
-------- ---- --------- --------- -------- -------- -- -
------------------------ --------------
---------------------- --------------
---------------------- ---
------------------------------ ---
-------------------- ---
------------------------------ ---
------------------------------- ---------------
------------------------------------- ------------- ---
---在上面的代码中，我们首先使用sinon.stub()函数创建一个sinon stub对象，该对象将覆盖calculator.multiply()和calculator.divide()函数。接下来，我们使用.stub().withArgs()函数设置预期结果并使用.returns()来指定值。然后，我们调用calculator.multiply（）和calculator.divide（）函数，并检查结果，以确保其结果正确。接下来，我们检查sinon.stub().callCount，以确保它已被调用n次。
总结
在Web开发中，单页面应用程序已经成为流行的开发方式。SPA使用Ajax和HTML5来创建异步Web应用程序，无需使用完整的站点刷新。在SinonJS中，可以使用spy()函数和stub()函数来跟踪单页面应用程序中的变化，这使得测试变得更加容易和有效。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65212fb695b1f8cacd8adb8a