Home | History | Annotate | Download | only in test 
      1 <!doctype html>
      2 <!--
      3 @license
      4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      8 Code distributed by Google as part of the polymer project is also
      9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
     10 -->
     11 <html>
     12 <head>
     13 
     14   <title>paper-input-container tests</title>
     15 
     16   <meta charset="utf-8">
     17   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     18   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
     19 
     20   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     21 
     22   <script src="../../web-component-tester/browser.js"></script>
     23   <script src="../../iron-test-helpers/mock-interactions.js"></script>
     24 
     25   <link rel="import" href="../../iron-input/iron-input.html">
     26   <link rel="import" href="../paper-input-container.html">
     27   <link rel="import" href="letters-only.html">
     28 
     29 </head>
     30 <body>
     31 
     32   <test-fixture id="basic">
     33     <template>
     34       <paper-input-container>
     35         <label id="l">label</label>
     36         <input id="i">
     37       </paper-input-container>
     38     </template>
     39   </test-fixture>
     40 
     41   <test-fixture id="prefix">
     42     <template>
     43       <paper-input-container>
     44         <div prefix>$</div>
     45         <label id="l">label</label>
     46         <input is="iron-input" id="i">
     47       </paper-input-container>
     48     </template>
     49   </test-fixture>
     50 
     51   <test-fixture id="prefix-has-value">
     52     <template>
     53       <paper-input-container>
     54         <div prefix>$</div>
     55         <label id="l">label</label>
     56         <input is="iron-input" id="i" value="foo">
     57       </paper-input-container>
     58     </template>
     59   </test-fixture>
     60 
     61   <test-fixture id="has-value">
     62     <template>
     63       <paper-input-container>
     64         <label id="l">label</label>
     65         <input id="i" value="value">
     66       </paper-input-container>
     67     </template>
     68   </test-fixture>
     69 
     70   <test-fixture id="no-float-has-value">
     71     <template>
     72       <paper-input-container no-label-float>
     73         <label id="l">label</label>
     74         <input id="i" value="value">
     75       </paper-input-container>
     76     </template>
     77   </test-fixture>
     78 
     79   <test-fixture id="always-float">
     80     <template>
     81       <paper-input-container always-float-label>
     82         <label id="l">label</label>
     83         <input id="i" value="value">
     84       </paper-input-container>
     85     </template>
     86   </test-fixture>
     87 
     88   <test-fixture id="auto-validate-numbers">
     89     <template>
     90       <paper-input-container auto-validate>
     91         <label id="l">label</label>
     92         <input is="iron-input" id="i" pattern="[0-9]*">
     93       </paper-input-container>
     94     </template>
     95   </test-fixture>
     96 
     97   <test-fixture id="manual-validate-numbers">
     98     <template>
     99       <paper-input-container>
    100         <label id="l">label</label>
    101         <input is="iron-input" id="i" pattern="[0-9]*">
    102       </paper-input-container>
    103     </template>
    104   </test-fixture>
    105 
    106   <letters-only></letters-only>
    107 
    108   <test-fixture id="auto-validate-validator">
    109     <template>
    110       <paper-input-container auto-validate>
    111         <label id="l">label</label>
    112         <input is="iron-input" id="i" pattern="[0-9]*" validator="letters-only">
    113       </paper-input-container>
    114     </template>
    115   </test-fixture>
    116 
    117   <test-fixture id="auto-validate-validator-has-invalid-value">
    118     <template>
    119       <paper-input-container auto-validate>
    120         <label id="l">label</label>
    121         <input is="iron-input" id="i" validator="letters-only" value="123123">
    122       </paper-input-container>
    123     </template>
    124   </test-fixture>
    125 
    126   <script>
    127 
    128     function getTransform(node) {
    129       var style = getComputedStyle(node);
    130       return style.transform || style.webkitTransform;
    131     }
    132 
    133     suite('basic', function() {
    134       test('can be created imperatively', function() {
    135         var container = document.createElement('paper-input-container');
    136         var input = document.createElement('input', 'iron-input');
    137         input.className = 'paper-input-input';
    138         input.id = 'input';
    139 
    140         var label = document.createElement('label');
    141         label.innerHTML = 'label';
    142 
    143         Polymer.dom(container).appendChild(label);
    144         Polymer.dom(container).appendChild(input);
    145 
    146         document.body.appendChild(container);
    147         assert.isOk(container);
    148         document.body.removeChild(container);
    149       });
    150     });
    151 
    152     suite('label position', function() {
    153 
    154       test('label is visible by default', function() {
    155         var container = fixture('basic');
    156         assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'visible', 'label has visibility:visible');
    157       });
    158 
    159       test('label is floated if value is initialized to not null', function(done) {
    160         var container = fixture('has-value');
    161         requestAnimationFrame(function() {
    162           assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
    163           done();
    164         });
    165       });
    166 
    167       test('label is invisible if no-label-float and value is initialized to not null', function() {
    168         var container = fixture('no-float-has-value');
    169         assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'hidden', 'label has visibility:hidden');
    170       });
    171 
    172       test('label is floated if always-float-label is true', function() {
    173         var container = fixture('always-float');
    174         assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
    175       });
    176 
    177       test('label is floated correctly with a prefix', function(done) {
    178         var container = fixture('prefix');
    179         var label = Polymer.dom(container).querySelector('#l');
    180         var input = Polymer.dom(container).querySelector('#i');
    181 
    182         // Label is initially visible.
    183         assert.equal(getComputedStyle(label).visibility, 'visible', 'label has visibility:visible');
    184 
    185         // After entering text, the label floats, and it is not indented.
    186         input.bindValue = 'foobar';
    187         requestAnimationFrame(function() {
    188           assert.notEqual(getTransform(label), 'none', 'label has transform');
    189           assert.equal(label.getBoundingClientRect().left, container.getBoundingClientRect().left);
    190           done();
    191         });
    192       });
    193 
    194       test('label is floated correctly with a prefix and prefilled value', function(done) {
    195         var container = fixture('prefix-has-value');
    196         var label = Polymer.dom(container).querySelector('#l');
    197 
    198         // The label floats, and it is not indented.
    199         requestAnimationFrame(function() {
    200           assert.notEqual(getTransform(label), 'none', 'label has transform');
    201           assert.equal(label.getBoundingClientRect().left, container.getBoundingClientRect().left);
    202           done();
    203         });
    204       });
    205 
    206     });
    207 
    208     suite('focused styling', function() {
    209 
    210       test('label is colored when input is focused and has value', function(done) {
    211         var container = fixture('has-value');
    212         var label = Polymer.dom(container).querySelector('#l');
    213         var input = Polymer.dom(container).querySelector('#i');
    214         var inputContent = Polymer.dom(container.root).querySelector('.input-content');
    215         MockInteractions.focus(input);
    216         requestAnimationFrame(function() {
    217           assert.isTrue(container.focused, 'focused is true');
    218           assert.isTrue(inputContent.classList.contains('label-is-highlighted'), 'label is highlighted when input has focus');
    219           done();
    220         });
    221       });
    222 
    223       test('label is not colored when input is focused and has null value', function(done) {
    224         var container = fixture('basic');
    225         var label = Polymer.dom(container).querySelector('#l');
    226         var input = Polymer.dom(container).querySelector('#i');
    227         var inputContent = Polymer.dom(container.root).querySelector('.input-content');
    228         MockInteractions.focus(input);
    229         requestAnimationFrame(function() {
    230           assert.isFalse(inputContent.classList.contains('label-is-highlighted'), 'label is not highlighted when input has focus and has null value');
    231           done();
    232         });
    233       });
    234 
    235       test('underline is colored when input is focused', function(done) {
    236         var container = fixture('basic');
    237         var input = Polymer.dom(container).querySelector('#i');
    238         var line = Polymer.dom(container.root).querySelector('.underline');
    239         assert.isFalse(line.classList.contains('is-highlighted'), 'line is not highlighted when input is not focused');
    240         MockInteractions.focus(input);
    241         requestAnimationFrame(function() {
    242           assert.isTrue(line.classList.contains('is-highlighted'), 'line is highlighted when input is focused');
    243           done();
    244         });
    245       });
    246 
    247     });
    248 
    249     suite('validation', function() {
    250 
    251       test('styled when the input is set to an invalid value with auto-validate', function() {
    252         var container = fixture('auto-validate-numbers');
    253         var input = Polymer.dom(container).querySelector('#i');
    254         var inputContent = Polymer.dom(container.root).querySelector('.input-content');
    255         var line = Polymer.dom(container.root).querySelector('.underline');
    256 
    257         input.bindValue = 'foobar';
    258 
    259         assert.isTrue(container.invalid, 'invalid is true');
    260         assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
    261         assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
    262       });
    263 
    264       test('styled when the input is set to an invalid value with auto-validate, with validator', function() {
    265         var container = fixture('auto-validate-validator');
    266         var input = Polymer.dom(container).querySelector('#i');
    267         var inputContent = Polymer.dom(container.root).querySelector('.input-content');
    268         var line = Polymer.dom(container.root).querySelector('.underline');
    269 
    270         input.bindValue = '123123';
    271 
    272         assert.isTrue(container.invalid, 'invalid is true');
    273         assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
    274         assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
    275       });
    276 
    277       test('styled when the input is set initially to an invalid value with auto-validate, with validator', function() {
    278         var container = fixture('auto-validate-validator-has-invalid-value');
    279         assert.isTrue(container.invalid, 'invalid is true');
    280         assert.isTrue(Polymer.dom(container.root).querySelector('.underline').classList.contains('is-invalid'), 'underline has is-invalid class');
    281       });
    282 
    283       test('styled when the input is set to an invalid value with manual validation', function() {
    284         var container = fixture('manual-validate-numbers');
    285         var input = Polymer.dom(container).querySelector('#i');
    286         var inputContent = Polymer.dom(container.root).querySelector('.input-content');
    287         var line = Polymer.dom(container.root).querySelector('.underline');
    288 
    289         input.bindValue = 'foobar';
    290         input.validate();
    291 
    292         assert.isTrue(container.invalid, 'invalid is true');
    293         assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
    294         assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
    295       });
    296 
    297     });
    298 
    299   </script>
    300 
    301 </body>
    302 </html>
    303