RubyGems - polymer-gold-rails - Versions diffs - 1.0.0.pre.rc.1 - Mend

polymer-gold-rails 1.0.0.pre.rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

data/app/assets/components/paper-input/test/paper-input-container.html ADDED Viewed

@@ -0,0 +1,237 @@
+<!doctype html>
+<!--
+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>paper-input-container tests</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../../iron-input/iron-input.html">
+  <link rel="import" href="../paper-input-container.html">
+  <link rel="import" href="letters-only.html">
+</head>
+<body>
+  <test-fixture id="basic">
+    <template>
+      <paper-input-container>
+        <label id="l">label</label>
+        <input id="i">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+  <test-fixture id="has-value">
+    <template>
+      <paper-input-container>
+        <label id="l">label</label>
+        <input id="i" value="value">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+  <test-fixture id="no-float-has-value">
+    <template>
+      <paper-input-container no-label-float>
+        <label id="l">label</label>
+        <input id="i" value="value">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+  <test-fixture id="always-float">
+    <template>
+      <paper-input-container always-float-label>
+        <label id="l">label</label>
+        <input id="i" value="value">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+  <test-fixture id="auto-validate-numbers">
+    <template>
+      <paper-input-container auto-validate>
+        <label id="l">label</label>
+        <input is="iron-input" id="i" pattern="[0-9]*">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+  <test-fixture id="manual-validate-numbers">
+    <template>
+      <paper-input-container>
+        <label id="l">label</label>
+        <input is="iron-input" id="i" pattern="[0-9]*">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+  <letters-only></letters-only>
+  <test-fixture id="auto-validate-validator">
+    <template>
+      <paper-input-container auto-validate>
+        <label id="l">label</label>
+        <input is="iron-input" id="i" pattern="[0-9]*" validator="letters-only">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+  <test-fixture id="auto-validate-validator-has-invalid-value">
+    <template>
+      <paper-input-container auto-validate>
+        <label id="l">label</label>
+        <input is="iron-input" id="i" validator="letters-only" value="123123">
+      </paper-input-container>
+    </template>
+  </test-fixture>
+  <script>
+    function getTransform(node) {
+      var style = getComputedStyle(node);
+      return style.transform || style.webkitTransform;
+    }
+    suite('label position', function() {
+      test('label is visible by default', function() {
+        var container = fixture('basic');
+        assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'visible', 'label has visibility:visible');
+      });
+      test('label is floated if value is initialized to not null', function() {
+        var container = fixture('has-value');
+        assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
+      });
+      test('label is invisible if no-label-float and value is initialized to not null', function() {
+        var container = fixture('no-float-has-value');
+        assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'hidden', 'label has visibility:hidden');
+      });
+      test('label is floated if always-float-label is true', function() {
+        var container = fixture('always-float');
+        assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
+      })
+    });
+    suite('focused styling', function() {
+      test('label is colored when input is focused and has value', function(done) {
+        var container = fixture('has-value');
+        var label = Polymer.dom(container).querySelector('#l');
+        var input = Polymer.dom(container).querySelector('#i');
+        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
+        input.focus();
+        // 'focus' event isn't firing on windows ff for some reason when you call focus()
+        container._onFocus();
+        requestAnimationFrame(function() {
+          assert.equal(document.activeElement, input, 'input is focused');
+          assert.isTrue(container.focused, 'focused is true');
+          assert.isTrue(inputContent.classList.contains('label-is-highlighted'), 'label is highlighted when input has focus');
+          done();
+        });
+      });
+      test('label is not colored when input is focused and has null value', function(done) {
+        var container = fixture('basic');
+        var label = Polymer.dom(container).querySelector('#l');
+        var input = Polymer.dom(container).querySelector('#i');
+        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
+        input.focus();
+        container._onFocus();
+        requestAnimationFrame(function() {
+          assert.isFalse(inputContent.classList.contains('label-is-highlighted'), 'label is not highlighted when input has focus and has null value');
+          done();
+        });
+      });
+      test('underline is colored when input is focused', function(done) {
+        var container = fixture('basic');
+        var input = Polymer.dom(container).querySelector('#i');
+        var line = Polymer.dom(container.root).querySelector('.underline');
+        assert.isFalse(line.classList.contains('is-highlighted'), 'line is not highlighted when input is not focused');
+        input.focus();
+        container._onFocus();
+        requestAnimationFrame(function() {
+          assert.equal(document.activeElement, input, 'input is focused');
+          assert.isTrue(line.classList.contains('is-highlighted'), 'line is highlighted when input is focused');
+          done();
+        });
+      });
+    });
+    suite('validation', function() {
+      test('styled when the input is set to an invalid value with auto-validate', function() {
+        var container = fixture('auto-validate-numbers');
+        var input = Polymer.dom(container).querySelector('#i');
+        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
+        var line = Polymer.dom(container.root).querySelector('.underline');
+        input.bindValue = 'foobar';
+        assert.isTrue(container.invalid, 'invalid is true');
+        assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
+        assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
+      });
+      test('styled when the input is set to an invalid value with auto-validate, with validator', function() {
+        var container = fixture('auto-validate-validator');
+        var input = Polymer.dom(container).querySelector('#i');
+        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
+        var line = Polymer.dom(container.root).querySelector('.underline');
+        input.bindValue = '123123';
+        assert.isTrue(container.invalid, 'invalid is true');
+        assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
+        assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
+      });
+      test('styled when the input is set initially to an invalid value with auto-validate, with validator', function() {
+        var container = fixture('auto-validate-validator-has-invalid-value');
+        assert.isTrue(container.invalid, 'invalid is true');
+        assert.isTrue(Polymer.dom(container.root).querySelector('.underline').classList.contains('is-invalid'), 'underline has is-invalid class');
+      });
+      test('styled when the input is set to an invalid value with manual validation', function() {
+        var container = fixture('manual-validate-numbers');
+        var input = Polymer.dom(container).querySelector('#i');
+        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
+        var line = Polymer.dom(container.root).querySelector('.underline');
+        input.bindValue = 'foobar';
+        input.validate();
+        assert.isTrue(container.invalid, 'invalid is true');
+        assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
+        assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
+      });
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/paper-input/test/paper-input-error.html ADDED Viewed

@@ -0,0 +1,60 @@
+<!doctype html>
+<!--
+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>paper-input-error tests</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../../iron-input/iron-input.html">
+  <link rel="import" href="../paper-input-container.html">
+  <link rel="import" href="../paper-input-error.html">
+</head>
+<body>
+  <test-fixture id="auto-validate-numbers">
+    <template>
+      <paper-input-container auto-validate attr-for-value="bind-value">
+        <label id="l">label</label>
+        <input is="iron-input" id="i" pattern="[0-9]*">
+        <paper-input-error id="e">error</paper-input-error>
+      </paper-input-container>
+    </template>
+  </test-fixture>
+  <script>
+    suite('basic', function() {
+      test('error message only appears when input is invalid', function() {
+        var container = fixture('auto-validate-numbers');
+        var input = Polymer.dom(container).querySelector('#i');
+        var error = Polymer.dom(container).querySelector('#e');
+        assert.equal(getComputedStyle(error).display, 'none', 'error is display:none');
+        input.bindValue = 'foobar';
+        assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
+      });
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/paper-input/test/paper-input.html ADDED Viewed

@@ -0,0 +1,213 @@
+<!doctype html>
+<!--
+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>paper-input tests</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <script src="../../iron-test-helpers/test-helpers.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../paper-input.html">
+  <link rel="import" href="letters-only.html">
+</head>
+<body>
+  <test-fixture id="basic">
+    <template>
+      <paper-input></paper-input>
+    </template>
+  </test-fixture>
+  <test-fixture id="label">
+    <template>
+      <paper-input label="foo"></paper-input>
+    </template>
+  </test-fixture>
+  <test-fixture id="error">
+    <template>
+      <paper-input auto-validate pattern="[0-9]*" value="foobar" error-message="error"></paper-input>
+    </template>
+  </test-fixture>
+  <test-fixture id="required">
+    <template>
+      <paper-input auto-validate required error-message="error"></paper-input>
+    </template>
+  </test-fixture>
+  <test-fixture id="required-no-auto-validate">
+    <template>
+      <paper-input required error-message="error"></paper-input>
+    </template>
+  </test-fixture>
+  <test-fixture id="required-char-counter">
+    <template>
+      <paper-input auto-validate char-counter required error-message="error"></paper-input>
+    </template>
+  </test-fixture>
+  <test-fixture id="char-counter">
+    <template>
+      <paper-input char-counter value="foobar"></paper-input>
+    </template>
+  </test-fixture>
+  <test-fixture id="always-float-label">
+    <template>
+      <paper-input always-float-label label="foo"></paper-input>
+    </template>
+  </test-fixture>
+  <test-fixture id="placeholder">
+    <template>
+      <paper-input label="foo" placeholder="bar"></paper-input>
+    </template>
+  </test-fixture>
+  <letters-only></letters-only>
+  <test-fixture id="validator">
+    <template>
+      <paper-input value="123123" validator="letters-only" auto-validate></paper-input>
+    </template>
+  </test-fixture>
+  <script>
+    suite('basic', function() {
+      test('setting value sets the input value', function() {
+        var input = fixture('basic');
+        input.value = 'foobar';
+        assert.equal(input.inputElement.value, input.value, 'inputElement.value equals input.value');
+      });
+      test('placeholder does not overlap label', function() {
+        var input = fixture('placeholder');
+        assert.equal(input.inputElement.placeholder, input.placeholder, 'inputElement.placeholder equals input.placeholder');
+        assert.equal(input.noLabelFloat, false);
+        var floatingLabel = Polymer.dom(Polymer.dom(input.root).querySelector('paper-input-container').root).querySelector('.label-is-floating');
+        assert.ok(floatingLabel);
+      });
+      test('always-float-label attribute works without placeholder', function() {
+        var input = fixture('always-float-label');
+        var container = Polymer.dom(input.root).querySelector('paper-input-container');
+        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
+        assert.isTrue(inputContent.classList.contains('label-is-floating'), 'label is floating');
+      });
+      test('error message is displayed', function() {
+        var input = fixture('error');
+        forceXIfStamp(input);
+        var error = Polymer.dom(input.root).querySelector('paper-input-error');
+        assert.ok(error, 'paper-input-error exists');
+        assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
+      });
+      test('empty required input shows error', function() {
+        var input = fixture('required');
+        forceXIfStamp(input);
+        var error = Polymer.dom(input.root).querySelector('paper-input-error');
+        assert.ok(error, 'paper-input-error exists');
+        assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
+      });
+      test('character counter is displayed', function() {
+        var input = fixture('char-counter');
+        forceXIfStamp(input);
+        var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter')
+        assert.ok(counter, 'paper-input-char-counter exists');
+        assert.equal(counter._charCounterStr, input.value.length, 'character counter shows the value length');
+      });
+      test('validator is used', function() {
+        var input = fixture('validator');
+        assert.ok(input.inputElement.invalid, 'input is invalid');
+      });
+      test('caret position is preserved', function() {
+        var input = fixture('basic');
+        var ironInput = Polymer.dom(input.root).querySelector('input[is="iron-input"]');
+        input.value = 'nananana';
+        ironInput.selectionStart = 2;
+        ironInput.selectionEnd = 2;
+        input.updateValueAndPreserveCaret('nanananabatman');
+        assert.equal(ironInput.selectionStart, 2, 'selectionStart is preserved');
+        assert.equal(ironInput.selectionEnd, 2, 'selectionEnd is preserved');
+      });
+    });
+    suite('validation', function() {
+      test('invalid attribute updated after calling validate()', function() {
+        var input = fixture('required-no-auto-validate');
+        forceXIfStamp(input);
+        input.validate();
+        var error = Polymer.dom(input.root).querySelector('paper-input-error');
+        assert.ok(error, 'paper-input-error exists');
+        assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
+        assert.isTrue(input.invalid, 'invalid is true');
+      });
+    });
+    suite('a11y', function() {
+      test('has aria-labelledby', function() {
+        var input = fixture('label');
+        assert.isTrue(input.inputElement.hasAttribute('aria-labelledby'))
+        assert.equal(input.inputElement.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
+      });
+      test('has aria-describedby for error message', function() {
+        var input = fixture('required');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id, 'aria-describedby points to the error message');
+      });
+      test('has aria-describedby for character counter', function() {
+        var input = fixture('char-counter');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the character counter');
+      });
+      test('has aria-describedby for character counter and error', function() {
+        var input = fixture('required-char-counter');
+        forceXIfStamp(input);
+        assert.isTrue(input.inputElement.hasAttribute('aria-describedby'));
+        assert.equal(input.inputElement.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id + ' ' + Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the error message and character counter');
+      });
+    });
+  </script>
+</body>
+</html>