Tooltip: Unit tests for tooltip and a fix to pass through event objects to triggered events

This commit is contained in:
jzaefferer 2010-04-15 09:45:35 +02:00
parent acfc66e1ab
commit 84e0ce168f
9 changed files with 206 additions and 30 deletions

View File

@ -19,27 +19,6 @@
} }
</style> </style>
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.accordion.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.droppable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.selectable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="../../external/jquery.cookie.js"></script>
<script type="text/javascript" src="../jquery.simulate.js"></script>
</head> </head>
<body> <body>
@ -69,6 +48,7 @@
<li><a href="progressbar/progressbar.html">Progressbar</a></li> <li><a href="progressbar/progressbar.html">Progressbar</a></li>
<li><a href="slider/slider.html">Slider</a></li> <li><a href="slider/slider.html">Slider</a></li>
<li><a href="tabs/tabs.html">Tabs</a></li> <li><a href="tabs/tabs.html">Tabs</a></li>
<li><a href="tooltip/tooltip.html">Tooltip</a></li>
</ul> </ul>
<h2>Utilities</h2> <h2>Utilities</h2>

View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Tooltip Test Suite</title>
<link type="text/css" href="../../../themes/base/jquery.ui.tooltip.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script>
<link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
<script type="text/javascript" src="../../../external/qunit.js"></script>
<script type="text/javascript" src="../../jquery.simulate.js"></script>
<script type="text/javascript" src="../testsuite.js"></script>
<script type="text/javascript" src="tooltip_core.js"></script>
<script type="text/javascript" src="tooltip_defaults.js"></script>
<script type="text/javascript" src="tooltip_events.js"></script>
<script type="text/javascript" src="tooltip_methods.js"></script>
<script type="text/javascript" src="tooltip_options.js"></script>
<script type="text/javascript" src="tooltip_tickets.js"></script>
</head>
<body>
<h1 id="qunit-header">jQuery UI Tooltip Test Suite</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests">
</ol>
<div id="main" style="position: absolute; top: -10000px; left: -10000px;">
<div>
<a id="tooltipped1" href="#" title="anchortitle">anchor</a>
<input title="inputtitle" />
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,11 @@
/*
* tooltip_core.js
*/
(function($) {
module("tooltip: core");
})(jQuery);

View File

@ -0,0 +1,16 @@
/*
* tooltip_defaults.js
*/
var tooltip_defaults = {
disabled: false,
content: $.ui.tooltip.prototype.options.content,
tooltipClass: "ui-widget-content",
position: {
my: "left center",
at: "right center",
offset: "15 0"
}
};
commonWidgetTests('tooltip', { defaults: tooltip_defaults });

View File

@ -0,0 +1,54 @@
/*
* tooltip_events.js
*/
(function($) {
module("tooltip: events");
test("programmatic triggers", function() {
expect(2);
var e = $("#tooltipped1").tooltip({
open: function(event, ui) {
same( event.type, "tooltipopen" );
},
close: function(event, ui) {
same( event.type, "tooltipclose" );
}
});
e.tooltip("open").tooltip("close");
e.tooltip("destroy");
});
test("mouse events", function() {
expect(4);
var e = $("#tooltipped1").tooltip({
open: function(event, ui) {
same( event.type, "tooltipopen" );
same( event.originalEvent.type, "mouseenter" );
},
close: function(event, ui) {
same( event.type, "tooltipclose" );
same( event.originalEvent.type, "mouseleave" );
}
});
e.trigger("mouseover").trigger("mouseout");
e.tooltip("destroy");
});
test("focus events", function() {
expect(4);
var e = $("#tooltipped1").tooltip({
open: function(event, ui) {
same( event.type, "tooltipopen" );
same( event.originalEvent.type, "focus" );
},
close: function(event, ui) {
same( event.type, "tooltipclose" );
same( event.originalEvent.type, "blur" );
}
});
e.trigger("focus").trigger("blur");
e.tooltip("destroy");
});
})(jQuery);

View File

@ -0,0 +1,23 @@
/*
* tooltip_methods.js
*/
(function($) {
module("tooltip: methods");
test("destroy", function() {
var beforeHtml = $("#tooltipped1").parent().html();
var afterHtml = $("#tooltipped1").tooltip().tooltip("destroy").parent().html();
equal( afterHtml, beforeHtml );
});
test("open", function() {
var e = $("#tooltipped1").tooltip();
ok( $(".ui-tooltip").is(":hidden") );
e.tooltip("open");
ok( $(".ui-tooltip").is(":visible") );
$(":ui-tooltip").tooltip("destroy");
});
})(jQuery);

View File

@ -0,0 +1,39 @@
/*
* tooltip_options.js
*/
(function($) {
module("tooltip: options");
function contentTest(name, expected, impl) {
test(name, function() {
$("#tooltipped1").tooltip({
content: impl
}).tooltip("open");
same( $(".ui-tooltip").text(), expected );
$(":ui-tooltip").tooltip("destroy");
});
}
contentTest("content: default", "anchortitle");
contentTest("content: return string", "customstring", function() {
return "customstring";
});
contentTest("content: callback string", "customstring2", function(response) {
response("customstring2");
});
test("tooltipClass, default", function() {
$("#tooltipped1").tooltip().tooltip("open");
same( $(".ui-tooltip").attr("class"), "ui-tooltip ui-widget ui-corner-all ui-widget-content");
$(":ui-tooltip").tooltip("destroy");
});
test("tooltipClass, custom", function() {
$("#tooltipped1").tooltip({
tooltipClass: "pretty fancy"
}).tooltip("open");
same( $(".ui-tooltip").attr("class"), "ui-tooltip ui-widget ui-corner-all pretty fancy");
$(":ui-tooltip").tooltip("destroy");
});
})(jQuery);

View File

@ -0,0 +1,10 @@
/*
* tooltip_tickets.js
*/
(function($) {
module("tooltip: tickets");
})(jQuery);

View File

@ -49,10 +49,10 @@ $.widget("ui.tooltip", {
this.opacity = this.tooltip.css("opacity"); this.opacity = this.tooltip.css("opacity");
this.element this.element
.bind("focus.tooltip mouseenter.tooltip", function(event) { .bind("focus.tooltip mouseenter.tooltip", function(event) {
self.open(); self.open( event );
}) })
.bind("blur.tooltip mouseleave.tooltip", function(event) { .bind("blur.tooltip mouseleave.tooltip", function(event) {
self.close(); self.close( event );
}); });
}, },
@ -73,7 +73,7 @@ $.widget("ui.tooltip", {
return this.tooltip; return this.tooltip;
}, },
open: function() { open: function(event) {
var target = this.element; var target = this.element;
// already visible? possible when both focus and mouseover events occur // already visible? possible when both focus and mouseover events occur
if (this.current && this.current[0] == target[0]) if (this.current && this.current[0] == target[0])
@ -84,14 +84,14 @@ $.widget("ui.tooltip", {
var content = this.options.content.call(target[0], function(response) { var content = this.options.content.call(target[0], function(response) {
// ignore async responses that come in after the tooltip is already hidden // ignore async responses that come in after the tooltip is already hidden
if (self.current == target) if (self.current == target)
self._show(target, response); self._show(event, target, response);
}); });
if (content) { if (content) {
self._show(target, content); self._show(event, target, content);
} }
}, },
_show: function(target, content) { _show: function(event, target, content) {
if (!content) if (!content)
return; return;
@ -116,10 +116,10 @@ $.widget("ui.tooltip", {
else else
this.tooltip.is(':visible') ? this.tooltip.fadeTo("normal", this.opacity) : this.tooltip.fadeIn(); this.tooltip.is(':visible') ? this.tooltip.fadeTo("normal", this.opacity) : this.tooltip.fadeIn();
this._trigger( "open" ); this._trigger( "open", event );
}, },
close: function() { close: function(event) {
if (!this.current) if (!this.current)
return; return;
@ -137,7 +137,7 @@ $.widget("ui.tooltip", {
else else
this.tooltip.stop().fadeOut(); this.tooltip.stop().fadeOut();
this._trigger( "close" ); this._trigger( "close", event );
} }
}); });