Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 301f124

Browse files
author
Gabriel Schulhof
committed
Panel: Bail upon opening animationComplete() if the panel has closed
Hook up animationComplete() to the wrapper, if present, and only otherwise to the element, because the animation class is only added to the element if there is no wrapper. The tests now need to wait for the panel to actually open in order to hit all the assertions, because some assertions are made only upon panelopen. Closes gh-7264 Fixes gh-7236
1 parent 8a7451b commit 301f124

File tree

2 files changed

+163
-85
lines changed

2 files changed

+163
-85
lines changed

‎js/widgets/panel.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -308,7 +308,8 @@ $.widget( "mobile.panel", {
308308
}
309309

310310
if ( !immediate && $.support.cssTransform3d && !!o.animate ) {
311-
self.element.animationComplete( complete, "transition" );
311+
( self._wrapper || self.element )
312+
.animationComplete( complete, "transition" );
312313
} else {
313314
setTimeout( complete, 0 );
314315
}
@@ -341,6 +342,11 @@ $.widget( "mobile.panel", {
341342
},
342343
complete = function() {
343344

345+
// Bail if the panel was closed before the opening animation has completed
346+
if ( !self._open ) {
347+
return;
348+
}
349+
344350
if ( o.display !== "overlay" ) {
345351
self._wrapper.addClass( o.classes.pageContentPrefix + "-open" );
346352
self._fixedToolbars().addClass( o.classes.pageContentPrefix + "-open" );
@@ -382,7 +388,8 @@ $.widget( "mobile.panel", {
382388
}
383389

384390
if ( !immediate && $.support.cssTransform3d && !!o.animate ) {
385-
self.element.animationComplete( complete, "transition" );
391+
( self._wrapper || self.element )
392+
.animationComplete( complete, "transition" );
386393
} else {
387394
setTimeout( complete, 0 );
388395
}

‎tests/unit/panel/panel_core.js

Lines changed: 154 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -371,112 +371,183 @@
371371
});
372372
asyncTest( "overlay panel should not call getWrapper", function(){
373373
expect( 5 );
374-
var testPanel = $( "#panel-test-get-wrapper-overlay" );
374+
var eventNs = ".overlayPanelShouldNotCallGetWrapper",
375+
testPanel = $( "#panel-test-get-wrapper-overlay" );
375376

376377
testPanel.panel({
377378
"display": "overlay"
378379
});
379-
ok( count === 0, "getWrapper only called once durring create" );
380-
testPanel.panel( "open" );
381-
testPanel.one( "panelopen", function(){
382-
ok( count === 0, "getWrapper not called on open" );
383-
});
384-
testPanel.panel( "close" );
385-
testPanel.one( "panelclose", function(){
386-
ok( count === 0, "getWrapper not called on close" );
387-
$.mobile.changePage( "#page2" );
388-
});
389-
$( "body" ).one( "pagechange", function(){
390-
ok( count === 0, "getWrapper not called on pagechange" );
391-
$.mobile.changePage( "#page1" );
392-
$( "body" ).one( "pagechange", function(){
393-
ok( count === 0, "getWrapper not called on pagechange back to inital page" );
394-
start();
395-
});
396-
});
380+
deepEqual( count, 0, "getWrapper only called once durring create" );
397381

382+
$.testHelper.detailedEventCascade([
383+
function() {
384+
testPanel.panel( "open" );
385+
},
386+
{
387+
panelopen: { src: testPanel, event: "panelopen" + eventNs + "1" }
388+
},
389+
function() {
390+
deepEqual( count, 0, "getWrapper not called on open" );
391+
testPanel.panel( "close" );
392+
},
393+
{
394+
panelclose: { src: testPanel, event: "panelclose" + eventNs + "2" }
395+
},
396+
function() {
397+
deepEqual( count, 0, "getWrapper not called on close" );
398+
$.mobile.changePage( "#page2" );
399+
},
400+
{
401+
pagechange: { src: $( "body" ), event: "pagechange" + eventNs + "3" }
402+
},
403+
function() {
404+
deepEqual( count, 0, "getWrapper not called on pagechange" );
405+
$.mobile.changePage( "#page1" );
406+
},
407+
{
408+
pagechange: { src: $( "body" ), event: "pagechange" + eventNs + "4" }
409+
},
410+
function() {
411+
deepEqual( count, 0, "getWrapper not called on pagechange back to initial page" );
412+
start();
413+
}
414+
]);
398415
});
399-
asyncTest( "push should call getWrapper only once on create", function(){
416+
417+
asyncTest( "push panel should call getWrapper only once on create", function(){
400418
expect( 5 );
401-
var testPanel = $( "#panel-test-get-wrapper-push" );
419+
var eventNs = ".pushPanelShouldCallGetWrapperOnlyOnceOnCreate",
420+
testPanel = $( "#panel-test-get-wrapper-push" );
402421

403422
testPanel.panel({
404423
"display": "push"
405424
});
406425
ok( count === 1, "getWrapper only called once durring create" );
407-
testPanel.panel( "open" );
408-
testPanel.one( "panelopen", function(){
409-
ok( count === 1, "getWrapper not called on open" );
410-
});
411-
testPanel.panel( "close" );
412-
testPanel.one( "panelclose", function(){
413-
ok( count === 1, "getWrapper not called on close" );
414-
$.mobile.changePage( "#page2" );
415-
});
416-
$( "body" ).one( "pagechange", function(){
417-
ok( count === 1, "getWrapper not called on pagechange" );
418-
$.mobile.changePage( "#page1" );
419-
$( "body" ).one( "pagechange", function(){
420-
ok( count === 1, "getWrapper not called on pagechange back to inital page" );
421-
start();
422-
});
423-
});
424426

427+
$.testHelper.detailedEventCascade([
428+
function() {
429+
testPanel.panel( "open" );
430+
},
431+
{
432+
panelopen: { src: testPanel, event: "panelopen" + eventNs + "1" }
433+
},
434+
function() {
435+
deepEqual( count, 1, "getWrapper not called on open" );
436+
testPanel.panel( "close" );
437+
},
438+
{
439+
panelclose: { src: testPanel, event: "panelclose" + eventNs + "2" }
440+
},
441+
function() {
442+
deepEqual( count, 1, "getWrapper not called on close" );
443+
$.mobile.changePage( "#page2" );
444+
},
445+
{
446+
pagechange: { src: $( "body" ), event: "pagechange" + eventNs + "3" }
447+
},
448+
function() {
449+
deepEqual( count, 1, "getWrapper not called on pagechange" );
450+
$.mobile.changePage( "#page1" );
451+
},
452+
{
453+
pagechange: { src: $( "body" ), event: "pagechange" + eventNs + "4" }
454+
},
455+
function() {
456+
deepEqual( count, 1, "getWrapper not called on pagechange back to inital page" );
457+
start();
458+
}
459+
]);
425460
});
461+
426462
asyncTest( "reveal panel should call getWrapper only once on create", function(){
427463
expect( 5 );
428-
var testPanel = $( "#panel-test-get-wrapper" );
464+
var eventNs = ".revealPanelShouldCallGetWrapperOnlyOnceOnCreate",
465+
testPanel = $( "#panel-test-get-wrapper" );
429466

430467
testPanel.panel();
431-
ok( count === 1, "getWrapper only called once durring create" );
432-
testPanel.panel( "open" );
433-
testPanel.one( "panelopen", function(){
434-
ok( count === 1, "getWrapper not called on open" );
435-
});
436-
testPanel.panel( "close" );
437-
testPanel.one( "panelclose", function(){
438-
ok( count === 1, "getWrapper not called on close" );
439-
$.mobile.changePage( "#page2" );
440-
});
441-
$( "body" ).one( "pagechange", function(){
442-
ok( count === 1, "getWrapper not called on pagechange" );
443-
$.mobile.changePage( "#page1" );
444-
$( "body" ).one( "pagechange", function(){
445-
ok( count === 1, "getWrapper not called on pagechange back to inital page" );
468+
deepEqual( count, 1, "getWrapper only called once durring create" );
469+
470+
$.testHelper.detailedEventCascade([
471+
function() {
472+
testPanel.panel( "open" );
473+
},
474+
{
475+
panelopen: { src: testPanel, event: "panelopen" + eventNs + "1" }
476+
},
477+
function(){
478+
deepEqual( count, 1, "getWrapper not called on open" );
479+
testPanel.panel( "close" );
480+
},
481+
{
482+
panelclose: { src: testPanel, event: "panelclose" + eventNs + "2" }
483+
},
484+
function() {
485+
deepEqual( count, 1, "getWrapper not called on close" );
486+
$.mobile.changePage( "#page2" );
487+
},
488+
{
489+
pagechange: { src: $( "body" ), event: "pagechange" + eventNs + "3" }
490+
},
491+
function() {
492+
deepEqual( count, 1, "getWrapper not called on pagechange" );
493+
$.mobile.changePage( "#page1" );
494+
},
495+
{
496+
pagechange: { src: $( "body" ), event: "pagechange" + eventNs + "4" }
497+
},
498+
function() {
499+
deepEqual( count, 1, "getWrapper not called on pagechange back to inital page" );
446500
start();
447-
});
448-
});
501+
}
502+
]);
449503

450504
});
451-
asyncTest( "external panel should call panel once on create and on page changes", function(){
452-
expect( 5 );
453-
var testPanel = $( "#external-panel-getWrapper-test" );
454-
455-
testPanel.panel();
456-
ok( count === 1, "getWrapper only called once durring create" );
457-
testPanel.panel( "open" );
458-
testPanel.one( "panelopen", function(){
459-
ok( count === 1, "getWrapper not called on open" );
460-
});
461-
testPanel.panel( "close" );
462-
testPanel.one( "panelclose", function(){
463-
ok( count === 1, "getWrapper not called on close" );
464-
$.mobile.changePage( "#page2" );
465-
$( "body" ).one( "pageshow", function(){
466-
window.setTimeout( function(){
467-
ok( count === 2, "getWrapper called on pagechange" );
468-
}, 0 );
469-
470-
$( "body" ).one( "pageshow", function(){
471-
window.setTimeout( function(){
472-
ok( count === 3, "getWrapper called on pagechange back to inital page" );
473-
start();
505+
asyncTest( "external panel should call getWrapper once on create and on page changes",
506+
function(){
507+
expect( 5 );
508+
var eventNs = ".externalPanelShouldCallGetWrapperOnceOnCreateAndOnPageChanges",
509+
testPanel = $( "#external-panel-getWrapper-test" );
510+
511+
testPanel.panel();
512+
deepEqual( count, 1, "getWrapper only called once durring create" );
513+
514+
$.testHelper.detailedEventCascade([
515+
function() {
516+
testPanel.panel( "open" );
517+
},
518+
{
519+
panelopen: { src: testPanel, event: "panelopen" }
520+
},
521+
function() {
522+
deepEqual( count, 1, "getWrapper not called on open" );
523+
testPanel.panel( "close" );
524+
},
525+
{
526+
panelclose: { src: testPanel, event: "panelclose" }
527+
},
528+
function() {
529+
deepEqual( count, 1, "getWrapper not called on close" );
530+
$.mobile.changePage( "#page2" );
531+
},
532+
{
533+
pageshow: { src: $( "body" ), event: "pagecontainershow" }
534+
},
535+
function() {
536+
window.setTimeout( function() {
537+
deepEqual( count, 2, "getWrapper called on pagechange" );
474538
}, 0 );
475-
});
476-
$.mobile.changePage( "#page1" );
477-
});
539+
540+
$( "body" ).one( "pagecontainershow", function() {
541+
window.setTimeout( function() {
542+
deepEqual( count, 3,
543+
"getWrapper called on pagechange back to inital page" );
544+
start();
545+
}, 0 );
546+
});
547+
$.mobile.changePage( "#page1" );
548+
}
549+
]);
478550
});
479-
});
480551

481552
asyncTest( "external panel: test classes during A>B>A transition", function() {
482553
expect( 16 );

0 commit comments

Comments
 (0)