Merge pull request #331 from PolymerElements/fix-focus-tests

clean up focus/blur tests

Author: notwaldorf

paper-input-behavior.html

@@ -365,13 +365,8 @@
 
     listeners: {
       'addon-attached': '_onAddonAttached',
-      'focus': '_onFocus'
     },
 
-    observers: [
-      '_focusedControlStateChanged(focused)'
-    ],
-
     keyBindings: {
       'shift+tab:keydown': '_onShiftTabDown'
     },
@@ -440,12 +435,17 @@
     },
 
     /**
-     * Forward focus to inputElement
+     * Forward focus to inputElement. Overriden from IronControlState.
      */
-    _onFocus: function() {
-      if (!this._shiftTabPressed) {
+    _focusBlurHandler: function(event) {
+      if (this._shiftTabPressed)
+        return;
+
+      Polymer.IronControlState._focusBlurHandler.call(this, event);
+
+      // Forward the focus to the nested input.
+      if (this.focused)
         this._focusableElement.focus();
-      }
     },
 
     /**
@@ -497,24 +497,6 @@
       return placeholder || alwaysFloatLabel;
     },
 
-    _focusedControlStateChanged: function(focused) {
-      // IronControlState stops the focus and blur events in order to redispatch them on the host
-      // element, but paper-input-container listens to those events. Since there are more
-      // pending work on focus/blur in IronControlState, I'm putting in this hack to get the
-      // input focus state working for now.
-      if (!this.$.container) {
-        this.$.container = Polymer.dom(this.root).querySelector('paper-input-container');
-        if (!this.$.container) {
-          return;
-        }
-      }
-      if (focused) {
-        this.$.container._onFocus();
-      } else {
-        this.$.container._onBlur();
-      }
-    },
-
     _updateAriaLabelledBy: function() {
       var label = Polymer.dom(this.root).querySelector('label');
       if (!label) {

test/paper-input.html

@@ -196,23 +196,51 @@
         input = fixture('basic');
       });
 
-      test('focus/blur events fired on host element', function() {
-        var nFocusEvents = 0;
-        var nBlurEvents = 0;
+      // At the moment, it is very hard to correctly fire exactly
+      // one focus/blur events on a paper-input. This is because
+      // when a paper-input is focused, it needs to focus
+      // its underlying native input, which will also fire a `blur`
+      // event.
+      test('focus events fired on host element', function() {
         input.addEventListener('focus', function(event) {
-          nFocusEvents += 1;
           assert(input.focused, 'input is focused');
-          MockInteractions.blur(input.inputElement);
         });
-        input.addEventListener('blur', function() {
-          nBlurEvents += 1;
-          assert(!input.focused, 'input is blurred');
+        MockInteractions.focus(input);
+      });
+
+      test('focus events fired on host element if nested element is focused', function() {
+        input.addEventListener('focus', function(event) {
+          assert(input.focused, 'input is focused');
         });
         MockInteractions.focus(input.inputElement);
-        assert.isTrue(nFocusEvents >= 1, 'focus event fired');
-        assert.isTrue(nBlurEvents >= 1, 'blur event fired');
       });
 
+      test('blur events fired on host element', function() {
+        MockInteractions.focus(input);
+        input.addEventListener('blur', function(event) {
+          assert(!input.focused, 'input is blurred');
+        });
+        MockInteractions.blur(input);
+      });
+
+      test('blur events fired on host element nested element is blurred', function() {
+        MockInteractions.focus(input);
+        input.addEventListener('blur', function(event) {
+          assert(!input.focused, 'input is blurred');
+        });
+        MockInteractions.blur(input.inputElement);
+      });
+
+      test('focusing then bluring sets the focused attribute correctly', function() {
+        MockInteractions.focus(input);
+        assert(input.focused, 'input is focused');
+        MockInteractions.blur(input);
+        assert(!input.focused, 'input is blurred');
+        MockInteractions.focus(input.inputElement);
+        assert(input.focused, 'input is focused');
+        MockInteractions.blur(input.inputElement);
+        assert(!input.focused, 'input is blurred');
+      });
     });
 
     suite('focused styling (integration test)', function() {

test/paper-textarea.html

@@ -32,12 +32,6 @@
     </template>
   </test-fixture>
 
-  <test-fixture id="has-tabindex">
-    <template>
-      <paper-textarea tabindex="0"></paper-textarea>
-    </template>
-  </test-fixture>
-
   <test-fixture id="label">
     <template>
       <paper-textarea label="foo"></paper-textarea>
@@ -139,33 +133,50 @@
         input = fixture('basic');
       });
 
-      test('focus/blur events fired on host element', function() {
-        var nFocusEvents = 0;
-        var nBlurEvents = 0;
+      // At the moment, it is very hard to correctly fire exactly
+      // one focus/blur events on a paper-textarea. This is because
+      // when a paper-textarea is focused, it needs to focus
+      // its underlying native textarea, which will also fire a `blur`
+      // event.
+      test('focus events fired on host element', function() {
         input.addEventListener('focus', function(event) {
-          nFocusEvents += 1;
           assert(input.focused, 'input is focused');
-          MockInteractions.blur(input.inputElement.textarea);
         });
-        input.addEventListener('blur', function() {
-          nBlurEvents += 1;
-          assert(!input.focused, 'input is blurred');
+        MockInteractions.focus(input);
+      });
+
+      test('focus events fired on host element if nested element is focused', function() {
+        input.addEventListener('focus', function(event) {
+          assert(input.focused, 'input is focused');
         });
         MockInteractions.focus(input.inputElement.textarea);
-        assert.isTrue(nFocusEvents >= 1, 'focus event fired');
-        assert.isTrue(nBlurEvents >= 1, 'blur event fired')
       });
 
-      test('focus a textarea with tabindex', function(done) {
-        var input = fixture('has-tabindex');
-        flush(function() {
-          assert.notEqual(document.activeElement, input._focusableElement);
-          MockInteractions.focus(input);
-          setTimeout(function() {
-            assert.equal(document.activeElement, input.shadowRoot ? input : input._focusableElement);
-            done();
-          }, 1);
-        })
+      test('blur events fired on host element', function() {
+        MockInteractions.focus(input);
+        input.addEventListener('blur', function(event) {
+          assert(!input.focused, 'input is blurred');
+        });
+        MockInteractions.blur(input);
+      });
+
+      test('blur events fired on host element nested element is blurred', function() {
+        MockInteractions.focus(input);
+        input.addEventListener('blur', function(event) {
+          assert(!input.focused, 'input is blurred');
+        });
+        MockInteractions.blur(input.inputElement.textarea);
+      });
+
+      test('focusing then bluring sets the focused attribute correctly', function() {
+        MockInteractions.focus(input);
+        assert(input.focused, 'input is focused');
+        MockInteractions.blur(input);
+        assert(!input.focused, 'input is blurred');
+        MockInteractions.focus(input.inputElement.textarea);
+        assert(input.focused, 'input is focused');
+        MockInteractions.blur(input.inputElement.textarea);
+        assert(!input.focused, 'input is blurred');
       });
     });