因為最近開始研究如何用angular
來單元測試，中間也卡了不少關卡，所以整理網友們網路上的片段資訊，終於瞭解如何從安裝到執行測試的環境的過程，所以想跟網友們分享一下我的辛路歷程…
一、安裝Nuget
套件
請先用visual
studio 的nuget套件安裝jasmineTest
和angular-core
如果看見controller資料夾中已經有jasmineController
和
views/jasmine
就代表順
利安裝成功的囉!
二、
加入參考的js
開啟
view/jasmine/SpecRunner.cshtml
<html>
<head>
<title>Jasmine
Spec Runner</title>
<script
src="~/Scripts/angular.min.js"></script>
<link
rel="shortcut
icon"
type="image/png"
href="/Content/jasmine/jasmine_favicon.png">
<link
rel="stylesheet"
type="text/css"
href="/Content/jasmine/jasmine.css">
<script
type="text/javascript"
src="/Scripts/jasmine/jasmine.js"></script>
<script
type="text/javascript"
src="/Scripts/jasmine/jasmine-html.js"></script>
<script
type="text/javascript"
src="/Scripts/jasmine/boot.js"></script>
<script
src="~/Scripts/angular-mocks.js"></script>
<!--
include source files here... -->
<script
type="text/javascript"
src="/Scripts/jasmine-samples/SpecHelper.js"></script>
<script
type="text/javascript"
src="/Scripts/jasmine-samples/PlayerSpec.js"></script>
<!--
include spec files here... -->
<script
type="text/javascript"
src="/Scripts/jasmine-samples/Player.js"></script>
<script
type="text/javascript"
src="/Scripts/jasmine-samples/Song.js"></script>
</head>
<body>
</body>
</html> |
雖然已經有jasmin的sample測試程式，但目的是要測試angular的程式，所以需要加入
參考程式【angular.min.js】,【angular-mocks.js】，才能順利將model引進到測試專案中
二、啟動測試程式
在上方的選單中-->點選【測試】-->選擇【視窗】-->【測試總管】，就開始測試視窗的
管理介面，如下所示
選擇你想要測試的單元測試(angular
unit test)，點滑鼠右鍵【執行選取的測試】，
就可以直接在visual
studio 測試了…
不用懷疑…就這麼簡單。
當執行專案後，可以輸入網址
localhost:60615/jasmine/run
三、開始寫測試程式
情境是要測以下的factory函式，要如何作業?
var
app = angular.module('accoundModel',
[])
.factory('chimp',
function
() {
return
{
ook:
function
() {
return
"test";
}};
});
app.controller("accoundController",
function
($scope, $http, chimp) {
$scope.username
= chimp.ook();
}); |
Describe
的區塊中都代表以群組為單位的測試，每個it
區塊中就代表單元的測試中，
所以如果相依性的測試專案，就可以放在同一個
Describe區塊中。
describe("group
test : accoundModel",
function
() {
beforeEach(module('accoundModel'));//每次呼叫測試之前，會先進入beforeEach區塊，取得設定值
var
$controller;
var
factoryChimp;
beforeEach(inject(function
(_$controller_) { //注入controller
$controller
= _$controller_;
}));
//開始測試語言描述
describe('test
accoundController',
function
() {
//期待的結果是否與預期結果相符
it('$scope.username
equire test',
function
() {
var
$scope = {};
var
controller = $controller('accoundController',
{ $scope: $scope });
expect($scope.username).toEqual("test");
});
//期待的結果是否與預期結果不相符
it('$scope.username
not equire test',
function
() {
var
$scope = {};
var
controller = $controller('accoundController',
{ $scope: $scope });
expect($scope.username).not.toEqual("test123");
})
});
describe('test
chimp factory',
function
() {
var
factoryChimp;
//直接注入factory的名稱
beforeEach(inject(function
(chimp) {
factoryChimp
= chimp; //必需指定給外部變數，才能在it
函式中取得factory
}))
it('run
the ook function ',
function
() {
expect(factoryChimp.ook()).toEqual("test");
//注入controller
})
})
});
});
|
畫面是綠色的就代表全都all
pass
如果紅色就代表有單元測試not
pass
其他相關
expect的方法還有以下幾種:
如果當專案的複雜度越高時，單元測試是一個很好的方法，可以驗證程式的結果和加快
debug
的速度，感謝大家有耐心看完這篇文章，期望大家也能分享一些不錯的測式方法或
工具喔!
五、文獻
沒有留言:
張貼留言