| /instantMessage/node_modules/jquery-ui/tests/unit/effects/core.js |
|---|
| @@ -0,0 +1,386 @@ |
|---|
| define( [ |
| "qunit", |
| "jquery", |
| "lib/common", |
| "ui/effect", |
| "ui/effects/effect-blind", |
| "ui/effects/effect-bounce", |
| "ui/effects/effect-clip", |
| "ui/effects/effect-drop", |
| "ui/effects/effect-explode", |
| "ui/effects/effect-fade", |
| "ui/effects/effect-fold", |
| "ui/effects/effect-highlight", |
| "ui/effects/effect-puff", |
| "ui/effects/effect-pulsate", |
| "ui/effects/effect-scale", |
| "ui/effects/effect-shake", |
| "ui/effects/effect-size", |
| "ui/effects/effect-slide", |
| "ui/effects/effect-transfer" |
| ], function( QUnit, $, common ) { |
| |
| QUnit.assert.present = function( value, array, message ) { |
| this.push( jQuery.inArray( value, array ) !== -1, value, array, message ); |
| }; |
| |
| QUnit.assert.notPresent = function( value, array, message ) { |
| this.push( jQuery.inArray( value, array ) === -1, value, array, message ); |
| }; |
| |
| // MinDuration is used for "short" animate tests where we are only concerned about the final |
| var minDuration = 60, |
| |
| // Duration is used for "long" animates where we plan on testing properties during animation |
| duration = 200; |
| |
| QUnit.module( "effects.core" ); |
| |
| // TODO: test all signatures of .show(), .hide(), .toggle(). |
| // Look at core's signatures and UI's signatures. |
| QUnit.test( ".hide() with step", function( assert ) { |
| var ready = assert.async(); |
| assert.expect( 1 ); |
| var element = $( "#elem" ), |
| step = function() { |
| assert.ok( true, "step callback invoked" ); |
| step = $.noop; |
| }; |
| |
| element.hide( { |
| step: function() { |
| step(); |
| }, |
| complete: ready |
| } ); |
| } ); |
| |
| QUnit.test( "Immediate Return Conditions", function( assert ) { |
| var hidden = $( "div.hidden" ), |
| count = 0; |
| assert.expect( 3 ); |
| hidden.hide( "blind", function() { |
| assert.equal( ++count, 1, "Hide on hidden returned immediately" ); |
| } ).show().show( "blind", function() { |
| assert.equal( ++count, 2, "Show on shown returned immediately" ); |
| } ); |
| assert.equal( ++count, 3, "Both Functions worked properly" ); |
| } ); |
| |
| QUnit.test( ".hide() with hidden parent", function( assert ) { |
| assert.expect( 1 ); |
| var element = $( "div.hidden" ).children(); |
| element.hide( "blind", function() { |
| assert.equal( element.css( "display" ), "none", "display: none" ); |
| } ); |
| } ); |
| |
| QUnit.test( "Parse of null for options", function( assert ) { |
| var ready = assert.async(); |
| var hidden = $( "div.hidden" ), |
| count = 0; |
| assert.expect( 1 ); |
| hidden.show( "blind", null, 1, function() { |
| assert.equal( ++count, 1, "null for options still works" ); |
| ready(); |
| } ); |
| } ); |
| |
| QUnit.test( "removeClass", function( assert ) { |
| assert.expect( 3 ); |
| |
| var element = $( "<div>" ); |
| assert.equal( "", element[ 0 ].className ); |
| element.addClass( "destroyed" ); |
| assert.equal( "destroyed", element[ 0 ].className ); |
| element.removeClass(); |
| assert.equal( "", element[ 0 ].className ); |
| } ); |
| |
| QUnit.module( "effects.core: animateClass" ); |
| |
| QUnit.test( "animateClass works with borderStyle", function( assert ) { |
| var ready = assert.async(); |
| var test = $( "div.animateClass" ); |
| assert.expect( 3 ); |
| test.toggleClass( "testAddBorder", minDuration, function() { |
| test.toggleClass( "testAddBorder", minDuration, function() { |
| assert.equal( test.css( "borderLeftStyle" ), "none", "None border set" ); |
| ready(); |
| } ); |
| assert.equal( test.css( "borderLeftStyle" ), "solid", "None border not immedately set" ); |
| } ); |
| assert.equal( test.css( "borderLeftStyle" ), "solid", "Solid border immedately set" ); |
| } ); |
| |
| QUnit.test( "animateClass works with colors", function( assert ) { |
| var ready = assert.async(); |
| var test = $( "div.animateClass" ), |
| oldStep = jQuery.fx.step.backgroundColor; |
| |
| assert.expect( 2 ); |
| |
| // We want to catch the first frame of animation |
| jQuery.fx.step.backgroundColor = function( fx ) { |
| oldStep.apply( this, arguments ); |
| |
| // Make sure it has animated somewhere we can detect |
| if ( fx.pos > 255 / 2000 ) { |
| jQuery.fx.step.backgroundColor = oldStep; |
| assert.notPresent( test.css( "backgroundColor" ), |
| [ "#000000", "#ffffff", "#000", "#fff", "rgb(0, 0, 0)", "rgb(255,255,255)" ], |
| "Color is not endpoints in middle." ); |
| test.stop( true, true ); |
| } |
| }; |
| |
| test.toggleClass( "testChangeBackground", { |
| duration: 2000, |
| complete: function() { |
| assert.present( test.css( "backgroundColor" ), [ "#ffffff", "#fff", "rgb(255, 255, 255)" ], "Color is final" ); |
| ready(); |
| } |
| } ); |
| } ); |
| |
| QUnit.test( "animateClass calls step option", function( assert ) { |
| assert.expect( 1 ); |
| var ready = assert.async(); |
| var test = jQuery( "div.animateClass" ), |
| step = function() { |
| assert.ok( true, "Step Function Called" ); |
| test.stop(); |
| ready(); |
| step = $.noop; |
| }; |
| test.toggleClass( "testChangeBackground", { |
| step: function() { |
| step(); |
| } |
| } ); |
| } ); |
| |
| QUnit.test( "animateClass works with children", function( assert ) { |
| assert.expect( 3 ); |
| var ready = assert.async(); |
| var animatedChild, |
| test = $( "div.animateClass" ), |
| h2 = test.find( "h2" ); |
| |
| test.toggleClass( "testChildren", { |
| children: true, |
| duration: duration, |
| complete: function() { |
| assert.equal( h2.css( "fontSize" ), "20px", "Text size is final during complete" ); |
| test.toggleClass( "testChildren", { |
| duration: duration, |
| complete: function() { |
| assert.equal( h2.css( "fontSize" ), "10px", "Text size revertted after class removed" ); |
| |
| ready(); |
| }, |
| step: function( val, fx ) { |
| if ( fx.elem === h2[ 0 ] ) { |
| assert.ok( false, "Error - Animating property on h2" ); |
| } |
| } |
| } ); |
| }, |
| step: function( val, fx ) { |
| if ( fx.prop === "fontSize" && fx.elem === h2[ 0 ] && !animatedChild ) { |
| assert.equal( fx.end, 20, "animating font size on child" ); |
| animatedChild = true; |
| } |
| } |
| } ); |
| } ); |
| |
| QUnit.test( "animateClass clears style properties when stopped", function( assert ) { |
| var ready = assert.async(); |
| var test = $( "div.animateClass" ), |
| style = test[ 0 ].style, |
| orig = style.cssText; |
| |
| assert.expect( 2 ); |
| |
| test.addClass( "testChangeBackground", duration ); |
| assert.notEqual( orig, style.cssText, "cssText is not the same after starting animation" ); |
| |
| test |
| .stop( true, true ) |
| .promise() |
| .then( function() { |
| assert.equal( orig, $.trim( style.cssText ), "cssText is the same after stopping animation midway" ); |
| ready(); |
| } ); |
| } ); |
| |
| QUnit.test( "animateClass: css and class changes during animation are not lost (#7106)", |
| function( assert ) { |
| var ready = assert.async(); |
| assert.expect( 2 ); |
| var test = $( "div.ticket7106" ); |
| |
| // Ensure the class stays and that the css property stays |
| function animationComplete() { |
| assert.hasClasses( test, "testClass", "class change during animateClass was not lost" ); |
| assert.equal( test.height(), 100, "css change during animateClass was not lost" ); |
| ready(); |
| } |
| |
| // Add a class and change a style property after starting an animated class |
| test.addClass( "animate", minDuration, animationComplete ) |
| .addClass( "testClass" ) |
| .height( 100 ); |
| } ); |
| |
| QUnit.test( "createPlaceholder: only created for static or relative elements", function( assert ) { |
| assert.expect( 4 ); |
| |
| assert.ok( $.effects.createPlaceholder( $( ".relative" ) ).length, "placeholder created for relative element" ); |
| assert.ok( $.effects.createPlaceholder( $( ".static" ) ).length, "placeholder created for static element" ); |
| assert.ok( !$.effects.createPlaceholder( $( ".absolute" ) ), "placeholder not created for absolute element" ); |
| assert.ok( !$.effects.createPlaceholder( $( ".fixed" ) ), "placeholder not created for fixed element" ); |
| } ); |
| |
| QUnit.test( "createPlaceholder: preserves layout affecting properties", function( assert ) { |
| assert.expect( 7 ); |
| |
| var position = 5, |
| element = $( ".relative" ).css( { |
| top: position, |
| left: position |
| } ), |
| before = { |
| offset: element.offset(), |
| outerWidth: element.outerWidth( true ), |
| outerHeight: element.outerHeight( true ), |
| "float": element.css( "float" ), |
| position: element.position() |
| }, |
| placeholder = $.effects.createPlaceholder( element ); |
| |
| // Placeholders are only placed to preserve the effect on layout. Considering |
| // top and left do not change layout, they are not preserved, which makes some |
| // of the math simpler in the implementation. |
| assert.deepEqual( before.offset.top - position, placeholder.offset().top, "offset top preserved" ); |
| assert.deepEqual( before.offset.left - position, placeholder.offset().left, "offset left preserved" ); |
| assert.deepEqual( before.position.top - position, placeholder.position().top, "position top preserved" ); |
| assert.deepEqual( before.position.left - position, placeholder.position().left, "position left preserved" ); |
| |
| assert.deepEqual( before[ "float" ], placeholder.css( "float" ), "float preserved" ); |
| assert.deepEqual( before.outerWidth, placeholder.outerWidth( true ), "width preserved" ); |
| assert.deepEqual( before.outerHeight, placeholder.outerHeight( true ), "height preserved" ); |
| } ); |
| |
| QUnit.module( "transfer" ); |
| |
| QUnit.test( "transfer() without callback", function( assert ) { |
| var ready = assert.async(); |
| assert.expect( 0 ); |
| |
| // Verify that the effect works without a callback |
| $( "#elem" ).transfer( { |
| to: ".animateClass", |
| duration: 1 |
| } ); |
| setTimeout( function() { |
| ready(); |
| }, 25 ); |
| } ); |
| |
| QUnit.test( "transfer() with callback", function( assert ) { |
| var ready = assert.async(); |
| assert.expect( 1 ); |
| $( "#elem" ).transfer( { |
| to: ".animateClass", |
| duration: 1 |
| }, function() { |
| assert.ok( true, "callback invoked" ); |
| ready(); |
| } ); |
| } ); |
| |
| $.each( $.effects.effect, function( effect ) { |
| QUnit.module( "effects." + effect ); |
| |
| common.testJshint( "effects/effect-" + effect ); |
| |
| if ( effect === "transfer" ) { |
| return; |
| } |
| QUnit.test( "show/hide", function( assert ) { |
| var ready = assert.async(); |
| assert.expect( 12 ); |
| var hidden = $( "div.hidden" ), |
| count = 0, |
| test = 0; |
| |
| function queueTest( fn ) { |
| count++; |
| var point = count; |
| return function( next ) { |
| test++; |
| assert.equal( point, test, "Queue function fired in order" ); |
| if ( fn ) { |
| fn(); |
| } else { |
| setTimeout( next, minDuration ); |
| } |
| }; |
| } |
| |
| function duringTest( fn ) { |
| return function( next ) { |
| setTimeout( fn, minDuration / 2 ); |
| next(); |
| }; |
| } |
| |
| hidden |
| .queue( queueTest() ) |
| .queue( duringTest( function() { |
| assert.ok( hidden.is( ":animated" ), |
| "Hidden is seen as animated during .show(\"" + effect + "\", time)" ); |
| } ) ) |
| .show( effect, minDuration, queueTest( function() { |
| assert.equal( hidden.css( "display" ), "block", |
| "Hidden is shown after .show(\"" + effect + "\", time)" ); |
| assert.ok( !$( ".ui-effects-placeholder" ).length, |
| "No placeholder remains after .show(\"" + effect + "\", time)" ); |
| } ) ) |
| .queue( queueTest() ) |
| .queue( duringTest( function() { |
| assert.ok( hidden.is( ":animated" ), |
| "Hidden is seen as animated during .hide(\"" + effect + "\", time)" ); |
| } ) ) |
| .hide( effect, minDuration, queueTest( function() { |
| assert.equal( hidden.css( "display" ), "none", |
| "Back to hidden after .hide(\"" + effect + "\", time)" ); |
| assert.ok( !$( ".ui-effects-placeholder" ).length, |
| "No placeholder remains after .hide(\"" + effect + "\", time)" ); |
| } ) ) |
| .queue( queueTest( function() { |
| assert.deepEqual( hidden.queue(), [ "inprogress" ], "Only the inprogress sentinel remains" ); |
| ready(); |
| } ) ); |
| } ); |
| |
| QUnit.test( "relative width & height - properties are preserved", function( assert ) { |
| var ready = assert.async(); |
| var test = $( "div.relWidth.relHeight" ), |
| width = test.width(), height = test.height(), |
| cssWidth = test[ 0 ].style.width, cssHeight = test[ 0 ].style.height; |
| |
| assert.expect( 4 ); |
| test.toggle( effect, minDuration, function() { |
| assert.equal( test[ 0 ].style.width, cssWidth, "Inline CSS Width has been reset after animation ended" ); |
| assert.equal( test[ 0 ].style.height, cssHeight, "Inline CSS Height has been rest after animation ended" ); |
| ready(); |
| } ); |
| assert.equal( test.width(), width, "Width is the same px after animation started" ); |
| assert.equal( test.height(), height, "Height is the same px after animation started" ); |
| } ); |
| } ); |
| |
| } ); |
