顯示具有 Karma 標籤的文章。 顯示所有文章
顯示具有 Karma 標籤的文章。 顯示所有文章

2015年1月19日 星期一

AngularJS 教學 - Can not find the binary google-chrome

如果第一次在 Linux 的環境中利用 Karma 來執行測試的時候，可能會看到類似下圖的錯誤

 前提是你的測試瀏覽器是用 chrome 才會  >> browsers: ['Chrome']







很明顯的是 Karma 沒辦法透過環境變數 找不到 Chrome 的執行路徑

 你可以透過指令

 $ which chromium-browser 來找出 Chrome 的執行路徑
>> /usr/bin/chromium-browser

 接者加到環境變數 CHROME_BIN

 $ echo 'export CHROME_BIN="/usr/bin/chromium-browser"' >> ~/.bashrc && source ~/.bashrc

再執行一次 Karma 就可以了
張貼者： 於 沒有留言:
標籤： , ,

2014年10月30日 星期四

AngularJS 教學 - Service 測試

本偏簡單介紹該如何測試 Service，並說明該如何在測試中解決依賴注入的問題(Dependency Injection)

如果不太清楚 AngularJS 的測試，可以看　http://programer-learn.blogspot.com/2014/10/angularjs-unit-testing.html

以下是本次範例的頁面，在 Text Box 輸入名子，按下 Button 後，Text Box 的值就會改變












接下來看一下原始碼 (index.html)

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="sampleApp">
     <head>
         <title>Demo</title>
         <script type="text/javascript" src="lib/angular.min.js"></script>
         <script type="text/javascript" src="js/app.js"></script>
     </head>
     <body>
         <div ng-controller="SampleCtrl">
              Name:<input type="text" ng-model="name"/>
              <br/><button ng-click="echo()">Echo</button>
         </div>
     </body>

</html>

閱讀更多 »
張貼者： 於 沒有留言:
標籤： , , ,

2014年10月27日 星期一

AngularJS 教學 - Controller 測試

這篇要簡單介紹一下 AngularJS 中 Controller 的測試該如何實現

以下還是用 Karma + Jasmine 來進行測試，如果不熟悉這些可以先看之前寫的文章 AngularJS 教學 - 單元測試(Unit Testing)

首先先列出我們要測試的範例程式，範例很簡單

頁面上有兩個 Button 負責針對 counter 的值進行遞增或遞減

以下是 index.html 的範例程式

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="sampleApp">
     <head>
         <title>Demo</title>
         <script type="text/javascript" src="lib/angular.min.js"></script>
         <script type="text/javascript" src="js/app.js"></script>
     </head>
     <body>
         <div ng-controller="SampleCtrl">
              Counter : {{counter}}<br/>
              <button ng-click="add()">Increase</button><br/>
              <button ng-click="minus()">Decrease</button>
         </div>
     </body>

</html>


再來是 SampleCtrl 的程式(js/app.js)

閱讀更多 »
張貼者： 於 沒有留言:
標籤： , , ,

2014年10月25日 星期六

AngularJS 教學 - 單元測試(Unit Testing)

本篇先小篇幅介紹如何建構一個 AngularJS 的單元測試

內容很簡單，之後再放上進一步的介紹，包括 Controller、Service、Ajax 等等

單元測試顧名思義就是要能夠確保程式的某個 function 或是部分的程式邏輯是正確的

至於單元測試所帶來的好處就不花時間描述了

不過單元測試除了驗證正確性外其實也是描述了系統的 Spec (Specification)

也就是單元測試中的每一個測試函式就表明了一件 Spec

回歸到 AngularJS 上，目前 JavaScript 領域中有很多單元測試的框架(Testing Framework)

包括 QUnit、Mocha、Jasmine 等等

除了測試框架之外還有所謂的 Testing Runner

例如我們接下來要介紹的 Karma，它不同於 Testing Framework

閱讀更多 »
張貼者： 於 沒有留言:
標籤： , , ,
訂閱： 文章 (Atom)