sproutcore 1.4.5 → 1.5.0.pre.3

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

@@ -7,9 +7,14 @@
 
 /*global module test equals context ok same htmlbody */
 
-module("A dialog with some basic controls and buttons");
-
 var pane ;
+
+module("A dialog with some basic controls and buttons", {
+  teardown: function(){
+    if (pane) pane.remove();
+  }
+});
+
 test("adding dialog to screen", function() {
 
   

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

@@ -93,7 +93,7 @@ test('Basic UI', function(){
   setTimeout(function() {
     selectedItem = menu.get('selectedItem');
     ok(selectedItem, 'menu should have selectedItem property set after clicking on menu item');
-    equals(selectedItem.title, menuItem.get('content').title, 'selectedItem should be set to the content item that was clicked');
+    equals(selectedItem ? selectedItem.title : null, menuItem.get('content').title, 'selectedItem should be set to the content item that was clicked');
     equals(1, menu._selectedItemCount, 'selectedItem should only change once when a menu item is clicked');
     equals(1, menu._actionCount, 'action is fired once when menu item is clicked');
     menu.remove();

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/button/methods.js

@@ -12,7 +12,7 @@ module("SC.ButtonView#actions", {
 });
 
 test("Emulate mouse click to verify if the button activates", function() {
-  b.triggerAction();
+  b.triggerActionAfterDelay();
   equals(b.get('isActive'), YES, "the should be active for 200ms");
   
 });
@@ -42,6 +42,48 @@ test("Test different moused states", function() {
   equals(b.get('value'), b.get('toggleOffValue'), "the value should be the same as the toggle value");
 });
 
+test("Actions should be sent up the responder chain", function() {
+  var timeout = NO;
+  
+  // create a pane to test with. It has a child view, and under that, a button.
+  // the button sends an action up to its parent. We hope. :)
+  var pane = SC.Pane.create({
+    childViews: "v".w(),
+    v: SC.View.extend({
+      methodOnParent: function() {
+        // schedule cleanup
+        setTimeout(function() {
+          clearTimeout(timeout);
+          start();
+          
+          pane.remove();
+          ok(YES, "method on parent should have been called");
+        }, 1);
+      },
+      childViews: "b".w(),
+      b: SC.ButtonView.extend({
+        action: "methodOnParent"
+      })
+    }),
+    
+    rootResponder: SC.RootResponder.responder
+  });
+  
+  // the pane has to be in DOM for this to work, apparently.
+  pane.append();
+  
+  // use async API
+  stop();
+  
+  timeout = setTimeout(function() {
+    start();
+    ok(false, "Timeout.");
+    pane.remove();
+  }, 1000);
+  
+  pane.v.b._action();  
+
+});
 
 module("SC.ButtonView#actions - SC.HOLD_BEHAVIOR", {
   setup: function() {
@@ -70,7 +112,7 @@ module("SC.ButtonView#actions - SC.HOLD_BEHAVIOR", {
 });
 
 test('Test triggerAction only happens once', function(){
-  b.triggerAction();
+  b.triggerActionAfterDelay();
   SC.RunLoop.begin().end();
   var assertions = function(){
     equals(counter.get('value'), 1, "should only run action once");
@@ -78,7 +120,7 @@ test('Test triggerAction only happens once', function(){
   };
 
   stop();
-  setTimeout(assertions, 300);
+  setTimeout(assertions, 500);
 });
 
 // This test is not nearly reliable enough

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/button/ui.js

@@ -11,41 +11,51 @@ htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
 
   var iconURL= "http://www.freeiconsweb.com/Icons/16x16_people_icons/People_046.gif";
 (function() {
-var pane = SC.ControlTestPane.design()
-  .add("basic", SC.ButtonView, { 
+var pane = SC.ControlTestPane.design({height:24})
+  .add("basic", SC.ButtonView, {
   })
   
   .add("title", SC.ButtonView, { 
-     title: "Hello World" 
+     title: "Hello World"
   })
    
   .add("icon", SC.ButtonView, { 
-    icon: iconURL 
+    icon: iconURL
   })
     
   .add("title,icon", SC.ButtonView, { 
-    title: "Hello World", icon: iconURL  
+    title: "Hello World", icon: iconURL
   })
      
   .add("title,icon,disabled", SC.ButtonView, { 
-    title: "Hello World", icon: iconURL , isEnabled: NO 
+    title: "Hello World", icon: iconURL , isEnabled: NO
   })
   
   .add("title,icon,default", SC.ButtonView, { 
-    title: "Hello World", icon: iconURL , isDefault: YES 
+    title: "Hello World", icon: iconURL , isDefault: YES
   })
 
   .add("title,icon,selected", SC.ButtonView, { 
-    title: "Hello World", icon: iconURL , isSelected: YES 
+    title: "Hello World", icon: iconURL , isSelected: YES
   })
 
   .add("title,toolTip", SC.ButtonView, { 
-    title: "Hello World", toolTip: 'Hello World is my tool tip' 
-  });
+    title: "Hello World", toolTip: 'Hello World is my tool tip'
+  })
+  // 
+  // .add("autocontrolsize", SC.ButtonView, { 
+  //   controlSize: SC.AUTO_CONTROL_SIZE,
+  //   title: "Hello Cheese", layout: { left: 0, top: 0, right: 0, height: 37 }
+  // })
+  // 
+  // .add("calculatedcontrolsize", SC.ButtonView, {
+  //   // control size should end up small
+  //   title: "Smelly Severus", layout: { left: 0, top: 2, right: 0, bottom: 2 },
+  //   controlSize: SC.CALCULATED_CONTROL_SIZE
+  // });
 
 pane.show(); // add a test to show the test pane
 
-
 module('SC.ButtonView ui');
 
 test("Check that all button are visible", function() {
@@ -156,8 +166,18 @@ test("Check that the title is set or not and if it is in the appropriate element
 });
 
 test("Check if title,toolTip has the tool tip set", function() {
-  var viewElem=pane.view('title,toolTip').$('div');
-  ok(viewElem.defaultClass[0].title == 'Hello World is my tool tip', 'title,toolTip has the expected tool tip set.');
+  var viewElem=pane.view('title,toolTip').$();
+  ok(viewElem.attr("title") == 'Hello World is my tool tip', 'title,toolTip has the expected tool tip set.');
 });
 
+// test("Check if AUTO_CONTROL_SIZE button automatically calculated the correct controlSize", function() {
+//   var viewElem=pane.view('autocontrolsize').$();
+//   ok(viewElem.hasClass('sc-huge-size'), 'HUGE button has sc-huge-size class.');
+// });
+// 
+// test("Check if CALCULATED_CONTROL_SIZE automatically found the correct controlSize", function() {
+//   var viewElem=pane.view('calculatedcontrolsize').$();
+//   ok(viewElem.hasClass('sc-small-size'), 'CALCULATED_CONTROL_SIZE button has sc-small-size class.');
+// });
+
 })();

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/checkbox/methods.js

@@ -31,7 +31,7 @@ module("SC.Checkbox", {
   }
 });
 
-test("renders an input tag with appropriate attributes", function() {
+test("renders something that is NOT an input tag with appropriate attributes", function() {
   equals(view.get('value'), YES, 'precon - value should be YES');
 
   var q = view.$();
@@ -39,6 +39,10 @@ test("renders an input tag with appropriate attributes", function() {
   equals(q.attr('aria-checked'), 'true', 'should be checked');
 });
 
+test("double-check that there is NO input element. Just in case.", function(){
+  equals(view.$("input").length, 0, "CoreQuery lookup for inputs should have length of 0.");
+});
+
 test("should have span with title inside", function() {
   var q = Q$('span', view.get('layer'));
   ok(view.get('displayTitle').length>0, 'precond - display title should not be empty');
@@ -79,7 +83,7 @@ test("isSelected should alter sel classname and sync with value property", funct
   
   ok(!view.get('isSelected'), 'isSelected should now be NO');
   ok(!view.$().hasClass('sel'), 'should no longer have sel class');
-  equals(view.$().attr('aria-checked'), 'false', 'input should not be checked');
+  equals(view.$().attr('aria-checked'), 'false', 'view should not be checked');
   
   // update isSelected -- make sure it edits the value
   SC.RunLoop.begin();
@@ -88,34 +92,24 @@ test("isSelected should alter sel classname and sync with value property", funct
   
   ok(view.get('isSelected'), 'isSelected should match value');
   ok(view.$().hasClass('sel'), 'should have sel class');
-  equals(view.$().attr('aria-checked'), 'true', 'input should be checked');
+  equals(view.$().attr('aria-checked'), 'true', 'aria-checked should be true');
 });
 
-test("clicking on the checkbox will change toggle the value", function() {
+test("mouseDown and then mouseUp anywhere in the checkbox should toggle the selection", function() {
 
-  ok(view.get('value'), 'precond - value should be YES');
-  view.mouseDown();
-  view.mouseUp();
-  ok(!view.get('value'), 'value should now be NO');
-});
-
-
-test("pressing mouseDown and then mouseUp anywhere in the checkbox should toggle the selection", function() {
-
-  var elem = view.get('layer'), input = SC.$('input', elem);
+  var elem = view.get('layer');
+  
   SC.Event.trigger(elem, 'mousedown');
   ok(view.get('isActive'), 'view should be active');
   ok(view.get('value'), 'value should not change yet');
   
   // simulate mouseUp and browser-native change to control
   SC.Event.trigger(elem,'mouseup');
-  input.attr('checked', NO);
-  SC.Event.trigger(input.get(0),'click');
   
   ok(!view.get('isActive'), 'view should no longer be active');
   ok(!view.get('value'), 'value should change to NO');
   
-  input = elem = null ;
+  elem = null ;
 });
 
 test("isEnabled=NO should add disabled attr to input", function() {

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/image_button/ui.js

@@ -0,0 +1,25 @@
+
+var pane = SC.ControlTestPane.design({height:24})
+  .add("iconchange", SC.ImageButtonView, {
+    layout: { left: 0, top: 2, right: 0, bottom: 2 },
+    image: 'start'
+  });
+
+pane.show();
+
+module('SC.ImageButtonView ui');
+
+test("Check if icon class is set properly on ImageButton",function(){
+  var viewElem=pane.view('iconchange').$('div');
+  console.error(viewElem[0]);
+  ok(viewElem.hasClass('start'), 'Icon class set initially to "start"');
+});
+
+test("Check if icon class is set properly on ImageButton if changed", function(){
+  SC.RunLoop.begin();
+  var viewElem = pane.view('iconchange');
+  viewElem.set('image','stop');
+  SC.RunLoop.end(); // force redraw...
+  var newViewElem = pane.view('iconchange').$('div');
+  ok(newViewElem.hasClass('stop'), 'Icon class has correctly changed to "stop"');
+});

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/list_item.js

@@ -28,7 +28,9 @@ var pane = SC.ControlTestPane.design({ height: 32 })
     contentCheckboxKey: 'checkbox',
     contentIconKey:  "icon",
     contentUnreadCountKey: 'count',
-    contentIsBranchKey: 'branch'
+    contentIsBranchKey: 'branch',
+    
+    disclosureState: SC.BRANCH_OPEN
 
   }))
 
@@ -55,7 +57,9 @@ var pane = SC.ControlTestPane.design({ height: 32 })
     contentCheckboxKey: 'checkbox',
     contentIconKey:  "icon",
     contentUnreadCountKey: 'count',
-    contentIsBranchKey: 'branch'
+    contentIsBranchKey: 'branch',
+    
+    disclosureState: SC.BRANCH_OPEN
 
   }))
   
@@ -71,6 +75,43 @@ var pane = SC.ControlTestPane.design({ height: 32 })
     hasContentIcon:  YES
 
   }))
+  
+  .add("icon - contentandview", SC.ListItemView.design({
+    content: SC.Object.create({
+      title: "List Item",
+      icon: "sc-icon-folder-16"
+    }),
+
+    icon: "sc-icon-info-16",
+
+    contentValueKey: "title",
+
+    contentIconKey:  "icon",
+    hasContentIcon:  YES
+
+  }))
+  
+  .add("icon - view", SC.ListItemView.design({
+    content: SC.Object.create({
+      title: "List Item"
+    }),
+
+    icon: "sc-icon-info-16",
+
+    contentValueKey: "title"
+  }))
+  
+  .add("disclosure - YES", SC.ListItemView.design({ 
+    content: SC.Object.create({ title: "List Item" }),
+    contentValueKey: "title",
+    disclosureState: SC.BRANCH_OPEN
+  }))
+
+  .add("disclosure - NO", SC.ListItemView.design({ 
+    content: SC.Object.create({ title: "List Item" }),
+    contentValueKey: "title",
+    disclosureState: SC.BRANCH_CLOSED
+  }))
 
   .add("checkbox - YES", SC.ListItemView.design({ 
     content: SC.Object.create({ title: "List Item", checkbox: YES }),
@@ -129,7 +170,7 @@ function basic(view, sel, disabled) {
   equals(cq.hasClass('disabled'), !!disabled, 'expect disabled class');
   
   var idx = view.get('contentIndex');
-  var evenOrOdd = (idx % 2 == 0) ? 'even' : 'odd';
+  var evenOrOdd = (idx % 2 === 0) ? 'even' : 'odd';
   ok(cq.hasClass(evenOrOdd), 'should have an %@ class'.fmt(evenOrOdd));
 }
 
@@ -142,43 +183,63 @@ function label(view, labelText) {
 }
 
 function icon(view, spriteName) {
+  var cq = view.$(), iconCQ = cq.find('img.icon');
   if (spriteName === null) {
-    equals(view.$('img.icon').size(), 0, 'should not have image');
+    ok(!cq.hasClass('has-icon'), "should not have has-icon class");
+    equals(iconCQ.size(), 0, 'should not have image');
   } else {
-    var cq = view.$('img.icon');
-    equals(cq.size(), 1, 'should have icon');
-    ok(cq.hasClass(spriteName), 'icon should have class name %@'.fmt(spriteName));
+    ok(cq.hasClass('has-icon'), "should have has-icon class");
+    equals(iconCQ.size(), 1, 'should have icon');
+    ok(iconCQ.hasClass(spriteName), 'icon should have class name %@'.fmt(spriteName));
+  }
+}
+
+function disclosure(view, state) {
+  var cq = view.$(), disclosureCQ = cq.find('.sc-disclosure-view');
+  if (state === null) {
+    ok(!cq.hasClass('has-disclosure'), "should not have has-disclosure class");
+    equals(disclosureCQ.size(), 0, "should not have disclosure");
+  } else {
+    ok(cq.hasClass('has-disclosure'), "should have has-disclosure class");
+    equals(disclosureCQ.size(), 1, "should have disclosure element");
+    equals(disclosureCQ.hasClass('sel'), state === true, "disclosure expects sel class");
   }
 }
 
 function checkbox(view, state) {
+  var cq = view.$(), checkboxCQ = cq.find('.sc-checkbox-view');
   if (state === null) {
-    equals(view.$('.sc-checkbox-view').size(), 0, 'should not have checkbox');
+    ok(!cq.hasClass('has-checkbox'), "should not have has-checkbox class");
+    equals(checkboxCQ.size(), 0, 'should not have checkbox');
   } else {
-    var cq =view.$('.sc-checkbox-view');
-    equals(cq.size(), 1, 'should have checkbox element');
-    equals(cq.hasClass('sel'), state === true, 'expects sel class');
-    equals(cq.hasClass('mixed'), state === SC.MIXED_STATE, 'expects mixed class');
+    ok(cq.hasClass('has-checkbox'), "should have has-checkbox class");
+    equals(checkboxCQ.size(), 1, 'should have checkbox element');
+    equals(checkboxCQ.hasClass('sel'), state === true, 'expects sel class');
+    equals(checkboxCQ.hasClass('mixed'), state === SC.MIXED_STATE, 'expects mixed class');
   }
 }
 
 function count(view, cnt) {
+  var cq = view.$(), countCQ = cq.find('.count');
   if (cnt === null) {
-    equals(view.$('.count').size(), 0, 'should not have count') ;
+    ok(!cq.hasClass('has-count'), "should not have has-count class");
+    equals(countCQ.size(), 0, 'should not have count') ;
   } else {
-    var cq = view.$('.count');
-    equals(cq.size(), 1, 'should have count');
-    equals(cq.text(), cnt.toString(), 'should have count');
+    ok(cq.hasClass('has-count'), "should have has-count class");
+    equals(countCQ.size(), 1, 'should have count');
+    equals(countCQ.text(), cnt.toString(), 'should have count text');
   }
 }
 
 function branch(view, visible) {
+  var cq = view.$(), branchCQ = cq.find('.branch');
   if (visible === null) {
-    equals(view.$('.branch').size(), 0, 'should not have branch') ;
+    ok(!cq.hasClass('has-branch'), "should not have has-branch class");
+    equals(branchCQ.size(), 0, 'should not have branch') ;
   } else {
-    var cq = view.$('.branch');
-    equals(cq.size(), 1, 'should have branch');
-    equals(cq.hasClass('branch-visible'), visible, 'is visible');
+    ok(cq.hasClass('has-branch'), "should have has-branch class");
+    equals(branchCQ.size(), 1, 'should have branch');
+    equals(branchCQ.hasClass('branch-visible'), visible, 'is visible');
   }
 }
 
@@ -194,6 +255,7 @@ test("basic", function() {
   basic(view, NO, NO);
   icon(view, null);
   label(view, 'List Item');
+  disclosure(view, null);
   checkbox(view, null);
   count(view, null);
   branch(view, null);
@@ -204,6 +266,7 @@ test("full", function() {
   basic(view, NO, NO);
   icon(view, 'sc-icon-folder-16');
   label(view, 'List Item');
+  disclosure(view, YES);
   checkbox(view, YES);
   count(view, 23);
   branch(view, YES);
@@ -214,6 +277,7 @@ test("full - sel", function() {
   basic(view, YES, NO);
   icon(view, 'sc-icon-folder-16');
   label(view, 'List Item');
+  disclosure(view, YES);
   checkbox(view, YES);
   count(view, 23);
   branch(view, YES);
@@ -224,6 +288,21 @@ test("icon", function() {
   icon(view, 'sc-icon-folder-16');
 });
 
+test("icon defined in view and in content", function() {
+  var view = pane.view('icon - contentandview');
+  icon(view, 'sc-icon-folder-16');
+});
+
+test("icon defined only in view", function() {
+  var view = pane.view('icon - view');
+  icon(view, 'sc-icon-info-16');
+});
+
+test('disclosure', function() {
+  disclosure(pane.view('disclosure - YES'), YES);
+  disclosure(pane.view('disclosure - NO'), NO);
+});
+
 test('checkbox', function() {
   checkbox(pane.view('checkbox - YES'), YES);
   checkbox(pane.view('checkbox - NO'), NO);
@@ -255,6 +334,12 @@ test("outline - 2", function() {
 // EDITING CONTENT
 // 
 
+function adjustView(view, key, value) {
+  SC.RunLoop.begin();
+  view.set(key, value);
+  SC.RunLoop.end();
+}
+
 // gets the view content and adjusts the value inside of a runloop, ensuring
 // the UI gets an update also.
 function adjustContent(view, key, value) {
@@ -270,10 +355,33 @@ test("changing label should change display", function() {
   label(view, 'FOO'); // verify change
 });
 
+
+test("changing disclosure value should update display", function() {
+  var view = pane.view('full');
+  adjustView(view, 'disclosureState', SC.BRANCH_CLOSED);
+  disclosure(view, NO);
+  
+  // changing to leaf node should remove disclosure view
+  adjustView(view, 'disclosureState', SC.LEAF_NODE);
+  disclosure(view, null);
+  
+  // changing back to open/closed should add the disclosure back
+  adjustView(view, 'disclosureState', SC.BRANCH_OPEN);
+  disclosure(view, YES);
+});
+
 test("changing checkbox value should update display", function() {
   var view = pane.view('full');
   adjustContent(view, 'checkbox', NO);
   checkbox(view, NO); // verify change
+  
+  // changing to null should remove checkbox view
+  adjustContent(view, 'checkbox', null);
+  checkbox(view, null);
+
+  // changing back to YES should add the checkbox back
+  adjustContent(view, 'checkbox', YES);
+  checkbox(view, YES);
 });
 
 test("changing count value should update display", function() {