Tests: Use demo bootstrap for visual tests

Adds a data-composite option and fixes paths for effects. Otherwise just applies the same conversion as already applied to demos, sometimes moving a <style> element to the right place.
jquery · Sep 30, 2015 · b698f80 · b698f80
1 parent c02f599
commit b698f80
Show file tree

Hide file tree

Showing 35 changed files with 243 additions and 485 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -147,15 +147,12 @@ grunt.initConfig({
 	},
 	uglify: minify,
 	htmllint: {
-		good: [ "tests/**/*.html" ].concat( htmllintBad.map( function( file ) {
-			return "!" + file;
-		} ) ),
-		demos: {
+		good: {
 			options: {
 				ignore: [
 				/The text content of element “script�� was not in the required format: Expected space, tab, newline, or slash but found “.” instead/
 			] },
-			src: [ "demos/**/*.html" ].concat( htmllintBad.map( function( file ) {
+			src: [ "demos/**/*.html", "tests/**/*.html" ].concat( htmllintBad.map( function( file ) {
 				return "!" + file;
 			} ) )
 		},

diff --git a/demos/bootstrap.js b/demos/bootstrap.js
@@ -7,6 +7,7 @@ var script = scripts[ scripts.length - 1 ];
 
 // Read the modules
 var modules = script.getAttribute( "data-modules" );
+var composite = script.getAttribute( "data-composite" ) || false;
 var pathParts = window.location.pathname.split( "/" );
 var effectsAll = [
 	"effects/effect-blind",
@@ -22,7 +23,8 @@ var effectsAll = [
 	"effects/effect-scale",
 	"effects/effect-shake",
 	"effects/effect-size",
-	"effects/effect-slide"
+	"effects/effect-slide",
+	"effects/effect-transfer"
 ];
 var widgets = [
 	"accordion",
@@ -52,8 +54,13 @@ function getPath( module ) {
 		}
 	}
 	for ( var j = 0; j < effectsAll.length; j++ ) {
-		if ( module !== "effect" && effectsAll[ j ].indexOf( module ) !== -1 ) {
-			return "effects/" + module;
+		if ( module !== "effect" ) {
+			if ( effectsAll[ j ] === module ) {
+				return module;
+			}
+			if ( effectsAll[ j ].indexOf( module ) !== -1 ) {
+				return "effects/" + module;
+			}
 		}
 	}
 	return module;
@@ -69,7 +76,7 @@ function fixPaths( modules ) {
 document.documentElement.className = "demo-loading";
 
 require.config( {
-	baseUrl: "../../ui",
+	baseUrl: window.location.pathname.indexOf( "demos/" ) !== -1 ? "../../ui" : "../../../ui",
 	paths: {
 		jquery: "../external/jquery/jquery",
 		external: "../external/"
@@ -86,7 +93,9 @@ if ( modules && modules.indexOf( "effects-all" ) !== -1 ) {
 }
 
 modules = modules ? modules.replace( /^\s+|\s+$/g, "" ).split( /\s+/ ) : [];
-modules.push( pathParts[ pathParts.length - 2 ] );
+if ( !composite ) {
+	modules.push( pathParts[ pathParts.length - 2 ] );
+}
 modules = fixPaths( modules );
 
 require( modules, function() {

diff --git a/tests/visual/accordion/icons.html b/tests/visual/accordion/icons.html
@@ -4,12 +4,8 @@
 	<meta charset="utf-8">
 	<title>Accordion Visual Test</title>
 	<link rel="stylesheet" href="../../../themes/base/all.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/core.js"></script>
-	<script src="../../../ui/widget.js"></script>
-	<script src="../../../ui/accordion.js"></script>
-	<script>
-	$(function() {
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js">
 		$( "#accordion-ynynyn" ).accordion({ icons: null });
 		$( "#accordion-ynyny" ).accordion();
 		$( "#accordion-ynyn" ).accordion({ icons: null });
@@ -23,7 +19,6 @@
 		$( "#accordion-nyn" ).accordion({ icons: null });
 		$( "#accordion-ny" ).accordion();
 		$( "#accordion-n" ).accordion({ icons: null });
-	});
 	</script>
 </head>
 <body>

diff --git a/tests/visual/addClass/queue.html b/tests/visual/addClass/queue.html
@@ -4,8 +4,6 @@
 	<meta charset="utf-8">
 	<title>addClass Visual Test : Queue</title>
 	<link rel="stylesheet" href="../../../themes/base/all.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/effect.js"></script>
 	<style>
 	.box {
 		width: 100px;
@@ -22,8 +20,8 @@
 		background-color: #00f;
 	}
 	</style>
-	<script>
-	$(function() {
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js" data-modules="effect" data-composite="true">
 		$( "#box1" )
 			.delay( 500 )
 			.addClass( "red", 2000 )
@@ -37,7 +35,6 @@
 			.addClass( "green", 2000 )
 			.delay( 500 )
 			.addClass( "blue", 2000 );
-	});
 	</script>
 </head>
 <body>

diff --git a/tests/visual/button/button.html b/tests/visual/button/button.html
@@ -4,12 +4,8 @@
 	<meta charset="utf-8">
 	<title>Button Visual Test</title>
 	<link rel="stylesheet" href="../../../themes/base/all.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/core.js"></script>
-	<script src="../../../ui/widget.js"></script>
-	<script src="../../../ui/button.js"></script>
-	<script>
-	$(function() {
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js">
 		$( ".buttons" ).each(function() {
 			$( this ).children()
 				.eq( 0 )
@@ -31,7 +27,6 @@
 				.eq( 2 )
 					.button();
 		});
-	});
 	</script>
 </head>
 <body>

diff --git a/tests/visual/button/performance.html b/tests/visual/button/performance.html
@@ -4,20 +4,15 @@
 	<meta charset="utf-8">
 	<title>Button Visual Test: Initialization Performance</title>
 	<link rel="stylesheet" href="../../../themes/base/all.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/core.js"></script>
-	<script src="../../../ui/widget.js"></script>
-	<script src="../../../ui/button.js"></script>
-	<script>
-	$(function() {
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js">
 		var start,
 			html = new Array( 500 ).join( "<button>button</button>" );
 		$( html ).appendTo( "body" );
 
 		start = $.now();
 		$( "button" ).button();
 		$( "<p>" ).text( "Time to initialize: " + ($.now() - start)  + "ms" ).prependTo( "body" );
-	});
 	</script>
 </head>
 <body>

diff --git a/tests/visual/compound/accordion_tabs.html b/tests/visual/compound/accordion_tabs.html
@@ -5,16 +5,10 @@
 	<title>Compound Visual Test : Accordion in Tabs</title>
 	<link rel="stylesheet" href="../visual.css">
 	<link rel="stylesheet" href="../../../themes/base/all.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/core.js"></script>
-	<script src="../../../ui/widget.js"></script>
-	<script src="../../../ui/accordion.js"></script>
-	<script src="../../../ui/tabs.js"></script>
-	<script>
-	$(function() {
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js" data-modules="tabs accordion" data-composite="true">
 		$( "#accordion-1, #accordion-2" ).accordion();
 		$( "#tabs" ).tabs();
-	});
 	</script>
 </head>
 <body>

diff --git a/tests/visual/compound/datepicker_dialog.html b/tests/visual/compound/datepicker_dialog.html
@@ -5,21 +5,10 @@
 	<title>Compound Visual Test : Datepicker in Dialog</title>
 	<link rel="stylesheet" href="../visual.css">
 	<link rel="stylesheet" href="../../../themes/base/all.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/core.js"></script>
-	<script src="../../../ui/widget.js"></script>
-	<script src="../../../ui/mouse.js"></script>
-	<script src="../../../ui/position.js"></script>
-	<script src="../../../ui/resizable.js"></script>
-	<script src="../../../ui/draggable.js"></script>
-	<script src="../../../ui/button.js"></script>
-	<script src="../../../ui/datepicker.js"></script>
-	<script src="../../../ui/dialog.js"></script>
-	<script>
-	$(function() {
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js" data-modules="datepicker dialog" data-composite="true">
 		$( "#datepicker" ).datepicker();
 		$( "#dialog" ).dialog();
-	});
 	</script>
 </head>
 <body>

diff --git a/tests/visual/compound/dialog_widgets.html b/tests/visual/compound/dialog_widgets.html
@@ -5,26 +5,10 @@
 	<title>Compound Visual Test : All Widgets in Dialog</title>
 	<link rel="stylesheet" href="../visual.css">
 	<link rel="stylesheet" href="../../../themes/base/all.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/core.js"></script>
-	<script src="../../../ui/widget.js"></script>
-	<script src="../../../ui/mouse.js"></script>
-	<script src="../../../ui/position.js"></script>
-	<script src="../../../ui/menu.js"></script>
-	<script src="../../../ui/resizable.js"></script>
-	<script src="../../../ui/draggable.js"></script>
-	<script src="../../../ui/accordion.js"></script>
-	<script src="../../../ui/autocomplete.js"></script>
-	<script src="../../../ui/button.js"></script>
-	<script src="../../../ui/datepicker.js"></script>
-	<script src="../../../ui/dialog.js"></script>
-	<script src="../../../ui/progressbar.js"></script>
-	<script src="../../../ui/slider.js"></script>
-	<script src="../../../ui/tabs.js"></script>
-	<script src="../../../ui/tooltip.js"></script>
-	<script src="../../../ui/selectmenu.js"></script>
-	<script>
-	$(function() {
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js"
+		data-modules="accordion autocomplete button datepicker dialog progressbar slider tabs tooltip selectmenu"
+		data-composite="true">
 		$( "#dialog" ).dialog();
 		$( "[title]" ).tooltip();
 		$( "#accordion" ).accordion();
@@ -54,7 +38,6 @@
 			height: 75,
 			modal: true
 		});
-	});
 	</script>
 </head>
 <body>

diff --git a/tests/visual/compound/draggable_accordion.html b/tests/visual/compound/draggable_accordion.html
@@ -5,20 +5,15 @@
 	<title>Compound Visual Test : Draggable in Accordion</title>
 	<link rel="stylesheet" href="../visual.css">
 	<link rel="stylesheet" href="../../../themes/base/all.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/core.js"></script>
-	<script src="../../../ui/widget.js"></script>
-	<script src="../../../ui/mouse.js"></script>
-	<script src="../../../ui/accordion.js"></script>
-	<script src="../../../ui/draggable.js"></script>
 	<style>
 	.draggable {
 		width: 10em;
 		margin: 0.5em;
 	}
 	</style>
-	<script>
-	$(function() {
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js" data-modules="accordion draggable"
+		data-composite="true">
 		$( ".draggable" ).addClass( "ui-widget ui-widget-content ui-corner-all" )
 		$( "#first .draggable" ).draggable();
 		$( "#second .draggable" ).draggable({
@@ -29,7 +24,6 @@
 			appendTo: "body"
 		});
 		$( "#accordion" ).accordion();
-	});
 	</script>
 </head>
 <body>

diff --git a/tests/visual/compound/draggable_accordion_accordion_tabs_draggable.html b/tests/visual/compound/draggable_accordion_accordion_tabs_draggable.html
@@ -5,13 +5,6 @@
 	<title>Compound Visual Test : Draggable in Accordion</title>
 	<link rel="stylesheet" href="../visual.css">
 	<link rel="stylesheet" href="../../../themes/base/all.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/core.js"></script>
-	<script src="../../../ui/widget.js"></script>
-	<script src="../../../ui/mouse.js"></script>
-	<script src="../../../ui/accordion.js"></script>
-	<script src="../../../ui/draggable.js"></script>
-	<script src="../../../ui/tabs.js"></script>
 	<style>
 	#main-draggable {
 		width: 300px;
@@ -27,8 +20,9 @@
 		margin: 0.5em;
 	}
 	</style>
-	<script>
-	$(function() {
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js" data-modules="accordion draggable tabs"
+		data-composite="true">
 		$( ".draggable" )
 			.addClass( "ui-widget ui-widget-content ui-corner-all" )
 			.draggable({
@@ -44,7 +38,6 @@
 		$( "#main-draggable" ).draggable({
 			handle: "#main-draggable-handle"
 		});
-	});
 	</script>
 </head>
 <body>

diff --git a/tests/visual/compound/draggable_resizable.html b/tests/visual/compound/draggable_resizable.html
@@ -5,12 +5,6 @@
 	<title>Compound Visual Test: Draggable and Resizable block element</title>
 	<link rel="stylesheet" href="../visual.css">
 	<link rel="stylesheet" href="../../../themes/base/all.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/core.js"></script>
-	<script src="../../../ui/widget.js"></script>
-	<script src="../../../ui/mouse.js"></script>
-	<script src="../../../ui/draggable.js"></script>
-	<script src="../../../ui/resizable.js"></script>
 	<style>
 	.draggable {
 		margin: 0.5em;
@@ -21,8 +15,9 @@
 		position: absolute !important;
 	}
 	</style>
-	<script>
-	$(function() {
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js" data-modules="draggable resizable"
+		data-composite="true">
 		$( ".draggable" )
 			.addClass( "ui-widget ui-widget-header ui-corner-all" )
 			.draggable({
@@ -33,7 +28,6 @@
 				handles: "s"
 			});
 		$( ".draggable:last" ).addClass( "absolute" );
-	});
 	</script>
 </head>
 <body>

diff --git a/tests/visual/compound/sortable_accordion_sortable_tabs.html b/tests/visual/compound/sortable_accordion_sortable_tabs.html
@@ -5,15 +5,9 @@
 	<title>Compound Visual Test : Accordion in Tabs</title>
 	<link rel="stylesheet" href="../visual.css">
 	<link rel="stylesheet" href="../../../themes/base/all.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/core.js"></script>
-	<script src="../../../ui/widget.js"></script>
-	<script src="../../../ui/mouse.js"></script>
-	<script src="../../../ui/sortable.js"></script>
-	<script src="../../../ui/accordion.js"></script>
-	<script src="../../../ui/tabs.js"></script>
-	<script>
-	$(function() {
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js" data-modules="accordion tabs sortable"
+		data-composite="true">
 		$( "#accordion-1, #accordion-2" )
 			.accordion({
 				header: "> div > h3"
@@ -24,7 +18,6 @@
 			.tabs()
 			.find( ".ui-tabs-nav" )
 				.sortable();
-	});
 	</script>
 </head>
 <body>

diff --git a/tests/visual/compound/tabs_selectmenu.html b/tests/visual/compound/tabs_selectmenu.html
@@ -5,18 +5,10 @@
 	<title>Compound Visual Test : Selectmenu in Tabs</title>
 	<link rel="stylesheet" href="../visual.css">
 	<link rel="stylesheet" href="../../../themes/base/all.css">
-	<script src="../../../external/jquery/jquery.js"></script>
-	<script src="../../../ui/core.js"></script>
-	<script src="../../../ui/widget.js"></script>
-	<script src="../../../ui/position.js"></script>
-	<script src="../../../ui/menu.js"></script>
-	<script src="../../../ui/selectmenu.js"></script>
-	<script src="../../../ui/tabs.js"></script>
-	<script>
-	$(function() {
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../demos/bootstrap.js" data-modules="tabs selectmenu" data-composite="true">
 		$( "#tabs" ).tabs();
 		$( "select" ).selectmenu();
-	});
 	</script>
 	<style>
 		select { width: 200px; }