how to test focus within a focus event using jsTestDriver

Question

Currently I am using jQuery 1.6.1 and jsTestDriver framework to test the following code snippet. The main purpose is test whether "#area" input element has got the focus after "#switcher" is triggered with a focus event. It didn't pass the test, but I see no reason why it should fail.

One weird thing is that if I set a breakpoint using firebug in firefox within this test function, the test will successfully pass after I press the run button later.

Has anyone come across with the same problem? or is it a bug of jsTestDriver framework?

My fixture is as follows:

<form id="test-form">
            <input style="display: none;" type="text" value="" name="area" id="area">
            <input type="text" value="" name="switcher" id="switcher">
</form>

Here is my javascript test code

TestCase('test focus within a focus event', {
    setUp: function() {
        this.$form = $('#test-form');
    },

    'test focus switcher, area should be focused': function() {
        function focusHandler(){
            $('#area', this.$form).show();
            $('#area', this.$form).focus();
        }
        $('#switcher', this.$form).live('focus', focusHandler);
        $('#switcher', this.$form).focus();

        assertTrue($('#area', this.$form).is('focus'));
    },

});

Answer 1

Other than the fact that the selector is supposed to be ':focus' instead of 'focus', I don't have any other solid suggestions. You shouldn't be re-finding things so often. Try:

TestCase('test focus within a focus event', {
  setUp: function () {
    this.$form = $('#test-form');
  },

  'test focus switcher, area should be focused': function () {
    function focusHandler() {
      $('#area', this.$form).show().focus();
    }

    var $switcher = $('#switcher', this.$form);
    $switcher.live('focus', focusHandler);

    $switcher.focus();

    assertTrue($('#area', this.$form).is(':focus'));
  }