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>iron-input 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   <script src="../../web-component-tester/browser.js"></script>
     22   <link rel="import" href="../iron-input.html">
     23   <link rel="import" href="letters-only.html">
     24   <link rel="import" href="disabled-input.html">
     25 
     26 </head>
     27 <body>
     28 
     29   <test-fixture id="basic">
     30     <template>
     31       <input is="iron-input">
     32     </template>
     33   </test-fixture>
     34 
     35   <test-fixture id="has-value">
     36     <template>
     37       <input is="iron-input" value="foobar">
     38     </template>
     39   </test-fixture>
     40 
     41   <test-fixture id="has-bind-value">
     42     <template>
     43       <input is="iron-input" bind-value="foobar">
     44     </template>
     45   </test-fixture>
     46 
     47   <test-fixture id="prevent-invalid-input">
     48     <template>
     49       <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]">
     50     </template>
     51   </test-fixture>
     52 
     53   <test-fixture id="prevent-invalid-input-with-pattern">
     54     <template>
     55       <input is="iron-input" prevent-invalid-input pattern="[a-zA-Z]{3}[0-9]*">
     56     </template>
     57   </test-fixture>
     58 
     59   <test-fixture id="prevent-invalid-input-has-value">
     60     <template>
     61       <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]" value="foobar">
     62     </template>
     63   </test-fixture>
     64 
     65   <test-fixture id="prevent-invalid-input-has-bind-value">
     66     <template>
     67       <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]" bind-value="foobar">
     68     </template>
     69   </test-fixture>
     70 
     71   <test-fixture id="automatically-prevent-invalid-input-if-allowed-pattern">
     72     <template>
     73       <input is="iron-input" allowed-pattern="[0-9]">
     74     </template>
     75   </test-fixture>
     76 
     77   <test-fixture id="no-validator">
     78     <template>
     79       <input is="iron-input" pattern="[a-zA-Z]{3}[0-9]*">
     80     </template>
     81   </test-fixture>
     82 
     83   <test-fixture id="has-validator">
     84     <template>
     85       <letters-only></letters-only>
     86       <input is="iron-input" validator="letters-only" pattern="[0-9]*">
     87     </template>
     88   </test-fixture>
     89 
     90   <test-fixture id="native-and-custom-validator">
     91     <template>
     92       <letters-only></letters-only>
     93       <input is="iron-input" validator="letters-only" pattern="[a-c]*">
     94     </template>
     95   </test-fixture>
     96 
     97   <template is="dom-bind" id="bind-to-object">
     98     <input is="iron-input" id="input" bind-value="{{foo}}">
     99   </template>
    100 
    101   <test-fixture id="disabled-input">
    102     <template>
    103       <disabled-input></disabled-input>
    104     </template>
    105   </test-fixture>
    106 
    107   <script>
    108 
    109     suite('basic', function() {
    110 
    111       test('setting bindValue sets value', function() {
    112         var input = fixture('basic');
    113         input.bindValue = 'foobar';
    114         assert.equal(input.value, input.bindValue, 'value equals to bindValue');
    115       });
    116 
    117       test('changing the input triggers an event', function(done) {
    118         var input = fixture('basic');
    119 
    120         input.addEventListener('bind-value-changed', function(value) {
    121           assert.equal(input.value, input.bindValue, 'value equals to bindValue');
    122           done();
    123         });
    124 
    125         input.value = "foo";
    126         input._onInput();
    127       });
    128 
    129       test('default value sets bindValue', function() {
    130         var input = fixture('has-value');
    131         assert.equal(input.bindValue, input.value, 'bindValue equals value');
    132       });
    133 
    134       test('default bindValue sets value', function() {
    135         var input = fixture('has-bind-value');
    136         assert.equal(input.value, input.bindValue, 'value equals to bindValue');
    137       });
    138 
    139       test('set bindValue to undefined', function() {
    140         var scope = document.getElementById('bind-to-object');
    141         scope.foo = undefined;
    142         assert.ok(!scope.$.input.bindValue, 'bindValue is falsy');
    143         assert.ok(!scope.$.input.value, 'value is falsy');
    144       });
    145 
    146       test('can validate using a complex regex', function() {
    147         var input = fixture('no-validator');
    148         input.value = '123';
    149         input.validate();
    150         assert.isTrue(input.invalid, 'input is invalid');
    151         input.value = 'foo';
    152         input.validate();
    153         assert.isFalse(input.invalid, 'input is valid');
    154         input.value = 'foo123';
    155         input.validate();
    156         assert.isFalse(input.invalid, 'input is valid');
    157       });
    158 
    159       test('set bindValue to false', function() {
    160         var scope = document.getElementById('bind-to-object');
    161         scope.foo = false;
    162         assert.isFalse(scope.$.input.bindValue);
    163         assert.equal(scope.$.input.value, 'false');
    164       });
    165 
    166       test('validator used instead of constraints api if provided', function() {
    167         var input = fixture('has-validator')[1];
    168         input.value = '123';
    169         input.validate();
    170         assert.isTrue(input.invalid, 'input is invalid');
    171       });
    172 
    173       test('prevent invalid input works in _onInput', function() {
    174         var input = fixture('prevent-invalid-input');
    175         input.value = '123';
    176         input._onInput();
    177         assert.equal(input.bindValue, '123');
    178 
    179         input.value = '123foo';
    180         input._onInput();
    181         assert.equal(input.bindValue, '123');
    182       });
    183 
    184       test('inputs can be validated', function() {
    185         var input = fixture('prevent-invalid-input-with-pattern');
    186         input.value = '123';
    187         input._onInput();
    188         assert.equal(input.bindValue, '123');
    189         input.validate();
    190         assert.isTrue(input.invalid, 'input is invalid');
    191 
    192         input.value = 'foo';
    193         input._onInput();
    194         assert.equal(input.bindValue, 'foo');
    195         input.validate();
    196         assert.isFalse(input.invalid, 'input is valid');
    197 
    198         input.value = 'foo123';
    199         input._onInput();
    200         assert.equal(input.bindValue, 'foo123');
    201         input.validate();
    202         assert.isFalse(input.invalid, 'input is valid');
    203       });
    204 
    205       test('prevent invalid input works automatically when allowed pattern is set', function() {
    206         var input = fixture('automatically-prevent-invalid-input-if-allowed-pattern');
    207         input.value = '123';
    208         input._onInput();
    209         assert.equal(input.bindValue, '123');
    210 
    211         input.value = '123foo';
    212         input._onInput();
    213         assert.equal(input.bindValue, '123');
    214 
    215         input.allowedPattern = '';
    216         input.value = '#123foo BAR!';
    217         input._onInput();
    218         assert.equal(input.bindValue, '#123foo BAR!');
    219 
    220         input.allowedPattern = '[a-zA-Z]';
    221         input.value = 'foo';
    222         input._onInput();
    223         input.value = 'bar123';
    224         input._onInput();
    225         assert.equal(input.bindValue, 'foo');
    226       });
    227 
    228       test('disabled input doesn\'t throw on Firefox', function() {
    229         var el = fixture('disabled-input');
    230         var input = el.$.input;
    231 
    232         assert.equal(input.bindValue, 'foo');
    233 
    234         assert.isFalse(el.myInvalid);
    235         assert.isTrue(input.disabled);
    236       });
    237 
    238       test('browser validation beats custom validation', function() {
    239         var input = fixture('native-and-custom-validator')[1];
    240         // The input allows any letters, but the browser only allows one
    241         // of [abc].
    242         input.value = 'aaaa';
    243         input.validate();
    244         assert.isFalse(input.invalid, 'input is valid');
    245 
    246         // The validator allows this, but the browser doesn't.
    247         input.value = 'zzz';
    248         input.validate();
    249         assert.isTrue(input.invalid, 'input is invalid');
    250       });
    251     });
    252 
    253     suite('a11y', function() {
    254       test('announces invalid characters when _onInput is called', function() {
    255         var input = fixture('prevent-invalid-input');
    256         input.addEventListener('iron-announce', function(event) {
    257           assert.equal(event.detail.text, 'Invalid string of characters not entered.');
    258         });
    259         input.value = 'foo';
    260         input._onInput();
    261       });
    262 
    263       test('announces invalid characters on keypress', function() {
    264         var input = fixture('prevent-invalid-input');
    265         input.addEventListener('iron-announce', function(event) {
    266           assert.equal(event.detail.text, 'Invalid character a not entered.');
    267         });
    268 
    269         // Simulate key press event.
    270         var event = new CustomEvent('keypress', {
    271           bubbles: true,
    272           cancelable: true
    273         });
    274         event.charCode = 97 /* a */;
    275         input.dispatchEvent(event);
    276       });
    277     });
    278   </script>
    279 
    280 </body>
    281 </html>
    282