使用Karma作端到端測試

Karma是什麼：

下面是Karma官網的描述：

The main goal for Karma is to bring a productive testing environment to developers. The environment being one where they don't have to set up loads of configurations, but rather a place where developers can just write the code and get instant feedback from their tests. Because getting quick feedback is what makes you productive and creative.

簡單來講，Karma就是一個用於運行端到端的測試環境，Karma能夠用來運行Jasmine寫的單元測試和AngularJS提供的Angular_scenario寫的端到端測試。

Karma的優點：

• Concordion搭配Selenium：

在之前的項目中都是使用的Concordion搭配Selenium作的端到端的測試，這種搭配好處在於描述性很強，Concordion寫出來的測試就是一本活的用戶文檔和需求文檔。

很差的地方也很明顯，要求測試人員的開發能力，從零開始到第一個測試運行起來，這種方法須要很大的花費來配置環境以及搭建測試框架。這種模式是分層的，最下面是Page Object，每一個頁面的方法, 中間的是Test class，最上面的是UI描述，下面兩層都是須要使用到Selenium，Selenium才能提供web driver去操做瀏覽器，Concordion是html語法的，因此可以有不少表現樣式在測試中，所以能帶來質量很高的測試描述性，Concordion的測試能夠做爲需求和用戶文檔的所在。

使用Concordion和Selenium搭配須要更多的花費來配置好端到端的測試環境和框架。我認爲選用哪一種方式作端到端的測試是能夠衡量的項目須要的。

更多的關於Concordion和Selenium搭配的端到端測試請參考官網。

• Karma搭配AngularJS:

Karma配置簡單，對於前端是使用AngularJS的項目來講尤爲如此，由於大多數的依賴都已經在項目中了。其餘的web項目也可使用Karma來作測試，須要額外引入AngularJS的一些文件，使用Karma作測試的優點是顯而易見的。

• 運行方便：一條命令便可以運行測試，且Karma有Maven插件和Gradle插件，能夠方便地與其餘的構建工具集成。
• 調試方便：支持快速寫好測試，當即檢驗，還能夠對測試進行調試，反饋週期短，能更快地定位出問題所在。
• 花費少：使用Karma運行完全部測試，花費的時間少，若是使用PhantomJS運行測試，時間會更短。因爲Angular-scenario的語法很簡單，學習花費就不高，而且不須要寫不少代碼就能夠運行了，寫測試的時間花費就少。

Karma的環境配置（在Windows和Mac下都試驗過）：

方式一：

• 安裝NodeJS，直接去官網<http://nodejs.org/ >下載最新的安裝包進行安裝。
• 安裝Karma，使用nodeJS提供的npm(node package manager)來安裝。在命令行下（其中的-g是指全局安裝，karma-ng-scenario是運行端到端測試所需的插件）:

• npm install -g karma
  npm install -g karma-ng-scenario

• 安裝PhantomJS，有兩種方式：

1. 使用npm來安裝:

   npm install -g phantomjs

2. 從官網上下載最新的安裝包自行安裝。地址是http://phantomjs.org/ 。

方式二：

1. 拷貝上面已經安裝好的那些文件從別的機器上面，放在一個目錄下，例如c:dev/software/node
2. 而後將該目錄加入系統環境變量的path中，放在最前面比較好。
3. 運行karma命令在命令行中，檢驗配置是否正確。

方式三：

一樣將已經安裝好的文件拷貝出來，放到項目的目錄中，在講運行karma的時候能夠講到怎麼將這些文件配置進去。

 

如何用Karma作端到端的測試：

• 須要一個配置文件，用於配置karma怎麼運行測試：

1. unit測試的配置文件，我通常命名爲：karma.unit.config.js放在config目錄下，其中files配置的是測試代碼放的位置

    module.exports = function(config) {
        config.set({
            basePath : '',
            frameworks : ['jasmine'],
            files:[      
                '/unit/*.spec.js'
            ],
            port : 9876,
            browsers : ["PhantomJS"],
            singleRun : true,
            reporters : ["progress"],
            plugins : [
                'karma-jasmine'
                'karma-chrome-launcher',
            ],
        });
      };

2. 端到端測試的配置文件，我通常命名爲：karma.e2e.config.js一樣放在config目錄下，其中files配置的是測試代碼放的位置

   module.exports = function(config) {
       config.set({
           basePath : '/',
           frameworks : ['ng-scenario'],
           files:[      
               'e2e/*.spec.js'
           ],
           proxies: {
               '/' : 'http://localhost:8080/'
           },
           port : 9876,
           browsers : ["Chrome"],
           singleRun : true,
           reporters : ["progress"],
           plugins : [
               'karma-ng-scenario',
               'karma-phantomjs-launcher',
           ],
       });
     };

   若是運行karma時發現問題時，能夠參考更多配置文件的屬性官網介紹。畢竟每一個人的項目結構也不同。

• 運行測試，項目目錄下在命令行下運行以下命令(unit測試也是同樣的，只是更改下配置文件就行)：

  karma start config/karma.e2e.config.js

• 如何寫端到端的測試請參考AngularJS E2E Testing有詳細的介紹，很是簡單就能夠構建好本身的單元和端到端測試。

Karma與Maven的集成：

• 在pom.xml文件中配置karma插件，不少狀況下，由於咱們要在遠程服務器上面運行咱們的全部測試，或者由於不想其餘組員都去本機配置一下karma的環境，每每將karma的文件放在項目代碼中，workingDirectory就是指定karma文件所在位置的，在個人項目中，我將karma等文件直接放在lib目錄下面的。

  <build>
          <plugins>
              <plugin>
                  <groupId>com.kelveden</groupId>
                  <artifactId>maven-karma-plugin</artifactId>
                  <version>1.5</version>
                  <executions>
                      <execution>
                          <goals>
                              <goal>start</goal>
                          </goals>
                          <configuration>
                              <workingDirectory>${basedir}/lib</workingDirectory>
                              <configFile>config/karma.e2e.config.js</configFile>
                          </configuration>
                      </execution>
                  </executions>
              </plugin>
          </plugins>
      </build>

   

• 怎樣將js的單元測試也加入karma，配置以下：

  <build>
          <plugins>
              <plugin>
                  <groupId>com.kelveden</groupId>
                  <artifactId>maven-karma-plugin</artifactId>
                  <version>1.5</version>
                  <executions>
                      <execution>
                          <goals>
                              <goal>start</goal>
                          </goals>
                          <configuration>
                              <workingDirectory>${basedir}/lib</workingDirectory>
                              <configFile>config/karma.unit.config.js</configFile>
                          </configuration>
                      </execution>
                      <execution>
                          <goals>
                              <goal>start</goal>
                          </goals>
                          <configuration>
                              <workingDirectory>${basedir}/lib</workingDirectory>
                              <configFile>config/karma.e2e.config.js</configFile>
                          </configuration>
                      </execution>
                  </executions>
              </plugin>
          </plugins>
      </build>            

   

 

• 若是在lib目錄下除了karma的文件夾外，還有一些批處理文件的話，例如karma.cmd以及karma文件，也能夠將上面配置中的以下行：

  <workingDirectory>${basedir}/lib</workingDirectory>

  替換爲(使用Windows的cmd.exe運行mvn clean install時)：

  <karmaExecutable>${basedir}/lib/karma.cmd</karmaExecutable>

  或者替換爲(使用Windows的powershell或者其餘平臺運行mvn clean install時):

  <karmaExecutable>${basedir}/lib/karma</karmaExecutable>

• 請注意大多數狀況下，在運行karma前須要啓動服務器哦~將web項目運行起來，對於server的啓動和中止的配置就不贅述了。

• 有了上面的配置，那麼可使用Maven去運行測試了

  mvn clean install

有什麼能夠提升的部分：

從上面的配置能夠看出使用karma來構建咱們的測試是很方便，容易，快捷的，優點顯而易見，測試的語法也很簡單，很是容易上手，與後臺代碼是徹底解耦和的。可是和Concordion比起來，測試代碼的描述性並不強，還有就是每每容易忘記更新測試的描述在改了測試的意圖後。但願在寫測試的時候，也多考慮下測試的描述語句，但願能彌補下這點不足。

 

示例代碼，放在Github：Karma-Test

更多的單元測試的資料：AngularJS Unit Test