unit-tests.html revision c0e4b72550a9206a3094dbc43e95ee297b863bf9
<!DOCTYPE html>
<html>
<head>
<title>Overlay Test</title>
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
<script src="/build/yui/yui-min.js"></script>
<style type="text/css">
#results {
width: 60%;
}
.yui3-widget-mask { background: rgba(0,0,0,0.8); }
.yui3-overlay {
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
}
body {
font-family: sans-serif;
font-size:12px;
line-height:18px;
}
#desc {
margin-bottom:20px;
border-bottom:1px dotted #333;
}
#desc span {
padding:2px;
}
</style>
</head>
<body class="yui3-skin-sam yui-skin-sam">
<div id="desc">
<h1><code>Y.Plugin.Modal</code> Unit Tests</h1>
<span>These unit tests for <code>Y.Plugin.Modal</code>cover the general use cases. Namely:
<ul>
<li>Making an overlay modal</li>
<li>Nested Modality (modal overlay opening a modal overlay)</li>
<li>Various modal widgets (charts & dial)</li>
<li>Making sure mask moves around DOM</li>
</ul>
Currently there's not a great way to test to make sure that the modal widget is receiving focus. For this, refer to the manual test at <code>modality.html</code>
</span>
</div>
<div id="overlayContainer"></div>
<div id="results"></div>
<script type="text/javascript">
/* globals YUI */
YUI({
filter: 'raw'
}).use("overlay", "dial", "charts", "widget-modality", 'test', 'console','dump', function (Y) {
var Assert = Y.Assert, r,
results = Y.one('#results'), suite,
overlayCfg = {
id: 'myOverlay',
headerContent: 'Demo Overlay',
bodyContent: 'This is example overlay content',
footerContent: 'Overlay Footer',
visible: false,
height: 200,
width: 400,
centered: true,
plugins: [Y.Plugin.Modal]
};
nestedCfg = {
id: 'nestedOverlay',
headerContent: 'Nested Overlay',
bodyContent: 'This is example nestd overlay content',
footerContent: 'nested overlay Footer',
visible: false,
height: 400,
width: 500,
centered: true,
plugins: [Y.Plugin.WidgetModal]
}
var modalityTests = new Y.Test.Case({
name : "Overlay Tests",
//---------------------------------------------------------------------
// Test methods - names must begin with "test"
//---------------------------------------------------------------------
overlay: undefined,
nested: undefined,
dial:undefined,
chart:undefined,
setUp : function () {
var container = Y.Node.create('<div id="overlayContainer"></div>');
Y.one('body').appendChild(container);
this.overlay = new Y.Overlay(overlayCfg);
this.overlay.plug(Y.Plugin.WidgetModal);
this.overlay.render('#overlayContainer');
},
/*
* Cleans up everything that was created by setUp().
*/
tearDown : function () {
Y.one('#overlayContainer').remove();
if (this.overlay) {
this.overlay.destroy();
}
if (this.dial) {
this.dial.destroy();
}
if (this.chart) {
this.chart.destroy();
}
if (this.nested) {
this.nested.destroy();
}
},
//instantiates a basic modal overlay and checks to see that mask is displayed, and zIndex is same
testDefaultOverlay : function () {
this.overlay = new Y.Overlay(overlayCfg);
this.overlay.plug(Y.Plugin.WidgetModal);
this.overlay.render('#overlayContainer');
this.overlay.show();
var mask = Y.one(".yui3-widget-mask");
var mask_zIndex = parseInt(mask.getStyle('zIndex'));
Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block");
Assert.areSame(mask_zIndex, this.overlay.get('zIndex'), "Mask zIndex is not equal to overlay zIndex");
Assert.areSame(Y.one('#overlayContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM");
this.overlay.hide();
Assert.areSame(mask.getStyle('display'), "none", "Mask should be display:none");
//Assert.areSame(overlayCfg.headerContent, Y.one('#myOverlay .yui3-widget-hd').get('innerHTML'), "Test Header");
//Assert.areSame(overlayCfg.footerContent, Y.one('#myOverlay .yui3-widget-ft').get('innerHTML'), "Test Footer");
// A.areSame('block', Y.one('.yui3-overlay-mask').getStyle('display'), "Test Mask");
//overlay.hide();
//A.isTrue(Y.one('#myOverlay').hasClass('yui3-ia-widget-modaloverlay-hidden'), "Test Overlay");
//A.areSame('none', Y.one('.yui3-overlay-mask').getStyle('display'), "Test Mask");
},
//creates a bunch of widgets one by one, to make sure the mask moves around as needed
testMultipleWidgets: function() {
var containers = Y.Node.create('<div id="dialContainer"></div><div id="chartContainer"></div>');
Y.one("body").appendChild(containers);
var mask = Y.one('.yui3-widget-mask');
this.overlay = new Y.Overlay(overlayCfg);
this.overlay.plug(Y.Plugin.WidgetModal);
this.overlay.render('#overlayContainer');
this.overlay.show();
Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block");
Assert.areSame(parseInt(mask.getStyle('zIndex')), this.overlay.get('zIndex'), "Mask zIndex is not equal to overlay zIndex");
Assert.areSame(Y.one('#overlayContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM");
this.overlay.hide();
this.dial = new Y.Dial({
min:-220,
max:220,
stepsPerRev:100,
value: 30,
});
this.dial.plug(Y.Plugin.Modal);
this.dial.render('#dialContainer');
Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block when dial is shown");
Assert.areSame(Y.one('#dialContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM for Dial");
this.dial.hide();
Assert.areSame(mask.getStyle('display'), "none", "Mask should be display:block when dial is hidden");
//Charts
var myDataValues = [
{category:"5/1/2010", values:2000},
{category:"5/2/2010", values:50},
{category:"5/3/2010", values:400},
{category:"5/4/2010", values:200},
{category:"5/5/2010", values:5000}
];
this.chart = new Y.Chart({dataProvider:myDataValues});
this.chart.plug(Y.Plugin.Modal);
this.chart.render('#chartContainer');
Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block when chart is shown");
Assert.areSame(Y.one('#chartContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM for Chart");
this.chart.hide();
Assert.areSame(mask.getStyle('display'), "none", "Mask should be display:block when chart is hidden");
},
testNesting: function() {
var mask = Y.one('.yui3-widget-mask');
var self = this;
//add dom node
Y.one('body').appendChild(Y.Node.create('<div id="nestedContainer"></div>'));
//create overlay
this.overlay = new Y.Overlay(overlayCfg);
this.overlay.plug(Y.Plugin.WidgetModal);
this.overlay.render('#overlayContainer');
this.overlay.show();
//create nested overlay
this.overlay.after('render', function() {
self.nested = new Y.Overlay(overlayCfg);
self.nested.set('zIndex', 5);
self.nested.plug(Y.Plugin.WidgetModal);
self.nested.render('#nestedContainer');
self.nested.show();
Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block when nested overlay is shown");
Assert.areSame(Y.one('#nestedContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM for nested overlay");
Assert.areSame(parseInt(mask.getStyle('zIndex')), self.nested.get('zIndex'), "Mask zIndex is not equal to overlay zIndex");
});
},
testPluginOnConfig: function() {
//Charts
var mask = Y.one(".yui3-widget-mask");
var myDataValues = [
{category:"5/1/2010", values:2000},
{category:"5/2/2010", values:50},
{category:"5/3/2010", values:400},
{category:"5/4/2010", values:200},
{category:"5/5/2010", values:5000}
];
this.chart = new Y.Chart({dataProvider:myDataValues, plugins: [Y.Plugin.Modal]});
this.chart.render('#chartContainer');
Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block when chart is shown");
Assert.areSame(Y.one('#chartContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM for Chart");
this.chart.hide();
Assert.areSame(mask.getStyle('display'), "none", "Mask should be display:block when chart is hidden");
}
});
//create the console
r = new Y.Console({
newestOnTop : false
});
r.render('#log');
suite = new Y.Test.Suite("Widget Modality Test Suite");
suite.add(modalityTests);
Y.Test.Runner.setName("Widget Modality Tests");
Y.Test.Runner.add(suite);
Y.Test.Runner.run();
});
</script>
</body>
</html>