From 28fcef5e9e57b645af56615fdb1ab7abbe9869ec Mon Sep 17 00:00:00 2001 From: =?utf8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 11 Dec 2012 10:06:13 -0500 Subject: [PATCH] Datepicker tests: Handle async focus in IE. --- tests/unit/datepicker/datepicker_core.js | 251 +++++++++++--------- tests/unit/datepicker/datepicker_options.js | 168 ++++++++----- 2 files changed, 245 insertions(+), 174 deletions(-) diff --git a/tests/unit/datepicker/datepicker_core.js b/tests/unit/datepicker/datepicker_core.js index 67dd29eac..1388f9222 100644 --- a/tests/unit/datepicker/datepicker_core.js +++ b/tests/unit/datepicker/datepicker_core.js @@ -30,126 +30,159 @@ test("widget method", function() { deepEqual($("body > #ui-datepicker-div:last-child")[0], actual); }); -test('baseStructure', function() { +asyncTest('baseStructure', function() { expect( 58 ); var header, title, table, thead, week, panel, inl, child, - inp = TestHelpers.datepicker.init('#inp').focus(), + inp = TestHelpers.datepicker.init('#inp'), dp = $('#ui-datepicker-div'); - ok(dp.is(':visible'), 'Structure - datepicker visible'); - ok(!dp.is('.ui-datepicker-rtl'), 'Structure - not right-to-left'); - ok(!dp.is('.ui-datepicker-multi'), 'Structure - not multi-month'); - equal(dp.children().length, 2, 'Structure - child count'); - header = dp.children(':first'); - ok(header.is('div.ui-datepicker-header'), 'Structure - header division'); - equal(header.children().length, 3, 'Structure - header child count'); - ok(header.children(':first').is('a.ui-datepicker-prev') && header.children(':first').html() !== '', 'Structure - prev link'); - ok(header.children(':eq(1)').is('a.ui-datepicker-next') && header.children(':eq(1)').html() !== '', 'Structure - next link'); - - title = header.children(':last'); - ok(title.is('div.ui-datepicker-title') && title.html() !== '','Structure - title division'); - equal(title.children().length, 2, 'Structure - title child count'); - ok(title.children(':first').is('span.ui-datepicker-month') && title.children(':first').text() !== '', 'Structure - month text'); - ok(title.children(':last').is('span.ui-datepicker-year') && title.children(':last').text() !== '', 'Structure - year text'); - - table = dp.children(':eq(1)'); - ok(table.is('table.ui-datepicker-calendar'), 'Structure - month table'); - ok(table.children(':first').is('thead'), 'Structure - month table thead'); - thead = table.children(':first').children(':first'); - ok(thead.is('tr'), 'Structure - month table title row'); - equal(thead.find('th').length, 7, 'Structure - month table title cells'); - ok(table.children(':eq(1)').is('tbody'), 'Structure - month table body'); - ok(table.children(':eq(1)').children('tr').length >= 4, 'Structure - month table week count'); - week = table.children(':eq(1)').children(':first'); - ok(week.is('tr'), 'Structure - month table week row'); - equal(week.children().length, 7, 'Structure - week child count'); - ok(week.children(':first').is('td.ui-datepicker-week-end'), 'Structure - month table first day cell'); - ok(week.children(':last').is('td.ui-datepicker-week-end'), 'Structure - month table second day cell'); - inp.datepicker('hide').datepicker('destroy'); + function step1() { + inp[0].focus(); + setTimeout(function() { + ok(dp.is(':visible'), 'Structure - datepicker visible'); + ok(!dp.is('.ui-datepicker-rtl'), 'Structure - not right-to-left'); + ok(!dp.is('.ui-datepicker-multi'), 'Structure - not multi-month'); + equal(dp.children().length, 2, 'Structure - child count'); - // Editable month/year and button panel - inp = TestHelpers.datepicker.init('#inp', {changeMonth: true, changeYear: true, showButtonPanel: true}); - inp.focus(); + header = dp.children(':first'); + ok(header.is('div.ui-datepicker-header'), 'Structure - header division'); + equal(header.children().length, 3, 'Structure - header child count'); + ok(header.children(':first').is('a.ui-datepicker-prev') && header.children(':first').html() !== '', 'Structure - prev link'); + ok(header.children(':eq(1)').is('a.ui-datepicker-next') && header.children(':eq(1)').html() !== '', 'Structure - next link'); - title = dp.find('div.ui-datepicker-title'); - ok(title.children(':first').is('select.ui-datepicker-month'), 'Structure - month selector'); - ok(title.children(':last').is('select.ui-datepicker-year'), 'Structure - year selector'); + title = header.children(':last'); + ok(title.is('div.ui-datepicker-title') && title.html() !== '','Structure - title division'); + equal(title.children().length, 2, 'Structure - title child count'); + ok(title.children(':first').is('span.ui-datepicker-month') && title.children(':first').text() !== '', 'Structure - month text'); + ok(title.children(':last').is('span.ui-datepicker-year') && title.children(':last').text() !== '', 'Structure - year text'); - panel = dp.children(':last'); - ok(panel.is('div.ui-datepicker-buttonpane'), 'Structure - button panel division'); - equal(panel.children().length, 2, 'Structure - button panel child count'); - ok(panel.children(':first').is('button.ui-datepicker-current'), 'Structure - today button'); - ok(panel.children(':last').is('button.ui-datepicker-close'), 'Structure - close button'); - inp.datepicker('hide').datepicker('destroy'); + table = dp.children(':eq(1)'); + ok(table.is('table.ui-datepicker-calendar'), 'Structure - month table'); + ok(table.children(':first').is('thead'), 'Structure - month table thead'); + thead = table.children(':first').children(':first'); + ok(thead.is('tr'), 'Structure - month table title row'); + equal(thead.find('th').length, 7, 'Structure - month table title cells'); + ok(table.children(':eq(1)').is('tbody'), 'Structure - month table body'); + ok(table.children(':eq(1)').children('tr').length >= 4, 'Structure - month table week count'); + week = table.children(':eq(1)').children(':first'); + ok(week.is('tr'), 'Structure - month table week row'); + equal(week.children().length, 7, 'Structure - week child count'); + ok(week.children(':first').is('td.ui-datepicker-week-end'), 'Structure - month table first day cell'); + ok(week.children(':last').is('td.ui-datepicker-week-end'), 'Structure - month table second day cell'); + inp.datepicker('hide').datepicker('destroy'); - // Multi-month 2 - inp = TestHelpers.datepicker.init('#inp', {numberOfMonths: 2}); - inp.focus(); - ok(dp.is('.ui-datepicker-multi'), 'Structure multi [2] - multi-month'); - equal(dp.children().length, 3, 'Structure multi [2] - child count'); - child = dp.children(':first'); - ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-first'), 'Structure multi [2] - first month division'); - child = dp.children(':eq(1)'); - ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-last'), 'Structure multi [2] - second month division'); - child = dp.children(':eq(2)'); - ok(child.is('div.ui-datepicker-row-break'), 'Structure multi [2] - row break'); - ok(dp.is('.ui-datepicker-multi-2'), 'Structure multi [2] - multi-2'); - inp.datepicker('hide').datepicker('destroy'); + step2(); + }); + } - // Multi-month 3 - inp = TestHelpers.datepicker.init('#inp', {numberOfMonths: 3}); - inp.focus(); - ok(dp.is('.ui-datepicker-multi-3'), 'Structure multi [3] - multi-3'); - ok(! dp.is('.ui-datepicker-multi-2'), 'Structure multi [3] - Trac #6704'); - inp.datepicker('hide').datepicker('destroy'); + function step2() { + // Editable month/year and button panel + inp = TestHelpers.datepicker.init('#inp', {changeMonth: true, changeYear: true, showButtonPanel: true}); + inp.focus(); + setTimeout(function() { + title = dp.find('div.ui-datepicker-title'); + ok(title.children(':first').is('select.ui-datepicker-month'), 'Structure - month selector'); + ok(title.children(':last').is('select.ui-datepicker-year'), 'Structure - year selector'); - // Multi-month [2, 2] - inp = TestHelpers.datepicker.init('#inp', {numberOfMonths: [2, 2]}); - inp.focus(); - ok(dp.is('.ui-datepicker-multi'), 'Structure multi - multi-month'); - equal(dp.children().length, 6, 'Structure multi [2,2] - child count'); - child = dp.children(':first'); - ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-first'), 'Structure multi [2,2] - first month division'); - child = dp.children(':eq(1)'); - ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-last'), 'Structure multi [2,2] - second month division'); - child = dp.children(':eq(2)'); - ok(child.is('div.ui-datepicker-row-break'), 'Structure multi [2,2] - row break'); - child = dp.children(':eq(3)'); - ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-first'), 'Structure multi [2,2] - third month division'); - child = dp.children(':eq(4)'); - ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-last'), 'Structure multi [2,2] - fourth month division'); - child = dp.children(':eq(5)'); - ok(child.is('div.ui-datepicker-row-break'), 'Structure multi [2,2] - row break'); - inp.datepicker('hide').datepicker('destroy'); + panel = dp.children(':last'); + ok(panel.is('div.ui-datepicker-buttonpane'), 'Structure - button panel division'); + equal(panel.children().length, 2, 'Structure - button panel child count'); + ok(panel.children(':first').is('button.ui-datepicker-current'), 'Structure - today button'); + ok(panel.children(':last').is('button.ui-datepicker-close'), 'Structure - close button'); + inp.datepicker('hide').datepicker('destroy'); - // Inline - inl = TestHelpers.datepicker.init('#inl'); - dp = inl.children(); - ok(dp.is('.ui-datepicker-inline'), 'Structure inline - main div'); - ok(!dp.is('.ui-datepicker-rtl'), 'Structure inline - not right-to-left'); - ok(!dp.is('.ui-datepicker-multi'), 'Structure inline - not multi-month'); - equal(dp.children().length, 2, 'Structure inline - child count'); - header = dp.children(':first'); - ok(header.is('div.ui-datepicker-header'), 'Structure inline - header division'); - equal(header.children().length, 3, 'Structure inline - header child count'); - table = dp.children(':eq(1)'); - ok(table.is('table.ui-datepicker-calendar'), 'Structure inline - month table'); - ok(table.children(':first').is('thead'), 'Structure inline - month table thead'); - ok(table.children(':eq(1)').is('tbody'), 'Structure inline - month table body'); - inl.datepicker('destroy'); - - // Inline multi-month - inl = TestHelpers.datepicker.init('#inl', {numberOfMonths: 2}); - dp = inl.children(); - ok(dp.is('.ui-datepicker-inline') && dp.is('.ui-datepicker-multi'), 'Structure inline multi - main div'); - equal(dp.children().length, 3, 'Structure inline multi - child count'); - child = dp.children(':first'); - ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-first'), 'Structure inline multi - first month division'); - child = dp.children(':eq(1)'); - ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-last'), 'Structure inline multi - second month division'); - child = dp.children(':eq(2)'); - ok(child.is('div.ui-datepicker-row-break'), 'Structure inline multi - row break'); - inl.datepicker('destroy'); + step3(); + }); + } + + function step3() { + // Multi-month 2 + inp = TestHelpers.datepicker.init('#inp', {numberOfMonths: 2}); + inp.focus(); + setTimeout(function() { + ok(dp.is('.ui-datepicker-multi'), 'Structure multi [2] - multi-month'); + equal(dp.children().length, 3, 'Structure multi [2] - child count'); + child = dp.children(':first'); + ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-first'), 'Structure multi [2] - first month division'); + child = dp.children(':eq(1)'); + ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-last'), 'Structure multi [2] - second month division'); + child = dp.children(':eq(2)'); + ok(child.is('div.ui-datepicker-row-break'), 'Structure multi [2] - row break'); + ok(dp.is('.ui-datepicker-multi-2'), 'Structure multi [2] - multi-2'); + inp.datepicker('hide').datepicker('destroy'); + + step4(); + }); + } + + function step4() { + // Multi-month 3 + inp = TestHelpers.datepicker.init('#inp', {numberOfMonths: 3}); + inp.focus(); + setTimeout(function() { + ok(dp.is('.ui-datepicker-multi-3'), 'Structure multi [3] - multi-3'); + ok(! dp.is('.ui-datepicker-multi-2'), 'Structure multi [3] - Trac #6704'); + inp.datepicker('hide').datepicker('destroy'); + + step5(); + }); + } + + function step5() { + // Multi-month [2, 2] + inp = TestHelpers.datepicker.init('#inp', {numberOfMonths: [2, 2]}); + inp.focus(); + setTimeout(function() { + ok(dp.is('.ui-datepicker-multi'), 'Structure multi - multi-month'); + equal(dp.children().length, 6, 'Structure multi [2,2] - child count'); + child = dp.children(':first'); + ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-first'), 'Structure multi [2,2] - first month division'); + child = dp.children(':eq(1)'); + ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-last'), 'Structure multi [2,2] - second month division'); + child = dp.children(':eq(2)'); + ok(child.is('div.ui-datepicker-row-break'), 'Structure multi [2,2] - row break'); + child = dp.children(':eq(3)'); + ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-first'), 'Structure multi [2,2] - third month division'); + child = dp.children(':eq(4)'); + ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-last'), 'Structure multi [2,2] - fourth month division'); + child = dp.children(':eq(5)'); + ok(child.is('div.ui-datepicker-row-break'), 'Structure multi [2,2] - row break'); + inp.datepicker('hide').datepicker('destroy'); + + // Inline + inl = TestHelpers.datepicker.init('#inl'); + dp = inl.children(); + ok(dp.is('.ui-datepicker-inline'), 'Structure inline - main div'); + ok(!dp.is('.ui-datepicker-rtl'), 'Structure inline - not right-to-left'); + ok(!dp.is('.ui-datepicker-multi'), 'Structure inline - not multi-month'); + equal(dp.children().length, 2, 'Structure inline - child count'); + header = dp.children(':first'); + ok(header.is('div.ui-datepicker-header'), 'Structure inline - header division'); + equal(header.children().length, 3, 'Structure inline - header child count'); + table = dp.children(':eq(1)'); + ok(table.is('table.ui-datepicker-calendar'), 'Structure inline - month table'); + ok(table.children(':first').is('thead'), 'Structure inline - month table thead'); + ok(table.children(':eq(1)').is('tbody'), 'Structure inline - month table body'); + inl.datepicker('destroy'); + + // Inline multi-month + inl = TestHelpers.datepicker.init('#inl', {numberOfMonths: 2}); + dp = inl.children(); + ok(dp.is('.ui-datepicker-inline') && dp.is('.ui-datepicker-multi'), 'Structure inline multi - main div'); + equal(dp.children().length, 3, 'Structure inline multi - child count'); + child = dp.children(':first'); + ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-first'), 'Structure inline multi - first month division'); + child = dp.children(':eq(1)'); + ok(child.is('div.ui-datepicker-group') && child.is('div.ui-datepicker-group-last'), 'Structure inline multi - second month division'); + child = dp.children(':eq(2)'); + ok(child.is('div.ui-datepicker-row-break'), 'Structure inline multi - row break'); + inl.datepicker('destroy'); + + start(); + }); + } + + step1(); }); test('customStructure', function() { diff --git a/tests/unit/datepicker/datepicker_options.js b/tests/unit/datepicker/datepicker_options.js index 06fde26e6..7b0907d3a 100644 --- a/tests/unit/datepicker/datepicker_options.js +++ b/tests/unit/datepicker/datepicker_options.js @@ -87,76 +87,114 @@ test('change', function() { equal($.datepicker._defaults.showOn, 'focus', 'Retain default showOn'); }); -test('invocation', function() { +asyncTest('invocation', function() { expect( 29 ); var button, image, inp = TestHelpers.datepicker.init('#inp'), dp = $('#ui-datepicker-div'), body = $('body'); - // On focus - button = inp.siblings('button'); - ok(button.length === 0, 'Focus - button absent'); - image = inp.siblings('img'); - ok(image.length === 0, 'Focus - image absent'); - inp.focus(); - ok(dp.is(':visible'), 'Focus - rendered on focus'); - inp.simulate('keydown', {keyCode: $.ui.keyCode.ESCAPE}); - ok(!dp.is(':visible'), 'Focus - hidden on exit'); - inp.focus(); - ok(dp.is(':visible'), 'Focus - rendered on focus'); - body.simulate('mousedown', {}); - ok(!dp.is(':visible'), 'Focus - hidden on external click'); - inp.datepicker('hide').datepicker('destroy'); - // On button - inp = TestHelpers.datepicker.init('#inp', {showOn: 'button', buttonText: 'Popup'}); - ok(!dp.is(':visible'), 'Button - initially hidden'); - button = inp.siblings('button'); - image = inp.siblings('img'); - ok(button.length === 1, 'Button - button present'); - ok(image.length === 0, 'Button - image absent'); - equal(button.text(), 'Popup', 'Button - button text'); - inp.focus(); - ok(!dp.is(':visible'), 'Button - not rendered on focus'); - button.click(); - ok(dp.is(':visible'), 'Button - rendered on button click'); - button.click(); - ok(!dp.is(':visible'), 'Button - hidden on second button click'); - inp.datepicker('hide').datepicker('destroy'); - // On image button - inp = TestHelpers.datepicker.init('#inp', {showOn: 'button', buttonImageOnly: true, - buttonImage: 'img/calendar.gif', buttonText: 'Cal'}); - ok(!dp.is(':visible'), 'Image button - initially hidden'); - button = inp.siblings('button'); - ok(button.length === 0, 'Image button - button absent'); - image = inp.siblings('img'); - ok(image.length === 1, 'Image button - image present'); - equal(image.attr('src'), 'img/calendar.gif', 'Image button - image source'); - equal(image.attr('title'), 'Cal', 'Image button - image text'); - inp.focus(); - ok(!dp.is(':visible'), 'Image button - not rendered on focus'); - image.click(); - ok(dp.is(':visible'), 'Image button - rendered on image click'); - image.click(); - ok(!dp.is(':visible'), 'Image button - hidden on second image click'); - inp.datepicker('hide').datepicker('destroy'); - // On both - inp = TestHelpers.datepicker.init('#inp', {showOn: 'both', buttonImage: 'img/calendar.gif'}); - ok(!dp.is(':visible'), 'Both - initially hidden'); - button = inp.siblings('button'); - ok(button.length === 1, 'Both - button present'); - image = inp.siblings('img'); - ok(image.length === 0, 'Both - image absent'); - image = button.children('img'); - ok(image.length === 1, 'Both - button image present'); - inp.focus(); - ok(dp.is(':visible'), 'Both - rendered on focus'); - body.simulate('mousedown', {}); - ok(!dp.is(':visible'), 'Both - hidden on external click'); - button.click(); - ok(dp.is(':visible'), 'Both - rendered on button click'); - button.click(); - ok(!dp.is(':visible'), 'Both - hidden on second button click'); - inp.datepicker('hide').datepicker('destroy'); + + function step1() { + // On focus + button = inp.siblings('button'); + ok(button.length === 0, 'Focus - button absent'); + image = inp.siblings('img'); + ok(image.length === 0, 'Focus - image absent'); + inp[0].focus(); + setTimeout(function() { + ok(dp.is(':visible'), 'Focus - rendered on focus'); + inp.simulate('keydown', {keyCode: $.ui.keyCode.ESCAPE}); + ok(!dp.is(':visible'), 'Focus - hidden on exit'); + inp[0].blur(); + setTimeout(function() { + inp[0].focus(); + setTimeout(function() { + ok(dp.is(':visible'), 'Focus - rendered on focus'); + body.simulate('mousedown', {}); + ok(!dp.is(':visible'), 'Focus - hidden on external click'); + inp.datepicker('hide').datepicker('destroy'); + + step2(); + }); + }); + }); + } + + function step2() { + // On button + inp = TestHelpers.datepicker.init('#inp', {showOn: 'button', buttonText: 'Popup'}); + ok(!dp.is(':visible'), 'Button - initially hidden'); + button = inp.siblings('button'); + image = inp.siblings('img'); + ok(button.length === 1, 'Button - button present'); + ok(image.length === 0, 'Button - image absent'); + equal(button.text(), 'Popup', 'Button - button text'); + inp[0].focus(); + setTimeout(function() { + ok(!dp.is(':visible'), 'Button - not rendered on focus'); + button.click(); + ok(dp.is(':visible'), 'Button - rendered on button click'); + button.click(); + ok(!dp.is(':visible'), 'Button - hidden on second button click'); + inp.datepicker('hide').datepicker('destroy'); + + step3(); + }); + } + + function step3() { + // On image button + inp = TestHelpers.datepicker.init('#inp', {showOn: 'button', buttonImageOnly: true, + buttonImage: 'img/calendar.gif', buttonText: 'Cal'}); + ok(!dp.is(':visible'), 'Image button - initially hidden'); + button = inp.siblings('button'); + ok(button.length === 0, 'Image button - button absent'); + image = inp.siblings('img'); + ok(image.length === 1, 'Image button - image present'); + equal(image.attr('src'), 'img/calendar.gif', 'Image button - image source'); + equal(image.attr('title'), 'Cal', 'Image button - image text'); + inp[0].focus(); + setTimeout(function() { + ok(!dp.is(':visible'), 'Image button - not rendered on focus'); + image.click(); + ok(dp.is(':visible'), 'Image button - rendered on image click'); + image.click(); + ok(!dp.is(':visible'), 'Image button - hidden on second image click'); + inp.datepicker('hide').datepicker('destroy'); + + step4(); + }); + } + + function step4() { + // On both + inp = TestHelpers.datepicker.init('#inp', {showOn: 'both', buttonImage: 'img/calendar.gif'}); + ok(!dp.is(':visible'), 'Both - initially hidden'); + button = inp.siblings('button'); + ok(button.length === 1, 'Both - button present'); + image = inp.siblings('img'); + ok(image.length === 0, 'Both - image absent'); + image = button.children('img'); + ok(image.length === 1, 'Both - button image present'); + inp[0].blur(); + setTimeout(function() { + inp[0].focus(); + setTimeout(function() { + ok(dp.is(':visible'), 'Both - rendered on focus'); + body.simulate('mousedown', {}); + ok(!dp.is(':visible'), 'Both - hidden on external click'); + button.click(); + ok(dp.is(':visible'), 'Both - rendered on button click'); + button.click(); + ok(!dp.is(':visible'), 'Both - hidden on second button click'); + inp.datepicker('hide').datepicker('destroy'); + + start(); + }); + }); + } + + step1(); }); test('otherMonths', function() { -- 2.39.5