sproutit-sproutcore 1.0.0.20090407205609 → 1.0.0.20090408130025

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/layer.js

@@ -0,0 +1,150 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Apple, Inc. and contributors.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test equals context ok same precondition */
+
+// NOTE: it is very important to make sure that the layer is not created 
+// until the view is actually visible in the window.
+
+module("SC.View#layer");
+
+test("returns null if the view has no layer and no parent view", function() {
+  var view = SC.View.create() ;
+  equals(view.get('parentView'), null, 'precond - has no parentView');
+  equals(view.get('layer'), null, 'has no layer');
+});
+
+test("returns null if the view has no layer and parent view has no layer", function() {
+  var parent = SC.View.create({
+     childViews: [ SC.View.extend() ]
+  });
+  var view = parent.childViews[0];
+  
+  equals(view.get('parentView'), parent, 'precond - has parent view');
+  equals(parent.get('layer'), null, 'parentView has no layer');
+  equals(view.get('layer'), null, ' has no layer');
+});
+
+test("returns layer if you set the value", function() {
+  var view = SC.View.create();
+  equals(view.get('layer'), null, 'precond- has no layer');
+  
+  var dom = document.createElement('div');
+  view.set('layer', dom);
+  
+  equals(view.get('layer'), dom, 'now has set layer');
+  
+  dom = null;
+});
+
+var parent, child, parentDom, childDom ;
+module("SC.View#layer - autodiscovery", {
+  setup: function() {
+
+    parent = SC.View.create({
+       childViews: [ SC.View.extend({
+         // redefine this method in order to isolate testing of layer prop.
+         // simple version just returns firstChild of parentLayer.
+         findLayerInParentLayer: function(parentLayer) {
+           return parentLayer.firstChild;
+         }
+       }) ]
+    });
+    child = parent.childViews[0];
+
+    // setup parent/child dom
+    parentDom = document.createElement('div');
+    childDom = document.createElement('div');
+    parentDom.appendChild(childDom);
+    
+    // set parent layer...
+    parent.set('layer', parentDom);
+  },
+  
+  teardown: function() {
+    parent = child = parentDom = childDom = null ;
+  }
+});
+
+test("discovers layer if has no layer but parent view does have layer", function() {  
+  equals(parent.get('layer'), parentDom, 'precond - parent has layer');
+  ok(!!parentDom.firstChild, 'precond - parentDom has first child');
+  
+  equals(child.get('layer'), childDom, 'view discovered child');
+});
+
+test("once its discovers layer, returns the same element, even if you remove it from the parent view", function() {  
+  equals(child.get('layer'), childDom, 'precond - view discovered child');
+  parentDom.removeChild(childDom) ;
+
+  equals(child.get('layer'), childDom, 'view kept layer cached (i.e. did not do a discovery again)');
+});
+
+module("SC.View#layer - destroying");
+
+test("returns null again if it has layer and layer is destroyed", function() {
+  
+});
+
+test("returns null again if parent view's layer is destroyed", function() {
+  
+});
+
+var pane, view ;
+module("SC.View#$", {
+  setup: function() {
+    pane = SC.Pane.design()
+      .childView(SC.View.design({
+        render: function(context, firstTime) {
+          context.push('<span></span>');
+        }
+      })).create();
+      
+    view = pane.childViews[0];
+    
+    SC.RunLoop.begin();
+    pane.append(); // add to create layer...
+    SC.RunLoop.end();
+  }, 
+  
+  teardown: function() {
+    SC.RunLoop.begin();
+    pane.remove();
+    SC.RunLoop.end();
+  }
+});
+
+test("returns an empty CQ object if no layer", function() {
+  var v = SC.View.create();
+  ok(!v.get('layer'), 'precond - should have no layer');
+  equals(v.$().size(), 0, 'should return empty CQ object');
+  equals(v.$('span').size(), 0, 'should return empty CQ object even if filter passed');
+});
+
+test("returns CQ object selecting layer if provided", function() {
+  ok(view.get('layer'), 'precond - should have layer');
+  
+  var cq = view.$();
+  equals(cq.size(), 1, 'view.$() should have one element');
+  equals(cq.get(0), view.get('layer'), 'element should be layer');
+});
+
+test("returns CQ object selecting element inside layer if provided", function() {
+  ok(view.get('layer'), 'precond - should have layer');
+  
+  var cq = view.$('span');
+  equals(cq.size(), 1, 'view.$() should have one element');
+  equals(cq.get(0).parentNode, view.get('layer'), 'element should be in layer');
+});
+
+test("returns empty CQ object if filter passed that does not match item in parent", function() {
+  ok(view.get('layer'), 'precond - should have layer');
+  
+  var cq = view.$('body'); // would normally work if not scoped to view
+  equals(cq.size(), 0, 'view.$(body) should have no elements');
+});
+
+

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/layoutChildViews.js

@@ -0,0 +1,162 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: �2006-2009 Apple, Inc. and contributors.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test equals context ok same */
+
+// .......................................................
+// layoutChildViews() 
+// 
+module("SC.View#layoutChildViews");
+
+test("calls renderLayout() on child views on views that need layout if they have a layer", function() {
+
+	var callCount = 0 ;
+	var ChildView = SC.View.extend({
+		updateLayout: function(context) { callCount++; }
+	});
+	
+	var view = SC.View.create({
+		childViews: [ChildView, ChildView, ChildView]
+	});
+	
+	var cv1 = view.childViews[0];
+	var cv2 = view.childViews[1];
+	
+	// add to set...
+	view.layoutDidChangeFor(cv1);
+	view.layoutDidChangeFor(cv2);
+	
+	view.layoutChildViews();
+	equals(callCount, 2, 'updateLayout should be called on two dirty child views');
+});
+
+// .......................................................
+// updateLayout() 
+// 
+module("SC.View#updateLayout");
+
+test("if view has layout, calls renderLayout with context to update element", function() {
+
+	// NOTE: renderLayout() is also called when a view's
+	// layer is first created.  We use isTesting below to
+	// avoid running the renderLayout() test code until we
+	// are actually doing layout.
+	var callCount = 0, isTesting = NO ;
+	var view = SC.View.create({
+		renderLayout: function(context) {
+			if (!isTesting) return ;
+			equals(context._elem, this.get('layer'), 'should pass context that will edit layer');
+			callCount++;
+		}
+	});
+	
+	view.createLayer(); // we need a layer
+	ok(view.get('layer'), 'precond - should have a layer');
+	
+	isTesting= YES ;
+	view.updateLayout();
+	equals(callCount, 1, 'should call renderLayout()');
+});
+
+test("if view has NO layout, should not call renderLayout", function() {
+
+	// NOTE: renderLayout() is also called when a view's
+	// layer is first created.  We use isTesting below to
+	// avoid running the renderLayout() test code until we
+	// are actually doing layout.
+	var callCount = 0, isTesting = NO ;
+	var view = SC.View.create({
+		renderLayout: function(context) {
+			if (!isTesting) return ;
+			callCount++;
+		}
+	});
+	
+	ok(!view.get('layer'), 'precond - should NOT have a layer');
+	
+	isTesting= YES ;
+	view.updateLayout();
+	equals(callCount, 0, 'should NOT call renderLayout()');
+});
+
+test("returns receiver", function() {
+	var view = SC.View.create();
+	equals(view.updateLayout(), view, 'should return receiver');
+});
+
+// .......................................................
+//  renderLayout() 
+//
+module('SC.View#renderLayout');
+
+test("adds layoutStyle property to passed context", function() {
+
+	var view = SC.View.create({
+		// mock style for testing...
+		layoutStyle: { width: 50, height: 50 } 
+	});
+	var context = view.renderContext();
+
+	ok(context.styles().width !== 50, 'precond - should NOT have width style');
+	ok(context.styles().height !== 50, 'precond - should NOT have height style');
+
+
+	view.renderLayout(context);
+
+	equals(context.styles().width, 50, 'should have width style');
+	equals(context.styles().height, 50, 'should have height style');
+});
+
+// .......................................................
+// layoutChildViewsIfNeeded() 
+//
+var view, callCount ;
+module('SC.View#layoutChildViewsIfNeeded', {
+	setup: function() {
+		callCount = 0;
+		view = SC.View.create({
+			layoutChildViews: function() { callCount++; }
+		});
+	},
+	teardown: function() { view = null; }
+});
+  
+test("calls layoutChildViews() if childViewsNeedLayout and isVisibleInWindow & sets childViewsNeedLayout to NO", function() {
+
+	view.childViewsNeedLayout = YES ;
+	view.isVisibleInWindow = YES ;
+	view.layoutChildViewsIfNeeded();
+	equals(callCount, 1, 'should call layoutChildViews()');
+	equals(view.get('childViewsNeedLayout'),NO,'should set childViewsNeedLayout to NO');
+});
+
+test("does not call layoutChildViews() if childViewsNeedLayout is NO", function() {
+
+	view.childViewsNeedLayout = NO ;
+	view.isVisibleInWindow = YES ;
+	view.layoutChildViewsIfNeeded();
+	equals(callCount, 0, 'should NOT call layoutChildViews()');
+});
+
+
+test("does not call layoutChildViews() if isVisibleInWindow is NO unless passed isVisible YES", function() {
+
+	view.childViewsNeedLayout = YES ;
+	view.isVisibleInWindow = NO ;
+	view.layoutChildViewsIfNeeded();
+	equals(callCount, 0, 'should NOT call layoutChildViews()');
+	equals(view.get('childViewsNeedLayout'), YES, 'should leave childViewsNeedLayout set to YES');
+	
+	view.layoutChildViewsIfNeeded(YES);
+	equals(callCount, 1, 'should call layoutChildViews()');
+	equals(view.get('childViewsNeedLayout'), NO, 'should set childViewsNeedLayout to NO');
+});
+
+test("returns receiver", function() {
+	equals(view.layoutChildViewsIfNeeded(), view, 'should return receiver');
+});
+  
+

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/layoutDidChange.js

@@ -0,0 +1,127 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: �2006-2009 Apple, Inc. and contributors.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test equals context ok same */
+
+module("SC.View#layoutDidChange");
+
+test("notifies layoutStyle & frame change", function() {
+
+	var view = SC.View.create();
+	var callCount = 0;
+	
+	view.addObserver('layoutStyle', function() { callCount++; });
+	view.addObserver('frame', function() { callCount++; });
+
+	view.layoutDidChange();
+	equals(callCount,2,'should trigger observers for layoutStyle + frame');
+});
+
+test("invokes layoutDidChangeFor() on layoutView each time it is called", function() {
+
+	var callCount = 0 ;
+	var layoutView = SC.View.create({
+		layoutDidChangeFor: function(changedView){
+			equals(this.get('childViewsNeedLayout'), YES, 'should set childViewsNeedLayout to YES before calling layoutDidChangeFor()');
+			
+			equals(view, changedView, 'should pass view');
+			callCount++;
+		}
+	});
+	
+	var view = SC.View.create({ layoutView: layoutView });
+
+	view.layoutDidChange();
+	view.layoutDidChange();
+	view.layoutDidChange();
+	
+	equals(callCount, 3, 'should call layoutView.layoutDidChangeFor each time');
+});
+
+test("invokes layoutChildViewsIfNeeded() on layoutView once per runloop", function() {
+
+	var callCount = 0 ;
+	var layoutView = SC.View.create({
+		layoutChildViewsIfNeeded: function(){
+			callCount++;
+		}
+	});
+	
+	var view = SC.View.create({ layoutView: layoutView });
+
+	SC.RunLoop.begin();
+	view.layoutDidChange();
+	view.layoutDidChange();
+	view.layoutDidChange();
+	SC.RunLoop.end();
+	
+	equals(callCount, 1, 'should call layoutView.layoutChildViewsIfNeeded one time');
+});
+
+
+test("should not invoke layoutChildViewsIfNeeded() if layoutDidChangeFor() sets childViewsNeedLayout to NO each time", function() {
+
+	var callCount = 0 ;
+	var layoutView = SC.View.create({
+		layoutDidChangeFor: function() {
+			this.set('childViewsNeedLayout', NO);
+		},
+		
+		layoutChildViewsIfNeeded: function(){
+			callCount++;
+		}
+	});
+	
+	var view = SC.View.create({ layoutView: layoutView });
+
+	SC.RunLoop.begin();
+	view.layoutDidChange();
+	view.layoutDidChange();
+	view.layoutDidChange();
+	SC.RunLoop.end();
+	
+	equals(callCount, 0, 'should not call layoutView.layoutChildViewsIfNeeded');
+});
+
+test('returns receiver', function() {
+	var view = SC.View.create();
+	equals(view.layoutDidChange(), view, 'should return receiver');
+});
+
+test("is invoked whenever layout property changes", function() {
+
+	var callCount = 0 ;
+	var layoutView = SC.View.create({
+		layoutDidChangeFor: function(changedView){
+			callCount++;
+		}
+	});
+	
+	var view = SC.View.create({ layoutView: layoutView });
+
+	view.set('layout', { top: 0, left: 10 });
+	equals(callCount, 1, 'should call layoutDidChangeFor when setting layout of child view');
+
+	
+});
+
+test("is invoked on parentView if no layoutView whenever layout property changes", function() {
+
+	var callCount = 0 ;
+	var parentView = SC.View.create({
+		layoutDidChangeFor: function(changedView){
+			callCount++;
+		}
+	});
+	
+	var view = SC.View.create({});
+	view.set('parentView', parentView);
+
+	view.set('layout', { top: 0, left: 10 });
+	equals(callCount, 1, 'should call layoutDidChangeFor when setting layout of child view');
+
+	
+});

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/layoutStyle.js

@@ -0,0 +1,248 @@
+// ========================================================================
+// View Layout Unit Tests
+// ========================================================================
+
+/*globals module test ok isObj */
+
+/* These unit tests verify:  layout(), frame(), styleLayout() and clippingFrame(). */
+
+var parent, child;
+
+function performLayoutTest(layout, no_f, no_s, with_f, with_s) {
+  
+  // make sure we add null properties and convert numbers to 'XXpx' to style layout.
+  var keys = 'width height top bottom marginLeft marginTop left right zIndex minWidth maxWidth minHeight maxHeight'.w();
+  keys.forEach(function(key) {
+    if (no_s[key]===undefined) no_s[key] = null;
+    if (with_s[key]===undefined) with_s[key] = null;  
+
+    if (typeof no_s[key] === 'number') no_s[key] = no_s[key].toString() + 'px';
+    if (typeof with_s[key] === 'number') with_s[key] = no_s[key].toString() + 'px';
+  });
+  
+  // set layout
+  child.set('layout', layout) ;
+
+  // test
+  same(child.get('frame'), no_f, "FRAME NO PARENT".fmt(SC.inspect(child.get('frame')), SC.inspect(no_f))) ;  
+  keys.forEach(function(key) {
+    equals(child.get('layoutStyle')[key], no_s[key], "STYLE NO PARENT %@".fmt(key)) ;  
+  });
+  
+  // add parent
+  parent.appendChild(child);
+  
+  // test again
+  same(child.get('frame'), with_f, "FRAME WITH PARENT".fmt(SC.inspect(child.get('frame')), SC.inspect(with_f))) ;  
+  keys.forEach(function(key) {
+    equals(child.get('layoutStyle')[key], with_s[key], "STYLE NO PARENT %@".fmt(key)) ;  
+  });
+}
+
+var commonSetup = {
+  setup: function() {
+    
+    // create basic parent view
+    parent = SC.View.create({
+      layout: { top: 0, left: 0, width: 200, height: 200 }
+    });
+    
+    // create child view to test against.
+    child = SC.View.create();
+  },
+  
+  teardown: function() {
+    //parent.destroy(); child.destroy();
+    parent = child = null ;
+  }
+};
+
+module("NOTIFICATIONS", commonSetup) ;
+
+test("Setting layout will notify frame observers", function() {
+  var didNotify = NO, didNotifyStyle = NO;
+  child.addObserver('frame', this, function() { didNotify = YES; }) ;
+  child.addObserver('layoutStyle', this, function() { didNotifyStyle = YES; });
+  
+  child.set('layout', { left: 0, top: 10, bottom: 20, right: 50 }) ;
+  ok(didNotify, "didNotify");
+  ok(didNotifyStyle, 'didNotifyStyle');
+}) ;
+
+// ..........................................................
+// TEST FRAME/STYLEFRAME WITH BASIC LAYOUT VARIATIONS
+// 
+// NOTE:  Each test evaluates the frame before and after adding it to the 
+// parent.
+
+module('BASIC LAYOUT VARIATIONS', commonSetup);
+
+test("layout {top, left, width, height}", function() {
+
+  var layout = { top: 10, left: 10, width: 50, height: 50 };
+  var s = { top: 10, left: 10, width: 50, height: 50 } ;
+  var no_f = { x: 10, y: 10, width: 50, height: 50 } ;
+  var with_f = { x: 10, y: 10, width: 50, height: 50 } ;
+
+  performLayoutTest(layout, no_f, s, with_f, s) ;
+}) ;
+
+test("layout {top, left, bottom, right}", function() {
+
+  var layout = { top: 10, left: 10, bottom: 10, right: 10 };
+  var no_f = { x: 10, y: 10, width: 0, height: 0 } ;
+  var with_f = { x: 10, y: 10, width: 180, height: 180 } ;
+  var s = { top: 10, left: 10, bottom: 10, right: 10 } ;
+
+  performLayoutTest(layout, no_f, s, with_f, s) ;
+}) ;
+
+test("layout {bottom, right, width, height}", function() {
+
+  var layout = { bottom: 10, right: 10, width: 50, height: 50 };
+  var no_f = { x: 0, y: 0, width: 50, height: 50 } ;
+  var with_f = { x: 140, y: 140, width: 50, height: 50 } ;
+  var s = { bottom: 10, right: 10, width: 50, height: 50 } ;
+
+  performLayoutTest(layout, no_f, s, with_f, s) ;
+}) ;
+
+test("layout {centerX, centerY, width, height}", function() {
+
+  var layout = { centerX: 10, centerY: 10, width: 60, height: 60 };
+  var no_f = { x: 10, y: 10, width: 60, height: 60 } ;
+  var with_f = { x: 80, y: 80, width: 60, height: 60 } ;
+  var s = { marginLeft: -20, marginTop: -20, width: 60, height: 60, top: "50%", left: "50%" } ;
+
+  performLayoutTest(layout, no_f, s, with_f, s) ;
+}) ;
+
+// ..........................................................
+// TEST FRAME/STYLEFRAME WITH INVALID LAYOUT VARIATIONS
+// 
+// NOTE:  Each test evaluates the frame before and after adding it to the 
+// parent.
+
+module('INVALID LAYOUT VARIATIONS', commonSetup);
+
+test("layout {top, left} - assume right/bottom=0", function() {
+  
+  var layout = { top: 10, left: 10 };
+  var no_f = { x: 10, y: 10, width: 0, height: 0 } ;
+  var with_f = { x: 10, y: 10, width: 190, height: 190 } ;
+  var s = { bottom: 0, right: 0, top: 10, left: 10 } ;
+
+  performLayoutTest(layout, no_f, s, with_f, s) ;
+}) ;
+
+test("layout {height, width} - assume top/left=0", function() {
+
+  var layout = { height: 60, width: 60 };
+  var no_f = { x: 0, y: 0, width: 60, height: 60 } ;
+  var with_f = { x: 0, y: 0, width: 60, height: 60 } ;
+  var s = { width: 60, height: 60, top: 0, left: 0 } ;
+  
+  performLayoutTest(layout, no_f, s, with_f, s) ;
+  
+}) ;
+
+test("layout {right, bottom} - assume top/left=0", function() {
+
+  var layout = { right: 10, bottom: 10 };
+  var no_f = { x: 0, y: 0, width: 0, height: 0 } ;
+  var with_f = { x: 0, y: 0, width: 190, height: 190 } ;
+  var s = { bottom: 10, right: 10, top: 0, left: 0 } ;
+  
+  performLayoutTest(layout, no_f, s, with_f, s) ;
+  
+}) ;
+
+test("layout {centerX, centerY} - assume width/height=0", function() {
+
+  var layout = { centerX: 10, centerY: 10 };
+  var no_f = { x: 10, y: 10, width: 0, height: 0 } ;
+  var with_f = { x: 110, y: 110, width: 0, height: 0 } ;
+  var s = { width: 0, height: 0, top: "50%", left: "50%", marginTop: 10, marginLeft: 10 } ;
+  
+  performLayoutTest(layout, no_f, s, with_f, s) ;
+  
+}) ;
+
+test("layout {top, left, centerX, centerY, height, width} - top/left take presidence", function() {
+
+  var layout = { top: 10, left: 10, centerX: 10, centerY: 10, height: 60, width: 60 };
+  var no_f = { x: 10, y: 10, width: 60, height: 60 } ;
+  var with_f = { x: 10, y: 10, width: 60, height: 60 } ;
+  var s = { width: 60, height: 60, top: 10, left: 10 } ;
+  
+  performLayoutTest(layout, no_f, s, with_f, s) ;
+  
+}) ;
+
+test("layout {bottom, right, centerX, centerY, height, width} - bottom/right take presidence", function() {
+
+  var layout = { bottom: 10, right: 10, centerX: 10, centerY: 10, height: 60, width: 60 };
+  var no_f = { x: 0, y: 0, width: 60, height: 60 } ;
+  var with_f = { x: 130, y: 130, width: 60, height: 60 } ;
+  var s = { width: 60, height: 60, bottom: 10, right: 10 } ;
+  
+  performLayoutTest(layout, no_f, s, with_f, s) ;
+  
+}) ;
+
+test("layout {top, left, bottom, right, centerX, centerY, height, width} - top/left take presidence", function() {
+
+  var layout = { top: 10, left: 10, bottom: 10, right: 10, centerX: 10, centerY: 10, height: 60, width: 60 };
+  var no_f = { x: 10, y: 10, width: 60, height: 60 } ;
+  var with_f = { x: 10, y: 10, width: 60, height: 60 } ;
+  var s = { width: 60, height: 60, top: 10, left: 10 } ;
+  
+  performLayoutTest(layout, no_f, s, with_f, s) ;
+  
+}) ;
+
+// ..........................................................
+// TEST FRAME/STYLEFRAME WHEN PARENT VIEW IS RESIZED
+// 
+
+module('RESIZE FRAME', commonSetup);
+ 
+function verifyFrameResize(layout, before, after) {
+  parent.appendChild(child);
+  child.set('layout', layout);
+  
+  isObj(child.get('frame'), before, "Before: %@ == %@".fmt(SC.inspect(child.get('frame')), SC.inspect(before))) ;
+  
+  parent.adjust('width', 300).adjust('height', 300);
+  
+  isObj(child.get('frame'), after, "After: %@ == %@".fmt(SC.inspect(child.get('frame')), SC.inspect(after)));
+  
+}
+
+test("frame does not change with top/left/w/h", function(){
+  var layout = { top: 10, left: 10, width: 60, height: 60 };
+  var before = { x: 10, y: 10, width: 60, height: 60 };
+  var after =  { x: 10, y: 10, width: 60, height: 60 };
+  verifyFrameResize(layout, before, after);
+});
+
+test("frame shifts down with bottom/right/w/h", function(){
+  var layout = { bottom: 10, right: 10, width: 60, height: 60 };
+  var before = { x: 130, y: 130, width: 60, height: 60 };
+  var after =  { x: 230, y: 230, width: 60, height: 60 };
+  verifyFrameResize(layout, before, after);
+});
+
+test("frame size shifts with top/left/bottom/right", function(){
+  var layout = { top: 10, left: 10, bottom: 10, right: 10 };
+  var before = { x: 10, y: 10, width: 180, height: 180 };
+  var after =  { x: 10, y: 10, width: 280, height: 280 };
+  verifyFrameResize(layout, before, after);
+});
+
+test("frame loc shifts with centerX/centerY", function(){
+  var layout = { centerX: 10, centerY: 10, width: 60, height: 60 };
+  var before = { x: 80, y: 80, width: 60, height: 60 };
+  var after =  { x: 130, y: 130, width: 60, height: 60 };
+  verifyFrameResize(layout, before, after);
+});