Test

Jasmine (test framework)

Jasmine 是 AngularJS 預設的 test framework (AngularJS 本身是用這套 test framework 來做 test 的意思)。

Jasmine 提供了測試 JavaScript 需要的各種工具， 這邊列出比較常在 AngularJS 的 test 裡面會看到的關鍵字：

describe
it
expect().to*
beforEach / afterEach
spyOn
jasmine.createSpy

在 run Jasmine test 的時候其實完全不在 AngularJS 本身的 context 裡面，因此你需要想方設法設定周圍的環境，讓測試的對象感覺(?)自己是身在 AngularJS 的 context 裡，並且各種需要的 serivce 也都能夠手到擒來。

[範例]

SpecRunner.html :

<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>

<!-- include source files here... -->
<script type="text/javascript" src="src/Player.js"></script>
<script type="text/javascript" src="src/Song.js"></script>

<!-- include spec files here... -->
<script type="text/javascript" src="spec/SpecHelper.js"></script>
<script type="text/javascript" src="spec/PlayerSpec.js"></script>

<script type="text/javascript">
  (function() {
    var jasmineEnv = jasmine.getEnv();
    jasmineEnv.updateInterval = 1000;

    var htmlReporter = new jasmine.HtmlReporter();

    jasmineEnv.addReporter(htmlReporter);

    jasmineEnv.specFilter = function(spec) {
      return htmlReporter.specFilter(spec);
    };

    var currentWindowOnload = window.onload;

    window.onload = function() {
      if (currentWindowOnload) {
        currentWindowOnload();
      }
      execJasmine();
    };

    function execJasmine() {
      jasmineEnv.execute();
    }

  })();
</script>

SpecRunner.html :

<!-- include source files here... -->
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angular-mocks/angular-mocks.js"></script>
<script type="text/javascript" src="../app/js/controllers.js"></script>

<!-- include spec files here... -->
<script type="text/javascript" src="unit/controllersSpec.js"></script>

其實寫 spec 就跟你平常直接寫在 HTML 裡的 script tag 裡沒兩樣，只是前面載入了 Jasmine 跟 AngularJS 罷了。

[ngMock]

(angular-mocks.js)

ngMock 是 AngularJS 用來協助你進行 test 的 module，

ngMock 裡面提供到 global 的 function 有三個：

  • dump

    協助你在 test 的時候可以 print 出 AngularJS 相關 context 的內容

  • module

    插入一段 configuration phase 的程式碼，也可以用來指定 module dependency

  • inject

    好用的 injector function，方便你在需要的時候叫出某 service

參考

results matching ""

    No results matching ""