sproutit-sproutcore 1.0.0.20090407205609 → 1.0.0.20090408130025

data/frameworks/sproutcore/frameworks/desktop/system/undo_manager.js

@@ -0,0 +1,187 @@
+// ========================================================================
+// SproutCore -- JavaScript Application Framework
+// Copyright ©2006-2008, Sprout Systems, Inc. and contributors.
+// Portions copyright ©2008 Apple, Inc.  All rights reserved.
+// ========================================================================
+
+require('core');
+
+/**
+  @class
+  
+  This is a simple undo manager.  To use this UndoManager, all you need to
+  do is to make sure that you register a function with this manager to undo
+  every change you make.  You can then invoke the undo/redo methods to do it.
+  
+  h4. USING THE UNDOMANAGER
+  
+  Typically you create an undo manager inside on of your controllers.  Then,
+  whenever you are about to perform an action on your model object, all you
+  need to do is to register a function with the undo manager that can undo 
+  whatever  you just did.
+  
+  Besure the undo function you register also saves undo functions.  This makes
+  redo possible.
+  
+  More docs TBD.
+  
+  @extends SC.Object
+*/
+SC.UndoManager = SC.Object.extend(
+/** @scope SC.UndoManager.prototype */
+{
+
+  /** 
+    (Property) Name of the next undo action name.  
+  
+    Use this property to build your Undo menu name.
+    
+  */
+  undoActionName: function() { 
+    return (this.undoStack) ? this.undoStack.name : null ;
+  }.property('undoStack'),
+  
+  /** 
+    (Property) Name of the next return action name.  
+  
+    Use this property to build your Redo menu name.
+    
+  */
+  redoActionName: function() { 
+    return (this.redoStack) ? this.redoStack.name : null ;
+  }.property('redoStack'),
+
+  /** 
+    True if there is an undo action on the stack.
+    
+    Use to validate your menu item.
+  */
+  canUndo: function() { 
+    return this.undoStack != null; 
+  }.property('undoStack'),
+  
+  /** 
+    True if there is an redo action on the stack.
+    
+    Use to validate your menu item.
+  */
+  canRedo: function() { 
+    return this.redoStack != null; 
+  }.property('redoStack'),
+  
+  /**  
+    Tries to undo the last action.  
+  
+    Returns true if succeeded.  Fails if an undo group is currently open.
+  */
+  undo: function() { this._undoOrRedo('undoStack','isUndoing'); },
+  
+  /**  
+    Tries to redo the last action.  
+  
+    Returns true if succeeded.  Fails if an undo group is currently open.
+  */
+  redo: function() { this._undoOrRedo('redoStack','isRedoing'); },
+  
+  /**
+    True if the manager is currently undoing events. 
+  */
+  isUndoing: false, 
+  
+  /**
+    True if the manager is currently redoing events.
+  */
+  isRedoing: false, 
+  
+  /** @private */
+  groupingLevel: 0,
+  
+  // --------------------------------
+  // SIMPLE REGISTRATION
+  //
+  // These are the core method to register undo/redo events.
+  
+  /**
+    This is how you save new undo events.
+    
+    @param {Function} func A prebound function to be invoked when the undo executes.
+    @param {String} [name] An optional name for the undo.  If you are using 
+      groups, this is not necessary.
+  */
+  registerUndo: function(func, name) {
+    this.beginUndoGroup(name) ;
+    this._activeGroup.actions.push(func) ;
+    this.endUndoGroup(name) ;
+  },
+
+  /**
+    Begins a new undo groups
+
+    Whenver you start an action that you expect to need to bundle under a single
+    undo action in the menu, you should begin an undo group.  This way any
+    undo actions registered by other parts of the application will be
+    automatically bundled into this one action.
+    
+    When you are finished performing the action, balance this with a call to
+    endUndoGroup().
+  */
+  beginUndoGroup: function(name) {
+    // is a group already active? Just increment the counter.
+    if (this._activeGroup) {
+      this.groupingLevel++ ;
+      
+    // otherwise, create a new active group.  
+    } else {
+      var stack = (this.isUndoing) ? 'redoStack' : 'undoStack' ;
+      this._activeGroup = { name: name, actions: [], prev: this.get(stack) } ;
+      this.set(stack, this._activeGroup) ;
+      this.groupingLevel = 1 ;
+    }
+  },
+ 
+  /** end the undo group.  see beginUndoGroup() */
+  endUndoGroup: function(name) {
+    // if more than one groups are active, just decrement the counter.
+    if (!this._activeGroup) raise("endUndoGroup() called outside group.") ;
+    if (this.groupingLevel > 1) {
+      this.groupingLevel-- ;
+      
+    // otherwise, close out the current group.
+    } else {
+      this._activeGroup = null ; this.groupingLevel = 0 ;
+    }
+    this.propertyDidChange((this.isUndoing) ? 'redoStack' : 'undoStack') ;
+  },
+
+  /**
+    Change the name of the current undo group.  
+  
+    Normally you don't want to do this as it will effect the whole group.
+  */
+  setActionName: function(name) {
+    if (!this._activeGroup) raise("setActionName() called outside group.") ;
+    this._activeGroup.name = name ;
+  },
+  
+  // --------------------------------
+  // PRIVATE
+  //
+  _activeGroup: null, undoStack: null, redoStack: null, 
+  _undoOrRedo: function(stack,state) {
+    if (this._activeGroup) return false ;
+    if (this.get(stack) == null) return true; // noting to do.
+
+    this.set(state, true) ;
+    var group = this.get(stack) ;
+    this.set(stack, group.prev) ;
+    var action ;
+
+    var useGroup = group.actions.length > 1; 
+    if (useGroup) this.beginUndoGroup(group.name) ;
+    while(action = group.actions.pop()) { action(); }
+    if (useGroup) this.endUndoGroup(group.name) ;
+    
+    this.set(state, false) ;
+  }
+  
+}) ;

data/frameworks/sproutcore/frameworks/desktop/tests/integration/dialog.js

@@ -0,0 +1,43 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc. and contributors.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test equals context ok same htmlbody */
+
+module("A dialog with some basic controls and buttons");
+
+var pane ;
+test("adding dialog to screen", function() {
+
+  
+  var delegate = SC.Object.create({
+    
+    couldNotSend: function() {
+      pane = SC.AlertPane.warn("Email could not be sent", 'There might be a problem with the server or with your internet connection.  Try again in a few minutes.', "Try Again", "Cancel", 'Report Problem...', this);      
+    },
+    
+    showMoreInfo: function() {
+      pane = SC.AlertPane.info("Sending Email", "Sometimes email doesn't make it.  It's a fact of life.  We all love email, but hey that's how it goes.  \nAnyway, the nice thing is that we can provide this helpful dialog message, with multiple paragraphs and everything because of SproutCore.\nEmail is OK, AlertPanes are great. So just deal m'kay?  Bye bye.", delegate);
+    },
+    
+    alertPaneDidDismiss: function(alert, status) {
+      console.log("%@.alertDidDismiss - %@".fmt(alert, status));
+      switch(status) {
+        case SC.OK_STATUS:
+          this.invokeLater(this.couldNotSend, 1000);
+          break;
+        case SC.EXTRA_STATUS:
+          this.showMoreInfo();
+          break;
+      }
+    }
+  });
+
+  SC.RunLoop.begin();
+  delegate.couldNotSend();
+  SC.RunLoop.end();
+}) ;
+

data/frameworks/sproutcore/frameworks/desktop/tests/panes/alert/methods.js

@@ -0,0 +1,10 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+module("TODO: Test SC.AlertPane Methods");

data/frameworks/sproutcore/frameworks/desktop/tests/panes/alert/ui.js

@@ -0,0 +1,152 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+module("SC.AlertPane UI");
+
+var pane ;
+
+function evaluatePane(pane, message, description, caption, button1Title, button2Title, button3Title, iconClass) {
+  // wrapper
+  ok(pane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be YES');
+  ok(pane.$().hasClass('sc-alert'), 'pane should have sc-alert class');
+  ok(pane.childViews[0].get('isVisibleInWindow'), 'pane.div.isVisibleInWindow should be YES');
+  ok(pane.childViews[0].$().hasClass('sc-view'), 'pane.div should have sc-view class');
+  ok(pane.childViews[0].childViews[0].get('isVisibleInWindow'), 'pane.div.info.isVisibleInWindow should be YES');
+  ok(pane.childViews[0].childViews[0].$().hasClass('info'), 'pane.div.info should have info class');
+  ok(pane.childViews[0].childViews[1].get('isVisibleInWindow'), 'pane.div.div.isVisibleInWindow should be YES');
+
+  // content
+  ok(pane.childViews[0].childViews[0].$('img'), 'pane.div.info.img existance should be YES');
+  ok(pane.childViews[0].childViews[0].$('img').hasClass('icon'), 'pane.div.info.img should have icon class');
+  ok(pane.childViews[0].childViews[0].$('img').hasClass(iconClass), 'pane.div.info.img should have %@ class'.fmt(iconClass));
+  ok(pane.childViews[0].childViews[0].$('h1'), 'pane.div.info.h1 existance should be YES');
+  equals(pane.childViews[0].childViews[0].$('h1').text(), 'AlertPane.message', 'pane.div.info.h1 should have title');
+
+  if (description) {
+    ok(pane.childViews[0].childViews[0].$('p.description'), 'pane.div.info.description existance should be YES');
+    equals(pane.childViews[0].childViews[0].$('p.description').text(), 'AlertPane.description', 'pane.div.info.description should have description');
+  } else {
+    equals(pane.childViews[0].childViews[0].$('p.description').length, 0, 'pane.div.info should have 0 description');
+  }
+
+  if (caption) {
+    ok(pane.childViews[0].childViews[0].$('p.caption'), 'pane.div.info.caption existance should be YES');
+    equals(pane.childViews[0].childViews[0].$('p.caption').text(), 'AlertPane.caption', 'pane.div.info.caption should have caption');
+  } else {
+    equals(pane.childViews[0].childViews[0].$('p.caption').length, 0, 'pane.div.info should have 0 caption');
+  }
+  
+  // buttons
+  ok(pane.childViews[0].childViews[1].$('a'), 'pane.div.div.a existance should be YES');
+  equals(pane.childViews[0].childViews[1].$('a').length, 2, 'pane.div.div should have 2 Buttons');
+  ok(pane.childViews[0].$('a'), 'pane.div.a existance should be YES');
+  
+  var button1 = pane.childViews[0].childViews[1].childViews[1];
+  var button2 = pane.childViews[0].childViews[1].childViews[0];
+  var button3 = pane.childViews[0].childViews[2];
+  
+  if (button1Title) {
+    equals(button1.$('span').text(), button1Title, 'pane.div.div button1 should have custom title %@'.fmt(button1Title));
+  } else {
+    equals(button1.$('span').text(), 'OK', 'pane.div.div button1 should have default title OK');
+  }
+  if (button2Title) {
+    equals(button2.$('span').text(), button2Title, 'pane.div.div button2 should have custom title %@'.fmt(button2Title));
+  } else {
+    ok(button2.$().hasClass('hidden'), 'pane.div.div button2 should be hidden');
+  }
+  if (button3Title) {
+    equals(button3.$('span').text(), button3Title, 'pane.div button3 should have custom title %@'.fmt(button3Title));
+  } else {
+    ok(button3.$().hasClass('hidden'), 'pane.div button3 should be hidden');
+  }
+}
+
+test("AlertPane.show with icon, message, description, caption and 3 buttons", function() {
+  pane = SC.AlertPane.show("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24', this);      
+  evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24');
+  pane.dismiss();
+});
+
+test("AlertPane.warn with icon, message, description, caption and 3 buttons", function() {
+  pane = SC.AlertPane.warn("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', this);      
+  evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-alert-48');
+  pane.dismiss();
+});
+
+test("AlertPane.error with icon, message, description, caption and 3 buttons", function() {
+  pane = SC.AlertPane.error("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', this);      
+  evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-error-48');
+  pane.dismiss();
+});
+
+test("AlertPane.plain with message, description, caption and 3 buttons", function() {
+  pane = SC.AlertPane.plain("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', this);      
+  evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'blank');
+  pane.dismiss();
+});
+
+test("AlertPane.info with icon, message, description, caption and 3 buttons", function() {
+  pane = SC.AlertPane.info("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', this);      
+  evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-info-48');
+  pane.dismiss();
+});
+
+test("AlertPane.info with icon, message and 1 default button (omit all optional parameters)", function() {
+  pane = SC.AlertPane.info("AlertPane.message");      
+  evaluatePane(pane, "AlertPane.message", null, null, null, null, null, 'sc-icon-info-48');
+  pane.dismiss();
+});
+
+test("AlertPane.info with icon, message and 3 buttons (passing null to optional description and caption)", function() {
+  pane = SC.AlertPane.info("AlertPane.message", null, null, "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', this);      
+  evaluatePane(pane, "AlertPane.message", null, null, "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-info-48');
+  pane.dismiss();
+});
+
+test("AlertPane.info with icon, message, description, caption and 1 button (passing null to 3 buttons)", function() {
+  pane = SC.AlertPane.info("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', null, null, null, this);      
+  evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', null, null, null, 'sc-icon-info-48');
+  pane.dismiss();
+});
+
+test("users interaction with mutiple alert panes with 1-3 buttons", function() {
+  
+  var delegate = SC.Object.create({
+    
+    threeButtonAlertPane: function() {
+      pane = SC.AlertPane.warn("AlertPane.warn title", 'Click OK to see this alert pane again.  \nClick Other... to see other alert panes.', 'Click cancel to dismiss.', "OK", "Cancel", 'Other...', this);      
+    },
+
+    twoButtonAlertPane: function() {
+      pane = SC.AlertPane.error("AlertPane.error title", 'Click OK to see one button alert pane.', 'Click cancel to dismiss.', "OK", "Cancel", delegate);      
+    },
+
+    oneButtonAlertPane: function() {
+      pane = SC.AlertPane.info("AlertPane.info title", 'Click OK to dismiss.', delegate);      
+    },
+   
+    alertPaneDidDismiss: function(alert, status) {
+      console.log("%@.alertDidDismiss - %@".fmt(alert, status));
+      switch(status) {
+        case SC.BUTTON1_STATUS:
+          if(alert.icon && alert.icon.indexOf('alert')!=-1) this.invokeLater(this.threeButtonAlertPane, 1000);
+          if(alert.icon && alert.icon.indexOf('error')!=-1) this.oneButtonAlertPane();
+          break;
+        case SC.BUTTON3_STATUS:
+          this.twoButtonAlertPane();
+          break;
+      }
+    }
+  });
+
+  SC.RunLoop.begin();
+  delegate.threeButtonAlertPane();
+  SC.RunLoop.end();
+}) ;

data/frameworks/sproutcore/frameworks/desktop/tests/panes/menu/methods.js

@@ -0,0 +1,10 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+module("TODO: Test SC.MenuPane Methods");

data/frameworks/sproutcore/frameworks/desktop/tests/panes/menu/ui.js

@@ -0,0 +1,57 @@
+// ==========================================================================
+// Project: SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+// portions copyright @2009 Apple, Inc.
+// License: Licened under MIT license (see license.js)
+// ==========================================================================
+/*global module test htmlbody ok equals same stop start */
+
+htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
+
+var iconURL= "http://www.freeiconsweb.com/Icons/16x16_people_icons/People_046.gif";
+var method = function() { console.log("done"); };
+
+var anchor = SC.ControlTestPane.design()
+  .add("anchor", SC.PopupButtonView, { 
+     title: "Menu",
+     keyEquivalent:"ctrl_z",
+     layout:{width:100,height:20}  
+  });
+anchor.show();
+
+module("SC.MENUPANE UI");
+test('menu item added ', function() {
+  var menu = SC.MenuPane.create({
+              items: [ { title: "Item1", isEnabled:YES, icon: iconURL, 
+                separator: NO, action: method ,height:30,
+                checkbox:YES, shortCut: "alt_n", keyEquivalent:"alt_n" },
+                { title: "", isEnabled:YES, icon: null, separator: YES},
+                { title: "Item2", isEnabled:NO, icon: iconURL, separator: NO },
+                { title: "Item3", isEnabled:YES, icon: iconURL, separator: NO , branchItem:YES,
+                subMenu:SC.MenuPane.create({
+                  items:["title1","title2"],
+                  contentView:SC.View.extend({
+                    layout: { width: 150, height: 200 }
+                  })
+                })
+              }],
+              isEnabled: YES,
+              itemIsEnabledKey:"isEnabled",
+              itemTitleKey:"title",
+              itemIconKey:"icon",
+              itemSeparatorKey:'separator',
+              itemActionKey: 'action',
+              itemCheckboxKey:'checkbox',
+              itemBranchKey:'branchItem',  
+              preferType:SC.PICKER_MENU,
+              subMenuKey:'subMenu',
+              itemShortCutKey:'shortCut',
+              itemKeyEquivalentKey:'keyEquivalent',
+              itemHeightKey:'height',
+              contentView:SC.View.extend({
+                layout: { width: 150, height: 200 }})
+              });
+  anchor.view('anchor').menu = menu;
+});
+  
+  

data/frameworks/sproutcore/frameworks/desktop/tests/panes/palette/methods.js

@@ -0,0 +1,10 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+module("TODO: Test SC.PalettePane Methods");

data/frameworks/sproutcore/frameworks/desktop/tests/panes/palette/ui.js

@@ -0,0 +1,36 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+module("SC.PalettePane UI");
+
+var pane ;
+
+test("verify palette pane content container is visible at correct location with right size", function() { 
+  pane = SC.PalettePane.create({
+    layout: { width: 400, height: 200, right: 20, top: 0 },
+    contentView: SC.View.extend({
+      layout: { width: 400, height: 200, right: 0, top: 0 }
+    })
+  });
+  pane.append();
+
+  ok(pane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be YES');
+  ok(pane.$().hasClass('sc-palette'), 'pane should have sc-palette class');
+  ok(pane.childViews[0].get('isVisibleInWindow'), 'pane.div.isVisibleInWindow should be YES');
+  ok(pane.childViews[0].$().hasClass('sc-view'), 'pane.div should have sc-view class');
+  
+  var ret = pane.childViews[0].layoutStyle();
+
+  equals(ret.top, '0px', 'pane.div should be initiated at default position top including shadow');
+  equals(ret.right, '0px', 'pane.div should be initiated at default position right including shadow');
+  equals(ret.width, '400px', 'pane.div should have width 400px');
+  equals(ret.height, '200px', 'pane.div should have height 200px');
+
+  //pane.remove();
+}) ;

data/frameworks/sproutcore/frameworks/desktop/tests/panes/panel/methods.js

@@ -0,0 +1,10 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+module("TODO: Test SC.PanelPane Methods");

data/frameworks/sproutcore/frameworks/desktop/tests/panes/panel/ui.js

@@ -0,0 +1,40 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+module("SC.PanelPane UI");
+
+var pane ;
+
+test("verify panel content container is visible at correct location with right size", function() { 
+  pane = SC.PanelPane.create({
+    contentView: SC.View.extend({
+      layout: { width: 400, height: 200, centerX: 0, centerY: 0 }
+    })
+  });
+  pane.append();
+
+  ok(pane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be YES');
+  ok(pane.$().hasClass('sc-panel'), 'pane should have sc-panel class');
+  ok(pane.childViews[0].get('isVisibleInWindow'), 'pane.div.isVisibleInWindow should be YES');
+  ok(pane.childViews[0].$().hasClass('sc-view'), 'pane.div should have sc-view class');
+  
+  var pw = pane.childViews[0].layout.width;
+  var ph = pane.childViews[0].layout.height;
+  var ret = pane.childViews[0].layoutStyle();
+
+  equals(ret.top, '50%', 'pane.div should center vertically');
+  equals(ret.left, '50%', 'pane.div should center horizontally');
+  equals(ret.width, '400px', 'pane.div should have width 400px');
+  equals(ret.height, '200px', 'pane.div should have height 200px');
+  equals(ret.marginLeft, -pw/2+'px', 'pane.div should shift-left %@ px'.fmt(-pw/2));
+  equals(ret.marginTop, -ph/2+'px', 'pane.div should shift-top %@ px'.fmt(-ph/2));
+
+  pane.remove();
+}) ;
+

data/frameworks/sproutcore/frameworks/desktop/tests/panes/picker/methods.js

@@ -0,0 +1,10 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+module("TODO: Test SC.PickerPane Methods");

data/frameworks/sproutcore/frameworks/desktop/tests/panes/picker/ui.js

@@ -0,0 +1,80 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+module("SC.PickerPane UI");
+
+htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
+
+function evaluatePicker(pane) {
+  ok(pane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be YES');
+  ok(pane.$().hasClass('sc-picker'), 'pane should have sc-picker class');
+  ok(pane.childViews[0].get('isVisibleInWindow'), 'pane.div.isVisibleInWindow should be YES');
+  ok(pane.childViews[0].$().hasClass('sc-view'), 'pane.div should have sc-view class');
+  
+  var ret = pane.childViews[0].layoutStyle();
+
+  equals(ret.width, '300px', 'pane.div should have width 300px');
+  equals(ret.height, '200px', 'pane.div should have height 200px');
+}
+
+var anchor = SC.ControlTestPane.design()
+  .add("anchor", SC.ButtonView, { 
+     title: "Anchor Button" 
+  });
+
+anchor.show(); // add a test to show the test pane
+
+var paneDefault ;
+var paneMenu ;
+var paneFixed ;
+var panePointer ;
+
+test("verify default picker pane content container is visible at correct location with right size", function() { 
+  paneDefault = SC.PickerPane.create({
+    contentView: SC.View.extend({
+      layout: { width: 300, height: 200 }
+    })
+  });
+  paneDefault.popup(anchor.view('anchor'), SC.PICKER);
+  evaluatePicker(paneDefault);
+  //paneDefault.remove();
+}) ;
+
+test("verify menu picker pane content container is visible at correct location with right size", function() { 
+  paneMenu = SC.PickerPane.create({
+    contentView: SC.View.extend({
+      layout: { width: 300, height: 200 }
+    })
+  });
+  paneMenu.popup(anchor.view('anchor'), SC.PICKER_MENU);
+  evaluatePicker(paneMenu);
+  //paneMenu.remove();
+}) ;
+
+test("verify fixed picker pane content container is visible at correct location with right size", function() { 
+  paneFixed = SC.PickerPane.create({
+    contentView: SC.View.extend({
+      layout: { width: 300, height: 200 }
+    })
+  });
+  paneFixed.popup(anchor.view('anchor'), SC.PICKER_FIXED);
+  evaluatePicker(paneFixed);
+  //paneFixed.remove();
+}) ;
+
+test("verify pointer picker pane content container is visible at correct location with right size", function() { 
+  panePointer = SC.PickerPane.create({
+    contentView: SC.View.extend({
+      layout: { width: 300, height: 200 }
+    })
+  });
+  panePointer.popup(anchor.view('anchor'), SC.PICKER_POINTER, [3,0,1,2,2]);
+  evaluatePicker(panePointer);
+  //panePointer.remove();
+}) ;

data/frameworks/sproutcore/frameworks/desktop/tests/panes/sheet/methods.js

@@ -0,0 +1,10 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+module("TODO: Test SC.SheetPane Methods");