blossom
Version:
Modern, Cross-Platform Application Framework
114 lines (89 loc) • 4.14 kB
JavaScript
// ==========================================================================
// Project: SproutCore - JavaScript Application Framework
// Copyright: ©2006-2010 Apple Inc. and contributors.
// License: Licensed under MIT license (see license.js)
// ==========================================================================
/*global module test equals context ok same htmlbody */
suite("Create a pane with some custom views and adding it to the window");
htmlbody('<style>.sc-view { border: 1px red solid; z-index: -1; position: absolute; }</style>');
test("layer creation and management", function() {
// create custom view w/ render method
var MyView = SC.View.extend({
cv: 0,
displayProperties: 'cv'.w(),
render: function(context, firstTime) {
this.renderChildViews(context, true); // always re-render...
context.begin()
.push('View %@'.fmt(this.get('cv')))
.end();
}
});
// create design
var pane = SC.Pane.design()
.layout({ bottom: 10, right: 20, top: 20, left: 20 })
.childView(MyView.design({ cv: 1 })
.classNames('view-1')
.layout({ top: 50 })
.childView(MyView.design({ cv: 2 })
.classNames('view-2')
.layout({ bottom: 10, right: 20, width: 100, height: 23 })));
// instantiate pane...
pane = pane.create();
var cv1 = pane.childViews[0], cv2 = cv1.childViews[0];
// pane should have nested child views.
equals(cv1.cv, 1, 'has childView 1');
equals(cv2.cv, 2, 'has childView 2');
// it should not have a layer yet (nor should children)
ok(!pane.get('layer'), 'pane has no layer');
ok(!cv1.get('layer'), 'cv1 has no layer');
ok(!cv2.get('layer'), 'cv2 has no layer');
// if we mark cv2 as needed an update, it should not do anything, even at
// end of the runloop.
// -- temporarily replace updateLayer()
var runCount = 0;
cv2.updateLayer = function() { runCount++; };
SC.RunLoop.begin();
cv2.set('displayNeedsUpdate', true) ;
SC.RunLoop.end();
// updateLayer should NOT have run...
equals(runCount, 0, 'cv2.updateLayer did not run');
// restore original updateLayer
delete cv2.updateLayer ;
// all the views should have their isVisibleInWindow set to false now
ok(!pane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be false');
ok(!cv1.get('isVisibleInWindow'), 'cv1.isVisibleInWindow should be false');
ok(!cv2.get('isVisibleInWindow'), 'cv2.isVisibleInWindow should be false');
// -----
// OK, let's add this baby to the window
SC.RunLoop.begin();
pane.append();
SC.RunLoop.end();
// all the views should have their isVisibleInWindow set to true now
ok(pane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be true');
ok(cv1.get('isVisibleInWindow'), 'cv1.isVisibleInWindow should be true');
ok(cv2.get('isVisibleInWindow'), 'cv2.isVisibleInWindow should be true');
// pane should have layer...cv's should not have had to find their layers
// yet.
ok(pane.get('layer'), 'pane has layer');
ok(!cv1._view_pane, 'cv1 has not found its layer yet') ;
ok(!cv2._view_pane, 'cv2 has not found its layer yet') ;
// now let's make sure the pane layer has some of the things we expect...
var layer = pane.get('layer');
equals(layer.firstChild.id, cv1.get('layerId'), 'has cv1 elem');
equals(layer.firstChild.firstChild.id, cv2.get('layerId'), 'has cv2 elem');
layer = null;
// but if we get the layer for cv1 & cv2 they should find them...
ok(cv1.get('layer'), 'cv1 can find its layer');
ok(cv2.get('layer'), 'cv2 can find its layer');
// also, the pane should now belong to the main document body. it should
// have a parent.
equals(pane.get('layer').parentNode, document.body, 'panes layer is in document body');
// ok, now we're going to change the view number for cv2 and see if that
// updates the UI.
SC.RunLoop.begin();
cv2.set('cv', 'foo');
SC.RunLoop.end();
// the innerHTML for cv2 should now contain 'View foo'
layer = cv2.get('layer');
ok(layer.innerHTML.toString().match(/View foo/), 'does not have new label!');
});