如何安裝和使用Karma-Jasmine

時間  2019-11-12
標籤 如何 安裝 使用 karma jasmine 简体版
原文   原文鏈接

 

注意：本文中出現的資料連接、karma的插件安裝等，都可能須要翻$牆後才能正確執行。javascript

 

Jasmine是一個JavaScript的測試工具，在Karma上運行Jasmine可完成Javascript的自動化測試、生成覆蓋率報告等。本文不包含Jasmine的使用細節，這幾天我會寫一篇Jasmine的入門文章，有興趣的朋友到時候能夠看一下。html

 

步驟一：安裝Node.JS（版本：v0.12.4, windows-64）

Karma是運行在Node.js之上的，所以咱們首先要安裝node.js。到 https://nodejs.org/download/ 下載你係統所需的NodeJS版本，我下載的是windows-64位的msi版。java

下載以後，雙擊 node-v0.12.4-x64.msi 運行並安裝，這個就不贅述了， 不斷下一步便可， 固然最好將目錄改一下。node

圖1（選擇安裝內容，默認便可）：web

 

 

步驟二：安裝Karma

運行Node.js的命令行程序：Node.js command prompt：chrome

圖2（處於「開始->全部程序->Node.js」中）：npm

 

圖3（咱們將安裝到E:\Karma路徑下）：windows

 

輸入命令安裝Karma：瀏覽器

npm install karma --save-dev

 

圖4（Karma安裝完畢後）：框架

 

步驟三：安裝karma-jasmine/karma-chrome-launcher插件

繼續輸入npm命令安裝karma-jasmine、karma-chrome-launcher插件：

npm install karma-jasmine karma-chrome-launcher --save-dev

 

圖5（karma-jasmine、karma-chrome-launcher安裝完畢以後）：

 

步驟四：安裝karma-cli

karma-cli用來簡化karma的調用，安裝命令以下，其中-g表示全局參數，這樣從此能夠很是方便的使用karma了：

npm install -g karma-cli

 

圖6（karma-cli安裝完畢以後）：

 

Karma-Jasmine安裝完畢：

圖7（安裝完畢後，在E:\Karma文件夾下會有一個node_modules目錄，裏面包含剛纔安裝的karma、karma-jasmine、karma-chrome-launcher目錄，固然還包含了jasmine-core目錄）：

 

開啓Karma：

輸入命令：

karma start

 

圖8（運行後如圖所示出現了一行INFO信息，並無其餘提示和動做，由於此時咱們沒有配置karma的啓動參數。後面會加入karma.conf.js，這樣karma就會自動啓動瀏覽器並執行測試用例了）：

 

圖9（手動打開Chrome，輸入localhost:9876，若是看到這個頁面，證實已經安裝成功）：

 

Karma+Jasmine配置：

執行命令init命令進行配置：

karma init

 

圖10（全部默認配置問題）：

 

 說明：

1. 測試框架：咱們固然選jasmine

2. 是否添加Require.js插件

3. 選擇瀏覽器： 咱們選Chrome

4. 測試文件路徑設置，文件可使用通配符匹配，好比*.js匹配指定目錄下全部的js文件（實際操做中發現該路徑是karma.conf.js文件的相對路徑，詳見下面我給出的實際測試配置及說明）

5. 在測試文件路徑下，須要排除的文件

6. 是否容許Karma監測文件，yes表示當測試路徑下的文件變化時，Karma會自動測試

 

我在虛擬機上測試的例子：

圖11（TestFiles和NodeJS處於E盤根目錄下，karma.conf.js處於文件夾NodeJS的根目錄下）：

 

如下是karma.conf.js的完整內容：

[html]  view plain  copy
 
  1.  1 // Karma configuration  
  2.  2 // Generated on Fri May 29 2015 19:30:26 GMT+0800 (中國標準時間)  
  3.  3   
  4.  4 module.exports = function(config) {  
  5.  5   config.set({  
  6.  6   
  7.  7     // base path that will be used to resolve all patterns (eg. files, exclude)  
  8.  8     basePath: '../TestFiles',  
  9.  9   
  10. 10   
  11. 11     // frameworks to use  
  12. 12     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter  
  13. 13     frameworks: ['jasmine'],  
  14. 14   
  15. 15   
  16. 16     // list of files / patterns to load in the browser  
  17. 17     files: [  
  18. 18       '*.js'  
  19. 19     ],  
  20. 20   
  21. 21   
  22. 22     // list of files to exclude  
  23. 23     exclude: [  
  24. 24     ],  
  25. 25   
  26. 26   
  27. 27     // preprocess matching files before serving them to the browser  
  28. 28     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor  
  29. 29     preprocessors: {  
  30. 30     },  
  31. 31   
  32. 32   
  33. 33     // test results reporter to use  
  34. 34     // possible values: 'dots', 'progress'  
  35. 35     // available reporters: https://npmjs.org/browse/keyword/karma-reporter  
  36. 36     reporters: ['progress'],  
  37. 37   
  38. 38   
  39. 39     // web server port  
  40. 40     port: 9876,  
  41. 41   
  42. 42   
  43. 43     // enable / disable colors in the output (reporters and logs)  
  44. 44     colors: true,  
  45. 45   
  46. 46   
  47. 47     // level of logging  
  48. 48     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG  
  49. 49     logLevel: config.LOG_INFO,  
  50. 50   
  51. 51   
  52. 52     // enable / disable watching file and executing tests whenever any file changes  
  53. 53     autoWatch: true,  
  54. 54   
  55. 55   
  56. 56     // start these browsers  
  57. 57     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher  
  58. 58     browsers: ['Chrome'],  
  59. 59   
  60. 60   
  61. 61     // Continuous Integration mode  
  62. 62     // if true, Karma captures browsers, runs the tests and exits  
  63. 63     singleRun: false  
  64. 64   });  
  65. 65 };  

 

說明：

若全部測試文件均處於同一個目錄下，咱們能夠設置basePath（也是相對於karma.conf.js文件的相對路徑），而後指定files，此時files則爲basePath目錄下的文件相對路徑；

固然你也能夠不設置basePath，直接使用相對於karma.conf.js文件的文件相對路徑，如本例中，咱們若保持basePath默認爲空，則files配置應爲：

[html] view plain copy
 
  1. files: [  
  2.       '../TestFiles/jasmineTest.js',  
  3.       '../TestFiles/test.js'  
  4.     ]  

 

test.js內容：

 

[html]  view plain  copy
 
  1. function TT() {  
  2.     return "abc";  
  3. }  

 

jasmineTest.js內容：

[html] view plain copy
 
  1. describe("A suite of basic functions", function () {  
  2.     it("test", function () {  
  3.         expect("abc").toEqual(TT());  
  4.     });  
  5. });  

 

啓動Karma：

karma start karma.conf.js

因爲此次加上了配置文件karma.conf.js，所以Karma會按照配置文件中指定的參數執行操做了，因爲咱們配置的是在Chrome中測試，所以Karma會自動啓動Chrome實例，並運行測試用例：

 

圖12（左側的Chrome是Karma自動啓動的，右側的Node.js command prompt窗口中，最後一行顯示了執行結果）：

 

圖13（若是咱們點擊圖12中的debug按鈕，進入debug.html並按F12打開開發者工具，選擇Console窗口，咱們將能看到jasmine的執行日誌）：

 

若此時，咱們將jasmineTest.js中對於調用TT方法的指望值改成"abcd"（實際爲"abc"）：

[html] view plain copy
 
  1. describe("A suite of basic functions", function () {  
  2.     it("test", function () {  
  3.         expect("abcd").toEqual(TT());  
  4.     });  
  5. });  

 

因爲咱們在karma.conf.js中設置了autoWatch爲true：

autoWatch: true

 

Karma將自動執行測試用例，因爲本例測試用例未經過，所以在屏幕上打印出了錯誤信息，Chrome的Console窗口中的日誌信息須要刷新debug.html後顯示。

圖14（Karma自動檢測到文件變化並自動從新執行了測試用例）：

 

代碼覆蓋率：

若是你還想查看測試的代碼覆蓋率，咱們能夠安裝karma-coverage插件，安裝命令爲：

npm install karma-coverage

 

圖15（安裝karma-coverage的過程）：

 

修改karma.conf.js，增長覆蓋率的配置：

圖16（主要是變更瞭如下三個配置節點，其餘的配置內容不變）：

[html]  view plain  copy
 
  1.  1     // preprocess matching files before serving them to the browser  
  2.  2     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor  
  3.  3     preprocessors: {  
  4.  4         '../TestFiles/test.js':'coverage'  
  5.  5     },  
  6.  6   
  7.  7   
  8.  8     // test results reporter to use  
  9.  9     // possible values: 'dots', 'progress'  
  10. 10     // available reporters: https://npmjs.org/browse/keyword/karma-reporter  
  11. 11     reporters: ['progress','coverage'],  
  12. 12       
  13. 13     coverageReporter:{  
  14. 14         type:'html',  
  15. 15         dir:'../TestFiles/coverage/'  
  16. 16     },  

 

變更以下：

  • 在reporters中增長coverage
  • preprocessors中指定js文件
  • 添加coverageReporter節點，將覆蓋率報告類型type設置爲html，輸入目錄dir指定到你但願的目錄中

 

此時完整的karma.conf.js以下：

[html]  view plain  copy
 
  1. // Karma configuration  
  2. // Generated on Fri May 29 2015 19:30:26 GMT+0800 (中國標準時間)  
  3.   
  4. module.exports = function(config) {  
  5.   config.set({  
  6.   
  7.     // base path that will be used to resolve all patterns (eg. files, exclude)  
  8.     basePath: '',  
  9.   
  10.   
  11.     // frameworks to use  
  12.     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter  
  13.     frameworks: ['jasmine'],  
  14.   
  15.   
  16.     // list of files / patterns to load in the browser  
  17.     files: [  
  18.       '../TestFiles/jasmineTest.js',  
  19.       '../TestFiles/test.js'  
  20.     ],  
  21.   
  22.   
  23.     // list of files to exclude  
  24.     exclude: [  
  25.     ],  
  26.   
  27.   
  28.     // preprocess matching files before serving them to the browser  
  29.     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor  
  30.     preprocessors: {  
  31.         '../TestFiles/test.js':'coverage'  
  32.     },  
  33.   
  34.   
  35.     // test results reporter to use  
  36.     // possible values: 'dots', 'progress'  
  37.     // available reporters: https://npmjs.org/browse/keyword/karma-reporter  
  38.     reporters: ['progress','coverage'],  
  39.       
  40.     coverageReporter:{  
  41.         type:'html',  
  42.         dir:'../TestFiles/coverage/'  
  43.     },  
  44.   
  45.   
  46.     // web server port  
  47.     port: 9876,  
  48.   
  49.   
  50.     // enable / disable colors in the output (reporters and logs)  
  51.     colors: true,  
  52.   
  53.   
  54.     // level of logging  
  55.     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG  
  56.     logLevel: config.LOG_INFO,  
  57.   
  58.   
  59.     // enable / disable watching file and executing tests whenever any file changes  
  60.     autoWatch: true,  
  61.   
  62.   
  63.     // start these browsers  
  64.     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher  
  65.     browsers: ['Chrome'],  
  66.   
  67.   
  68.     // Continuous Integration mode  
  69.     // if true, Karma captures browsers, runs the tests and exits  
  70.     singleRun: false  
  71.   });  
  72. };  

執行命令：

karma start karma.conf.js

 

圖17（執行命令後，在配置文件coverageReporter節點中指定的dir中，咱們將找到生成的覆蓋率報告，karma-coverage還生成了一層子文件夾，對應於執行測試的瀏覽器+版本號+操做系統版本）：

 
頂
0
 
踩
0
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程