在前端开发中，我们经常会使用karma进行自动化测试，为了更好地呈现测试结果，我们需要使用对应的报告器。本文将介绍一个npm包--karma-angularity-reporter，该报告器可以在karma的HTML报告中显示代码的可维护性和复杂度指数，有效的提供了开发者对代码质量的监控。
安装和配置
在使用karma-angularity-reporter前，你需要安装karma和angularity（通过nmp）：
$ npm install karma --save-dev $ npm install angularity --save-dev
接着，安装karma-angularity-reporter:
$ npm install karma-angularity-reporter --save-dev
报告器配置
在karma的配置中包含以下的相关配置信息：
-- -------------------- ---- -------
-- -------------
-------------- - ---------------- -
------------
-- --------------- ----
-------- --------------------------------------------------------------------------------
-- ----------
------ ---
-------------- ---
--------- --- -- --------
-- -------------
------------------- -
----------- --- -- ----------------
---------- --- -- -------
----------- --- -- --------
--
------------------------------------ -- ------
----- ----- -- ------
------- ----- -- ----------
--------- ---------------- -- ----
---------- ----- -- --------
--------- --- -- ---------
---------- ------ -- -----------
------------ ---------
--------
--------------------
-------------------
----------------
--
---
--Angularity配置文件
在生成代码的指标时，Angularity使用一个单独的配置文件。在配置文件中可以影响哪些代码是有贡献的，如何计算指标并设置报告器的输出格式等。
文件的排除和包含
在Angularity的配置文件中，你可以指定哪些文件不需要考虑指标和哪些文件需要。通过使用include和exclude属性，我们可以进行排除和包含。
-- -------------------- ---- -------
-- ---------------
-
---------- -
--------------
------------
--------------
------------------
--------------------
-------------
--------------
--
---------- -
------------
-
-在上述的配置中，exclude字段包含了要排除的文件路径，include字段包含了需要指标的文件路径。请注意exclude属性优先于include。
基本计算方法
我将在这里介绍一些常用的计算方法。
LoC
行数（Lines of Code，也称为LOC），是指代码中的物理行数。为了计算行数，Angularity使用以下语句：
"metrics": ["LOC"]
AngularJS特定的指标
虽然AngularJS的指标不是内置的，但Angularity支持计算一些相关的指标。以下是一些最重要的指标：
$interpolate和$parse计算的指标
"metrics": ["AST", "$interpolate", "$parse", "$rootScope", "$scope", "$watch"]
- 检查注入依赖项的指标
"metrics": ["injectiondeps"]
代码可维护性和复杂度
代码的可维护性和复杂度是一个复杂的问题。在本部分，我们将简要介绍一些常用的度量单位。
代码可维护性指标
- 等待时间（WT），代码中的一段时间，任务队列中有等待执行的，但是并没有马上执行。等待时间的越长，代码越难以维护。
"metrics": ["PAR", "FDP", "WT"]
- 质量度量指标
-- -------------------- ---- -------
---------- ----- ----- ------ ------ ------- -------- ------- ------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------- ----- ------ ----- ------ ------- ------ ------ ----- ------ ------ -------
------------ --------
-------------- -
--------- -
------- ----------------------
--------- -----
-
-代码复杂度指标
- 复杂度（Cyclomatic Complexity）：通过检查代码流程图得到的一个数字，表示可以从代码中独立的路径数量。复杂的代码通常具有较高的Cyclomatic复杂度。
"metrics": ["CCN"]
示例
我们现在将实现一个最小的示例来使用karma-angularity-reporter。
为了创建我们的示例，请使用以下命令：
npm install angular angular-mock karma karma-jasmine karma-chrome-launcher karma-angularity-reporter --save-dev
接下来，在我们的项目中添加配置：
-- -------------------- ---- -------
-------------- - ---------------- -
------------
----------- ----------------------
------ -
--------------
--
-------- -
-----------------------------------------------------------------------------------
--
--------------------
----------- -------------------- -- -------------------
----------- ---------------------- -- --------
---------- ----------- -- -------
-------- ---------
--
---------- ---------------
--------- ----------
---
--上述配置做了如下的事情：
- 将'jasmine'和'angular'框架添加到测试项目中
- 配置Karma需要测试哪些文件
- 告诉Karma使用以下设置：
- karma-jasmine：Jasmine测试框架
- karma-angular：Angular测试框架
- karma-chrome-launcher：Chrome浏览器启动器
- karma-angularity-reporter：karma-angularity-reporter 报告器
- 配置karma-angularity-reporter报告器
- 输出报告
现在，我们在test文件夹中创建一个文件，文件名是HelloWorld.spec.js：
-- -------------------- ---- -------
---------------------- ---------- -
----------------------------
---------- ------ ----- ------- ------------------------- ----------- -
--- ------- - ----------------------- -----------------------------
---------------------
--------------------------------------- --------
----
---此时执行browsers我们就可以看到如下结果了:
结论
在本文中，我们介绍了如何使用karma-angularity-reporter报告器来监控我们的AngularJS代码质量。我们在karma配置中增加了karma-angularity-reporter配置项，设置了要监控的指标和相应的输出。除此之外，我们还研究了如何创建一个最小的测试用例来使用该报告器，以及如何配置相应的Angularity配置文件。通过在karma.conf.js中添加karma-angularity-reporter配置项，我们可以有效地监控AngularJS代码的质量，并及时做代码优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efb4c49986ca68d88c7