bower_components/iron-form/test/basic.html

<!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="../iron-form.html">
  <link rel="import" href="simple-element.html">
</head>
<body>
  <test-fixture id="Basic">
    <template>
      <form is="iron-form">
        <simple-element name="zig" value="zag"></simple-element>
        <input name="foo" value="bar">
      </form>
    </template>
  </test-fixture>
  <test-fixture id="Dupes">
    <template>
      <form is="iron-form">
        <input name="foo" value="bar">
        <input name="foo" value="barbar">
        <simple-element name="zig" value="zig"></simple-element>
        <simple-element name="zig" value="zag"></simple-element>
        <simple-element name="zig" value="zug"></simple-element>
      </form>
    </template>
  </test-fixture>
  <test-fixture id="CheckedStates">
    <template>
      <form is="iron-form">
        <input type="checkbox" name="foo" value="bar1" checked>
        <input type="checkbox" name="foo" value="bar2">
        <input type="checkbox" name="foo" value="bar3" checked>
        <input type="checkbox" name="foo" value="bar4">
      </form>
    </template>
  </test-fixture>
  <test-fixture id="Disabled">
    <template>
      <form is="iron-form">
        <input name="foo" value="bar1">
        <input name="foo" value="bar2" disabled>
        <input type="checkbox" name="zig" value="zag" disabled checked>
      </form>
    </template>
  </test-fixture>
  <test-fixture id="FormGet">
    <template>
      <form is="iron-form" action="/responds_with_json" method="get">
        <simple-element name="zig" value="zag"></simple-element>
      </form>
    </template>
  </test-fixture>
  <test-fixture id="FormPost">
    <template>
      <form is="iron-form" action="/responds_with_json" method="post">
        <simple-element name="zig" value="zag"></simple-element>
      </form>
    </template>
  </test-fixture>
  <test-fixture id="InvalidForm">
    <template>
      <form is="iron-form" action="/responds_with_json" method="post">
        <simple-element name="zig"></simple-element>
        <input name="foo" required>
      </form>
    </template>
  </test-fixture>
  <test-fixture id="FormWithRequiredElements">
    <template>
      <form is="iron-form" action="/responds_with_json" method="post">
        <simple-element required></simple-element>
        <input required>
      </form>
    </template>
  </test-fixture>
  <test-fixture id="FormForResetting">
    <template>
      <form is="iron-form">
        <simple-element name="zig" value="zag"></simple-element>
        <input name="foo" value="bar">
        <input type="checkbox" name="foo" value="bar1" checked>
        <input type="checkbox" name="foo" value="bar2">
      </form>
    </template>
  </test-fixture>
  <script>
  suite('registration', function() {
    var f;
    test('elements can be registered', function() {
      f = fixture('Basic');
      assert.equal(f._customElements.length, 1);
      assert.equal(f.elements.length, 1);
    });
    test('elements can be unregistered', function(done) {
      f = fixture('Basic');
      var element = f.querySelector('simple-element');
      assert.equal(f._customElements.length, 1);
      assert.equal(f.elements.length, 1);
      f.removeChild(element);
      setTimeout(function() {
        assert.equal(f._customElements.length, 0);
        assert.equal(f.elements.length, 1);
        done();
      }, 200);
    });
  });
  suite('validation', function() {
    test('elements are validated if they don\'t have a name', function() {
      var f = fixture('FormWithRequiredElements');
      assert.equal(f._customElements.length, 1);
      assert.equal(f.elements.length, 1);
      var simpleElement = f._customElements[0];
      var input = f.elements[0];
      assert.isFalse(f.validate());
      assert.isTrue(simpleElement.invalid);
      assert.isFalse(input.validity.valid);
      simpleElement.value = 'batman';
      input.value = 'robin';
      assert.isTrue(f.validate());
      assert.isFalse(simpleElement.invalid);
      assert.isTrue(input.validity.valid);
      // Since the elements don't have names, they don't get serialized.
      var json = f.serialize();
      assert.equal(Object.keys(json).length, 0);
    });
    test('elements are validated if they have a name', function() {
      var f = fixture('FormWithRequiredElements');
      assert.equal(f._customElements.length, 1);
      assert.equal(f.elements.length, 1);
      var simpleElement = f._customElements[0];
      var input = f.elements[0];
      simpleElement.name = 'zig';
      input.name = 'zag';
      assert.isFalse(f.validate());
      assert.isTrue(simpleElement.invalid);
      assert.isFalse(input.validity.valid);
      simpleElement.value = 'batman';
      input.value = 'robin';
      assert.isTrue(f.validate());
      assert.isFalse(simpleElement.invalid);
      assert.isTrue(input.validity.valid);
      // The elements have names, so they're serialized.
      var json = f.serialize();
      assert.equal(Object.keys(json).length, 2);
    });
  });
  suite('serializing', function() {
    var f;
    test('serializes both custom and native elements', function() {
      f = fixture('Basic');
      assert.equal(f._customElements.length, 1);
      assert.equal(f.elements.length, 1);
      var json = f.serialize();
      assert.equal(Object.keys(json).length, 2);
      assert.equal(json['zig'], 'zag');
      assert.equal(json['foo'], 'bar');
    });
    test('serializes elements with duplicate names', function() {
      f = fixture('Dupes');
      assert.equal(f._customElements.length, 3);
      assert.equal(f.elements.length, 2);
      var json = f.serialize();
      assert.equal(Object.keys(json).length, 2);
      assert.equal(json['foo'].length, 2);
      assert.equal(json['foo'][0], 'bar');
      assert.equal(json['foo'][1], 'barbar');
      assert.equal(json['zig'].length, 3);
      assert.equal(json['zig'][0], 'zig');
      assert.equal(json['zig'][1], 'zag');
      assert.equal(json['zig'][2], 'zug');
    });
    test('serializes elements with checked states', function() {
      f = fixture('CheckedStates');
      assert.equal(f._customElements.length, 0);
      assert.equal(f.elements.length, 4);
      var json = f.serialize();
      assert.equal(Object.keys(json).length, 1);
      assert.equal(json['foo'].length, 2);
      assert.equal(json['foo'][0], 'bar1');
      assert.equal(json['foo'][1], 'bar3');
    });
    test('does not serialize disabled elements', function() {
      f = fixture('Disabled');
      assert.equal(f._customElements.length, 0);
      assert.equal(f.elements.length, 3);
      var json = f.serialize();
      assert.equal(Object.keys(json).length, 1);
      assert.equal(json['foo'], 'bar1');
    });
  });
  suite('resetting', function () {
    test('form restores the default values', function(done) {
      var form = fixture('FormForResetting');
      assert.equal(form._customElements.length, 1);
      assert.equal(form.elements.length, 3);
      // Initial values.
      var customElement = form.querySelector('simple-element');
      var input = form.querySelector('input[name="foo"]');
      var checkbox1 = form.querySelectorAll('input[type="checkbox"]')[0];
      var checkbox2 = form.querySelectorAll('input[type="checkbox"]')[1];
      assert.equal(customElement.value, 'zag');
      assert.equal(input.value, 'bar');
      assert.isTrue(checkbox1.checked);
      assert.isFalse(checkbox2.checked);
      // Change the values.
      customElement.value = 'not zag';
      input.value = 'not bar';
      checkbox1.checked = false;
      checkbox2.checked = true;
      assert.equal(customElement.value, 'not zag');
      assert.equal(input.value, 'not bar');
      assert.isFalse(checkbox1.checked);
      assert.isTrue(checkbox2.checked);
      form.addEventListener('iron-form-reset', function(event) {
        // Restored initial values.
        assert.equal(customElement.value, 'zag');
        assert.equal(input.value, 'bar');
        assert.isTrue(checkbox1.checked);
        assert.isFalse(checkbox2.checked);
        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>