AngularJS 簡單 單元測試 之 環境配置

一. 工具及環境選擇

     OS:   Win 7 64bit

     IDE： WebStorm 8

     angular版本：1.2.2

     測試環境：karma + jasmine

二.  實作步驟：

1.下載下傳nodejshttp://www.node.js/download/

本人用的是64位的安裝包 

安裝步驟相對簡單， 直接一直按下一步就可以了。

2.  在nodejs上安裝 karma & jasmine

在【開始】中我們可以在Node.js 的目錄下找到 Node.js command prompt

打開command prompt

輸入指令， 完成 karma 和 jasmine的安裝：

npm install karma --save-dev

npm install karma-jasmine --save-dev

npm install karma-cli --save-dev

launcher的選擇： 一般使用Chrome的話， 每運作一次都會彈出Chome視窗，很是繁瑣。

     是以在這裡我們launcher使用PhantomJS。

PhantomJS的安裝：

npm install phantomjs --save-dev

npm install karma-phantomjs-launcher --save-dev

完成上述步驟後， 我們可以在 -- C:\Users\ 目前使用者名\ node_modules -- 的目錄下找到我們安裝的東西。

三. 在WebStorm好相關配置

1. 找到karma目錄下找到 config.tpl.js, 将其複制到WebStorm相關項目中

将config.tpl.js的内容修改如下

// Karma configuration
// Generated on %DATE%

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
        'angular/js/angular.js',
        'angular/js/angular-mocks.js',
        'module/ctrl.js',
        'test/test.js'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor



    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
//      logLevel: config.LOG_DEBUG,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],
//PhantomJS, Chrome
   plugins:[
       'karma-jasmine',
       'karma-phantomjs-launcher'],
    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  });
};
           

config.tpl.js簡單說明：

frameworks： 要內建的架構。

files: 運作測試時所要涵蓋的js檔案。

browsers: 測試所用的浏覽器。

plugins：相關插件的引用。

ps.1: 測試angular時要包含angular-mocks.js， 如果沒有會報錯誤。

2. 選中 Run -> Edit Configurations

點選添加， 選擇Node.js， 之後對新增的configuration進行配置， 之後選擇apply儲存。

配置完成之後我們就可以在此引用了。

四： 測試執行個體

我在module和test目錄下分别建立了ctrl.js 和 test.js

<pre name="code" class="javascript">/**
 * ctrl.js
 * Created by businiao on 2014/7/11.
 */
var myApp = angular.module('myApp',[]);

myApp.filter('reverse',function(){
    return function(text){
        return text.split('').reverse().join('');
    }
})
           

</pre><pre name="code" class="javascript">/**
 * test.js
 * Created by businiao on 2014/7/11.
 */
describe('group1', function(){
        beforeEach(module('myApp'));

    describe('reverse', function(){
        it('should reverse a string', inject(function(reverseFilter){
            expect(reverseFilter('ABCD')).toEqual('DCBA');
            expect(reverseFilter('John')).toEqual('nhoJ');
        }))
    })
})
           

運作測試結果：

如果有同學報了 angular-mocks.js read-only錯誤的話， 請參考下述文章修改angular-mocks.js。

https://github.com/wizardwerdna/angular.js/commit/17515763b891ea617339610fe92079cefe0efbbe#diff-2a255ed5e9564e25ce6eb711b604f40fR2083

WebStorm 使用小技巧 -- 函數補全功能：

在Settings中， 我們可以在JavaScript下的Libraries去下載下傳我們所需要的庫以滿足我們的補全需求。

本人也是初學， 有不足之處請大家提出， 謝謝。      

轉載請貼明出處：http://blog.csdn.net/tenzetseng/article/details/37695035