Index: third_party/polymer/components/iron-form/test/basic.html |
diff --git a/third_party/polymer/components/iron-form/test/basic.html b/third_party/polymer/components/iron-form/test/basic.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..09f39ed7fab6ca7a7b4fd3ab9c78a88e401f9e02 |
--- /dev/null |
+++ b/third_party/polymer/components/iron-form/test/basic.html |
@@ -0,0 +1,804 @@ |
+<!doctype html> |
+<!-- |
+@license |
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
+Code distributed by Google as part of the polymer project is also |
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
+--> |
+<html> |
+<head> |
+ <title>iron-form</title> |
+ |
+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
+ <script src="../../web-component-tester/browser.js"></script> |
+ |
+ <link rel="import" href="../../polymer/polymer.html"> |
+ <link rel="import" href="../../paper-input/paper-input.html"> |
+ <link rel="import" href="../../paper-input/paper-textarea.html"> |
+ <link rel="import" href="../iron-form.html"> |
+ <link rel="import" href="simple-element.html"> |
+ <link rel="import" href="element-with-nested-form-element.html"> |
+ <link rel="import" href="element-with-nested-input.html"> |
+ <link rel="import" href="validatable-element-with-nested-elements.html"> |
+ |
+</head> |
+<body> |
+ |
+ <test-fixture id="Basic"> |
+ <template> |
+ <form is="iron-form"> |
+ <simple-element name="zig" value="zag"></simple-element> |
+ <input name="foo" value="bar"> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="Dupes"> |
+ <template> |
+ <form is="iron-form"> |
+ <input name="foo" value="bar"> |
+ <input name="foo" value="barbar"> |
+ <simple-element name="zig" value="zig"></simple-element> |
+ <simple-element name="zig" value="zag"></simple-element> |
+ <simple-element name="zig" value="zug"></simple-element> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="NestedDupes"> |
+ <template> |
+ <form is="iron-form"> |
+ <element-with-nested-form-element name="foo" value="bar"></element-with-nested-form-element> |
+ <element-with-nested-input name="zig" value="zag"></element-with-nested-input> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="NestedSubmittable"> |
+ <template> |
+ <form is="iron-form"> |
+ <element-with-nested-form-element> |
+ <simple-element name="foo" value="bar"></simple-element> |
+ </element-with-nested-form-element> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="CheckedStates"> |
+ <template> |
+ <form is="iron-form"> |
+ <input type="checkbox" name="foo" value="bar1" checked> |
+ <input type="checkbox" name="foo" value="bar2"> |
+ <input type="checkbox" name="foo" value="bar3" checked> |
+ <input type="checkbox" name="foo" value="bar4"> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="Disabled"> |
+ <template> |
+ <form is="iron-form"> |
+ <input name="foo" value="bar1"> |
+ <input name="foo" value="bar2" disabled> |
+ <input type="checkbox" name="zig" value="zag" disabled checked> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="FormGet"> |
+ <template> |
+ <form is="iron-form" action="/responds_with_json" method="get"> |
+ <simple-element name="zig" value="zag"></simple-element> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="FormPost"> |
+ <template> |
+ <form is="iron-form" action="/responds_with_json" method="post"> |
+ <simple-element name="zig" value="zag"></simple-element> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="InvalidForm"> |
+ <template> |
+ <form is="iron-form" action="/responds_with_json" method="post"> |
+ <simple-element name="zig"></simple-element> |
+ <input name="foo" required> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="FormWithRequiredCustomElements"> |
+ <template> |
+ <form is="iron-form" action="/responds_with_json" method="post"> |
+ <simple-element required></simple-element> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="FormWithRequiredElements"> |
+ <template> |
+ <form is="iron-form" action="/responds_with_json" method="post"> |
+ <input required> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="FormValidateNonRequiredCustomElements"> |
+ <template> |
+ <form is="iron-form" action="/responds_with_json" method="post"> |
+ <paper-input label="numbers" pattern="^[0-9]$" ></paper-input> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="FormValidateNonRequiredElements"> |
+ <template> |
+ <form is="iron-form" action="/responds_with_json" method="post"> |
+ <input type="text" name="letters" pattern="^[a-z]$" > |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="FormValidateNestedElements"> |
+ <template> |
+ <form is="iron-form"> |
+ <validatable-element-with-nested-elements> |
+ <simple-element required></simple-element> |
+ <input required> |
+ </validatable-element-with-nested-elements> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="FormForResetting"> |
+ <template> |
+ <form is="iron-form"> |
+ <simple-element name="zig" value="zag"></simple-element> |
+ <paper-input name="zig" value="zug"></paper-input> |
+ <paper-input name="blank" value=""></paper-input> |
+ <paper-textarea name="zig" value="zog"></paper-textarea> |
+ <paper-textarea name="undef"></paper-textarea> |
+ <paper-textarea name="blank" value=""></paper-textarea> |
+ <input name="blank" value=""> |
+ <input name="foo" value="bar"> |
+ <input type="checkbox" name="foo" value="bar1" checked> |
+ <input type="checkbox" name="foo" value="bar2"> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <test-fixture id="NativeSelect"> |
+ <template> |
+ <form is="iron-form"> |
+ <select name="numbers" multiple> |
+ <option value="one" selected>one</option> |
+ <option value="two">two</option> |
+ <option value="three" selected>three</option> |
+ <option value="four">four</option> |
+ </select> |
+ |
+ <select name="cheese"> |
+ <option value="yes" selected>yes</option> |
+ <option value="no">no</option> |
+ </select> |
+ </form> |
+ </template> |
+ </test-fixture> |
+ |
+ <script> |
+ suite('registration', function() { |
+ var f; |
+ test('elements can be registered', function() { |
+ f = fixture('Basic'); |
+ |
+ assert.equal(f._customElements.length, 1); |
+ assert.equal(f.elements.length, 1); |
+ }); |
+ |
+ test('elements can be unregistered', function(done) { |
+ f = fixture('Basic'); |
+ var element = f.querySelector('simple-element'); |
+ |
+ assert.equal(f._customElements.length, 1); |
+ assert.equal(f.elements.length, 1); |
+ |
+ f.removeChild(element); |
+ |
+ setTimeout(function() { |
+ assert.equal(f._customElements.length, 0); |
+ assert.equal(f.elements.length, 1); |
+ done(); |
+ }, 200); |
+ }); |
+ }); |
+ |
+ suite('validation', function() { |
+ test('custom elements are validated if they don\'t have a name', function() { |
+ var f = fixture('FormWithRequiredCustomElements'); |
+ assert.equal(f._customElements.length, 1); |
+ |
+ var simpleElement = f._customElements[0]; |
+ assert.isFalse(!!simpleElement.name) |
+ |
+ // custom elements |
+ assert.isFalse(f.validate()); |
+ assert.isTrue(simpleElement.invalid); |
+ |
+ simpleElement.value = 'batman'; |
+ |
+ assert.isTrue(f.validate()); |
+ assert.isFalse(simpleElement.invalid); |
+ |
+ // Since the elements don't have names, they don't get serialized. |
+ var json = f.serialize(); |
+ assert.equal(Object.keys(json).length, 0); |
+ }); |
+ |
+ test('native elements are validated if they don\'t have a name', function() { |
+ var f = fixture('FormWithRequiredElements'); |
+ assert.equal(f.elements.length, 1); |
+ |
+ var input = f.elements[0]; |
+ |
+ assert.isFalse(!!input.name) |
+ |
+ assert.isFalse(f.validate()); |
+ assert.isFalse(input.validity.valid); |
+ |
+ input.value = 'robin'; |
+ |
+ assert.isTrue(f.validate()); |
+ assert.isTrue(input.validity.valid); |
+ |
+ // Since the elements don't have names, they don't get serialized. |
+ var json = f.serialize(); |
+ assert.equal(Object.keys(json).length, 0); |
+ }); |
+ |
+ test('custom elements are validated if they have a name', function() { |
+ var f = fixture('FormWithRequiredCustomElements'); |
+ assert.equal(f._customElements.length, 1); |
+ |
+ var simpleElement = f._customElements[0]; |
+ simpleElement.name = 'zig'; |
+ |
+ assert.isFalse(f.validate()); |
+ assert.isTrue(simpleElement.invalid); |
+ |
+ simpleElement.value = 'batman'; |
+ |
+ assert.isTrue(f.validate()); |
+ assert.isFalse(simpleElement.invalid); |
+ |
+ // The elements have names, so they're serialized. |
+ var json = f.serialize(); |
+ assert.equal(Object.keys(json).length, 1); |
+ }); |
+ |
+ test('native elements are validated if they have a name', function() { |
+ var f = fixture('FormWithRequiredElements'); |
+ assert.equal(f.elements.length, 1); |
+ |
+ var input = f.elements[0]; |
+ input.name = 'zag'; |
+ |
+ assert.isFalse(f.validate()); |
+ assert.isFalse(input.validity.valid); |
+ |
+ input.value = 'robin'; |
+ |
+ assert.isTrue(f.validate()); |
+ assert.isTrue(input.validity.valid); |
+ |
+ // The elements have names, so they're serialized. |
+ var json = f.serialize(); |
+ assert.equal(Object.keys(json).length, 1); |
+ }); |
+ |
+ test('non-required custom elements are validated', function() { |
+ var |
+ f = fixture('FormValidateNonRequiredCustomElements'), |
+ elements = f.getEffectiveChildren(), |
+ input = elements && elements[0] |
+ ; |
+ |
+ assert.equal(elements.length, 1); |
+ |
+ assert.isTrue(f.validate()); |
+ assert.isTrue(input.validate()); |
+ |
+ input.value = "abcdefg"; |
+ |
+ assert.isFalse(f.validate()); |
+ assert.isFalse(input.validate()); |
+ }); |
+ |
+ test('non-required native elements are validated', function() { |
+ var f = fixture('FormValidateNonRequiredElements'); |
+ assert.equal(f.elements.length, 1); |
+ |
+ var input = f.elements[0]; |
+ |
+ assert.isTrue(f.validate()); |
+ assert.isTrue(input.validity.valid); |
+ |
+ input.value = "012345"; |
+ |
+ assert.isFalse(f.validate()); |
+ assert.isFalse(input.validity.valid); |
+ }); |
+ |
+ test('nested elements are not validated', function() { |
+ var f = fixture('FormValidateNestedElements'); |
+ |
+ // <validatable-element-with-nested-elements> returns true. |
+ assert.isTrue(f.validate()); |
+ |
+ // The form also contains an invalid custom and native element, but those |
+ // shouldn't affect the form's validity. |
+ assert.equal(f._customElements.length, 2); |
+ assert.equal(f.elements.length, 1); |
+ assert.isFalse(f.$$('simple-element').validate()); |
+ assert.isFalse(f.$$('input').checkValidity()); |
+ }); |
+ }); |
+ |
+ suite('serializing', function() { |
+ var f; |
+ test('serializes both custom and native elements', function() { |
+ f = fixture('Basic'); |
+ |
+ assert.equal(f._customElements.length, 1); |
+ assert.equal(f.elements.length, 1); |
+ |
+ var json = f.serialize(); |
+ assert.equal(Object.keys(json).length, 2); |
+ assert.equal(json['zig'], 'zag'); |
+ assert.equal(json['foo'], 'bar'); |
+ }); |
+ |
+ test('serializes elements with duplicate names', function() { |
+ f = fixture('Dupes'); |
+ |
+ assert.equal(f._customElements.length, 3); |
+ assert.equal(f.elements.length, 2); |
+ |
+ var json = f.serialize(); |
+ assert.equal(Object.keys(json).length, 2); |
+ assert.equal(json['foo'].length, 2); |
+ assert.equal(json['foo'][0], 'bar'); |
+ assert.equal(json['foo'][1], 'barbar'); |
+ assert.equal(json['zig'].length, 3); |
+ assert.equal(json['zig'][0], 'zig'); |
+ assert.equal(json['zig'][1], 'zag'); |
+ assert.equal(json['zig'][2], 'zug'); |
+ }); |
+ |
+ test('serializes elements with checked states', function() { |
+ f = fixture('CheckedStates'); |
+ |
+ assert.equal(f._customElements.length, 0); |
+ assert.equal(f.elements.length, 4); |
+ |
+ var json = f.serialize(); |
+ assert.equal(Object.keys(json).length, 1); |
+ assert.equal(json['foo'].length, 2); |
+ assert.equal(json['foo'][0], 'bar1'); |
+ assert.equal(json['foo'][1], 'bar3'); |
+ }); |
+ |
+ test('serializes a native select element with or without multiple selection', function() { |
+ f = fixture('NativeSelect'); |
+ |
+ assert.equal(f._customElements.length, 0); |
+ assert.equal(f.elements.length, 2); |
+ |
+ var json = f.serialize(); |
+ assert.equal(Object.keys(json).length, 2); |
+ |
+ // Single selection. |
+ assert.equal(json['cheese'], 'yes'); |
+ |
+ // Multiple selection. |
+ assert.equal(json['numbers'].length, 2); |
+ assert.equal(json['numbers'][0], 'one'); |
+ assert.equal(json['numbers'][1], 'three'); |
+ }); |
+ |
+ test('does not serialize disabled elements', function() { |
+ f = fixture('Disabled'); |
+ |
+ assert.equal(f._customElements.length, 0); |
+ assert.equal(f.elements.length, 3); |
+ |
+ var json = f.serialize(); |
+ assert.equal(Object.keys(json).length, 1); |
+ assert.equal(json['foo'], 'bar1'); |
+ }); |
+ |
+ test('nested elements are only serialized once', function() { |
+ f = fixture('NestedDupes'); |
+ |
+ assert.equal(f._customElements.length, 3); |
+ |
+ var json = f.serialize(); |
+ assert.equal(Object.keys(json).length, 2); |
+ assert.equal(json['foo'], 'bar'); |
+ assert.equal(json['zig'], 'zag'); |
+ }); |
+ |
+ |
+ test('nested elements can be submitted if parents aren\'t submittable', function() { |
+ f = fixture('NestedSubmittable'); |
+ |
+ var json = f.serialize(); |
+ assert.equal(Object.keys(json).length, 1); |
+ assert.equal(json['foo'], 'bar'); |
+ }); |
+ |
+ }); |
+ |
+ suite('resetting', function () { |
+ test('form restores the default values if changes were made', function(done) { |
+ var form = fixture('FormForResetting'); |
+ |
+ // Initial values. |
+ var customElement = form.querySelector('simple-element'); |
+ var input = form.querySelector('input[name="foo"]'); |
+ var inputBlank = form.querySelector('input[name="blank"]'); |
+ var checkbox1 = form.querySelectorAll('input[type="checkbox"]')[0]; |
+ var checkbox2 = form.querySelectorAll('input[type="checkbox"]')[1]; |
+ var paperInput = form.querySelector('paper-input[name="zig"]'); |
+ var paperInputBlank = form.querySelector('paper-input[name="blank"]'); |
+ var paperTextarea = form.querySelector('paper-textarea[name="zig"]'); |
+ var paperTextareaBlank = form.querySelector('paper-textarea[name="blank"]'); |
+ |
+ assert.equal(customElement.value, 'zag'); |
+ assert.equal(input.value, 'bar'); |
+ assert.equal(inputBlank.value, ''); |
+ assert.isTrue(checkbox1.checked); |
+ assert.isFalse(checkbox2.checked); |
+ assert.equal(paperInput.value, 'zug'); |
+ assert.equal(paperInput.inputElement.value, 'zug'); |
+ assert.equal(paperInputBlank.value, ''); |
+ assert.equal(paperInputBlank.inputElement.value, ''); |
+ assert.equal(paperTextarea.value, 'zog'); |
+ assert.equal(paperTextarea.inputElement.textarea.value, 'zog'); |
+ assert.equal(paperTextareaBlank.value, ''); |
+ assert.equal(paperTextareaBlank.inputElement.textarea.value, ''); |
+ |
+ // Change the values. |
+ customElement.value = 'not zag'; |
+ input.value = 'not bar'; |
+ inputBlank.value = 'not blank'; |
+ checkbox1.checked = false; |
+ checkbox2.checked = true; |
+ paperInput.value = 'not zug'; |
+ paperInputBlank.value = 'not blank'; |
+ paperTextarea.value = 'not zog'; |
+ paperTextareaBlank.value = 'not blank'; |
+ |
+ assert.equal(customElement.value, 'not zag'); |
+ assert.equal(input.value, 'not bar'); |
+ assert.equal(inputBlank.value, 'not blank'); |
+ assert.isFalse(checkbox1.checked); |
+ assert.isTrue(checkbox2.checked); |
+ assert.equal(paperInput.value, 'not zug'); |
+ assert.equal(paperInput.inputElement.value, 'not zug'); |
+ assert.equal(paperInputBlank.value, 'not blank'); |
+ assert.equal(paperInputBlank.inputElement.value, 'not blank'); |
+ assert.equal(paperTextarea.value, 'not zog'); |
+ assert.equal(paperTextarea.inputElement.textarea.value, 'not zog'); |
+ assert.equal(paperTextareaBlank.value, 'not blank'); |
+ assert.equal(paperTextareaBlank.inputElement.textarea.value, 'not blank'); |
+ |
+ form.addEventListener('iron-form-reset', function(event) { |
+ // Restored initial values. |
+ assert.equal(customElement.value, 'zag'); |
+ assert.equal(input.value, 'bar'); |
+ assert.equal(inputBlank.value, ''); |
+ assert.isTrue(checkbox1.checked); |
+ assert.isFalse(checkbox2.checked); |
+ assert.equal(paperInput.value, 'zug'); |
+ assert.equal(paperInput.inputElement.value, 'zug'); |
+ assert.equal(paperInputBlank.value, ''); |
+ assert.equal(paperInputBlank.inputElement.value, ''); |
+ assert.equal(paperTextarea.value, 'zog'); |
+ assert.equal(paperTextarea.inputElement.textarea.value, 'zog'); |
+ assert.equal(paperTextareaBlank.value, ''); |
+ assert.equal(paperTextareaBlank.inputElement.textarea.value, ''); |
+ done(); |
+ }); |
+ |
+ form.reset(); |
+ }); |
+ |
+ test('form restores the default values if no changes were made', function(done) { |
+ var form = fixture('FormForResetting'); |
+ |
+ // Initial values. |
+ var customElement = form.querySelector('simple-element'); |
+ var input = form.querySelector('input[name="foo"]'); |
+ var inputBlank = form.querySelector('input[name="blank"]'); |
+ var checkbox1 = form.querySelectorAll('input[type="checkbox"]')[0]; |
+ var checkbox2 = form.querySelectorAll('input[type="checkbox"]')[1]; |
+ var paperInput = form.querySelector('paper-input[name="zig"]'); |
+ var paperInputBlank = form.querySelector('paper-input[name="blank"]'); |
+ var paperTextarea = form.querySelector('paper-textarea[name="zig"]'); |
+ var paperTextareaBlank = form.querySelector('paper-textarea[name="blank"]'); |
+ |
+ assert.equal(customElement.value, 'zag'); |
+ assert.equal(input.value, 'bar'); |
+ assert.equal(inputBlank.value, ''); |
+ assert.isTrue(checkbox1.checked); |
+ assert.isFalse(checkbox2.checked); |
+ assert.equal(paperInput.value, 'zug'); |
+ assert.equal(paperInput.inputElement.value, 'zug'); |
+ assert.equal(paperInputBlank.value, ''); |
+ assert.equal(paperInputBlank.inputElement.value, ''); |
+ assert.equal(paperTextarea.value, 'zog'); |
+ assert.equal(paperTextarea.inputElement.textarea.value, 'zog'); |
+ assert.equal(paperTextareaBlank.value, ''); |
+ assert.equal(paperTextareaBlank.inputElement.textarea.value, ''); |
+ |
+ form.addEventListener('iron-form-reset', function(event) { |
+ // Restored initial values. |
+ assert.equal(customElement.value, 'zag'); |
+ assert.equal(input.value, 'bar'); |
+ assert.equal(inputBlank.value, ''); |
+ assert.isTrue(checkbox1.checked); |
+ assert.isFalse(checkbox2.checked); |
+ assert.equal(paperInput.value, 'zug'); |
+ assert.equal(paperInput.inputElement.value, 'zug'); |
+ assert.equal(paperInputBlank.value, ''); |
+ assert.equal(paperInputBlank.inputElement.value, ''); |
+ assert.equal(paperTextarea.value, 'zog'); |
+ assert.equal(paperTextarea.inputElement.textarea.value, 'zog'); |
+ assert.equal(paperTextareaBlank.value, ''); |
+ assert.equal(paperTextareaBlank.inputElement.textarea.value, ''); |
+ done(); |
+ }); |
+ |
+ form.reset(); |
+ }); |
+ |
+ test('form restores null-value paper-textarea if initially undefined', function(done) { |
+ var form = fixture('FormForResetting'); |
+ var paperTextarea = form.querySelector('paper-textarea[name="undef"]'); |
+ |
+ form.addEventListener('iron-form-reset', function(event) { |
+ // Setting the native textarea's value to undefined causes it to |
+ // display literal "undefined", and paper-textarea.value is indirectly |
+ // bound to the textarea's value, so iron-form resets any undefined |
+ // initial values to null in order to avoid this problem. |
+ assert.equal(paperTextarea.value, null); |
+ assert.equal(paperTextarea.inputElement.textarea.value, ''); |
+ done(); |
+ }); |
+ |
+ form.reset(); |
+ }); |
+ |
+ test('validation messages are cleared', function(done) { |
+ var form = fixture('FormWithRequiredCustomElements'); |
+ assert.equal(form._customElements.length, 1); |
+ |
+ var customElement = form.querySelector('simple-element'); |
+ |
+ assert.isFalse(form.validate()); |
+ assert.isTrue(customElement.invalid); |
+ |
+ form.addEventListener('iron-form-reset', function(event) { |
+ // Cleared validation messages. |
+ assert.isFalse(customElement.invalid); |
+ done(); |
+ }); |
+ |
+ form.reset(); |
+ |
+ }); |
+ |
+ }); |
+ |
+ suite('submitting', function () { |
+ var server; |
+ var form; |
+ |
+ setup(function() { |
+ server = sinon.fakeServer.create(); |
+ server.respondWith( |
+ 'GET', |
+ /\/responds_with_json.*/, |
+ [ |
+ 200, |
+ '{"Content-Type":"application/json"}', |
+ '{"success":true}' |
+ ] |
+ ); |
+ |
+ server.respondWith( |
+ 'POST', |
+ /\/responds_with_json.*/, |
+ [ |
+ 200, |
+ '{"Content-Type":"application/json"}', |
+ '{"success":true}' |
+ ] |
+ ); |
+ |
+ server.respondWith( |
+ 'GET', |
+ /\/responds_with_error.*/, |
+ [ |
+ 404, |
+ '{"Content-Type":"application/text"}', |
+ '{"success":false}' |
+ ] |
+ ); |
+ }); |
+ |
+ teardown(function() { |
+ server.restore(); |
+ }); |
+ |
+ test('does not submit forms with invalid native elements', function(done) { |
+ form = fixture('InvalidForm'); |
+ var nativeElement = form.querySelector('input'); |
+ var customElement = form.querySelector('simple-element'); |
+ customElement.value = "foo"; |
+ |
+ var submitted = false; |
+ form.addEventListener('iron-form-submit', function() { |
+ submitted = true; |
+ }); |
+ |
+ form.addEventListener('iron-form-invalid', function() { |
+ expect(submitted).to.be.equal(false); |
+ expect(nativeElement.validity.valid).to.be.equal(false); |
+ expect(customElement.invalid).to.be.equal(false); |
+ done(); |
+ }); |
+ |
+ form.submit(); |
+ server.respond(); |
+ }); |
+ |
+ test('can modify the request in the presubmit', function(done) { |
+ form = fixture('FormGet'); |
+ |
+ var submitted = false; |
+ var presubmitted = false; |
+ |
+ form.addEventListener('iron-form-submit', function() { |
+ submitted = true; |
+ }); |
+ |
+ form.addEventListener('iron-form-presubmit', function() { |
+ presubmitted = true; |
+ this.request.params = {batman: true}; |
+ }); |
+ |
+ form.addEventListener('iron-form-response', function(event) { |
+ expect(submitted).to.be.equal(true); |
+ expect(presubmitted).to.be.equal(true); |
+ |
+ // We have changed the json parameters |
+ expect(event.detail.url).to.contain('batman=true'); |
+ |
+ var response = event.detail.response; |
+ expect(response).to.be.ok; |
+ expect(response).to.be.an('object'); |
+ expect(response.success).to.be.equal(true); |
+ done(); |
+ }); |
+ |
+ form.submit(); |
+ server.respond(); |
+ }); |
+ |
+ |
+ test('can do a custom submission in the presubmit', function(done) { |
+ form = fixture('FormGet'); |
+ |
+ var presubmitted = false; |
+ |
+ // Since we are not using the normal form submission, these events should |
+ // never be called. |
+ var formResponseHandler = sinon.spy(); |
+ form.addEventListener('iron-form-response', formResponseHandler); |
+ var formSubmitHandler = sinon.spy(); |
+ form.addEventListener('iron-form-submit', formSubmitHandler); |
+ |
+ form.addEventListener('iron-form-presubmit', function(event) { |
+ presubmitted = true; |
+ event.preventDefault(); |
+ |
+ // Your custom submission logic could go here (like using Firebase). |
+ // In this case, fire a custom event as a an example. |
+ this.fire('custom-form-submit'); |
+ }); |
+ |
+ form.addEventListener('custom-form-submit', function(event) { |
+ expect(presubmitted).to.be.equal(true); |
+ expect(formResponseHandler.callCount).to.be.equal(0); |
+ expect(formSubmitHandler.callCount).to.be.equal(0); |
+ done(); |
+ }); |
+ |
+ form.submit(); |
+ }); |
+ |
+ test('can submit with method=get', function(done) { |
+ form = fixture('FormGet'); |
+ |
+ var submitted = false; |
+ form.addEventListener('iron-form-submit', function() { |
+ submitted = true; |
+ }); |
+ |
+ form.addEventListener('iron-form-response', function(event) { |
+ expect(submitted).to.be.equal(true); |
+ expect(event.detail.url).to.contain('zig=zag'); |
+ |
+ var response = event.detail.response; |
+ expect(response).to.be.ok; |
+ expect(response).to.be.an('object'); |
+ expect(response.success).to.be.equal(true); |
+ done(); |
+ }); |
+ |
+ form.submit(); |
+ server.respond(); |
+ }); |
+ |
+ test('can submit with method=post', function(done) { |
+ form = fixture('FormPost'); |
+ |
+ var submitted = false; |
+ form.addEventListener('iron-form-submit', function() { |
+ submitted = true; |
+ }); |
+ |
+ form.addEventListener('iron-form-response', function(event) { |
+ expect(submitted).to.be.equal(true); |
+ |
+ var response = event.detail.response; |
+ expect(response).to.be.ok; |
+ expect(response).to.be.an('object'); |
+ expect(response.success).to.be.equal(true); |
+ done(); |
+ }); |
+ |
+ form.submit(); |
+ server.respond(); |
+ }); |
+ |
+ test('can relay errors', function(done) { |
+ form = fixture('FormPost'); |
+ form.action = "/responds_with_error"; |
+ |
+ form.addEventListener('iron-form-error', function(event) { |
+ var error = event.detail; |
+ |
+ expect(error).to.be.ok; |
+ expect(error).to.be.an('object'); |
+ expect(error.error).to.be.ok; |
+ done(); |
+ }); |
+ |
+ form.submit(); |
+ server.respond(); |
+ }); |
+ |
+ }); |
+ |
+ </script> |
+ |
+</body> |
+</html> |