5
<title>Overlay Test</title>
6
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
7
<script src="../../../build/yui/yui-min.js"></script>
8
<style type="text/css">
12
.yui3-widget-mask { background: rgba(0,0,0,0.8); }
14
border: 1px solid #ccc;
16
background-color: #fff;
19
font-family: sans-serif;
26
border-bottom:1px dotted #333;
35
<body class="yui3-skin-sam yui-skin-sam">
38
<h1><code>Y.Plugin.WidgetModal</code> Unit Tests</h1>
39
<span>These unit tests for <code>Y.Plugin.Modal</code>cover the general use cases. Namely:
41
<li>Making an overlay modal</li>
42
<li>Nested Modality (modal overlay opening a modal overlay)</li>
43
<li>Various modal widgets (charts & dial)</li>
44
<li>Making sure mask moves around DOM</li>
47
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>
52
<div id="overlayContainer"></div>
53
<div id="results"></div>
54
<script type="text/javascript">
59
}).use("overlay", "dial", "charts", "widget-modality", 'test', 'console','dump', function (Y) {
61
var Assert = Y.Assert, r,
62
results = Y.one('#results'), suite,
65
headerContent: 'Demo Overlay',
66
bodyContent: 'This is example overlay content',
67
footerContent: 'Overlay Footer',
72
plugins: [Y.Plugin.Modal]
77
headerContent: 'Nested Overlay',
78
bodyContent: 'This is example nestd overlay content',
79
footerContent: 'nested overlay Footer',
84
plugins: [Y.Plugin.WidgetModal]
88
var modalityTests = new Y.Test.Case({
89
name : "Overlay Tests",
90
//---------------------------------------------------------------------
91
// Test methods - names must begin with "test"
92
//---------------------------------------------------------------------
101
var container = Y.Node.create('<div id="overlayContainer"></div>');
102
Y.one('body').appendChild(container);
104
this.overlay = new Y.Overlay(overlayCfg);
105
this.overlay.plug(Y.Plugin.WidgetModal);
106
this.overlay.render('#overlayContainer');
110
* Cleans up everything that was created by setUp().
112
tearDown : function () {
113
Y.one('#overlayContainer').remove();
115
this.overlay.destroy();
123
this.chart.destroy();
126
this.nested.destroy();
132
//instantiates a basic modal overlay and checks to see that mask is displayed, and zIndex is same
133
testDefaultOverlay : function () {
134
this.overlay = new Y.Overlay(overlayCfg);
135
this.overlay.plug(Y.Plugin.WidgetModal);
136
this.overlay.render('#overlayContainer');
139
var mask = Y.one(".yui3-widget-mask");
140
var mask_zIndex = parseInt(mask.getStyle('zIndex'));
143
Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block");
144
Assert.areSame(mask_zIndex, this.overlay.get('zIndex'), "Mask zIndex is not equal to overlay zIndex");
146
Assert.areSame(Y.one('#overlayContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM");
152
Assert.areSame(mask.getStyle('display'), "none", "Mask should be display:none");
154
//Assert.areSame(overlayCfg.headerContent, Y.one('#myOverlay .yui3-widget-hd').get('innerHTML'), "Test Header");
155
//Assert.areSame(overlayCfg.footerContent, Y.one('#myOverlay .yui3-widget-ft').get('innerHTML'), "Test Footer");
156
// A.areSame('block', Y.one('.yui3-overlay-mask').getStyle('display'), "Test Mask");
158
//A.isTrue(Y.one('#myOverlay').hasClass('yui3-ia-widget-modaloverlay-hidden'), "Test Overlay");
159
//A.areSame('none', Y.one('.yui3-overlay-mask').getStyle('display'), "Test Mask");
163
//creates a bunch of widgets one by one, to make sure the mask moves around as needed
164
testMultipleWidgets: function() {
166
var containers = Y.Node.create('<div id="dialContainer"></div><div id="chartContainer"></div>');
167
Y.one("body").appendChild(containers);
169
var mask = Y.one('.yui3-widget-mask');
170
this.overlay = new Y.Overlay(overlayCfg);
171
this.overlay.plug(Y.Plugin.WidgetModal);
172
this.overlay.render('#overlayContainer');
176
Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block");
177
Assert.areSame(parseInt(mask.getStyle('zIndex')), this.overlay.get('zIndex'), "Mask zIndex is not equal to overlay zIndex");
178
Assert.areSame(Y.one('#overlayContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM");
184
this.dial = new Y.Dial({
191
this.dial.plug(Y.Plugin.Modal);
193
this.dial.render('#dialContainer');
195
Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block when dial is shown");
196
Assert.areSame(Y.one('#dialContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM for Dial");
200
Assert.areSame(mask.getStyle('display'), "none", "Mask should be display:block when dial is hidden");
204
{category:"5/1/2010", values:2000},
205
{category:"5/2/2010", values:50},
206
{category:"5/3/2010", values:400},
207
{category:"5/4/2010", values:200},
208
{category:"5/5/2010", values:5000}
211
this.chart = new Y.Chart({dataProvider:myDataValues});
212
this.chart.plug(Y.Plugin.Modal);
214
this.chart.render('#chartContainer');
216
Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block when chart is shown");
217
Assert.areSame(Y.one('#chartContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM for Chart");
221
Assert.areSame(mask.getStyle('display'), "none", "Mask should be display:block when chart is hidden");
226
testNesting: function() {
228
var mask = Y.one('.yui3-widget-mask');
232
Y.one('body').appendChild(Y.Node.create('<div id="nestedContainer"></div>'));
235
this.overlay = new Y.Overlay(overlayCfg);
236
this.overlay.plug(Y.Plugin.WidgetModal);
237
this.overlay.render('#overlayContainer');
240
//create nested overlay
241
this.overlay.after('render', function() {
242
self.nested = new Y.Overlay(overlayCfg);
243
self.nested.set('zIndex', 5);
244
self.nested.plug(Y.Plugin.WidgetModal);
245
self.nested.render('#nestedContainer');
249
Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block when nested overlay is shown");
250
Assert.areSame(Y.one('#nestedContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM for nested overlay");
251
Assert.areSame(parseInt(mask.getStyle('zIndex')), self.nested.get('zIndex'), "Mask zIndex is not equal to overlay zIndex");
257
testPluginOnConfig: function() {
260
var mask = Y.one(".yui3-widget-mask");
262
{category:"5/1/2010", values:2000},
263
{category:"5/2/2010", values:50},
264
{category:"5/3/2010", values:400},
265
{category:"5/4/2010", values:200},
266
{category:"5/5/2010", values:5000}
269
this.chart = new Y.Chart({dataProvider:myDataValues, plugins: [Y.Plugin.Modal]});
271
this.chart.render('#chartContainer');
273
Assert.areSame(mask.getStyle('display'), "block", "Mask should be display:block when chart is shown");
274
Assert.areSame(Y.one('#chartContainer').get('children')._nodes[0], mask.getDOMNode(), "Mask is not positioned correctly in DOM for Chart");
278
Assert.areSame(mask.getStyle('display'), "none", "Mask should be display:block when chart is hidden");
289
suite = new Y.Test.Suite("Widget Modality Test Suite");
290
suite.add(modalityTests);
292
Y.Test.Runner.setName("Widget Modality Tests");
293
Y.Test.Runner.add(suite);
b'\\ No newline at end of file'