sproutcore 0.9.17 → 0.9.18

data/frameworks/sproutcore/tests/views/collection/source_list_rendering.rhtml

@@ -0,0 +1,232 @@
+<% content_for('final') do %>
+<script>
+
+// create some item data...
+[
+  { guid: '1001', name: 'item one', group: '1' },
+  { guid: '1002', name: 'item two', group: '1' },
+  { guid: '1003', name: 'item three', group: '2' },
+  { guid: '1004', name: 'item four', group: '3' },
+  { guid: '1005', name: 'item five', group: '3' },
+  { guid: '1006', name: 'item six', group: '3' }
+].each(function(o){ SC.Store.addRecord(SC.Record.create(o)); });
+
+// a collection to hold the items...
+testCollection = SC.Record.collection();
+testCollection.refresh();
+
+// a controller for the collection...
+testController = SC.CollectionController.create();
+
+Test.context("A grouped SC.SourceListView with its content set to a SC.CollectionController", {
+
+  "Item views should be the same width as the SC.CollectionView": function()
+  {
+    var widthOfFirstItemView = function() {
+      var itemView = testSourceListView.get('itemViews').first() ;
+      return (itemView) ? itemView.get('frame').width : null ;
+    } ;
+    
+    widthOfFirstItemView().shouldEqual(testSourceListView.get('frame').width) ;
+
+    SC.Store.addRecord( SC.Record.create({ guid: '0999', name: 'item zero', group: '1' }) );
+    
+    widthOfFirstItemView().shouldEqual(testSourceListView.get('frame').width) ;
+  },
+	  
+	"Group views should be the same width as the SC.CollectionView": function()
+	{
+	    var widthOfFirstGroupView = function() {
+	      var groupView = testSourceListView.get('groupViews').first() ;
+	      return (groupView) ? groupView.get('frame').width : null ;
+	    } ;
+	    
+	    widthOfFirstGroupView().shouldEqual(testSourceListView.get('frame').width) ;
+	},	
+	
+  // setup: function()
+  // {
+  //   // add a scroll view wrapper.
+  //   scrollView = SC.ScrollView.create() ;
+  //   scrollView.set('frame', { x: 10, y: 10, width: 100, height: 100 });
+  //   SC.window.appendChild(scrollView);
+  //   
+  //   // create the view...
+  //   testSourceListView = SC.ListView.extend({
+  //     contentValueKey: 'name',
+  //      groupBy: 'group',
+  //     contentBinding: 'testController.arrangedObjects',
+  //     selectionBinding: 'testController.selection'
+  //   }).create();
+  // 
+  //   scrollView.set('content', testSourceListView) ;
+  // },
+  // 
+  // teardown: function()
+  // {
+  //   // tell SC.Store to dump all the records... 
+  //   // otherwise, since SC.Store is shared across all tests (yuk!) we'll get shared fixtues
+  //   testCollection.get('records').each(function(r){ SC.Store.removeRecord(r); });
+  // 
+  //   // remove the view from SC.window... again, no shared fixtures...
+  //   testSourceListView.removeFromParent();
+  //   scrollView.removeFromParent() ;
+  // 
+  //   delete testSourceListView;
+  //   delete testCollection;
+  //   delete testController;
+  //   delete scrollView ;
+  // }
+  
+  setup: function()
+  {
+    // add a scroll view wrapper.
+    scrollView = SC.ScrollView.create() ;
+    scrollView.set('frame', { x: 10, y: 10, width: 100, height: 30 }) ;
+    SC.window.appendChild(scrollView) ;
+    
+    // create the view...
+    testSourceListView = SC.SourceListView.create({
+      contentValueKey: 'name',
+      groupBy: 'group',
+      contentBinding: 'testController.arrangedObjects',
+      selectionBinding: 'testController.selection'
+    }) ;
+    scrollView.set('content', testSourceListView) ;
+
+    testController.set('content', testCollection) ;
+  },
+  
+  teardown: function()
+  {
+    // remove the view from SC.window
+    testSourceListView.removeFromParent() ;
+    scrollView.removeFromParent() ;
+    
+    delete testSourceListView ;
+    delete scrollView ;
+    
+    testController.set('content', null) ;
+  }
+  
+});
+
+Test.context("A grouped SC.SourceListView with its content set to a SC.CollectionController, after the containing SC.ScrollView has been resized", {
+  
+
+  "Item views should be the same width as the SC.CollectionView": function()
+  {
+    var widthOfFirstItemView = function() {
+      var itemView = testSourceListView.get('itemViews').first() ;
+      return (itemView) ? itemView.get('frame').width : null ;
+    } ;
+    
+    widthOfFirstItemView().shouldEqual(testSourceListView.get('frame').width) ;
+
+    SC.Store.addRecord( SC.Record.create({ guid: '0999', name: 'item zero', group: '1' }) );
+    
+    widthOfFirstItemView().shouldEqual(testSourceListView.get('frame').width) ;
+  },
+  
+	"Group views should be the same width as the SC.CollectionView": function()
+	{
+    var widthOfFirstGroupView = function() {
+      var groupView = testSourceListView.get('groupViews').first() ;
+      return (groupView) ? groupView.get('frame').width : null ;
+    } ;
+    
+    widthOfFirstGroupView().shouldEqual(testSourceListView.get('frame').width) ;
+	},	
+	
+  // setup: function()
+  // {
+  //   // add a scroll view wrapper.
+  //   scrollView = SC.ScrollView.create() ;
+  //   scrollView.set('frame', { x: 10, y: 10, width: 100, height: 100 });
+  //   SC.window.appendChild(scrollView);
+  //   
+  //   // create the view...
+  //   testSourceListView = SC.SourceListView.extend({
+  //     contentValueKey: 'name',
+  //      groupBy: 'group',
+  //     contentBinding: 'testController.arrangedObjects',
+  //     selectionBinding: 'testController.selection'
+  //   }).create();
+  // 
+  //   scrollView.set('content', testSourceListView) ;
+  //   
+  //   // create some item data...
+  //   [
+  //     { guid: '1001', name: 'item one', group: '1' },
+  //     { guid: '1002', name: 'item two', group: '1' },
+  //     { guid: '1003', name: 'item three', group: '2' },
+  //     { guid: '1004', name: 'item four', group: '3' },
+  //     { guid: '1005', name: 'item five', group: '3' },
+  //     { guid: '1006', name: 'item six', group: '3' }
+  //   ].each(function(o){ SC.Store.addRecord(SC.Record.create(o)); });
+  //   
+  //   // a collection to hold the items...
+  //   testCollection = SC.Record.collection();
+  //   testCollection.refresh();
+  // 
+  //   // a controller for the collection...
+  //   testController = SC.CollectionController.create();
+  //   testController.set('content', testCollection);
+  // 
+  //    // resize the scroll view
+  //    scrollView.viewFrameWillChange()
+  //    scrollView.set('frame', {x: 10, y: 10, width: 200, height: 100})
+  //    scrollView.viewFrameDidChange()
+  //   
+  // },
+  // teardown: function()
+  // {
+  //   // tell SC.Store to dump all the records... 
+  //   // otherwise, since SC.Store is shared across all tests (yuk!) we'll get shared fixtues
+  //   testCollection.get('records').each(function(r){ SC.Store.removeRecord(r); });
+  // 
+  //   // remove the view from SC.window... again, no shared fixtures...
+  //   testSourceListView.removeFromParent();
+  //   scrollView.removeFromParent() ;
+  // 
+  //   delete testSourceListView;
+  //   delete testCollection;
+  //   delete testController;
+  //   delete scrollView ;
+  // }
+  
+  setup: function()
+  {
+    // add a scroll view wrapper.
+    scrollView = SC.ScrollView.create() ;
+    scrollView.set('frame', { x: 10, y: 10, width: 100, height: 30 }) ;
+    SC.window.appendChild(scrollView) ;
+    
+    // create the view...
+    testSourceListView = SC.SourceListView.create({
+      contentValueKey: 'name',
+      groupBy: 'group',
+      contentBinding: 'testController.arrangedObjects',
+      selectionBinding: 'testController.selection'
+    }) ;
+    scrollView.set('content', testSourceListView) ;
+
+    testController.set('content', testCollection) ;
+  },
+  
+  teardown: function()
+  {
+    // remove the view from SC.window
+    testSourceListView.removeFromParent() ;
+    scrollView.removeFromParent() ;
+    
+    delete testSourceListView ;
+    delete scrollView ;
+    
+    testController.set('content', null) ;
+  }
+  
+});
+
+</script>
+<% end %>

data/frameworks/sproutcore/tests/views/view/frame.rhtml

@@ -15,8 +15,8 @@ Test.context("CASE 1: Auto-layout view with no padding & no border", {
   "frame should reflect current offset settings": function() {
     var el = this.v.rootElement ;
     var f = { x: el.offsetTop, y: el.offsetLeft, width: el.offsetWidth, height: el.offsetHeight };
-    console.log(this.v.get('frame').x) ;
-    console.log('this.frame', this.v.get('frame')) ;
+    // console.log(this.v.get('frame').x) ;
+    // console.log('this.frame', this.v.get('frame')) ;
     SC.rectsEqual(f, this.v.get('frame')).shouldEqual(true) ;
   },
   

data/frameworks/sproutcore/tests/views/view/innerFrame.rhtml

@@ -10,91 +10,91 @@
 
 <script>
 
-// Test.context("CASE 1: Auto-layout view with no padding & no border", {
-//   
-//   // IMPORTANT:  This test validates that innerFrame works even on elements in
-//   // IE when hasLayout = false.  Make sure you do not edit the CSS or other
-//   // properties for this test in such a way that it would give the test 
-//   // element hasLayout.  
-//   "frame should == innerFrame": function() {
-// 
-//     // verify hasLayout is false in IE.
-//     if (SC.Platform.IE) {
-//       var hasLayout = v.rootElement.currentStyle.hasLayout ;
-//       assertEqual(hasLayout, false, 'element.hasLayout MUST be false in IE');
-//     }
-//     
-//     SC.rectsEqual(v.get('frame'), v.get('innerFrame')).shouldEqual(true) ;
-//   },
-//   
-//   "frame & innerFrame should change when CSS changed and viewFrameDidChange() is called": function() {
-//     var origFrame = this.v.get('frame') ;
-//     var origInnerFrame = this.v.get('innerFrame') ;
-//     
-//     this.v.addClassName('half') ;
-//     this.v.viewFrameDidChange() ;
-//     
-//     SC.rectsEqual(this.v.get('frame'), origFrame).shouldEqual(false) ;    
-//     SC.rectsEqual(this.v.get('innerFrame'), origInnerFrame).shouldEqual(false) ;   
-//     
-//     this.v.removeClassName('half') ; //reset 
-//   },
-//   
-//   setup: function() { this.v = SC.page.get('case1'); }
-//   
-// });
-// 
-// 
-// // CASE 2: Auto-layout of view with padding
-// // - same as Case 1, except innerFrame = frame less padding
-// CASE2_OFFSET = 2;
-// Test.context("CASE 2: Auto-layout view with padding & border", {
-//   
-//   "innerFrame should == frame less border": function() {
-//     var f = v.get('frame') ;
-//     f.x += CASE2_OFFSET; f.y += CASE2_OFFSET;
-//     f.width -= (CASE2_OFFSET*2); f.height -= (CASE2_OFFSET*2) ;
-//     //console.log('f: %@ if: %@'.fmt($H(f).inspect(), $H(this.v.get('innerFrame')).inspect()));
-//     
-//     SC.rectsEqual(f, v.get('innerFrame')).shouldEqual(true) ;
-//   },
-//   
-//   "frame & innerFrame should change when CSS changed and viewFrameDidChange is called.; innerFrame should maintain proportion": function() {
-//     var origFrame = v.get('frame') ;
-//     var origInnerFrame = v.get('innerFrame') ;
-// 
-//     // verify that frames change
-//     v.addClassName('half') ;
-//     v.viewFrameDidChange() ;
-//     
-//     SC.rectsEqual(v.get('frame'), origFrame).shouldEqual(false) ;    
-//     SC.rectsEqual(v.get('innerFrame'), origInnerFrame).shouldEqual(false) ;    
-// 
-//     // verify that innerFrame changes correctly.
-//     var f = this.v.get('frame') ;
-//     f.x += CASE2_OFFSET; f.y += CASE2_OFFSET;
-//     f.width -= (CASE2_OFFSET*2); f.height -= (CASE2_OFFSET*2) ;
-//     SC.rectsEqual(f, v.get('innerFrame')).shouldEqual(true) ;
-//     
-//     v.removeClassName('half') ;
-//     
-//   },
-//   
-//   "changing border should change innerFrame": function() {
-//     v.setStyle({ border: '5px red solid' }) ;
-//     v.viewFrameDidChange() ;
-//     var f = v.get('frame') ;
-//     f.x += 5; f.y += 5;
-//     f.width -= 10; f.height -= 10 ;
-//     
-//     var got = v.get('innerFrame') ;
-//     console.log('expected: %@ got: %@'.fmt($H(f).inspect(), $H(got).inspect()));
-//     SC.rectsEqual(f, got).shouldEqual(true) ;
-//   },
-//   
-//   setup: function() { this.v = SC.page.get('case2'); }
-//   
-// });
+Test.context("CASE 1: Auto-layout view with no padding & no border", {
+  
+  // IMPORTANT:  This test validates that innerFrame works even on elements in
+  // IE when hasLayout = false.  Make sure you do not edit the CSS or other
+  // properties for this test in such a way that it would give the test 
+  // element hasLayout.  
+  "frame should == innerFrame": function() {
+
+    // verify hasLayout is false in IE.
+    if (SC.Platform.IE) {
+      var hasLayout = v.rootElement.currentStyle.hasLayout ;
+      assertEqual(hasLayout, false, 'element.hasLayout MUST be false in IE');
+    }
+    
+    SC.rectsEqual(v.get('frame'), v.get('innerFrame')).shouldEqual(true) ;
+  },
+  
+  "frame & innerFrame should change when CSS changed and viewFrameDidChange() is called": function() {
+    var origFrame = this.v.get('frame') ;
+    var origInnerFrame = this.v.get('innerFrame') ;
+    
+    this.v.addClassName('half') ;
+    this.v.viewFrameDidChange() ;
+    
+    SC.rectsEqual(this.v.get('frame'), origFrame).shouldEqual(false) ;    
+    SC.rectsEqual(this.v.get('innerFrame'), origInnerFrame).shouldEqual(false) ;   
+    
+    this.v.removeClassName('half') ; //reset 
+  },
+  
+  setup: function() { this.v = SC.page.get('case1'); }
+  
+});
+
+
+// CASE 2: Auto-layout of view with padding
+// - same as Case 1, except innerFrame = frame less padding
+CASE2_OFFSET = 2;
+Test.context("CASE 2: Auto-layout view with padding & border", {
+  
+  "innerFrame should == frame less border": function() {
+    var f = v.get('frame') ;
+    f.x += CASE2_OFFSET; f.y += CASE2_OFFSET;
+    f.width -= (CASE2_OFFSET*2); f.height -= (CASE2_OFFSET*2) ;
+    //console.log('f: %@ if: %@'.fmt($H(f).inspect(), $H(this.v.get('innerFrame')).inspect()));
+    
+    SC.rectsEqual(f, v.get('innerFrame')).shouldEqual(true) ;
+  },
+  
+  "frame & innerFrame should change when CSS changed and viewFrameDidChange is called.; innerFrame should maintain proportion": function() {
+    var origFrame = v.get('frame') ;
+    var origInnerFrame = v.get('innerFrame') ;
+
+    // verify that frames change
+    v.addClassName('half') ;
+    v.viewFrameDidChange() ;
+    
+    SC.rectsEqual(v.get('frame'), origFrame).shouldEqual(false) ;    
+    SC.rectsEqual(v.get('innerFrame'), origInnerFrame).shouldEqual(false) ;    
+
+    // verify that innerFrame changes correctly.
+    var f = this.v.get('frame') ;
+    f.x += CASE2_OFFSET; f.y += CASE2_OFFSET;
+    f.width -= (CASE2_OFFSET*2); f.height -= (CASE2_OFFSET*2) ;
+    SC.rectsEqual(f, v.get('innerFrame')).shouldEqual(true) ;
+    
+    v.removeClassName('half') ;
+    
+  },
+  
+  "changing border should change innerFrame": function() {
+    v.setStyle({ border: '5px red solid' }) ;
+    v.viewFrameDidChange() ;
+    var f = v.get('frame') ;
+    f.x += 5; f.y += 5;
+    f.width -= 10; f.height -= 10 ;
+    
+    var got = v.get('innerFrame') ;
+    console.log('expected: %@ got: %@'.fmt($H(f).inspect(), $H(got).inspect()));
+    SC.rectsEqual(f, got).shouldEqual(true) ;
+  },
+  
+  setup: function() { this.v = SC.page.get('case2'); }
+  
+});
 
 // CASE 3: Manual-layout view with some padding and border
 // - innerFrame should update at frame is changed.
@@ -171,9 +171,11 @@ Test.context("CASE 4: Positioned Child view inside of view with overflow = hidde
   },
   
   "nested innerframe origin should be 1,1 inside of parent": function() {
+    console.log('running');
     var f = this.v.child.nestedChild.get('innerFrame') ;
     f.x.shouldEqual(1) ;
     f.y.shouldEqual(1) ;
+    console.log('done');
   },
   
   "setting child frame should reflect in new frame value + border offset": function() {

data/frameworks/sproutcore/tests/views/view/scrollFrame.rhtml

@@ -24,7 +24,6 @@ Test.context("CASE 1: Non-scrollable view - all view fits within content", {
     // console.log('----') ;
     // console.log('f:' + $H(f).inspect()) ;
     // console.log('scroll:' + $H(this.v.get('scrollFrame')).inspect()) ;
-    // console.log('innerFrame:' + $H(this.v.get('innerFrame')).inspect()) ;
     // console.log('frame:' + $H(this.v.get('frame')).inspect()) ;
     
     SC.rectsEqual(f, this.v.get('scrollFrame')).shouldEqual(true) ;
@@ -61,11 +60,11 @@ Test.context("CASE 2: Non-scrollable view with hidden overflow content", {
     var f = this.v.get('innerFrame') ;
     f.x = f.y = 0 ; f.height = CHILD_HEIGHT ;
     
-    console.log('CASE 2 ----') ;
-    console.log('f:' + $H(f).inspect()) ;
-    console.log('scroll:' + $H(this.v.get('scrollFrame')).inspect()) ;
-    console.log('innerFrame:' + $H(this.v.get('innerFrame')).inspect()) ;
-    console.log('frame:' + $H(this.v.get('frame')).inspect()) ;
+    // console.log('CASE 2 ----') ;
+    // console.log('f:' + $H(f).inspect()) ;
+    // console.log('scroll:' + $H(this.v.get('scrollFrame')).inspect()) ;
+    // console.log('innerFrame:' + $H(this.v.get('innerFrame')).inspect()) ;
+    // console.log('frame:' + $H(this.v.get('frame')).inspect()) ;
     
     SC.rectsEqual(f, this.v.get('scrollFrame')).shouldEqual(true) ;
   },
@@ -112,11 +111,11 @@ Test.context("CASE 3: Scrollable view with hidden overflow content", {
     var f = this.v.get('innerFrame') ;
     f.x = f.y = 0 ; f.height = CHILD_HEIGHT ;
     
-    console.log('CASE 3 ----') ;
-    console.log('f:' + $H(f).inspect()) ;
-    console.log('scroll:' + $H(this.v.get('scrollFrame')).inspect()) ;
-    console.log('innerFrame:' + $H(this.v.get('innerFrame')).inspect()) ;
-    console.log('frame:' + $H(this.v.get('frame')).inspect()) ;
+    // console.log('CASE 3 ----') ;
+    // console.log('f:' + $H(f).inspect()) ;
+    // console.log('scroll:' + $H(this.v.get('scrollFrame')).inspect()) ;
+    // console.log('innerFrame:' + $H(this.v.get('innerFrame')).inspect()) ;
+    // console.log('frame:' + $H(this.v.get('frame')).inspect()) ;
     
     SC.rectsEqual(f, this.v.get('scrollFrame')).shouldEqual(true) ;
   },
@@ -164,11 +163,11 @@ Test.context("CASE 4: Scrollable view with scrollbar and vertical overflow conte
     var f = this.v.get('innerFrame') ;
     f.x = f.y = 0 ; f.height = CHILD_HEIGHT ;
     
-    console.log('CASE 4 ----') ;
-    console.log('f:' + $H(f).inspect()) ;
-    console.log('scroll:' + $H(this.v.get('scrollFrame')).inspect()) ;
-    console.log('innerFrame:' + $H(this.v.get('innerFrame')).inspect()) ;
-    console.log('frame:' + $H(this.v.get('frame')).inspect()) ;
+    // console.log('CASE 4 ----') ;
+    // console.log('f:' + $H(f).inspect()) ;
+    // console.log('scroll:' + $H(this.v.get('scrollFrame')).inspect()) ;
+    // console.log('innerFrame:' + $H(this.v.get('innerFrame')).inspect()) ;
+    // console.log('frame:' + $H(this.v.get('frame')).inspect()) ;
     
     SC.rectsEqual(f, this.v.get('scrollFrame')).shouldEqual(true) ;
   },
@@ -228,11 +227,11 @@ Test.context("CASE 5: Scrollable view with scrollbar and horizontal overflow con
     var f = this.v.get('innerFrame') ;
     f.x = f.y = 0 ; f.width = CHILD_WIDTH ;
     
-    console.log('CASE 5 ----') ;
-    console.log('f:' + $H(f).inspect()) ;
-    console.log('scroll:' + $H(this.v.get('scrollFrame')).inspect()) ;
-    console.log('innerFrame:' + $H(this.v.get('innerFrame')).inspect()) ;
-    console.log('frame:' + $H(this.v.get('frame')).inspect()) ;
+    // console.log('CASE 5 ----') ;
+    // console.log('f:' + $H(f).inspect()) ;
+    // console.log('scroll:' + $H(this.v.get('scrollFrame')).inspect()) ;
+    // console.log('innerFrame:' + $H(this.v.get('innerFrame')).inspect()) ;
+    // console.log('frame:' + $H(this.v.get('frame')).inspect()) ;
     
     SC.rectsEqual(f, this.v.get('scrollFrame')).shouldEqual(true) ;
   },
@@ -295,11 +294,11 @@ Test.context("CASE 6: Scrollable view with scrollbar and horizontal overflow con
     f.x = f.y = 0 ; f.width = CHILD_WIDTH ;
     f.height = CHILD_HEIGHT ;
     
-    console.log('CASE 6 ----') ;
-    console.log('f:' + $H(f).inspect()) ;
-    console.log('scroll:' + $H(this.v.get('scrollFrame')).inspect()) ;
-    console.log('innerFrame:' + $H(this.v.get('innerFrame')).inspect()) ;
-    console.log('frame:' + $H(this.v.get('frame')).inspect()) ;
+    // console.log('CASE 6 ----') ;
+    // console.log('f:' + $H(f).inspect()) ;
+    // console.log('scroll:' + $H(this.v.get('scrollFrame')).inspect()) ;
+    // console.log('innerFrame:' + $H(this.v.get('innerFrame')).inspect()) ;
+    // console.log('frame:' + $H(this.v.get('frame')).inspect()) ;
     
     SC.rectsEqual(f, this.v.get('scrollFrame')).shouldEqual(true) ;
   },