AngularJS - 如果创建了TDD样式，它会是什么样子？

Question

我正在将所有代码转移到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();
        }]);

})();

Answer 1

测试很简单，您只需断言您的工厂正常工作即可。这并不意味着您希望实际获取/放置/发布属于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。或者甚至将联系人或卡号为0的createSystem调用也不会调用Api。

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

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