常用的前端自动化测试工具介绍 —— Karma（一）

悠悠小仙仙

在开发的过程中，除了代码本身，测试也是重要的一环。大体来说，测试分为以下几种类型：
　　单元测试
　　功能测试
　　性能测试
　　安全测试
　　对于普通开发者而言，单元测试和功能测试是最常见的两种测试方式，本系列文章要介绍的几个工具是针对这两个方面的。
　　单元测试是对某一块独立的业务模块进行测试，可以是一个小功能，甚至一个函数。在前端开发中，我们可以选用 Karma进行代码的单元测试，这个工具十分强大，它集成了像Jasmine（基于BDD的测试框架），PhantomJS（无界面的浏览器）这些测试套件。还有一些其他有用的功能，比如生成代码覆盖率的报告等。
　　本文只介绍 Karma的基本使用。
　　单元测试工具Karma
　　要使用Karma对代码进行单元测试，首先需要安装一系列的相关插件。我们来新建一个名为myKarmDemo的目录，并安装相关的插件：
　npminstallkarma-cli-g
　　npminstallkarmajasmine-corekarma-jasminekarma-phantomjs-launcher-D
　　接下来对我们的工程进行初始化：
　　karmainit
　　之后会弹出一些选项，其中包含了一些初始化的配置工作，使用上下方向键可以在配置项之间进行切换。我这里选择使用 Jasmine测试框架，使用PhantomJS无界面浏览器，整体的配置选项如下：

1. 　myKarmDemokarmainit
   
2. 　　　　Whichtestingframeworkdoyouwanttouse?
   
3. 　　　　Presstabtolistpossibleoptions.Entertomovetothenextquestion.
   
4. 　　　　>jasmine
   
5. 　　　　DoyouwanttouseRequire.js?
   
6. 　　　　ThiswilladdRequire.jsplugin.
   
7. 　　　　Presstabtolistpossibleoptions.Entertomovetothenextquestion.
   
8. 　　　　>no
   
9. 　　　　Doyouwanttocaptureanybrowsersautomatically?
   
10. 　　　　Presstabtolistpossibleoptions.Enteremptystringtomovetothenextquestion.
    
11. 　　　　>PhantomJS
    
12. 　　　　Whatisthelocationofyoursourceandtestfiles?
    
13. 　　　　Youcanuseglobpatterns,eg."js/*.js"or"test/**/*Spec.js".
    
14. 　　　　Enteremptystringtomovetothenextquestion.
    
15. 　　　　>
    
16. 　　　　Shouldanyofthefilesincludedbythepreviouspatternsbeexcluded?
    
17. 　　　　Youcanuseglobpatterns,eg."**/*.swp".
    
18. 　　　　Enteremptystringtomovetothenextquestion.
    
19. 　　　　>
    
20. 　　　　DoyouwantKarmatowatchallthefilesandrunthetestsonchange?
    
21. 　　　　Presstabtolistpossibleoptions.
    
22. 　　　　>no
    
23. 　　　　Configfilegeneratedat"/home/charley/Desktop/myKarmDemo/karma.conf.js".
    
24. 　　　　初始化完成之后，会在我们的项目中生成一个 karma.conf.js文件，这个文件就是Karma的配置文件。
    
25. 　　　　配置文件比较简单，能够比较轻松的看懂，这里我对原始的配置文件进行简单的修改，结果如下：
    
26. 　　　　//Karmaconfiguration
    
27. 　　　　//GeneratedonSunOct29201721:45:27GMT+0800(CST)
    
28. 　　　　module.exports=function(config){
    
29. 　　　　config.set({
    
30. 　　　　//basepaththatwillbeusedtoresolveallpatterns(eg.files,exclude)
    
31. 　　　　basePath:'',
    
32. 　　　　//frameworkstouse
    
33. 　　　　//availableframeworks:https://npmjs.org/browse/keyword/karma-adapter
    
34. 　　　　frameworks:['jasmine'],
    
35. 　　　　//listoffiles/patternstoloadinthebrowser
    
36. 　　　　files:[
    
37. 　　　　"./src/**/*.js",
    
38. 　　　　"./test/**/*.spec.js",
    
39. 　　　　],
    
40. 　　　　//listoffilestoexclude
    
41. 　　　　exclude:[
    
42. 　　　　],
    
43. 　　　　//preprocessmatchingfilesbeforeservingthemtothebrowser
    
44. 　　　　//availablepreprocessors:https://npmjs.org/browse/keyword/karma-preprocessor
    
45. 　　　　preprocessors:{
    
46. 　　　　},
    
47. 　　　　//testresultsreportertouse
    
48. 　　　　//possiblevalues:'dots','progress'
    
49. 　　　　//availablereporters:https://npmjs.org/browse/keyword/karma-reporter
    
50. 　　　　reporters:['progress'],
    
51. 　　　　//webserverport
    
52. 　　　　port:9876,
    
53. 　　　　//enable/disablecolorsintheoutput(reportersandlogs)
    
54. 　　　　colors:true,
    
55. 　　　　//leveloflogging
    
56. 　　　　//possiblevalues:config.LOG_DISABLE||config.LOG_ERROR||config.LOG_WARN||config.LOG_INFO||config.LOG_DEBUG
    
57. 　　　　logLevel:config.LOG_INFO,
    
58. 　　　　//enable/disablewatchingfileandexecutingtestswheneveranyfilechanges
    
59. 　　　　autoWatch:false,
    
60. 　　　　//startthesebrowsers
    
61. 　　　　//availablebrowserlaunchers:https://npmjs.org/browse/keyword/karma-launcher
    
62. 　　　　browsers:['PhantomJS'],
    
63. 　　　　//ContinuousIntegrationmode
    
64. 　　　　//iftrue,Karmacapturesbrowsers,runsthetestsandexits
    
65. 　　　　singleRun:true,
    
66. 　　　　//Concurrencylevel
    
67. 　　　　//howmanybrowsershouldbestartedsimultaneous
    
68. 　　　　concurrency:Infinity
    
69. 　　　　})
    
70. 　　　　}
    
71. 　　　　然后创建一个 src目录和一个test目录，在其中分别创建index.js和index.spec.js文件。
    
72. 　　　　我要做的测试内容比较简单，对 index.js中的两个函数（一个加法函数，一个乘法函数）进行测试。
    
73. 　　　　index.js文件如下：
    
74. 　　　　//加法函数
    
75. 　　　　functionadd(x){
    
76. 　　　　returnfunction(y){
    
77. 　　　　returnx+y;
    
78. 　　　　}
    
79. 　　　　}
    
80. 　　　　//乘法函数
    
81. 　　　　functionmulti(x){
    
82. 　　　　returnfunction(y){
    
83. 　　　　returnx*y+1;
    
84. 　　　　}
    
85. 　　　　}
    
86. 　　　　index.spec.js文件如下：
    
87. 　　　　describe("运算功能单元测试",function(){
    
88. 　　　　it("加法函数测试",function(){
    
89. 　　　　varadd5=add(5)
    
90. 　　　　expect(add5(5)).toBe(10)
    
91. 　　　　});
    
92. 　　　　it("乘法函数测试",function(){
    
93. 　　　　varmulti5=multi(5)
    
94. 　　　　expect(multi5(5)).toBe(25)
    
95. 　　　　})
    
96. 　　　　})
    
97. 　　　　单测的代码写好后，就可以使用 karmastart来运行单元测试。由于我们的乘法代码中有错误，因此测试结果是这样的：
    
98. 　　　　myKarmDemokarmastart
    
99. 　　　　2910201722:21:56.283:INFO[karma]:Karmav1.7.1serverstartedathttp://0.0.0.0:9876/
    
100. 　　　　2910201722:21:56.287:INFO[launcher]:LaunchingbrowserPhantomJSwithunlimitedconcurrency
     
101. 　　　　2910201722:21:56.294:INFO[launcher]:StartingbrowserPhantomJS
     
102. 　　　　2910201722:21:56.549:INFO[PhantomJS2.1.1(Linux0.0.0)]:Connectedonsocket0h6boaepSUMwG7l2AAAAwithid44948955
     
103. 　　　　PhantomJS2.1.1(Linux0.0.0)运算功能单元测试乘法函数测试FAILED
     
104. 　　　　Expected26tobe25.
     
105. 　　　　test/index.spec.js:9:31
     
106. 　　　　PhantomJS2.1.1(Linux0.0.0):Executed2of2(1FAILED)(0.048secs/0.002secs)
     
107. 　　　　将乘法函数的代码改为正常，再次启用 karmastart进行测试：
     
108. 　　　　2910201722:23:08.670:INFO[karma]:Karmav1.7.1serverstartedathttp://0.0.0.0:9876/
     
109. 　　　　2910201722:23:08.673:INFO[launcher]:LaunchingbrowserPhantomJSwithunlimitedconcurrency
     
110. 　　　　2910201722:23:08.685:INFO[launcher]:StartingbrowserPhantomJS
     
111. 　　　　2910201722:23:08.940:INFO[PhantomJS2.1.1(Linux0.0.0)]:Connectedonsocketpl_pZDcAK4rBTpr0AAAAwithid40770640
     
112. 　　　　PhantomJS2.1.1(Linux0.0.0):Executed2of2SUCCESS(0.045secs/0.001secs)
     
113. 　　　

复制代码

      对了，如果使用PhantomJS作为代码的运行环境，其对于ES6的支持性不是太好，我在代码中使用了箭头函数，在运行时就报错了。为了解决这个问题，你可以使用Chrome或其他浏览器进行测试，也需要安装相应的launcher，如果你使用Chrome浏览器测试，需要安装karma-chrome-launcher插件。
　　或者，你可以使用Babel等工具对代码进行转码后进行测试。
　　使用PhantomJS的好处在于其是一个无界面的浏览器运行环境，可以跑在命令行环境中，在某些没有Chrome等浏览器服务器环境下比较好用，方便代码验收和集成。
　　对于Karma的介绍就到这里了，本文只是对Karma的安装和使用进行了简单的介绍，权当抛砖引玉，至于更多的用法，您可以再进行研究。

梦想家