About Me

• UI Architect at Verizon Digital Media Services
• Teach web development classes at USC for the Information Technology Program (ITP)
• Passionate about testing the frontend

Overview

• Our technology stack and tooling
• How we use a component architecture in Angular to make more maintainable and testable apps

APIs

app.controller('CatFormController', function(cat, Kitten, $log, CatValidator, Food, Color, $location) {
    var vm = this;

    init();

    function init() {
        Kitten.all({ cat: cat }).then(function(kittens) {
            vm.kittens = kittens;
        });

        Food.all().then(function(foods) {
            vm.foods = foods;
        });

        Color.all().then(function(colors) {
            vm.colors = colors;
        });
        
    }

    vm.cancel = function() { /* implementation */ };
    
    vm.reset = function() { /* implementation */ };
    
    vm.save = function() {
        // validation
        // create cat if valid
    };

    vm.editKitten = function() { /* implementation */ };

    vm.createKitten = function() { /* implementation */ };
});

Monolithic controllers that are hard to understand

What is a component in Angular?

<action-button 
    value="Create" 
    processing-value="Processing..." 
    action="vm.create()"></action-button>

app
    .directive('actionButton', function() {
	return {
            restrict: 'E',
            templateUrl: 'action-button.html',
            scope: {
                action: '&',
	        value: '@',
		processingValue: '@'
            },
            controller: 'ActionButtonController',
            controllerAs: 'vm',
	    bindToController: true, // Angular 1.3
            link: function(scope, el, attrs, controller) {
                // custom DOM manipulation here
            }
        };
    })
    .controller('ActionButtonController', function() {
        var vm = this;
        vm.displayLabel = vm.value;
        vm.runAction = function() {
            vm.processing = true;
            vm.displayLabel = vm.processingValue;

            vm.action().finally(function() {
	        vm.processing = false;
                vm.displayLabel = vm.value;
	    });
        };
    });

Separate logic from DOM manipulation that pairs with the directive 

describe('ActionButtonController', function() {
    var $controller, $timeout;

    beforeEach(module('kittens'));
    beforeEach(inject(function(_$controller_, _$timeout_) {
      $controller = _$controller_;
      $timeout = _$timeout_;
    }));

    it('should call the action when runAction is called', function() {
        var actionSpy = jasmine.createSpy().and.returnValue($timeout(0));
        var controller = $controller('ActionButtonController', {}, {
          action: actionSpy
        });
        controller.runAction();
        expect(actionSpy).toHaveBeenCalled();
    });
});

Test directive logic independent of the directive

Summary

• VDMS supports a variety of backends
• We use a component based model in Angular similar to Ember and React which helps with maintainability and testability
• We are hiring UI and JavaScript Developers

Thank You!

Questions?

dtang@verizon.com
@skaterdav85

https://slides.com/davidtang/vdms

Unused

describe('<action-button> directive', function() {
  var scope, $compile, $timeout;

  beforeEach(module('kittens'));
  beforeEach(inject(function($rootScope, _$compile_, _$timeout_) {
      scope = $rootScope.$new();
      $compile = _$compile_;
      $timeout = _$timeout_;
  }));

  it('should call the action when runAction is called', function() {
      var element = '<action-button value="Create" processing-value="Processing..." action="create()"></action-button>';
      scope.create = jasmine.createSpy().and.returnValue($timeout(0));
      element = $compile(element)(scope);
      element.isolateScope().runAction();
      expect(scope.create).toHaveBeenCalled();
  });
});

You could use nested controllers with

ng-controller