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   <title>focused-state</title>
     14 
     15   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     16   <script src="../../web-component-tester/browser.js"></script>
     17   <script src="../../iron-test-helpers/mock-interactions.js"></script>
     18   <link rel="import" href="test-elements.html">
     19 </head>
     20 <body>
     21 
     22   <test-fixture id="TrivialFocusedState">
     23     <template>
     24       <test-control tabindex="-1"></test-control>
     25     </template>
     26   </test-fixture>
     27 
     28   <test-fixture id="NestedFocusedState">
     29     <template>
     30       <nested-focusable></nested-focusable>
     31     </template>
     32   </test-fixture>
     33 
     34   <test-fixture id="LightDOM">
     35     <template>
     36       <test-light-dom>
     37         <input id="input">
     38         <nested-focusable></nested-focusable>
     39       </test-light-dom>
     40     </template>
     41   </test-fixture>
     42 
     43   <script>
     44     suite('focused-state', function() {
     45       var focusTarget;
     46 
     47       setup(function() {
     48         focusTarget = fixture('TrivialFocusedState');
     49       });
     50 
     51       suite('when is focused', function() {
     52         test('receives a focused attribute', function() {
     53           expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
     54           MockInteractions.focus(focusTarget);
     55           expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
     56         });
     57 
     58         test('focused property is true', function() {
     59           expect(focusTarget.focused).to.not.be.eql(true);
     60           MockInteractions.focus(focusTarget);
     61           expect(focusTarget.focused).to.be.eql(true);
     62         });
     63       });
     64 
     65       suite('when is blurred', function() {
     66         test('loses the focused attribute', function() {
     67           MockInteractions.focus(focusTarget);
     68           expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
     69           MockInteractions.blur(focusTarget);
     70           expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
     71         });
     72 
     73         test('focused property is false', function() {
     74           MockInteractions.focus(focusTarget);
     75           expect(focusTarget.focused).to.be.eql(true);
     76           MockInteractions.blur(focusTarget);
     77           expect(focusTarget.focused).to.be.eql(false);
     78         });
     79       });
     80 
     81       suite('when the focused state is disabled', function() {
     82         test('will not be focusable', function() {
     83           var blurSpy = sinon.spy(focusTarget, 'blur');
     84           MockInteractions.focus(focusTarget);
     85           focusTarget.disabled = true;
     86           expect(focusTarget.getAttribute('tabindex')).to.be.eql('-1');
     87           expect(blurSpy.called).to.be.eql(true);
     88         });
     89       });
     90     });
     91 
     92     suite('nested focusable', function() {
     93       var focusable;
     94 
     95       setup(function() {
     96         focusable = fixture('NestedFocusedState');
     97       });
     98 
     99       test('focus/blur events fired on host element', function() {
    100         var nFocusEvents = 0;
    101         var nBlurEvents = 0;
    102 
    103         focusable.addEventListener('focus', function() {
    104           nFocusEvents += 1;
    105           expect(focusable.focused).to.be.equal(true);
    106           MockInteractions.blur(focusable.$.input);
    107         });
    108         focusable.addEventListener('blur', function() {
    109           expect(focusable.focused).to.be.equal(false);
    110           nBlurEvents += 1;
    111         });
    112 
    113         MockInteractions.focus(focusable.$.input);
    114 
    115         expect(nBlurEvents).to.be.greaterThan(0);
    116         expect(nFocusEvents).to.be.greaterThan(0);
    117       });
    118 
    119     });
    120 
    121 
    122     suite('elements in the light dom', function() {
    123       var lightDOM, input, lightDescendantShadowInput;
    124 
    125       setup(function() {
    126         lightDOM = fixture('LightDOM');
    127         input = document.querySelector('#input');
    128         lightDescendantShadowInput = Polymer.dom(lightDOM)
    129             .querySelector('nested-focusable').$.input;
    130       });
    131 
    132       test('should not fire the focus event', function() {
    133         var nFocusEvents = 0;
    134 
    135         lightDOM.addEventListener('focus', function() {
    136           nFocusEvents += 1;
    137         });
    138 
    139         MockInteractions.focus(input);
    140 
    141         expect(nFocusEvents).to.be.equal(0);
    142       });
    143 
    144       test('should not fire the focus event from shadow descendants', function() {
    145         var nFocusEvents = 0;
    146 
    147         lightDOM.addEventListener('focus', function() {
    148           nFocusEvents += 1;
    149         });
    150 
    151         MockInteractions.focus(lightDescendantShadowInput);
    152 
    153         expect(nFocusEvents).to.be.equal(0);
    154       });
    155 
    156     });
    157 
    158   </script>
    159 
    160 </body>
    161 </html>
    162