diff options
Diffstat (limited to 'catapult/third_party/polymer/components/iron-form/test/basic.html')
| -rw-r--r-- | catapult/third_party/polymer/components/iron-form/test/basic.html | 923 |
1 files changed, 923 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-form/test/basic.html b/catapult/third_party/polymer/components/iron-form/test/basic.html new file mode 100644 index 00000000..8f649182 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-form/test/basic.html @@ -0,0 +1,923 @@ +<!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> |