<!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> <script src="../../test-fixture/test-fixture-mocha.js"></script> <link rel="import" href="../../polymer/polymer.html"> <link rel="import" href="../../test-fixture/test-fixture.html"> <link rel="import" href="../iron-form.html"> <link rel="import" href="simple-element.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="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="FormWithRequiredElements"> <template> <form is="iron-form" action="/responds_with_json" method="post"> <simple-element required></simple-element> <input required> </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('elements are validated if they don\'t have a name', function() { var f = fixture('FormWithRequiredElements'); assert.equal(f._customElements.length, 1); assert.equal(f.elements.length, 1); var simpleElement = f._customElements[0]; var input = f.elements[0]; assert.isFalse(f.validate()); assert.isTrue(simpleElement.invalid); assert.isFalse(input.validity.valid); simpleElement.value = 'batman'; input.value = 'robin'; assert.isTrue(f.validate()); assert.isFalse(simpleElement.invalid); 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('elements are validated if they have a name', function() { var f = fixture('FormWithRequiredElements'); assert.equal(f._customElements.length, 1); assert.equal(f.elements.length, 1); var simpleElement = f._customElements[0]; var input = f.elements[0]; simpleElement.name = 'zig'; input.name = 'zag'; assert.isFalse(f.validate()); assert.isTrue(simpleElement.invalid); assert.isFalse(input.validity.valid); simpleElement.value = 'batman'; input.value = 'robin'; assert.isTrue(f.validate()); assert.isFalse(simpleElement.invalid); assert.isTrue(input.validity.valid); // The elements have names, so they're serialized. var json = f.serialize(); assert.equal(Object.keys(json).length, 2); }); }); 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('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'); }); }); 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 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); 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>