後台端已經有unit
test 的單元測試的方法，前端當然也有囉~
早在angular
1版本就已經有單元測試，不過推陳出新目前已經有新的angular2,
所以當然angular2有自已的單元測試，比之前更加簡捷和之前的差異不大，相信大家一定馬上就能上手。
一、下戴相關的軟體
npm install jasmine-core --save-dev --save-exact二、網頁結構
unit-test.html
<html>
<head>
<meta
http-equiv="content-type"
content="text/html;charset=utf-8">
<title>Ng
App Unit Tests</title>
<link
rel="stylesheet"
href="../node_modules/jasmine-core/lib/jasmine-core/jasmine.css">
<script
src="../node_modules/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script
src="../node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script
src="../node_modules/jasmine-core/lib/jasmine-core/boot.js"></script>
<script
src="../node_modules/systemjs/dist/system.src.js"></script>
<script>
//
#2. Configure systemjs to use the .js extension
//
for imports from the app folder
System.config({
packages:
{
'app':
{ defaultExtension: 'js'
}
}
});
</script>
<script
src="lst2.spec.js"></script>
</head>
<body>
</body>
</html> |
lst2.spec.ts
import
{ Hero } from
'../app/hero';
describe('Hero',
() => {
it('has
name',
() => {
let
hero: Hero = { id: 1, name: 'Super
Cat'
};
expect(hero.name).toEqual('Super
Cat');
});
it('has
id',
() => {
let
hero: Hero = { id: 1, name: 'Super
Cat'
};
expect(hero.id).toEqual(1);
});
}); |
這就是用來單元測試的angular2的程式片斷
三、執行程式
npm start
網址:localhost:3000/unitest/unit-test.html
目前還有遇到一些瓶頸…要import service發生錯誤訊息【require is undefined】, 所以還不清楚如何引入service 作單元測試，不過後續還會補充這方面的相關內容… 如果找到解答… 希望大家能有happy start。
沒有留言:
張貼留言