jquery-ui/tests/unit/tooltip/core.js

define( [
	"jquery",
	"ui/widgets/tooltip"
], function( $ ) {

module( "tooltip: core" );

test( "markup structure", function( assert ) {
	expect( 7 );
	var element = $( "#tooltipped1" ).tooltip(),
		tooltip = $( ".ui-tooltip" );

	equal( element.attr( "aria-describedby" ), undefined, "no aria-describedby on init" );
	equal( tooltip.length, 0, "no tooltip on init" );

	element.tooltip( "open" );
	tooltip = $( "#" + element.data( "ui-tooltip-id" ) );
	equal( tooltip.length, 1, "tooltip exists" );
	equal( element.attr( "aria-describedby" ), tooltip.attr( "id" ), "aria-describedby" );
	assert.hasClasses( tooltip, "ui-tooltip ui-widget ui-widget-content ui-widget-shadow" );
	equal( tooltip.length, 1, ".ui-tooltip exists" );
	equal( tooltip.find( ".ui-tooltip-content" ).length, 1,
		".ui-tooltip-content exists" );
} );

test( "accessibility", function() {
	expect( 15 );

	var tooltipId, tooltip,
		element = $( "#multiple-describedby" ).tooltip(),
		liveRegion = element.tooltip( "instance" ).liveRegion;

	equal( liveRegion.find( ">div" ).length, 0 );
	equal( liveRegion.attr( "role" ), "log" );
	equal( liveRegion.attr( "aria-live" ), "assertive" );
	equal( liveRegion.attr( "aria-relevant" ), "additions" );
	element.tooltip( "open" );
	tooltipId = element.data( "ui-tooltip-id" );
	tooltip = $( "#" + tooltipId );
	equal( tooltip.attr( "role" ), "tooltip", "role" );
	equal( element.attr( "aria-describedby" ), "fixture-span " + tooltipId,
		"multiple describedby when open" );

	equal( element.attr( "title" ), null, "no title when open" );
	equal( liveRegion.children().length, 1 );
	equal( liveRegion.children().last().html(), "..." );
	element.tooltip( "close" );
	equal( element.attr( "aria-describedby" ), "fixture-span",
		"correct describedby when closed" );
	equal( element.attr( "title" ), "...", "title restored when closed" );

	element.tooltip( "open" );
	equal( liveRegion.children().length, 2,
		"After the second tooltip show, there should be two children" );
	equal( liveRegion.children().filter( ":visible" ).length, 1,
		"Only one of the children should be visible" );
	ok( liveRegion.children().last().is( ":visible" ),
		"Only the last child should be visible" );
	element.tooltip( "close" );

	element.tooltip( "destroy" );
	equal( liveRegion.parent().length, 0,
		"Tooltip liveregion element should be removed" );
} );

test( "delegated removal", function() {
	expect( 2 );

	var container = $( "#contains-tooltipped" ).tooltip(),
		element = $( "#contained-tooltipped" );

	element.trigger( "mouseover" );
	equal( $( ".ui-tooltip" ).length, 1 );

	container.empty();
	equal( $( ".ui-tooltip" ).length, 0 );
} );

test( "nested tooltips", function() {
	expect( 2 );

	var child = $( "#contained-tooltipped" ),
		parent = $( "#contains-tooltipped" ).tooltip( {
			show: null,
			hide: null
		} );

	parent.trigger( "mouseover" );
	equal( $( ".ui-tooltip:visible" ).text(), "parent" );

	child.trigger( "mouseover" );
	equal( $( ".ui-tooltip" ).text(), "child" );
} );

// #8742
test( "form containing an input with name title", function() {
	expect( 4 );

	var form = $( "#tooltip-form" ).tooltip( {
			show: null,
			hide: null
		} ),
		input = form.find( "[name=title]" );

	equal( $( ".ui-tooltip" ).length, 0, "no tooltips on init" );

	input.trigger( "mouseover" );
	equal( $( ".ui-tooltip" ).length, 1, "tooltip for input" );
	input.trigger( "mouseleave" );
	equal( $( ".ui-tooltip" ).length, 0, "tooltip for input closed" );

	form.trigger( "mouseover" );
	equal( $( ".ui-tooltip" ).length, 0, "no tooltip for form" );
} );

test( "tooltip on .ui-state-disabled element", function() {
	expect( 2 );

	var container = $( "#contains-tooltipped" ).tooltip(),
		element = $( "#contained-tooltipped" ).addClass( "ui-state-disabled" );

	element.trigger( "mouseover" );
	equal( $( ".ui-tooltip" ).length, 1 );

	container.empty();
	equal( $( ".ui-tooltip" ).length, 0 );
} );

// http://bugs.jqueryui.com/ticket/8740
asyncTest( "programmatic focus with async content", function() {
	expect( 2 );
	var element = $( "#tooltipped1" ).tooltip( {
		content: function( response ) {
			setTimeout( function() {
				response( "test" );
			} );
		}
	} );

	element.on( "tooltipopen", function( event ) {
		deepEqual( event.originalEvent.type, "focusin" );

		element.on( "tooltipclose", function( event ) {
			deepEqual( event.originalEvent.type, "focusout" );
			start();
		} );

		setTimeout( function() {
			element.trigger( "blur" );
		} );
	} );

	element.trigger( "focus" );
} );

asyncTest( "destroy during hide animation; only one close event", function() {
	expect( 1 );

	var element = $( "#tooltipped1" ).tooltip( {
		show: false,
		hide: true
	} );

	element.on( "tooltipclose", function() {
		ok( true, "tooltip closed" );
	} );

	element.tooltip( "open" );
	element.tooltip( "close" );
	setTimeout( function() {
		element.tooltip( "destroy" );
		start();
	} );
} );

// http://bugs.jqueryui.com/ticket/10602
asyncTest( "multiple active delegated tooltips", function() {
	expect( 1 );

	var anchor = $( "#tooltipped1" ),
		input = anchor.next(),
		actions = [];

	$( document ).tooltip( {
			show: false,
			hide: false,
			open: function( event, ui ) {
				actions.push( "open:" + ui.tooltip.text() );
			},
			close: function( event, ui ) {
				actions.push( "close:" + ui.tooltip.text() );
			}
		} );

	function step1() {
		anchor.simulate( "mouseover" );
		setTimeout( step2 );
	}

	function step2() {
		input.simulate( "focus" );
		setTimeout( step3 );
	}

	function step3() {
		input.simulate( "blur" );
		setTimeout( step4 );
	}

	function step4() {
		anchor.simulate( "mouseout" );
		deepEqual( actions, [
			"open:anchortitle",
			"open:inputtitle",
			"close:inputtitle",
			"close:anchortitle"
		], "Both tooltips open and close" );
		start();
	}

	step1();
} );

// http://bugs.jqueryui.com/ticket/11272
test( "remove conflicting attributes from live region", function() {
	expect( 2 );

	var element = $(
		"<div id='content'>" +
			"<input type='radio' name='hobby' id='hobby1' checked='checked'>" +
			"<label for='hobby1'>option 1</label>" +
			"<input type='radio' name='hobby' id='hobby2'>" +
			"<label for='hobby2'>option 2</label>" +
		"</div>" );

	$( "#tooltipped1" )
		.tooltip( {
			content: element,
			open: function() {
				equal( $( ".ui-helper-hidden-accessible [name]" ).length, 0,
					"no name attributes within live region" );
				equal( $( ".ui-helper-hidden-accessible [id]" ).length, 0,
					"no id attributes within live region" );
			}
		} )
		.tooltip( "open" );
} );

} );