AngularJS - What would this look like had it been created TDD style?

Question

I'm in the process of transferring all of our code onto Karma and Jasmine and am having a hard time figuring out where I start.

What would this code look like had I started building it from a TDD standpoint? What does a simple test look like?

Note: This code works 100%, but I don't have any tests setup.

(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

Testing is easy, you just need to assert that your factory is working correctly. This doesn't mean that you want actually get/put/post stuff, that belongs to the Api test. Here we just want to know that calling certain functions of our factory will call some Api functions with the correct parameters.

I imagine that Api belongs to the system module. I load it and mock it:

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 will load your system module and then we just need to create a simple object with the interface of our Api service. No need to implement anything on them.

Then we just need to spy the methods (to be able to assert that they have been called).

Next, we load the system_centers module and we inject our services:

beforeEach(module('system_centers'));

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

inject is used to inject dependencies in our tests. We just need to inject our System factory.

What rest are the test, I created a bunch of them:

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();
});

They are much the same. We call some factory method and we expect that our Api has been called with some parameters. Or even that calling createSystem with contact or card id with 0 won't call the Api.

Well, this is a good head start. You can continue with more tests or with other parts of your application.

Here is the plunker: http://plnkr.co/edit/5vfg0Y1G0vo2nnz0xByN?p=preview