| <!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-checkbox/paper-checkbox.html"> |
| <link rel="import" href="../../paper-input/paper-input.html"> |
| <link rel="import" href="../../paper-button/paper-button.html"> |
| <link rel="import" href="../iron-form.html"> |
| |
| </head> |
| <body> |
| |
| <dom-module id="x-input-wrapper"> |
| <template> |
| <input name="check_wrapped" value="foo"/> |
| </template> |
| </dom-module> |
| |
| <test-fixture id="serialization"> |
| <template> |
| <div> |
| <iron-form id="native-checkboxes"> |
| <form action="/get" method="get"> |
| <input type="checkbox" name="check1" checked> <!-- default value is "on" --> |
| <input type="checkbox" name="check1" value="1"> |
| <input type="checkbox" name="check1" value="2" checked> |
| <input type="checkbox" name="check2" value="3" checked> |
| <input type="checkbox" name="check3" value="4"> |
| </form> |
| </iron-form> |
| <iron-form id="native-radios"> |
| <form action="/get" method="get"> |
| <input type="radio" name="radio1" checked> <!-- default value is "on" --> |
| <input type="radio" name="radio1" value="1"> |
| <input type="radio" name="radio2" value="2" checked> |
| <input type="radio" name="radio2" value="3" checked> <!-- it's a radio group --> |
| <input type="radio" name="radio3" value="4"> |
| </form> |
| </iron-form> |
| <iron-form id="native-buttons"> |
| <form action="/get" method="get"> |
| <input type="reset" name="reset1" value="reset"> |
| <input type="submit" name="submit1" value="submit"> |
| <button name="button1" value="button">text</button> |
| </form> |
| </iron-form> |
| <iron-form id="native-selects"> |
| <form action="/get" method="get"> |
| <select name="select1" multiple> |
| <option value="1" selected>A</option> |
| <option value="2" selected>B</option> |
| <option value="3">C</option> |
| </select> |
| <select name="select2"> |
| <option value="1" selected>A</option> |
| <option value="2">B</option> |
| </select> |
| </form> |
| </iron-form> |
| <iron-form id="native-inputs"> |
| <form action="/get" method="get"> |
| <input type="text" name="input1"> |
| <input type="text" name="input1" value="foo"> |
| <input type="text" name="input1" value="zag"> |
| <input type="text" name="input2" value="bar"> |
| <input type="password" name="pass1" value="pass"> |
| <input type="number" name="number1" value="35"> |
| <input name="empty" value=""> |
| <input name="empty" value=""> |
| </form> |
| </iron-form> |
| <iron-form id="native-inputs-empty"> |
| <form action="/get" method="get"> |
| <input type="text" name="input1"> |
| </form> |
| </iron-form> |
| <iron-form id="custom-checkboxes"> |
| <form action="/get" method="get"> |
| <paper-checkbox name="check1" checked></paper-checkbox> <!-- default value is "on" --> |
| <paper-checkbox name="check1" value="1"></paper-checkbox> |
| <paper-checkbox name="check1" value="2" checked></paper-checkbox> |
| <paper-checkbox name="check2" value="3" checked></paper-checkbox> |
| <paper-checkbox name="check3" value="4"></paper-checkbox> |
| </form> |
| </iron-form> |
| <iron-form id="custom-inputs"> |
| <form action="/get" method="get"> |
| <paper-input name="input1" value=""></paper-input> |
| <paper-input name="input1" value="foo"></paper-input> |
| <paper-input name="input1" value="zag"></paper-input> |
| <paper-input name="input2" value="bar"></paper-input> |
| <paper-input type="password" name="pass1" value="pass"></paper-input> |
| <paper-input type="number" name="number1" value="35"></paper-input> |
| <paper-input name="empty" value=""></paper-input> |
| <paper-input name="empty" value=""></paper-input> |
| <x-input-wrapper></x-input-wrapper> |
| </form> |
| </iron-form> |
| <iron-form id="nested-elements"> |
| <form action="/get" method="get"> |
| <div> |
| <input type="text" name="input1" value="i1"> |
| </div> |
| <div> |
| <paper-input name="paper-input1" value="p1"></paper-input> |
| </div> |
| <div> |
| <p> |
| <div> |
| <input type="text" name="input2" value="i2"> |
| <paper-input name="paper-input2" value="p2"></paper-input> |
| </div> |
| </p> |
| </div> |
| </form> |
| </iron-form> |
| <iron-form id="duplicate-names"> |
| <form action="/get" method="get"> |
| <input name="input1" value=""> |
| <input name="input1" value="foo"> |
| <paper-input name="input1" value=""></paper-input> |
| <paper-input name="input1" value="bar"></paper-input> |
| <input name="empty" value=""> |
| <input name="empty" value=""> |
| <paper-input name="empty" value=""></paper-input> |
| <paper-input name="empty" value=""></paper-input> |
| </form> |
| </iron-form> |
| |
| </div> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="validation"> |
| <template> |
| <div> |
| <iron-form id="native-required"> |
| <form action="/get" method="get"> |
| <input required> |
| </form> |
| </iron-form> |
| |
| <iron-form id="native-invalid"> |
| <form action="/get" method="get"> |
| <input pattern="aa" value="b"> |
| </form> |
| </iron-form> |
| |
| <iron-form id="custom-required"> |
| <form action="/get" method="get"> |
| <paper-input required></paper-input> |
| </form> |
| </iron-form> |
| |
| <iron-form id="custom-invalid"> |
| <form action="/get" method="get"> |
| <paper-input pattern="aa" value="b"></paper-input> |
| </form> |
| </iron-form> |
| |
| <iron-form id="mixed-invalid"> |
| <form action="/get" method="get"> |
| <input pattern="aa" value="b"> |
| <paper-input pattern="aa" value="b"></paper-input> |
| </form> |
| </iron-form> |
| </div> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="submission"> |
| <template> |
| <iron-form> |
| <form action="/get" method="get"> |
| <input type="checkbox" name="check1" checked> |
| <input type="submit"> |
| <input type="button"> |
| <paper-button></paper-button> |
| </form> |
| </iron-form> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="resetting"> |
| <template> |
| <iron-form> |
| <form action="/get" method="get"> |
| <input type="input" name="input1" id="input1" value="input1"> |
| <input type="input" name="input2" id="input2"> |
| <input type="checkbox" name="check1" id="check1" checked> |
| <input type="checkbox" name="check2" id="check2"> |
| <input type="radio" name="radio1" id="radio1" checked> |
| <input type="radio" name="radio2" id="radio2"> |
| <paper-checkbox name="papercheck1" id="papercheck1" checked></paper-checkbox> |
| <paper-checkbox name="papercheck2" id="papercheck2"></paper-checkbox> |
| <paper-input name="paper1" id="paper1" value="paper1"></paper-input> |
| <paper-input name="paper2" id="paper2" value=""></paper-input> |
| <input type="reset"> |
| </form> |
| </iron-form> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="content-type"> |
| <template> |
| <div> |
| <iron-form id="simple-form"> |
| <form action="/valid/url" method="post"> |
| <paper-input name="paper1" value="value1"></paper-input> |
| <paper-input name="paper2" value="value2"></paper-input> |
| </form> |
| </iron-form> |
| <iron-form id="json-form"> |
| <form action="/valid/url" method="post" enctype="application/json"> |
| <paper-input name="paper1" value="value1"></paper-input> |
| <paper-input name="paper2" value="value2"></paper-input> |
| </form> |
| </iron-form> |
| <iron-form id="plain-form"> |
| <form action="/valid/url" method="post" enctype="text/plain"> |
| <paper-input name="paper1" value="value1"></paper-input> |
| <paper-input name="paper2" value="value2"></paper-input> |
| </form> |
| </iron-form> |
| </div> |
| </template> |
| </test-fixture> |
| |
| <script> |
| suite('serialization', function() { |
| var f; |
| var server; |
| |
| suiteSetup(function () { |
| Polymer({is: 'x-input-wrapper'}); |
| }); |
| |
| setup(function() { |
| f = fixture('serialization'); |
| |
| server = sinon.fakeServer.create(); |
| server.respondWith( |
| 'GET', |
| /\/get.*/, |
| [ |
| 200, |
| '{"Content-Type":"application/json"}', |
| '{"success":true}' |
| ] |
| ); |
| }); |
| |
| teardown(function() { |
| server.restore(); |
| }); |
| |
| test('serializes native checkboxes', function(done) { |
| var form = f.querySelector('#native-checkboxes'); |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.url).to.equal('/get?check1=on&check1=2&check2=3'); |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| |
| test('serializes native radio buttons', function(done) { |
| var form = f.querySelector('#native-radios'); |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.url).to.equal('/get?radio1=on&radio2=3'); |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| |
| test('serializes native buttons', function(done) { |
| var form = f.querySelector('#native-buttons'); |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.url).to.equal('/get'); |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| |
| test('serializes native selects', function(done) { |
| var form = f.querySelector('#native-selects'); |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.url).to.equal('/get?select1=1&select1=2&select2=1'); |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| |
| test('serializes native inputs', function(done) { |
| var form = f.querySelector('#native-inputs'); |
| |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.url).to.equal('/get?input1=&input1=foo&input1=zag&input2=bar&pass1=pass&number1=35&empty=&empty='); |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| |
| test('serializes empty native inputs', function(done) { |
| var form = f.querySelector('#native-inputs-empty'); |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.url).to.equal('/get?input1='); |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| |
| test('serializes custom checkboxes', function(done) { |
| var form = f.querySelector('#custom-checkboxes'); |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.url).to.equal('/get?check1=on&check1=2&check2=3'); |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| |
| test('serializes custom inputs', function(done) { |
| var form = f.querySelector('#custom-inputs'); |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.url).to.equal('/get?input1=&input1=foo&input1=zag&input2=bar&pass1=pass&number1=35&empty=&empty=&check_wrapped=foo'); |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| |
| test('serializes elements deeply nested in divs', function(done) { |
| var form = f.querySelector('#nested-elements'); |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.url).to.equal('/get?input1=i1&paper-input1=p1&input2=i2&paper-input2=p2'); |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| |
| test('serializes elements with duplicate names', function(done) { |
| var form = f.querySelector('#duplicate-names'); |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.url).to.equal('/get?input1=&input1=foo&input1=&input1=bar&empty=&empty=&empty=&empty='); |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| }); |
| |
| |
| suite('validation', function() { |
| var f; |
| var server; |
| |
| setup(function() { |
| f = fixture('validation'); |
| |
| server = sinon.fakeServer.create(); |
| server.respondWith( |
| 'GET', |
| /\/get.*/, |
| [ |
| 200, |
| '{"Content-Type":"application/json"}', |
| '{"success":true}' |
| ] |
| ); |
| }); |
| |
| teardown(function() { |
| server.restore(); |
| }); |
| |
| test('fires iron-form-invalid if it can\'t submit', function(done) { |
| var form = f.querySelector('#mixed-invalid'); |
| form.addEventListener('iron-form-invalid', function(event) { |
| expect(form.validate()).to.be.equal(false); |
| done(); |
| }); |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| expect(form.validate()).to.be.equal(false); |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| |
| test('<input required> is validated and does not submit the form', function(done) { |
| var form = f.querySelector('#native-required'); |
| |
| var responses = 0; |
| form.addEventListener('iron-form-response', function(event) { |
| responses++; |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| expect(form.validate()).to.be.equal(false); |
| form.submit(); |
| server.respond(); |
| }); |
| |
| setTimeout(function() { |
| expect(responses).to.be.equal(0); |
| done(); |
| }, 200); |
| }); |
| |
| test('invalid <input> but not required is validated and does not submit the form', function(done) { |
| var form = f.querySelector('#native-invalid'); |
| |
| var responses = 0; |
| form.addEventListener('iron-form-response', function(event) { |
| responses++; |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| expect(form.validate()).to.be.equal(false); |
| form.submit(); |
| server.respond(); |
| }); |
| |
| setTimeout(function() { |
| expect(responses).to.be.equal(0); |
| done(); |
| }, 200); |
| }); |
| |
| test('<paper-input required> is validated and does not submit the form', function(done) { |
| var form = f.querySelector('#custom-required'); |
| |
| var responses = 0; |
| form.addEventListener('iron-form-response', function(event) { |
| responses++; |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.validate(); |
| expect(form.validate()).to.be.equal(false); |
| form.submit(); |
| server.respond(); |
| }); |
| |
| setTimeout(function() { |
| expect(responses).to.be.equal(0); |
| done(); |
| }, 200); |
| }); |
| |
| test('invalid <paper-input> but not required is validated and does not submit the form', function(done) { |
| var form = f.querySelector('#custom-invalid'); |
| |
| var responses = 0; |
| form.addEventListener('iron-form-response', function(event) { |
| responses++; |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| expect(form.validate()).to.be.equal(false); |
| form.submit(); |
| server.respond(); |
| }); |
| |
| setTimeout(function() { |
| expect(responses).to.be.equal(0); |
| done(); |
| }, 200); |
| }); |
| }); |
| |
| suite('submission', function() { |
| var form; |
| var server; |
| |
| setup(function() { |
| form = fixture('submission'); |
| |
| server = sinon.fakeServer.create(); |
| server.respondWith( |
| 'GET', |
| /\/get.*/, |
| [ |
| 200, |
| '{"Content-Type":"application/json"}', |
| '{"success":true}' |
| ] |
| ); |
| server.respondWith( |
| 'POST', |
| /\/post.*/, |
| [ |
| 200, |
| '{"Content-Type":"application/json"}', |
| '{"success":true}' |
| ] |
| ); |
| server.respondWith( |
| 'GET', |
| /\/error.*/, |
| [ |
| 404, |
| '{"Content-Type":"application/text"}', |
| '{"success":false}' |
| ] |
| ); |
| }); |
| |
| teardown(function() { |
| server.restore(); |
| }); |
| |
| test('calling submit() on a form with method=get', function(done) { |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| |
| test('calling submit() on a form with method=post', function(done) { |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form._form.setAttribute('method', 'POST'); |
| form._form.setAttribute('action', '/post'); |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| |
| test('calling submit() on a form with method unset', function(done) { |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form._form.removeAttribute('method'); |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| |
| test('pressing an <input type=submit> submits the form', function(done) { |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form._form.querySelector('input[type=submit]').click(); |
| server.respond(); |
| }); |
| }); |
| |
| test('pressing an <input type=button> with an event handler submits the form', function(done) { |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| var button = form._form.querySelector('input[type=button]'); |
| button.addEventListener('click', function() { |
| form.submit(); |
| }); |
| button.click(); |
| |
| server.respond(); |
| }); |
| }); |
| |
| test('pressing a paper-button with an event handler submits the form', function(done) { |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.response.success).to.be.equal(true); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| var button = form._form.querySelector('paper-button'); |
| button.addEventListener('click', function() { |
| form.submit(); |
| }); |
| button.click(); |
| |
| server.respond(); |
| }); |
| }); |
| |
| test('can modify the request in the presubmit', function(done) { |
| 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(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| |
| test('can do a custom submission in the presubmit', function(done) { |
| 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(); |
| }); |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| }); |
| }); |
| |
| test('can relay errors', function(done) { |
| 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(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form._form.setAttribute('action', '/error'); |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| }); |
| |
| suite('resetting', function() { |
| test('can reset a form', function(done) { |
| var form = fixture('resetting'); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| var initial = form.serializeForm(); |
| expect(JSON.stringify(initial)).to.be.equal('{"input1":"input1","input2":"","check1":"on","radio1":"on","papercheck1":"on","paper1":"paper1","paper2":""}'); |
| |
| // Modify all the values, flip all the inputs. |
| document.getElementById('input1').value = 'input1++'; |
| document.getElementById('input2').value = 'input2++'; |
| document.getElementById('check1').checked = false; |
| document.getElementById('check2').checked = true; |
| document.getElementById('radio1').checked = false; |
| document.getElementById('radio2').checked = true; |
| document.getElementById('papercheck1').checked = false; |
| document.getElementById('papercheck2').checked = true; |
| document.getElementById('paper1').value = 'paper1++'; |
| document.getElementById('paper2').value = 'paper2++'; |
| |
| var updated = form.serializeForm(); |
| expect(JSON.stringify(updated)).to.not.be.equal(initial); |
| form.reset(); |
| var final = form.serializeForm(); |
| expect(JSON.stringify(initial)).to.be.equal(JSON.stringify(final)); |
| done(); |
| }); |
| }); |
| }); |
| |
| suite('dynamically created', function() { |
| var server; |
| |
| setup(function() { |
| server = sinon.fakeServer.create(); |
| server.respondWith( |
| 'GET', |
| /\/get.*/, |
| [ |
| 200, |
| '{"Content-Type":"application/json"}', |
| '{"success":true}' |
| ] |
| ); |
| }); |
| |
| teardown(function() { |
| server.restore(); |
| }); |
| |
| test('submits a form', function(done) { |
| var form = document.createElement('iron-form'); |
| // Need to add to the document so observeNodes runs. |
| document.body.appendChild(form); |
| |
| var nativeForm = document.createElement('form'); |
| nativeForm.action = '/get'; |
| nativeForm.method = 'get'; |
| |
| var input = document.createElement('input'); |
| nativeForm.appendChild(input); |
| input.required = true; |
| input.name = 'foo'; |
| Polymer.dom(form).appendChild(nativeForm); |
| |
| form.addEventListener('iron-form-response', function(event) { |
| expect(event.detail.url).to.equal('/get?foo=bar'); |
| expect(event.detail.response.success).to.be.equal(true); |
| document.body.removeChild(form); |
| done(); |
| }); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| expect(form.validate()).to.be.equal(false); |
| input.value = 'bar'; |
| expect(form.validate()).to.be.equal(true); |
| form.submit(); |
| server.respond(); |
| }, 1); |
| }); |
| }); |
| |
| suite('content type', function() { |
| var server; |
| var f; |
| |
| setup(function() { |
| server = sinon.fakeServer.create(); |
| f = fixture('content-type'); |
| }); |
| |
| teardown(function() { |
| server.restore(); |
| }); |
| |
| test('submits a form with text/plain', function(done) { |
| var form = f.querySelector('#plain-form'); |
| |
| server.respondWith( |
| 'POST', |
| /\/valid\/url.*/, |
| function (request) { |
| expect(request.requestHeaders).to.deep.equal({ |
| "content-type": "text/plain;charset=utf-8", |
| "accept": "application/json"}); |
| expect(request.requestBody).to.deep.equal({ |
| "paper1": "value1", |
| "paper2": "value2"}); |
| done(); |
| } |
| ); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| test('submits a form with application/json', function(done) { |
| var form = f.querySelector('#json-form'); |
| |
| server.respondWith( |
| 'POST', |
| /\/valid\/url.*/, |
| function (request) { |
| expect(request.requestHeaders).to.deep.equal({ |
| "content-type": "application/json;charset=utf-8", |
| "accept": "application/json"}); |
| expect(request.requestBody).to.equal( |
| '{"paper1":"value1","paper2":"value2"}'); |
| done(); |
| } |
| ); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| test('submits a form with application/x-www-form-urlencoded', function(done) { |
| var form = f.querySelector('#simple-form'); |
| |
| server.respondWith( |
| 'POST', |
| /\/valid\/url.*/, |
| function (request) { |
| expect(request.requestHeaders).to.deep.equal({ |
| "content-type": "application/x-www-form-urlencoded;charset=utf-8", |
| "accept": "application/json"}); |
| expect(request.requestBody).to.equal( |
| 'paper1=value1&paper2=value2'); |
| done(); |
| } |
| ); |
| |
| // Wait one tick for observeNodes. |
| Polymer.Base.async(function() { |
| form.submit(); |
| server.respond(); |
| }); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
