编写AngularJS的单元测试

2 年 ago

科, 雅

2 minutes

使用Jasmine编写AngularJS的单元测试代码。

如果将控制器之类的东西作为单独的函数进行定义的话

|-test.html      : テストを動かすための html.
|-controllers.js : コントローラを定義した js.
|-app.js         : AngularJS の設定をしている js.
|-test.js        : Jasmine のテストコード.
|-jasmine/       : Jasmine のファイル類.
`-angular/       : AngularJS のファイル類.

var mine = {
    controllers: {
        SampleController: function($scope) {
            $scope.message = 'Hello SampleController!!';

            $scope.click = function() {
                $scope.message = 'clicked!!';
            };
        }
    }
};

angular
.module('mine', [])
.controller('SampleController', mine.controllers.SampleController);

describe('suite', function() {
    var controller,
        $scope;

    beforeEach(function() {
        $scope = {};
        controller = new mine.controllers.SampleController($scope);
    });

    it('spec', function() {
        expect($scope.message).toBe('Hello SampleController!!');

        $scope.click();

        expect($scope.message).toBe('clicked!!');
    });
});

<!doctype html>
<html>
  <head>
    <link href="jasmine/jasmine.css" rel="stylesheet"/>
    <script src="jasmine/jasmine.js"></script>
    <script src="jasmine/jasmine-html.js"></script>
    <script src="jasmine/boot.js"></script>
    <script src="jasmine/console.js"></script>

    <script src="angular/angular.min.js"></script>

    <script src="controllers.js"></script>
    <script src="app.js"></script>
    <script src="test.js"></script>
  </head>
  <body>
  </body>
</html>

必要に応じて Jasmine のスパイ機能とかを使えばいい気がする。

如果没有将控制器等定义为单独的函数

|-test.html      : テストを動かすための html.
|-app.js         : AngularJS の設定をしている js. コントローラの定義もまとめている.
|-test.js        : Jasmine のテストコード.
|-jasmine/       : Jasmine のファイル類.
`-angular/       : AngularJS のファイル類.

angular
.module('mine', [])
.controller('SampleController', function($scope) {
    $scope.message = 'Hello SampleController!!';

    $scope.click = function() {
        $scope.message = 'clicked';
    };
});

describe('suite', function() {
    var controller, $scope;

    beforeEach(function() {
        module('mine');

        inject(function($rootScope, $controller) {
            $scope = $rootScope.$new();

            controller = $controller('SampleController', {
                $scope: $scope
            });
        });
    });

    it('spec', function() {
        expect($scope.message).toBe('Hello SampleController!!');

        $scope.click();

        expect($scope.message).toBe('clicked');
    });
});

<!doctype html>
<html>
  <head>
    <link href="jasmine/jasmine.css" rel="stylesheet"/>
    <script src="jasmine/jasmine.js"></script>
    <script src="jasmine/jasmine-html.js"></script>
    <script src="jasmine/boot.js"></script>
    <script src="jasmine/console.js"></script>

    <script src="angular/angular.min.js"></script>
    <script src="angular/angular-mocks.js"></script>

    <script src="app.js"></script>
    <script src="test.js"></script>
  </head>
  <body>
  </body>
</html>

angular.module().controller() を使って匿名関数でコントローラを定義しているケース。
mine モジュールからコントローラを取得する必要がある。

angular-mocks.js を使うことで、テストコード中でモジュール内の各インスタンスを取得できる。

module(‘mine’); で、 mine モジュールを読み込んでいる。

inject() に渡した関数内で必要なスコープやコントローラを取り出している。

请参考

Unit Testing Best Practices in AngularJS