javascript/atoms/test/focus_test.html

<!DOCTYPE html>
<html>
<head>
  <title>focus_test.html</title>
  <script src="test_bootstrap.js"></script>
  <script type="text/javascript">
    goog.require('bot.action');
    goog.require('bot.test');
    goog.require('goog.Promise');
    goog.require('goog.dom');
    goog.require('goog.events');
    goog.require('goog.events.EventType');
    goog.require('goog.testing.jsunit');
    goog.require('goog.userAgent');
    goog.require('goog.userAgent.product');
  </script>
  <script type="text/javascript">
    var events = goog.events;
    var eventType = goog.events.EventType;

    var text1, text2, actualEvents, expectedEvents;

    function setUp() {
      actualEvents = [];
      expectedEvents = [];

      text1 = goog.dom.$('text1');
      text2 = goog.dom.$('text2');

      // Make sure neither text1 nor text2 have focus. Since this could
      // cause events to dispatch, we need to wait for them to do so
      // before continuing. In IE, this means continuing in a timeout.
      bot.action.focusOnElement(goog.dom.$('dummyFocusHolder'));
      return timeout();
    }


    function tearDown() {
      events.removeAll(text1);
      events.removeAll(text2);
    }

    function buildRecord(id, type) {
      return id + ': ' + type;
    }

    function recordBlurAndFocus(el) {
      events.listen(el, [eventType.FOCUS, eventType.BLUR], function(e) {
        actualEvents.push(buildRecord(e.target.id, e.type));
      });
    }

    function expect(eventType, onElement) {
      expectedEvents.push(buildRecord(onElement.id, eventType));
    }

    function assertHasExpectedEventOrder() {
      assertArrayEquals(expectedEvents, actualEvents);
    }

    function assertElementIsActiveElement(expected) {
      var actual = goog.dom.getActiveElement(document);
      if (actual) {
        // NOTE(jleyba): Using assertEquals(expected, document.activeElement)
        // causes an error in IE when the assertion fails (from trying to
        // convert the DOM elements into strings for the error message):
        //     "'constructor' is null or not an object".
        // The following assertions give us the same check without this error.
        var msg = 'Expected "' + expected.id + '" to be the activeElement, ' +
                  'but was "' + actual.id + '".';
        assertTrue(msg, expected == actual);
      }
    }

    /**
     * Pauses the test momentarily so IE can dispatch the onfocus event, which
     * is scheduled for the next event loop after element.focus() is called.
     */
    function timeout() {
      return new goog.Promise(function(done) {
        setTimeout(done, 5);
      });
    }

    function testShouldBeAbleToFocusOnAnElement() {
      // NOTE(jleyba): Test does not work on IE 8 with the new IE Driver,
      // I suspect due to something similar to
      // http://support.microsoft.com/kb/973528
      if (goog.userAgent.IE && goog.userAgent.isVersionOrHigher('8')) {
        return;
      }
      if (!bot.test.isWindowFocused()) {
        return;
      }
      recordBlurAndFocus(text1);
      recordBlurAndFocus(text2);

      expect(eventType.FOCUS, text1);
      bot.action.focusOnElement(text1);
      return timeout().then(function() {
        assertHasExpectedEventOrder();
        assertElementIsActiveElement(text1);

        expect(eventType.BLUR, text1);
        expect(eventType.FOCUS, text2);
        bot.action.focusOnElement(text2);
        return timeout();
      }).then(function() {
        assertHasExpectedEventOrder();
        assertElementIsActiveElement(text2);

        expect(eventType.BLUR, text2);
        expect(eventType.FOCUS, text1);
        bot.action.focusOnElement(text1);
        return timeout();
      }).then(function() {
        assertHasExpectedEventOrder();
        assertElementIsActiveElement(text1);
      });
    }

    function testShouldRetainFocusIfElementIsAlreadyActive() {
      if (!bot.test.isWindowFocused()) {
        return;
      }

      recordBlurAndFocus(text1);
      recordBlurAndFocus(text2);

      expect(eventType.FOCUS, text1);
      bot.action.focusOnElement(text1);
      return timeout().then(function() {
        assertHasExpectedEventOrder();
        assertElementIsActiveElement(text1);

        bot.action.focusOnElement(text1);
        return timeout();
      }).then(function() {
        assertHasExpectedEventOrder();
        assertElementIsActiveElement(text1);
      });
    }

    function testShouldRetainFocusIfFirstFocusableAncestorIsAlreadyActive() {
      if (!bot.test.isWindowFocused()) {
        return;
      }

      var parent = document.getElementById('hideOnBlur');
      var child = document.getElementById('hideOnBlurChild');
      recordBlurAndFocus(parent);

      expect(eventType.FOCUS, parent);
      bot.action.focusOnElement(parent);
      return timeout().then(function() {
        assertHasExpectedEventOrder();
        assertElementIsActiveElement(parent);

        bot.action.focusOnElement(child);
        // No additional events expected. The parent should retain focus.
        return timeout();
      }).then(function() {
        assertHasExpectedEventOrder();
        assertElementIsActiveElement(parent);

        bot.action.focusOnElement(text1);
        expect(eventType.BLUR, parent);
        return timeout();
      }).then(function() {
        assertHasExpectedEventOrder();
      });
    }

    function testFocusOnHiddenElementThrows() {
      var element = document.getElementById('invisibleText');
      assertThrows(goog.partial(bot.action.focusOnElement, element));
    }

    function testFocusOnDisabledElementThrows() {
      var element = document.getElementById('disabledText');
      assertThrows(goog.partial(bot.action.focusOnElement, element));
    }

    function testIsFocusable() {
      if (goog.userAgent.IE) {
        // TODO: Don't skip this.
        return;
      }
      function assertIsFocusable(element, opt_reason) {
        assertTrue(opt_reason || '', bot.dom.isFocusable(element));
      }

      function assertNotFocusable(element, opt_reason) {
        assertFalse(opt_reason || '', bot.dom.isFocusable(element));
      }

      goog.array.forEach(bot.dom.FOCUSABLE_FORM_FIELDS_, function(tagName) {
        assertIsFocusable(goog.dom.createDom(tagName),
            tagName + ' is a focusable form field');
      });

      var div = goog.dom.createDom('DIV');
      assertNotFocusable(div);

      div.setAttribute('tabindex', '0');
      assertIsFocusable(div, 'has a tab index of 0');

      div.tabIndex = -1;
      assertEquals('-1', bot.dom.getAttribute(div, 'tabindex'));
      assertNotFocusable(div, 'has a negative tab index');

      div.tabIndex = 2;
      assertEquals('2', bot.dom.getAttribute(div, 'tabindex'));
      assertIsFocusable(div, 'has a tab index of 2');

      div.removeAttribute('tabindex');
      assertNull(bot.dom.getAttribute(div, 'tabindex'));
      assertNotFocusable(div, 'tab index was removed');
    }
  </script>
</head>
<body>
<form action="javascript:void(0)">
  <input id="text1" type="text"/>
  <input id="text2" type="text"/>
  <input id="dummyFocusHolder" type="text"/>
  <div>
    <div>Input fields for manual testing. Each will report when they receive or
      lose focus.</div>
    Test 1: <input id="test1" type="text"/>
    Test 2: <input id="test2" type="text"/>
    <div>
      <button id="focusDance">Click to simulate focus change</button>
      <button id="clearTestLog">Click to clear log</button>
      <button id="opennewwindow" onclick="window.open(window.location)">
        Re-run test in a new window</button>
    </div>
    <div style="border:1px solid black; margin: 5px; padding: 5px; width:50%">
      <div style="border-bottom: 1px solid black">Test Log</div>
      <div id="testLog"></div>
    </div>
    <div>
      <div><strong>Invisible textbox</strong></div>
      <input id="invisibleText" type="text" style="visibility:hidden"/>
    </div>
    <div>
      <div><strong>Disabled textbox</strong></div>
      <input id="disabledText" type="text" value="I'm disabled" disabled/>
    </div>
    <div id="hideOnBlur" tabindex="0"
         style="width: 100px; height: 100px; border: 1px solid red"
         onblur="this.style.display = 'none';">
      <div id="hideOnBlurChild"
           style="width: 30px; height: 30px; border: 1px solid blue">
        x
      </div>
      Focusable. Will hide when focus is lost.
    </div>
    <script type="text/javascript">
      function log(msg) {
        goog.dom.$('testLog').appendChild(
            goog.dom.createDom('div', null,
              goog.dom.createTextNode(msg)));
      }

      function reportBlurFocus(e) {
        var et = eventType;
        goog.events.listen(e, [et.FOCUS, et.BLUR], function(e) {
          log(e.type + ' on ' + e.target.id);
        });
      }
      reportBlurFocus(goog.dom.$('test1'));
      reportBlurFocus(goog.dom.$('test2'));

      goog.events.listen(goog.dom.$('focusDance'), eventType.CLICK,
        function(e) {
          log('starting focus dance in .5s');
          log('  will focus on 1, then 2, then 1 again');
          window.setTimeout(function() {
            bot.action.focusOnElement(goog.dom.$('test1'));
            bot.action.focusOnElement(goog.dom.$('test2'));
            bot.action.focusOnElement(goog.dom.$('test1'));
            log('if you see this before event logs, then events are ' +
                'fired in a separate event loop');
          }, 500);
        });
      goog.events.listen(goog.dom.$('clearTestLog'), eventType.CLICK,
        function(e) {
          goog.dom.removeChildren(goog.dom.$('testLog'));
        });
    </script>
  </div>
</form>
</body>
</html>