Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(153)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/polymer/components/iron-form/test/basic.html

Issue 2906483004: [pinpoint] Add iron-form and paper-checkbox to polymer components. (Closed)
Patch Set: Created 3 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/polymer/components/iron-form/iron-form.html ('k') | third_party/polymer/components/iron-form/test/element-with-nested-form-element.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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>
« no previous file with comments | « third_party/polymer/components/iron-form/iron-form.html ('k') | third_party/polymer/components/iron-form/test/element-with-nested-form-element.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698