sproutcore 1.10.3.1 → 1.11.0.rc1

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/list/rowOffsetForContentIndex.js

@@ -5,23 +5,23 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-var content, delegate ;
+var content, delegate;
 var Delegate = SC.Object.extend(SC.CollectionRowDelegate, {
   rowHeight: 40,
   customRowHeightIndexes: SC.IndexSet.create(3).add(5,2),
   contentIndexRowHeight: function(view, content, index) {
-    return this.get('customRowHeightIndexes').contains(index) ? view.get('customRowHeight') : this.get('rowHeight');
+    return this.get('customRowHeightIndexes').contains(index) ? view.get('customRowSize') : this.get('rowHeight');
   },
-  
+
   expected: function(view) {
     var ret = [],
-        content = view.get('content'),
-        loc = view.get('length');
-        
+      content = view.get('content'),
+      loc = view.get('length');
+
     while(--loc>=0) {
       ret[loc] = this.contentIndexRowHeight(view,content,loc);
     }
-    
+
     return ret ;
   }
 });
@@ -31,86 +31,144 @@ module("SC.ListView.rowOffsetForContentIndex", {
     content = "1 2 3 4 5 6 7 8 9 0".w().map(function(x) {
       return SC.Object.create({ value: x });
     }, this);
-    
+
     // set this delegate if you want custom row heights
     delegate = Delegate.create();
-    
+
+  },
+
+  teardown: function () {
+    delegate.destroy();
+
+    content = delegate = null;
   }
 });
 
-function verifyRowOffsets(view, rowHeight, expected) {
+function verifyRowOffsets(view, rowSize, expected) {
   var loc = view.get('length'), actual, idx, cur=0;
-  
+
   for(idx=0;idx<loc;idx++) {
     actual = view.rowOffsetForContentIndex(idx);
     equals(actual, cur, "content.rowHeightForContentIndex(%@) should be expected offset".fmt(idx));
-    cur += expected ? expected[idx] : rowHeight;
+    cur += expected ? expected[idx] : rowSize;
   }
-  
+
   ok(loc>0, 'content should have some length');
-  equals(view.rowOffsetForContentIndex(loc), cur, 'content.rowHeightForContentIndex(length) should be rowHeight');  
-  
+  equals(view.rowOffsetForContentIndex(loc), cur, 'content.rowHeightForContentIndex(length) should be rowHeight');
+
 }
 
 // ..........................................................
 // BASIC TESTS
-// 
+//
 
+// @deprecated
 test("constant row heights", function() {
   var view = SC.ListView.create({ content: content, rowHeight: 40, customRowHeightIndexes: null });
   verifyRowOffsets(view, 40);
 });
 
+test("constant row sizes", function() {
+  var view = SC.ListView.create({ content: content, rowSize: 40, customRowSizeIndexes: null });
+  verifyRowOffsets(view, 40);
+});
+
+// @deprecated
 test("constant row heights with rowSpacing", function() {
   var view = SC.ListView.create({ content: content, rowHeight: 40, rowSpacing: 2, customRowHeightIndexes: null });
   verifyRowOffsets(view, 42);
 });
 
+test("constant row sizes with rowSpacing", function() {
+  var view = SC.ListView.create({ content: content, rowSize: 40, rowSpacing: 2, customRowSizeIndexes: null });
+  verifyRowOffsets(view, 42);
+});
+
+// @deprecated
 test("custom row heights", function() {
   var view = SC.ListView.create({
     content: content,
     rowHeight: 30,
-    customRowHeight: 50,
+    customRowSize: 50,
     delegate: delegate
   });
   verifyRowOffsets(view, 40, delegate.expected(view));
 });
 
-test("adding delegate should update calculation", function() {
+test("custom row sizes", function() {
   var view = SC.ListView.create({
     content: content,
     rowHeight: 30,
-    customRowHeight: 50
+    customRowSize: 50,
+    delegate: delegate
+  });
+  verifyRowOffsets(view, 40, delegate.expected(view));
+});
+
+test("adding delegate should update calculation", function() {
+  var view = SC.ListView.create({
+    content: content,
+    rowSize: 30,
+    customRowSize: 50
   });
   verifyRowOffsets(view, 30);
-  
+
   view.set('delegate', delegate);
   verifyRowOffsets(view, 40, delegate.expected(view));
 });
 
+// @deprecated
 test("changing delegate from custom to not custom should update", function() {
   var view = SC.ListView.create({
     content: content,
     rowHeight: 12,
-    customRowHeight: 50,
+    customRowSize: 50,
     delegate: delegate
   });
   verifyRowOffsets(view, 40, delegate.expected(view));
-  
+
   delegate.set('customRowHeightIndexes', null);
   verifyRowOffsets(view, 40);
 });
 
+test("changing delegate from custom to not custom should update", function() {
+  var view = SC.ListView.create({
+    content: content,
+    rowSize: 12,
+    customRowSize: 50,
+    delegate: delegate
+  });
+  verifyRowOffsets(view, 40, delegate.expected(view));
+
+  delegate.set('customRowHeightIndexes', null);
+  verifyRowOffsets(view, 40);
+});
+
+/* When rowSpacing was implemented, it was defined on the delegate, but only retrieved from the list view itself. */
+test("The value of rowSpacing is respected on row delegate", function () {
+
+  var view = SC.ListView.create({
+    content: content,
+    rowSize: 30,
+    customRowSizeIndexes: null,
+    delegate: delegate
+  });
+
+  delegate.set('rowSpacing', 2);
+
+  verifyRowOffsets(view, 42);
+});
+
 // ..........................................................
 // SPECIAL CASES
-// 
+//
 
 test("computed custom row height indexes", function() {
-  
+
   delegate = Delegate.create({
     indexes: Delegate.prototype.customRowHeightIndexes,
     useIndexes: NO,
-    
+
     customRowHeightIndexes: function() {
       return this.get('useIndexes') ? this.get('indexes') : null;
     }.property('useIndexes').cacheable()
@@ -119,13 +177,30 @@ test("computed custom row height indexes", function() {
   var view = SC.ListView.create({
     content: content,
     rowHeight: 12,
-    customRowHeight: 50,
+    customRowSize: 50,
     delegate: delegate
   });
   verifyRowOffsets(view, 40);
 
 
   delegate.set('useIndexes', YES);
-  verifyRowOffsets(view, 40, delegate.expected(view));  
+  verifyRowOffsets(view, 40, delegate.expected(view));
 });
 
+
+// ..........................................................
+// Layout direction
+//
+
+test("Layout direction works horizontally", function () {
+
+  var view = SC.ListView.create({
+    layoutDirection: SC.LAYOUT_HORIZONTAL,
+    content: content,
+    rowSize: 30,
+    customRowSizeIndexes: null,
+    delegate: delegate
+  });
+
+  verifyRowOffsets(view, 40);
+});

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/list/{rowHeightForContentIndex.js → rowSizeForContentIndex.js}

@@ -26,7 +26,7 @@ var Delegate = SC.Object.extend(SC.CollectionRowDelegate, {
   }
 });
 
-module("SC.ListView.rowHeightForContentIndex", {
+module("SC.ListView.rowSizeForContentIndex", {
   setup: function() {
     content = "1 2 3 4 5 6 7 8 9 0".w().map(function(x) {
       return SC.Object.create({ value: x });
@@ -43,22 +43,23 @@ function verifyRowHeights(view, rowHeight, expected) {
     rowSpacing = view.get('rowSpacing') || 0;
 
   ok(loc>0, 'content should have some length');
-  equals(view.rowHeightForContentIndex(loc+1), rowHeight, 'content.rowHeightForContentIndex(length+1) should be rowHeight');
+  equals(view.rowSizeForContentIndex(loc+1), rowHeight, 'content.rowSizeForContentIndex(length+1) should be rowHeight');
 
   while(--loc>=0) {
-    actual = view.rowHeightForContentIndex(loc);
+    actual = view.rowSizeForContentIndex(loc);
     if (expected) {
       totalExpected += expected[loc];
-      equals(actual, expected[loc], "content.rowHeightForContentIndex(%@) should be custom row height".fmt(loc));
+      equals(actual, expected[loc], "content.rowSizeForContentIndex(%@) should be custom row height".fmt(loc));
     } else {
       totalExpected += rowHeight;
-      equals(actual, rowHeight, 'content.rowHeightForContentIndex(%@) should be rowHeight'.fmt(loc));
+      equals(actual, rowHeight, 'content.rowSizeForContentIndex(%@) should be rowHeight'.fmt(loc));
     }
 
     totalExpected += rowSpacing;
   }
 
-  equals(totalExpected, view.get('layout').minHeight, "The minimum height of the list should match the total height of the rows.")
+  // Don't include spacing after the last item.
+  equals(totalExpected - rowSpacing, view.get('layout').height, "The height of the list should match the total height of the rows including row spacing.")
 }
 
 // ..........................................................

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/list/ui_outline.js

@@ -51,3 +51,5 @@ var pane = SC.ControlTestPane.design()
   }));
 
 module("SC.ListView - outline list", pane.standardSetup());
+
+test("What should be tested here?");

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/list/ui_row_heights.js

@@ -7,8 +7,8 @@
 /*globals module, test, ok, same, equals */
 
 /*
-  This test evaluates a list with custom row heights, outlines,
-  group views or any other non-standard behavior.
+  These tests evaluate progressive rendering within the clippingFrame on a list with
+  custom row heights, outlines, group views or any other non-standard behavior.
 */
 
 // create a fake content array.  Generates a list with whatever length you
@@ -36,56 +36,57 @@ var ContentArray = SC.Object.extend(SC.Array, {
   }
 });
 
-var pane = SC.ControlTestPane.design()
-  .add("Custom Row Heights", SC.ScrollView.design({
-    layout: { left: 0, right: 0, top: 0, height: 200 },
-    hasHorizontalScroller: NO,
-    contentView: SC.ListView.design({
-      content: ContentArray.create({ length: 100001 }),
-      customRowHeightIndexes: SC.IndexSet.create(2,5).add(10000,100),
-
-      // used for testing
-      adjustableRows: SC.IndexSet.create(0,5),
-      altRowHeight: 10,
-
-      contentIndexRowHeight: function(view, content, index) {
-        var ret =this.get('rowHeight');
-        if (!this.customRowHeightIndexes.contains(index)) return ret;
-        return this.adjustableRows.contains(index) ? this.get('altRowHeight') : ret*2;
-      },
-
-      contentValueKey: "title",
-      contentCheckboxKey: "isDone",
-      contentUnreadCountKey: "unread",
-      rowHeight: 20
-
-    })
-  }));
-
-var pane2 = SC.ControlTestPane.design()
-  .add("Custom Row Heights 2", SC.ScrollView.design({
-    layout: { left: 0, right: 0, top: 0, height: 200 },
-    hasHorizontalScroller: NO,
-    contentView: SC.ListView.design({
-      content: ContentArray.create({ length: 100 }),
-      customRowHeightIndexes: SC.IndexSet.create(0,1000),
-
-      contentIndexRowHeight: function(view, content, index) {
-        if (index % 2 === 0) {
-          return 17;
-        }
-        else {
-          return 48;
-        }
-      },
-
-      contentValueKey: "title",
-      contentCheckboxKey: "isDone",
-      contentUnreadCountKey: "unread",
-      rowHeight: 48
-
-    })
-  }));
+var pane = SC.ControlTestPane.design();
+pane.add("Custom Row Heights", SC.ListView.design({
+  // To avoid turning this into a SC.ScrollView integration test, our strategy is to override clippingFrame to allow
+  // us to control it directly, focusing our tests on the "progressive rendering within a given clipping frame" unit.
+  clippingFrame: function(key, value) {
+    return value || { x: 0, y: 0, width: 100, height: 200 };
+  }.property('frame', 'parentView').cacheable(),
+
+  content: ContentArray.create({ length: 100001 }),
+  customRowSizeIndexes: SC.IndexSet.create(2,5).add(10000,100),
+
+  // used for testing
+  adjustableRows: SC.IndexSet.create(0,5),
+  altRowHeight: 10,
+
+  contentIndexRowHeight: function(view, content, index) {
+    var ret = this.get('rowHeight');
+    if (!this.customRowSizeIndexes.contains(index)) return ret;
+    else return this.adjustableRows.contains(index) ? this.get('altRowHeight') : ret * 2;
+  },
+
+  contentValueKey: "title",
+  contentCheckboxKey: "isDone",
+  contentUnreadCountKey: "unread",
+  rowHeight: 20
+}));
+pane.add("Custom Row Heights 2", SC.ListView.design({
+  // To avoid turning this into a SC.ScrollView integration test, our strategy is to override clippingFrame to allow
+  // us to control it directly, focusing our tests on the "progressive rendering within a given clipping frame" unit.
+  clippingFrame: function(key, value) {
+    return value || { x: 0, y: 0, width: 100, height: 200 };
+  }.property('frame', 'parentView').cacheable(),
+
+  content: ContentArray.create({ length: 100 }),
+  customRowSizeIndexes: SC.IndexSet.create(0,1000),
+
+  contentIndexRowHeight: function(view, content, index) {
+    if (index % 2 === 0) {
+      return 17;
+    }
+    else {
+      return 48;
+    }
+  },
+
+  contentValueKey: "title",
+  contentCheckboxKey: "isDone",
+  contentUnreadCountKey: "unread",
+  rowHeight: 48
+
+}));
 
 function verifyChildViewsMatch(views, set) {
   var indexes = set.clone();
@@ -109,12 +110,10 @@ function verifyChildViewsMatch(views, set) {
 module("SC.ListView - ui_row_heights", {
   setup: function () {
     pane.standardSetup().setup();
-    pane2.standardSetup().setup();
   },
 
   teardown: function () {
     pane.standardSetup().teardown();
-    pane2.standardSetup().teardown();
   }
 });
 
@@ -123,35 +122,34 @@ module("SC.ListView - ui_row_heights", {
 //
 
 test("rendering only incremental portion", function() {
-  var listView = pane.view("Custom Row Heights").contentView;
+  var listView = pane.view("Custom Row Heights");
   same(listView.get("nowShowing"), SC.IndexSet.create(0, 10), 'nowShowing should be smaller IndexSet');
   equals(listView.get('childViews').length, listView.get('nowShowing').get('length'), 'should have same number of childViews as nowShowing length');
 });
 
-test("scrolling by small amount should update incremental rendering", function() {
-  var scrollView = pane.view('Custom Row Heights'),
-      listView   = scrollView.contentView,
+test("changing clippingFrame should update incremental rendering", function() {
+  var listView = pane.view('Custom Row Heights'),
       exp;
 
   same(listView.get('nowShowing'), SC.IndexSet.create(0,10), 'precond - nowShowing has incremental range');
 
-  // SCROLL DOWN ONE LINE
+  // MOVE CLIPPING FRAME DOWN ONE LINE
   SC.run(function() {
-    scrollView.scrollTo(0,61);
+    listView.set('clippingFrame', { x: 0, y: 61, width: 100, height: 200 });
   });
 
-  // top line should have scrolled out of view
+  // top line should now be clipped out of view
   exp = SC.IndexSet.create(4,9);
   same(listView.get('nowShowing'), exp, 'nowShowing should change to reflect new clippingFrame');
 
   verifyChildViewsMatch(listView.childViews, exp);
 
-  // SCROLL DOWN ANOTHER LINE
+  // MOVE CLIPPING FRAME DOWN ANOTHER LINE
   SC.run(function() {
-    scrollView.scrollTo(0,83);
+    listView.set('clippingFrame', { x: 0, y: 83, width: 100, height: 200 });
   });
 
-  // top line should have scrolled out of view
+  // next line should be clipped out of view
   exp = SC.IndexSet.create(5,9);
   same(listView.get('nowShowing'), exp, 'nowShowing should change to reflect new clippingFrame');
 
@@ -160,10 +158,10 @@ test("scrolling by small amount should update incremental rendering", function()
 
   // SCROLL UP ONE LINE
   SC.run(function() {
-    scrollView.scrollTo(0,66);
+    listView.set('clippingFrame', { x: 0, y: 66, width: 100, height: 200 });
   });
 
-  // top line should have scrolled out of view
+  // top line should no longer be clipped
   exp = SC.IndexSet.create(4,9);
   same(listView.get('nowShowing'), exp, 'nowShowing should change to reflect new clippingFrame');
 
@@ -172,14 +170,13 @@ test("scrolling by small amount should update incremental rendering", function()
 });
 
 test("the 'nowShowing' property should be correct when scrolling", function() {
-  var scrollView = pane2.view('Custom Row Heights 2'),
-      listView   = scrollView.contentView,
+  var listView = pane.view('Custom Row Heights 2'),
       correctSet = SC.IndexSet.create(1, 7);
 
-  // Scroll to point 36, which demonstrates a problem with the older list view
+  // Clip down to point 36 to demonstrate a problem with the older list view
   // contentIndexesInRect code.
   SC.run(function() {
-    scrollView.scrollTo(0,36);
+    listView.set('clippingFrame', { x: 0, y: 36, width: 100, height: 200 });
   });
   same(listView.get("nowShowing"), correctSet, 'nowShowing should %@'.fmt(correctSet));
 });
@@ -188,17 +185,15 @@ test("the 'nowShowing' property should be correct when scrolling", function() {
 // CHANGING ROW HEIGHTS
 //
 
-test("manually calling rowHeightDidChangeForIndexes()", function() {
-  var scrollView = pane.view('Custom Row Heights'),
-      listView   = scrollView.contentView,
-      exp;
+test("manually calling rowSizeDidChangeForIndexes()", function() {
+  var listView = pane.view('Custom Row Heights');
 
   same(listView.get('nowShowing'), SC.IndexSet.create(0,10), 'precond - nowShowing has incremental range');
 
   // adjust row height and then invalidate a portion range
   SC.run(function() {
     listView.set('altRowHeight', 80);
-    listView.rowHeightDidChangeForIndexes(listView.adjustableRows);
+    listView.rowSizeDidChangeForIndexes(listView.adjustableRows);
   });
 
   // nowShowing should adjust