qileilove

          blog已經轉移至github,大家請訪問 http://qaseven.github.io/

          Karma和Jasmine自動化單元測試

            前言
            在Java領域,Apache, Spring, JBoss 三大社區的開源庫,包羅萬象,但每個庫都在其領域中都鶴立雞群。而Nodejs中各種各樣的開源庫,卻讓人眼花繚亂,不知從何下手。
            Nodejs領域: Jasmine做單元測試,Karma自動化完成單元測試,Grunt啟動Karma統一項目管理,Yeoman最后封裝成一個項目原型模板,npm做nodejs的包依賴管理,bower做javascript的包依賴管理。Java領域:JUnit做單元測試, Maven自動化單元測試,統一項目管理,構建項目原型模板,包依賴管理。
            Nodejs讓組合變得更豐富,卻又在加重我們的學習門檻。我還說不清楚,也看不透!
            上面寫的有點遠了,回到文章的主題,Jasmine+Karma自動化單元測試。
            目錄
            Karma的介紹
            Karma的安裝
            Karma + Jasmine配置
            自動化單元測試
            Karma和istanbul代碼覆蓋率
            Karma第一次啟動時出現的問題
            1. Karma的介紹
            Karma是Testacular的新名字,在2012年google開源了Testacular,2013年Testacular改名為Karma。Karma是一個讓人感到非常神秘的名字,表示佛教中的緣分,因果報應,比Cassandra這種名字更讓人猜不透!
            Karma是一個基于Node.js的JavaScript測試執行過程管理工具(Test Runner)。該工具可用于測試所有主流Web瀏覽器,也可集成到CI(Continuous integration)工具,也可和其他代碼編輯器一起使用。這個測試工具的一個強大特性就是,它可以監控(Watch)文件的變化,然后自行執行,通過console.log顯示測試結果。
            Jasmine是單元測試框架,本單將介紹用Karma讓Jasmine測試自動化完成。Jasmine的介紹,請參考文章:jasmine行為驅動,測試先行
            istanbul是一個單元測試代碼覆蓋率檢查工具,可以很直觀地告訴我們,單元測試對代碼的控制程度。
            2. Karma的安裝
            系統環境:
            win7 64bit, node v0.10.5, npm 1.2.19
            安裝Karma
          ~ D:\workspace\javascript>mkdir karma
          ~ D:\workspace\javascript>cd karma
          ~ D:\workspace\javascript\karma>npm install -g karma
          # 測試是否安裝成功
          ~ D:\workspace\javascript\karma>karma start
          INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
          INFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket nIlM1yUy6ELMp5ZTN9Ek
            從瀏覽器看到karam界面。
            karma1
            下面我們要開始配置karam。

          3. Karma + Jasmine配置
            初始化karma配置文件karma.conf.js
          ~ D:\workspace\javascript\karma>karma init
          Which testing framework do you want to use ?
          Press tab to list possible options. Enter to move to the next question.
          > jasmine
          Do you want to use Require.js ?
          This will add Require.js plugin.
          Press tab to list possible options. Enter to move to the next question.
          > no
          Do you want to capture a browser automatically ?
          Press tab to list possible options. Enter empty string to move to the next question.
          > Chrome
          >
          What is the location of your source and test files ?
          You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
          Enter empty string to move to the next question.
          >
          Should any of the files included by the previous patterns be excluded ?
          You can use glob patterns, eg. "**/*.swp".
          Enter empty string to move to the next question.
          >
          Do you want Karma to watch all the files and run the tests on change ?
          Press tab to list possible options.
          > yes
          Config file generated at "D:\workspace\javascript\karma\karma.conf.js".
            安裝集成包karma-jasmine
            ~ D:\workspace\javascript\karma>npm install karma-jasmine
            4. 自動化單元測試
            3步準備工作:
            1. 創建源文件:用于實現某種業務邏輯的文件,就是我們平時寫的js腳本
            2. 創建測試文件:符合jasmineAPI的測試js腳本
            3. 修改karma.conf.js配置文件
            1). 創建源文件:用于實現某種業務邏輯的文件,就是我們平時寫的js腳本
            有一個需求,要實現單詞倒寫的功能。如:”ABCD” ==> “DCBA”
          ~ vi src.js
          function reverse(name){
          return name.split("").reverse().join("");
          }
            2). 創建測試文件:符合jasmineAPI的測試js腳本
          describe("A suite of basic functions", function() {
          it("reverse word",function(){
          expect("DCBA").toEqual(reverse("ABCD"));
          });
          });
            3). 修改karma.conf.js配置文件
            我們這里需要修改:files和exclude變量
          module.exports = function (config) {
          config.set({
          basePath: '',
          frameworks: ['jasmine'],
          files: ['*.js'],
          exclude: ['karma.conf.js'],
          reporters: ['progress'],
          port: 9876,
          colors: true,
          logLevel: config.LOG_INFO,
          autoWatch: true,
          browsers: ['Chrome'],
          captureTimeout: 60000,
          singleRun: false
          });
          };
            啟動karma
            單元測試全自動執行
          ~ D:\workspace\javascript\karma>karma start karma.conf.js
          INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
          INFO [launcher]: Starting browser Chrome
          WARN [launcher]: The path should not be quoted.
          Normalized the path to C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
          INFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket bVGffDWpc1c7QNdYye_6
          INFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket DtTdVbd4ZsgnMQrgye_7
          Chrome 28.0.1500 (Windows 7): Executed 1 of 1 SUCCESS (3.473 secs / 0.431 secs)
          Chrome 28.0.1500 (Windows 7): Executed 1 of 1 SUCCESS (0.068 secs / 0.021 secs)
          TOTAL: 2 SUCCESS
            瀏覽器會自動打開



            karma2
            我們修改test.js
          ~ vi test.js
          describe("A suite of basic functions", function() {
          it("reverse word",function(){
          expect("DCBA").toEqual(reverse("ABCD"));
          expect("Conan").toEqual(reverse("nano"));
          });
          });
            由于karma.conf.js配置文件中autoWatch: true, 所以test.js文件保存后,會自動執行單元測試。
            執行日志如下:提示我們單元測試出錯了。
          INFO [watcher]: Changed file "D:/workspace/javascript/karma/test.js".
          Chrome 28.0.1500 (Windows 7) A suite of basic functions reverse word FAILED
          Expected 'Conan' to equal 'onan'.
          Error: Expected 'Conan' to equal 'onan'.
          at null. (D:/workspace/javascript/karma/test.js:4:25)
          Chrome 28.0.1500 (Windows 7): Executed 1 of 1 (1 FAILED) ERROR (0.3 secs / 0.006 secs)
            5. Karma和istanbul代碼覆蓋率
            增加代碼覆蓋率檢查和報告,增加istanbul依賴
            ~ D:\workspace\javascript\karma>npm install karma-coverage
            修改karma.conf.js配置文件
          ~ vi karma.conf.js
          reporters: ['progress','coverage'],
          preprocessors : {'src.js': 'coverage'},
          coverageReporter: {
          type : 'html',
          dir : 'coverage/'
          }
            啟動karma start,在工程目錄下面找到index.html文件,coverage/chrome/index.html
            打開后,我們看到代碼測試覆蓋綠報告
            karma3
            覆蓋率是100%,說明我們完整了測試了src.js的功能。
            接下來,我們修改src.js,增加一個if分支
          function reverse(name){
          if(name=='AAA') return "BBB";
          return name.split("").reverse().join("");
          }
            再看覆蓋率報告,
            karma4
            Statements:75%覆蓋,Branches:50%覆蓋。
            為了產品的質量我們要盡量達到更多的覆蓋率,一般對于JAVA項目來說,能達到80%就是相當高的標準了。對于Javascript的代碼測試及覆蓋率研究,我還要做更多的驗證。
            6. Karma第一次啟動時出現的問題
            CHROME_BIN的環境變量問題
          ~ D:\workspace\javascript\karma>karma start karma.conf.js
          INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
          INFO [launcher]: Starting browser Chrome
          ERROR [launcher]: Cannot start Chrome
          Can not find the binary C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe
          Please set env variable CHROME_BIN
            設置方法:找到系統中chrome的安裝位置,找到chrome.exe文件
            ~ D:\workspace\javascript\karma>set CHROME_BIN="C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"

          posted on 2014-02-18 11:17 順其自然EVO 閱讀(699) 評論(0)  編輯  收藏 所屬分類: selenium and watir webdrivers 自動化測試學習

          <2014年2月>
          2627282930311
          2345678
          9101112131415
          16171819202122
          2324252627281
          2345678

          導航

          統計

          常用鏈接

          留言簿(55)

          隨筆分類

          隨筆檔案

          文章分類

          文章檔案

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 龙川县| 寿阳县| 余江县| 冕宁县| 伊春市| 慈溪市| 深水埗区| 湖州市| 阿巴嘎旗| 樟树市| 梨树县| 垫江县| 淳化县| 达孜县| 尼勒克县| 屯门区| 申扎县| 西安市| 新蔡县| 霞浦县| 阳谷县| 四子王旗| 江西省| 朔州市| 西乌| 景洪市| 浦城县| 岗巴县| 东乌珠穆沁旗| 五指山市| 太谷县| 闽清县| 湄潭县| 乌审旗| 涟源市| 贵州省| 曲水县| 商南县| 班戈县| 雷山县| 绵竹市|