前言
在前端开发中，测试是一个必不可少的环节。而测试用例的写法，依靠于测试框架的支持。这篇文章主要介绍一款基于 karma 和 jasmine 的 npm 包 karma-jasmine-spy-when，该包能够让测试用例更加灵活和可维护。
karma 和 jasmine 简介
karma 是一个基于 node.js 的测试执行工具，可以在实际浏览器中运行测试用例。它能够自动监控源代码的变化，从而使得测试的持续集成更加容易。
而 jasmine 是一个行为驱动开发（BDD）的测试框架，它能够提供函数式语法，从而使得测试用例更加易读、易维护。
karma-jasmine-spy-when 简介
karma-jasmine-spy-when 是一个 karma 插件，它基于 jasmine，提供了多个用于间谍对象（spy）的快捷 API，从而让测试用例编写更加简单、可维护。
在 jasmine 中，间谍对象是一个函数或者方法，可以用于记录函数调用的参数、返回值等信息。而 karma-jasmine-spy-when 则是在此基础上加上了更多的 API，比如可以在原有函数的基础上修改其返回值、抛出错误等。
安装
使用 npm 进行全局安装：
npm install -g karma npm install -g karma-jasmine npm install -g karma-jasmine-spy-when
配置
在 karma 的配置文件（比如 karma.conf.js）中添加下面的配置：
-- -------------------- ---- -------
-------------- - ---------------- -
------------
----------- ----------- ------------
-------- -
----------------
------------------------
------------------------
--
-- ---
--
-这里的 frameworks 参数需要添加 spy-when，plugins 则需要添加 karma-jasmine-spy-when。
使用
spyProperty(obj, propName, [accessType], [descriptor])
该方法用于间谍对象，在 obj 上监听 propName 属性的访问事件。accessType 为可选，可以为 get、set 或者 all，默认为 all。descriptor 为可选，可以设置属性的其它属性，比如 writable、configurable 等。
下面是一个示例代码：
-- -------------------- ---- -------
----------------------- ---------- -
---------- --- ------ ---------- ---------- -
--- --- - - ----- ------- ---- -- --
---------------- --------
---------------- ------ -------
---------------- ------ -------
---------------------------------
------------------ ----------------------------
----------------------------
------------------ ------ ---------------------------
------- - ---
------------------ ---------------------------------
---
---这里使用了 spyProperty 方法，在 obj 上监听了 name 和 age 两个属性的访问事件，同时也监听了 age 属性的修改事件。在测试用例中，我们可以针对这些属性的访问或者修改行为进行断言。
spyFunction(obj, functionName, [returnVal], [accessType])
该方法用于间谍对象，在 obj 上监听 functionName 函数的调用事件。returnVal 为可选，可以为函数的返回值，accessType 为可选，可以为 get、set 或者 all，默认为 all。
下面是一个示例代码：
-- -------------------- ---- -------
----------------------- ---------- -
---------- --- ------ ---------- ---------- -
--- --- - -
------ -------------- -
------ --- - - -----
-
--
---------------- ---------
---------------- ----------- -------------- -
------ ------ - - -----
---
------------------------------------- -------
------------------------- -----------------------------
------------------------------------------ ------
------------------------- --------------------------------
------------------ -----------------------------------------
-----------------------------------------
------------------ ----------- -------------------------------
------------------ ------------------------------------
---
---这里使用了 spyFunction 方法，在 obj 上监听了 sayHi 和 sayHello 两个函数的调用事件。在测试用例中，我们可以断言这些函数的调用次数，甚至还能够使用自定义的返回值。
spyOnEvent(elem, eventName)
该方法用于监听 DOM 元素的事件，elem 表示 DOM 元素，eventName 表示事件名称。
下面是一个示例代码：
describe('spyOnEvent', function() {
it('should spy on DOM event', function() {
var div = document.createElement('div');
spyOnEvent(div, 'click');
div.click();
expect('click').toHaveBeenTriggeredOn(div);
});
});这里使用了 spyOnEvent 方法，在 div 元素上监听了 click 事件。在测试用例中，我们可以通过 toHaveBeenTriggeredOn 方法判断事件是否被触发。
总结
通过使用 karma-jasmine-spy-when 包，我们可以更加方便地编写测试用例，同时也让代码的可维护性得到了提高。在实际开发中，我们可以根据需求选择合适的方法和 API，从而使得测试用例更加完善。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efb4c49986ca68d895b