[JS] AngularJS Tutorial 3

Step_03_篇

昨天花了點時間研究了 Jasmine, 拿來做單元測試還滿方便的…再加上 TypeScript 本身也有支援，用起來感覺超好。而 Angular 本身則有提供這功能，使用上 也更加方便。

//引用
<script src="~/Scripts/angular-scenario.js" ng-autotest></script>

//開始測試
<script type="text/javascript">
 'use strict';

 describe('Unit Test', function () {

  it("Intro", function () {
   var t = "test";
   expect(t).toBe("right");
  });

 });
</script>

filter，也可以自定義 JS 版本的 過瀘器。

<div ng-controller="My.Helper.A002">
 <input ng-model='query'/>

 <ul>
  <li ng-repeat="ch in EnChars  | filter:query">[{{$index + 1}}] {{ch}}
  </li>
 </ul>

 <p ng-show="checked">ShowMe</p>

</div>

module My.Helper {
 export interface IA002{
  EnChars: string[];
 }

 // Class
 export class A002 {
  // Constructor
  constructor($scope: IA002) {
   console.log($scope)

   $scope.EnChars = [];
   for (var i: number = 97 ; i < 123 ; i++) {
    $scope.EnChars.push( String.fromCharCode(i) + String.fromCharCode(Math.random() * 100) + String.fromCharCode(Math.random() * 100) );
   }
   //console.log($scope.EnChars);
  }

 }

}

最後，使用 ASP.NET 再實作 Jasmine 時，如果是再同一頁，會發生找不到指定物件的現像。目前只能把 Runner 跟測試頁分開。

//留意!
beforeEach(function () {
 browser().navigateTo('/');
});

describe('Learn', function () {
    
 it('測試_0', function () {
  input('query').enter('a');
  expect(repeater('li').count()).toBe(1);
 });

});