api-console-assets
Version:
This repo only exists to publish api console components to npm
842 lines (683 loc) • 27.2 kB
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">
<input name="empty" value="">
<input name="empty" value="">
<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="FormUnsetMethod">
<template>
<form is="iron-form" action="/responds_with_json">
<simple-element name="zig" value="zag"></simple-element>
</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, 4);
var json = f.serialize();
assert.equal(Object.keys(json).length, 3);
assert.equal(json['foo'].length, 2);
assert.equal(json['foo'][0], 'bar');
assert.equal(json['foo'][1], 'barbar');
assert.equal(json['empty'].length, 2);
assert.equal(json['empty'][0], '');
assert.equal(json['empty'][1], '');
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 unset, defaults to method=get', function(done) {
form = fixture('FormUnsetMethod');
var submitted = false;
form.addEventListener('iron-form-submit', function() {
submitted = true;
});
form.addEventListener('iron-form-response', function(event) {
expect(this.request.method).to.be.equal('GET');
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=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>