AngularJS - 如果创建了TDD风格,它会是什么样子？

我正在将所有代码转移到Karma和Jasmine上,并且很难弄清楚我从哪里开始.

如果从TDD的角度开始构建它,这段代码会是什么样子？简单的测试是什么样的？

注意:此代码100%工作,但我没有任何测试设置.

(function() {

    "use strict";

    angular.module('system_centers', [
        'system'
    ])

        .factory('System', ['Api', function(Api) {
            this.loadSystem = function(contactId, cardId) {
                return Api.get('lmc/contact/system/' + contactId, {
                    card_id: cardId
                });
            };

            this.completeSystem = function(recordId) {
                return Api.put('system/complete/' + recordId);
            };

            this.createSystem = function(contactId, cardId) {
                if (+contactId === 0 || +cardId === 0) {
                    return false;
                }

                return Api.post('contact/system/' + contactId, {
                    card_id: cardId,
                    type: 'systems',
                    origin: 'lmc'
                });
            };

            return this;
        }])

        .controller('System_centersCtrl', ['$scope', 'System', function($scope, System) {
            $scope.main.cardType = 'systems';
            $scope.main.type = 'system_centers';

            $scope.completeSystem = function(recordId) {
                System.completeSystem(recordId).success(function(){
                    toastr.success("System completed!");
                    $scope.createSystem();
                    $scope.loadSystems();
                });
            };

            $scope.createSystem = function() {
                System.createSystem($scope.main.contactId, $scope.main.cardId).success(function() {
                    $scope.loadSystem($scope.main.contactId, $scope.main.cardId);
                    $scope.loadContacts();
                });
            };

            $scope.loadSystem = function() {
                System.loadSystem($scope.main.contactId, $scope.main.cardId).success(function(data) {
                    if (data.error) {
                        $scope.createSystem();
                    } else {
                        $scope.main.record = data.record;
                    }
                });
            };

            $scope.loadSystems();
        }]);

})();

Jesus Rodrig.. 6

测试很简单,您只需断言您的工厂正常工作即可.这并不意味着您想要实际获取/放置/发布属于Api测试的内容.在这里我们只想知道调用我们工厂的某些功能会调用一些Api具有正确参数的函数.

我想这Api属于system模块.我加载并模拟它:

beforeEach(module('system', function($provide) {
  api = {
    get: function(url, params) {},
    put: function(url, params) {},
    post: function(url, params) {}
  };

  spyOn(api, 'get');
  spyOn(api, 'put');
  spyOn(api, 'post');

  $provide.value('Api', api);
}));

module将加载您的system模块,然后我们只需要使用我们的Api服务接口创建一个简单的对象.无需对它们实施任何操作.

然后我们只需要监视方法(以便断言它们已被调用).

接下来,我们加载system_centers模块,然后注入我们的服务:

beforeEach(module('system_centers'));

beforeEach(inject(function(System) {
  system = System;
}));

inject用于在我们的测试中注入依赖项.我们只需要注入我们的System工厂.

测试剩下什么,我创建了一堆:

it('should load the system', function() {
  system.loadSystem(1, 0);
  expect(api.get).toHaveBeenCalledWith('lmc/contact/system/1', {card_id : 0});
});

it('should be able to complete the system', function() {
  system.completeSystem(20);
  expect(api.put).toHaveBeenCalledWith('system/complete/20');
});

it('should create the system', function() {
  system.createSystem(1, 3);
  expect(api.post).toHaveBeenCalledWith('contact/system/1', { card_id: 3, type: 'systems', origin: 'lmc'});
});

it('should not create the system if contact_id is 0', function() {
  system.createSystem(0, 20);
  expect(api.post).not.toHaveBeenCalled();
});

it('should not create the system if card_id is 0', function() {
  system.createSystem(1, 0);
  expect(api.post).not.toHaveBeenCalled();
});

它们大致相同.我们调用一些工厂方法,我们希望我们Api已经调用了一些参数.或者甚至createSystem用联系人或卡号为0的呼叫也不会呼叫Api.

嗯,这是一个良好的开端.您可以继续进行更多测试或应用程序的其他部分.

以下是plunker:http://plnkr.co/edit/5vfg0Y1G0vo2nnz0xByN?p=preview