Skip to content
Permalink
Browse files

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.
  • Loading branch information
jzaefferer committed Sep 30, 2015
1 parent c02f599 commit b698f809de908535acd93c690d90d867622ddd7e
Showing with 243 additions and 485 deletions.
  1. +2 −5 Gruntfile.js
  2. +14 −5 demos/bootstrap.js
  3. +2 −7 tests/visual/accordion/icons.html
  4. +2 −5 tests/visual/addClass/queue.html
  5. +2 −7 tests/visual/button/button.html
  6. +2 −7 tests/visual/button/performance.html
  7. +2 −8 tests/visual/compound/accordion_tabs.html
  8. +2 −13 tests/visual/compound/datepicker_dialog.html
  9. +4 −21 tests/visual/compound/dialog_widgets.html
  10. +3 −9 tests/visual/compound/draggable_accordion.html
  11. +3 −10 tests/visual/compound/draggable_accordion_accordion_tabs_draggable.html
  12. +3 −9 tests/visual/compound/draggable_resizable.html
  13. +3 −10 tests/visual/compound/sortable_accordion_sortable_tabs.html
  14. +2 −10 tests/visual/compound/tabs_selectmenu.html
  15. +2 −8 tests/visual/compound/tabs_tabs.html
  16. +2 −9 tests/visual/compound/tabs_tooltips.html
  17. +2 −15 tests/visual/dialog/animated.html
  18. +2 −19 tests/visual/dialog/complex-dialogs.html
  19. +2 −15 tests/visual/dialog/form.html
  20. +2 −12 tests/visual/dialog/performance.html
  21. +2 −13 tests/visual/dialog/stacking.html
  22. +2 −8 tests/visual/draggable/replaced.html
  23. +4 −18 tests/visual/effects/all.html
  24. +3 −6 tests/visual/effects/clip.html
  25. +0 −4 tests/visual/effects/effects.js
  26. +33 −38 tests/visual/effects/scale.html
  27. +9 −14 tests/visual/effects/shake.html
  28. +1 −0 tests/visual/index.html
  29. +9 −15 tests/visual/menu/menu.html
  30. +2 −9 tests/visual/position/position.html
  31. +61 −67 tests/visual/position/position_feedback.html
  32. +12 −19 tests/visual/selectmenu/selectmenu.html
  33. +17 −22 tests/visual/slider/range_slider.html
  34. +28 −39 tests/visual/tooltip/animations.html
  35. +2 −9 tests/visual/tooltip/tooltip.html
@@ -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;
} ) )
},
@@ -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() {
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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; }

0 comments on commit b698f80

Please sign in to comment.
You can’t perform that action at this time.