refact(chapter-10): add helper directives and tests for field

Author: petebacondarwin

1820EN_10_Code/04_field_directive/directive.js

@@ -1,4 +1,4 @@
-angular.module('field-directive', ['input.html', 'textarea.html', 'select.html'])
+angular.module('field-directive', ['input.html', 'textarea.html', 'select.html', 'validationMessages.html'])
 
 .directive('field', function($compile, $http, $templateCache, $interpolate) {
 
@@ -65,6 +65,13 @@ angular.module('field-directive', ['input.html', 'textarea.html', 'select.html']
       // and the bind-validation-message directive will be able to access it
     },
     compile: function(element, attrs) {
+      if ( attrs.ngRepeat || attrs.ngSwitch || attrs.uiIf ) {
+        throw new Error('The ng-repeat, ng-switch and ui-if directives are not supported on the same element as the field directive.');
+      }
+      if ( !attrs.ngModel ) {
+        throw new Error('The ng-model directive must appear on the field element');
+      }
+
       // Extract the label and validation message info from the directive's original element
       var messageMap = getValidationMessageMap(element);
       var labelContent = extractLabelContent(element, attrs);
@@ -96,16 +103,8 @@ angular.module('field-directive', ['input.html', 'textarea.html', 'select.html']
           // We can't use interpolation in the template for directives such as ng-model
           var inputElement = findInputElement(newElement);
           angular.forEach(attrs.$attr, function (original, normalized) {
-            switch ( normalized ) {
-              case 'ngRepeat':
-              case 'ngSwitch':
-              case 'uiIf':
-                throw new Error(normalized + ' directives are not supported on the same element as the field directive.');
-              default:
-              var value = element.attr(original);
-              inputElement.attr(original, value);
-              break;
-            }
+            var value = element.attr(original);
+            inputElement.attr(original, value);
           });
 
           // Wire up the input (id and name) and its label (for).
@@ -122,11 +121,8 @@ angular.module('field-directive', ['input.html', 'textarea.html', 'select.html']
           // Place our template as a child of the original element
           element.append(newElement);
 
-          // Now that our template has been compiled and linked
-          // we can access the <input> element's ngModelController
-          childScope.$evalAsync(function(scope) {
-            scope.$field = inputElement.controller('ngModel');
-          });
+          // Now that our template has been compiled and linked we can access the <input> element's ngModelController
+          childScope.$field = inputElement.controller('ngModel');
         });
       };
     }
@@ -158,4 +154,11 @@ angular.module('field-directive', ['input.html', 'textarea.html', 'select.html']
       });
     }
   };
+})
+
+.directive('validationMessages', function() {
+  return {
+    restrict: 'E',
+    templateUrl: 'validationMessages.html'
+  };
 });

1820EN_10_Code/04_field_directive/directive.spec.js

@@ -1,22 +1,96 @@
 describe('field directive', function () {
-  var scope, $compile, element;
+  var scope, $compile, element, $httpBackend;
 
   beforeEach(module('field-directive'));
-  beforeEach(inject(function ($rootScope, _$compile_) {
+  beforeEach(inject(function ($rootScope, _$compile_, _$httpBackend_) {
     scope = $rootScope;
     $compile = _$compile_;
+    $httpBackend = _$httpBackend_;
   }));
 
   describe('templates', function() {
-    it('loads up a specified template', function() {});
-    it('loads up a template called "input" if none specified', function() {});
-    it('handles a missing template', function() {});
+    it('loads up a specified template', function() {
+      var element = $compile('<field field-label="X" ng-model="x" template="select.html"></field>')(scope);
+      scope.$digest();
+      expect(element.find('select')[0]).toBeDefined();
+    });
+
+    it('loads up a template called "input.html" if none specified', function() {
+      var element = $compile('<field field-label="X" ng-model="x"></field>')(scope);
+      scope.$digest();
+      expect(element.find('input')[0]).toBeDefined();      
+    });
+
+    it('handles a missing template', function() {
+      $httpBackend.expectGET('notDefined.html').respond(404, []);
+      expect(function() {
+        var element = $compile('<field field-label="X" ng-model="x" template="notDefined.html"></field>')(scope);
+        $httpBackend.flush();
+      }).toThrow();
+    });
+
+    it('appends the template onto the field element', function() {
+      var element = $compile('<field field-label="X" ng-model="x"></field>')(scope);
+      scope.$digest();
+      expect(element.prop('nodeName')).toBe('FIELD');
+      expect(element.find('input')[0]).toBeDefined();
+    });
+
+    it('applies name and id to the template\'s input element', function() {
+      var element = $compile('<field field-label="X" ng-model="x.y"></field>')(scope);
+      scope.$digest();
+      var inputElement = element.find('input');
+      expect(inputElement.attr('name')).toContain('x_y');
+      expect(inputElement.attr('id')).toContain('x_y');
+    });
+
+    it('applies a for attribute to the template\'s label element', function() {
+      var element = $compile('<field field-label="X" ng-model="x.y"></field>')(scope);
+      scope.$digest();
+      var labelElement = element.find('label');
+      expect(labelElement.attr('for')).toContain('x_y');
+    });
   });
   describe('attributes', function() {
-    it('copies attributes from the directive to the input/select/textarea element of the template', function() {});
-    it('interpolates the label attribute into the label element (of the template), if provided', function() {});
+    it('copies attributes from the directive to the input/select/textarea element of the template', function() {
+      var element = $compile('<field field-label="X" ng-model="x.y" ng-maxlength="3" x-y-z></field>')(scope);
+      scope.$digest();
+      var inputElement = element.find('input');
+      expect(inputElement.attr('ng-maxlength')).toBe('3');
+      expect(inputElement.attr('x-y-z')).toBe('');
+    });
+
+    it('raises an error if the field element contains ng-repeat, ng-switch or ui-if', function() {
+      expect(function() {
+        var element = $compile('<field field-label="X" ng-model="x.y" ng-repeat="a in b" x-y-z></field>')(scope);
+      }).toThrow();
+      expect(function() {
+        var element = $compile('<field field-label="X" ng-model="x.y" ng-switch="a" x-y-z></field>')(scope);
+      }).toThrow();
+      expect(function() {
+        var element = $compile('<field field-label="X" ng-model="x.y" ui-if="a" x-y-z></field>')(scope);
+      }).toThrow();
+    });
+
+    it('interpolates the field-label attribute into the label element (of the template), if provided', function() {
+
+    });
     it('transcludes the label element (child of the directive) contents into the label element (of the template), if provided', function() {});
     it('errors if neither an attribute nor element provide a label', function() {});
   });
+  describe('fieldController', function() {
+    it('puts all validator element stuff into fieldController.messageMap', function() {});
+
+  });
+  describe('scope', function() {
+    it('puts the ngModelController of the input element onto the scope as $field', function() {});
+  });
+});
+
+describe('validation-messages directive', function() {
+
+});
+
+describe('bind-validation-message directive', function() {
 
 });

1820EN_10_Code/04_field_directive/index.html

@@ -13,8 +13,9 @@
   <script src="template/input.html.js"></script>
   <script src="template/textarea.html.js"></script>
   <script src="template/select.html.js"></script>
+  <script src="template/validationMessages.html.js"></script>
 </head>
-<body ng-init="myModel = { items: [ { model:10, label: 'Model 1'}, { model: 20, label: 'Model 2'}] }">
+<body ng-init="myModel = {}">
   <form name="form" class="form-inline" novalidate>
     <field ng-model="myModel.myNumber" type="number" >
       <label>Labels which can <span ng-repeat="i in [0,1]">{{i}}</span> contain directives</label>

1820EN_10_Code/04_field_directive/template/input.html

@@ -2,9 +2,6 @@
   <label class="control-label" >{{label}}</label>
   <div class="controls">
     <input>
-    <span class="help-inline" 
-      ng-repeat="(key, error) in $field.$error"
-      ng-show="error && $field.$dirty"
-      bind-validation-message="{{key}}"></span>
+    <validation-messages></validation-messages>
   </div>
 </div>

1820EN_10_Code/04_field_directive/template/input.html.js

@@ -4,10 +4,7 @@ angular.module("input.html", []).run(["$templateCache", function($templateCache)
     "  <label class=\"control-label\" >{{label}}</label>" +
     "  <div class=\"controls\">" +
     "    <input>" +
-    "    <span class=\"help-inline\" " +
-    "      ng-repeat=\"(key, error) in $field.$error\"" +
-    "      ng-show=\"error && $field.$dirty\"" +
-    "      bind-validation-message=\"{{key}}\"></span>" +
+    "    <validation-messages></validation-messages>" +
     "  </div>" +
     "</div>");
 }]);

1820EN_10_Code/04_field_directive/template/select.html

@@ -2,9 +2,6 @@
   <label class="control-label">{{label}}</label>
   <div class="controls">
     <select></select>
-    <span class="help-inline" 
-      ng-repeat="(key, error) in $field.$error"
-      ng-show="error && $field.$dirty"
-      bind-validation-message="{{key}}"></span>
+    <validation-messages></validation-messages>
   </div>
 </div>

1820EN_10_Code/04_field_directive/template/select.html.js

@@ -4,10 +4,7 @@ angular.module("select.html", []).run(["$templateCache", function($templateCache
     "  <label class=\"control-label\">{{label}}</label>" +
     "  <div class=\"controls\">" +
     "    <select></select>" +
-    "    <span class=\"help-inline\" " +
-    "      ng-repeat=\"(key, error) in $field.$error\"" +
-    "      ng-show=\"error && $field.$dirty\"" +
-    "      bind-validation-message=\"{{key}}\"></span>" +
+    "    <validation-messages></validation-messages>" +
     "  </div>" +
     "</div>");
 }]);

1820EN_10_Code/04_field_directive/template/textarea.html

@@ -2,9 +2,6 @@
   <label class="control-label">{{label}}</label>
   <div class="controls">
     <textarea></textarea>
-    <span class="help-inline" 
-      ng-repeat="(key, error) in $field.$error"
-      ng-show="error && $field.$dirty"
-      bind-validation-message="{{key}}"></span>
+    <validation-messages></validation-messages>
   </div>
 </div>

1820EN_10_Code/04_field_directive/template/textarea.html.js

@@ -4,10 +4,7 @@ angular.module("textarea.html", []).run(["$templateCache", function($templateCac
     "  <label class=\"control-label\">{{label}}</label>" +
     "  <div class=\"controls\">" +
     "    <textarea></textarea>" +
-    "    <span class=\"help-inline\" " +
-    "      ng-repeat=\"(key, error) in $field.$error\"" +
-    "      ng-show=\"error && $field.$dirty\"" +
-    "      bind-validation-message=\"{{key}}\"></span>" +
+    "    <validation-messages></validation-messages>" +
     "  </div>" +
     "</div>");
 }]);

1820EN_10_Code/04_field_directive/template/validationMessages.html

@@ -0,0 +1,4 @@
+<span class="help-inline" 
+      ng-repeat="(key, error) in $field.$error"
+      ng-show="error && $field.$dirty"
+      bind-validation-message="{{key}}"></span>

1820EN_10_Code/04_field_directive/template/validationMessages.html.js

@@ -0,0 +1,7 @@
+angular.module("validationMessages.html", []).run(["$templateCache", function($templateCache) {
+  $templateCache.put("validationMessages.html",
+    "<span class=\"help-inline\" " +
+    "      ng-repeat=\"(key, error) in $field.$error\"" +
+    "      ng-show=\"error && $field.$dirty\"" +
+    "      bind-validation-message=\"{{key}}\"></span>");
+}]);