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

2014年11月1日 星期六

AngularJS 教學 - Mocking a service

在前一篇  AngularJS 教學 - Service 測試 有簡單介紹到如何對 Service 進行測試

另外因為 Controller 常常需要依賴一些 Service Object 來做一些邏輯處理或後端的溝通

因此也說明了運用了 $injector 來將 Service Object 注入到 Controller,以利 Controller 的測試


不過有時候在開發的過程中,常常會遇到我們所開發的元件中所相依的元件還沒開發完成或是是別人的工作

例如我在開發某個 Controller 元件的時候,可能需要依賴很多的 Service

但這些 Service 可能尚未完成等等之類的因素,但為了確保我的 Controller 能夠如期完成並政常運作

先用模擬的方式來模擬這些 Service ,讓我的開發與測試能夠順利完成

而這些被模擬的東西我們可以稱為 mock object 或是 fake object

所以本篇會說明如何利用 $provide 來建立一個 mock 的 Service object

假設在 SampleCtrl 中我們需要依賴一個 TodoService

angular.module('sampleApp', [])
     .controller("SampleCtrl", function($scope, TodoService){
     $scope.todos = TodoService.getTodos();
 });

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