test(validation): validation tests

Also update the docs.

closes #19

.jshintrc

@@ -50,6 +50,7 @@
         "describe",
         "document",
         "expect",
+        "jasmine",
         "navigator",
         "FrameGrab",
         "it",

file-input.html

@@ -13,6 +13,17 @@
 
 Now, a new, better, evolved (and evolving) element to take its place: `<file-input>`!
 
+#### `<file-input>` integrates perfectly with `<ajax-form>`!
+Simply include a `<file-input>` in [an `<ajax-form>`](https://github.com/garstasio/ajax-form), 
+ensure the `name` attribute is present on the `<file-input>`, and the `<ajax-form>` 
+includes an `enctype` attriute with a value of `multipart/form-data`.  Any valid 
+files will be sent along with the other form fields!  
+
+If you incoude a `required` attribute on the `<file-input>`, `<ajax-form>` will 
+even prevent the form from being submitted if there isn't at least one valid 
+file selected!  Note that the validation of custom elements, such as `<file-input>`,
+will first be possible in [`<ajax-form>` 1.3.0](https://github.com/garstasio/ajax-form/issues/6).
+
 __Don't forget to [vulcanize](http://www.polymer-project.org/articles/concatenating-web-components.html)
 your main/parent HTML file before deploying into production.  This will ensure
 that all of your HTML imports are concatenated into one file.__

test/unit/file-input-spec.js

@@ -12,7 +12,9 @@ describe("file-input custom element tests", function() {
                 fileInput: fileInputEl
             },
 
-            fire: function() {}
+            fire: function() {},
+
+            invalidText: "not valid!"
         };
 
         this.fileInputEl = fileInputEl;
@@ -264,5 +266,45 @@ describe("file-input custom element tests", function() {
             expect(this.customElementInstance.files).toEqual(expectedValid);
             expect(this.customElementInstance.invalid).toEqual(expectedInvalid);
          });
+
+         it("marks the element as invalid on load if `required` attribute exists", function() {
+            var delegateInputEl,
+                fakeParent = jasmine.createSpyObj("fakeParent", ["insertBefore"]);
+
+            this.customElementInstance.parentNode = fakeParent;
+            fakeParent.insertBefore.and.callFake(function(delegateInput, customEl) {
+                delegateInputEl = delegateInput;
+
+                expect(delegateInput.tagName.toLowerCase()).toEqual("input");
+                expect(delegateInputEl.validity.valid).toBe(true);
+            });
+
+            this.customElementInstance.files = [];
+            this.customElementInstance.required = "";
+
+            fileInput.domReady.call(this.customElementInstance);
+            expect(delegateInputEl.validity.valid).toBe(false);
+            expect(delegateInputEl.customElementRef).toEqual(this.customElementInstance);
+         });
+
+         it("marks the element as valid on load if `required` attribute exists once it is truly valid", function() {
+            var delegateInputEl,
+                fakeParent = jasmine.createSpyObj("fakeParent", ["insertBefore"]);
+
+            this.customElementInstance.parentNode = fakeParent;
+            fakeParent.insertBefore.and.callFake(function(delegateInput, customEl) {
+                delegateInputEl = delegateInput;
+            });
+
+            this.customElementInstance.files = [];
+            this.customElementInstance.required = "";
+
+            fileInput.domReady.call(this.customElementInstance);
+
+            this.customElementInstance.$.fileInput.files = [{name: "pic.jpg", size: 1000}];
+            fileInput.changeHandler.call(this.customElementInstance);
+
+            expect(delegateInputEl.validity.valid).toBe(true);
+         });
     });
 });