sproutit-sproutcore 1.0.20090721145236 → 1.0.20090721145251

data/frameworks/sproutcore/frameworks/deprecated/tests/views/collection/base.rhtml

@@ -0,0 +1,298 @@
+<% content_for('final') do %>
+<script>
+
+// create some item data...
+[
+ { guid: '1001', name: 'item one' },
+ { guid: '1002', name: 'item two' },
+ { guid: '1003', name: 'item three' },
+ { guid: '1004', name: 'item four' },
+ { guid: '1005', name: 'item five' },
+ { guid: '1006', name: 'item six' }
+].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 SC.CollectionView with it's content set to a SC.CollectionController 1", {
+  
+  "Should scroll to the selected item": function()
+  {
+    equals(0, testCollectionView.get('rootElement').scrollTop, "scrollTop") ;
+    testCollectionView.scrollToContent( testCollection.get('records').last() );
+
+    equals(3, testCollectionView.get('itemViews').length, 'itemViews.length') ;
+    equals(30, scrollView.get('rootElement').scrollTop, "scrollTop 2") ;
+  },
+  
+  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...
+    testCollectionView = SC.ListView.create({
+      contentValueKey: 'name',
+      contentBinding: 'testController.arrangedObjects',
+      selectionBinding: 'testController.selection'
+    }) ;
+    scrollView.set('content', testCollectionView) ;
+
+    testController.set('content', testCollection) ;
+    SC.Binding.flushPendingChanges(); 
+  },
+  
+  teardown: function()
+  {
+    // remove the view from SC.window
+    testCollectionView.removeFromParent() ;
+    scrollView.removeFromParent() ;
+    
+    delete testCollectionView ;
+    delete scrollView ;
+    
+    testController.set('content', null) ;
+    SC.Binding.flushPendingChanges(); 
+  }
+  
+});
+
+Test.context("A SC.CollectionView with it's content set to a SC.CollectionController 2", {
+  
+  "Should not scroll to the selected item if it's already fully visible": function()
+  {
+    scrollView.get('rootElement').scrollTop.shouldEqual(0);
+    testCollectionView.scrollToContent( testCollection.get('records')[1] );
+    scrollView.get('rootElement').scrollTop.shouldEqual(0);
+  },
+
+  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...
+    testCollectionView = SC.ListView.create({
+      contentValueKey: 'name',
+      contentBinding: 'testController.arrangedObjects',
+      selectionBinding: 'testController.selection'
+    }) ;
+    scrollView.set('content', testCollectionView) ;
+
+    testController.set('content', testCollection) ;
+  },
+  
+  teardown: function()
+  {
+    // remove the view from SC.window
+    testCollectionView.removeFromParent() ;
+    scrollView.removeFromParent() ;
+    
+    delete testCollectionView ;
+    delete scrollView ;
+    
+    testController.set('content', null) ;
+  }
+  
+});
+
+Test.context("A SC.CollectionView with it's content set to a SC.CollectionController 3", {
+  
+  "Should contain the same number of visible item views as it's controller has records": function()
+  {
+    equals(2, testCollectionView.get("itemViews").length, "itemViews.length") ;
+  },
+  
+  "Should update it's item views as it's controller is updated": function()
+   {
+     var valueOfFirstItemView = function() {
+       var itemView = testCollectionView.get('itemViews')[0] ;
+       return (itemView) ? itemView.get('content').get('guid') : null ;
+     } ;
+     
+     equals('1001', valueOfFirstItemView(), 'valueOfFirstItemView'); ;
+     
+     var rec = SC.Record.create({ guid: '0999', name: 'item zero' });
+     SC.Store.addRecord( rec );
+     SC.Binding.flushPendingChanges();
+     
+     equals('0999', valueOfFirstItemView(), 'valueOfFirstItemView'); ;
+     equals(2, testCollectionView.get('itemViews').length, 'itemViews.length 2') ;
+     
+     rec.destroy();
+     SC.Store.removeRecord(rec);
+     SC.Binding.flushPendingChanges();
+
+     delete rec;
+   },
+   
+  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...
+    testCollectionView = SC.ListView.create({
+      contentValueKey: 'name',
+      contentBinding: 'testController.arrangedObjects',
+      selectionBinding: 'testController.selection'
+    }) ;
+    scrollView.set('content', testCollectionView) ;
+
+    testController.set('content', testCollection) ;
+    SC.Binding.flushPendingChanges() ;
+  },
+  
+  teardown: function()
+  {
+    // remove the view from SC.window
+    testCollectionView.removeFromParent() ;
+    scrollView.removeFromParent() ;
+    
+    delete testCollectionView ;
+    delete scrollView ;
+    
+    testController.set('content', null) ;
+  }
+  
+});
+
+Test.context("A SC.CollectionView with it's content set to a SC.ArrayController", {
+  "Should contain the same number of item views as it's controller has records": function()
+  {
+    this.controller.get('length').shouldEqual(6);
+    this.view.get('itemViews').length.shouldEqual(6);
+  },
+  "Should update it's item views as it's controller is updated": function()
+  {
+    this.view.get('itemViews').length.shouldEqual(6);
+    this.controller.pushObject({ guid: '1007', name: 'item seven' });
+    this.view.get('itemViews').length.shouldEqual(7);
+    this.controller.popObject();
+    this.view.get('itemViews').length.shouldEqual(6);
+  },
+
+  setup: function()
+  {
+    // create the view...
+    this.view = SC.CollectionView.create();
+    SC.window.appendChild(this.view);
+    
+    // create some item data...
+    this.array = [
+      { guid: '1001', name: 'item one' },
+      { guid: '1002', name: 'item two' },
+      { guid: '1003', name: 'item three' },
+      { guid: '1004', name: 'item four' },
+      { guid: '1005', name: 'item five' },
+      { guid: '1006', name: 'item six' }
+    ];
+    
+    this.controller = SC.ArrayController.create();
+    this.controller.set('content', this.array);
+    this.view.set('content', this.controller);
+  },
+  teardown: function()
+  {
+    // remove the view from SC.window
+    this.view.removeFromParent();
+
+    delete this.view;
+    delete this.array;
+    delete this.controller;
+  }
+});
+
+Test.context("SC.CollectionView selection delegate support", {
+  "Should use isSelectable to determine selectability in the absence of a delegate": function () {
+    this.view.set('delegate', null);
+    this.view.set('isSelectable', NO);
+    this.view.selectItems([this.array[0], this.array[1]]);
+    this.view.get('selection').length.shouldEqual(0);
+
+    this.view.set('isSelectable', YES);
+    this.view.selectItems([this.array[0], this.array[1]]);
+    this.view.get('selection').length.shouldEqual(2);
+  },
+
+  "Should query the delegate for selectability": function () {
+    this.view.selectItems([this.array[0], this.array[1]]);
+    this.view.get('selection').shouldEqualEnum([this.array[1]]);
+  },
+
+  "Should select the next selectable item": function () {
+    this.view.selectItems([this.array[2]]);
+    this.view.selectNextItem();
+    this.view.get('selection').shouldEqualEnum([this.array[4]]);
+  },
+
+  "Should select the previous selectable item": function () {
+    this.view.selectItems([this.array[2]]);
+    this.view.selectPreviousItem();
+    this.view.get('selection').shouldEqualEnum([this.array[1]]);
+  },
+
+  "Should retain selection when no previous item is selectable": function () {
+    this.view.selectItems([this.array[1]]);
+    this.view.selectPreviousItem();
+    this.view.get('selection').shouldEqualEnum([this.array[1]]);
+  },
+
+  "Should retain selection when no further item is selectable": function () {
+    this.view.selectItems([this.array[4]]);
+    this.view.selectNextItem();
+    this.view.get('selection').shouldEqualEnum([this.array[4]]);
+  },
+
+  setup: function () {
+    // create the view...
+    this.view = SC.CollectionView.create();
+    SC.window.appendChild(this.view);
+
+    // create some item data...
+    this.array = [
+      { guid: '1001', name: 'item one', canSelect: NO },
+      { guid: '1002', name: 'item two', canSelect: YES },
+      { guid: '1003', name: 'item three', canSelect: YES },
+      { guid: '1004', name: 'item four', canSelect: NO },
+      { guid: '1005', name: 'item five', canSelect: YES },
+      { guid: '1006', name: 'item six', canSelect: NO }
+    ];
+
+    this.delegate = SC.Object.create({
+      collectionViewShouldSelectItem: function (view, item) {
+        return item.canSelect;
+      }
+    });
+
+    this.controller = SC.ArrayController.create();
+    this.controller.set('content', this.array);
+    this.view.set('isSelectable', YES);
+    this.view.set('content', this.controller);
+    this.view.set('delegate', this.delegate);
+  },
+
+  teardown: function () {
+    // remove the view from SC.window
+    this.view.removeFromParent();
+
+    delete this.view;
+    delete this.array;
+    delete this.delegate;
+    delete this.controller;
+  }
+});
+
+</script>
+
+<% end %>

data/frameworks/sproutcore/frameworks/deprecated/tests/views/collection/incremental_rendering.rhtml

@@ -0,0 +1,260 @@
+<% content_for('final') do %>
+<script>
+
+/*
+  This set of tests verifies that the collection view can render content and pass a
+  battery of functional tests for four different supported configurations:
+  
+  - No scrolling, no incremental rendering, no custom layout: all views are rendered and view expands
+  - no scrolling, no incremental rendering, custom layout
+
+  - autoscroll, no incremental rendering, no custom layout: all views are rendered and view has overlow: auto
+  - autoscroll, no incremental rendering, custom layout
+  
+  - 
+  - scrollview, no incremental rendering, no custom layout: all views are rendered and lives in scrollview.
+  - scrollview, no incremental rendering, custom layout: all views are rendered and lives in scrollview.
+  - scrollview, incremental rendering: incrementally rendered views; lives in scroll view
+
+  The standard tests are below.  The actual contexts setup at the end of this code
+  configure the above four scenarios.
+*/
+SC.StandardTests = {
+  
+  "dummy test": function() {
+  }
+  
+}; 
+
+// Common methods to setup the collection views for testing
+SC.CollectionViewTest = {
+  setup: function(that, props) { this._setup.call(that, props) ; },
+
+  _setup: function(props) {
+    
+    // create the controller
+    this.controller = SC.ArrayController.create();
+
+    // create the view, bind it to the controller
+    props = props || {} ;
+    props.contentBinding = [this.controller, 'arrangedObjects']; 
+    props.selectionBinding = [this.controller, 'selection']; 
+    props.delegate = this.controller ;
+    
+    if (!props.exampleView) props.exampleView = SC.LabelView ;
+    if (!props.contentValueKey) props.contentValueKey = 'name' ;
+    
+    // create the view with the props
+    this.view = SC.CollectionView.create(props);
+    this.view.addClassName('test-collection') ;
+    
+    var container = SC.ClassicView.extend({
+      emptyElement: '<div class="test-container"></div>'
+    }).create() ;
+    
+    container.appendChild(this.view) ;
+    SC.page.get('root').appendChild(container);
+    
+    // create some item data...  use a lot.
+    this.data = [] ;
+    var idx = 100 ;
+    while(--idx >= 0) {
+      this.data[this.data.length] = SC.Object.create({
+        guid: (1000 + idx).toString(),
+        name: "Item %@".fmt(1000 + idx)
+      }) ;
+    }
+
+    // set the content to the array
+    this.controller.set('content', this.data);
+  },
+  
+  teardown: function(that) { this._teardown.call(that); },
+  _teardown: function() {
+    
+    // remove view from the parent
+    this.view.removeFromParent() ;
+    
+    // unhook some things
+    this.controller.set('content', null) ;
+    
+    // delete the view, controller, etc.
+    delete this.view ; 
+    delete this.controller ;
+    delete this.data ;    
+  }
+  
+} ;
+
+Test.context("CASE 1: No scrolling, no incremental rendering, no custom layout", 
+  SC.mixin(SC.StandardTests,{
+  
+  setup: function() {
+    SC.CollectionViewTest.setup(this, {
+      exampleView: SC.LabelView.extend({
+        emptyElement: '<div class="text-cell sc-collection-item" style="position: relative;"></div>'
+      })
+    }) ;
+    
+    window.context = this ;
+  },
+
+  teardown: function() {
+    //SC.CollectionViewTest.teardown(this) ;
+  }
+  
+}));
+
+Test.context("CASE 2: No scrolling, no incremental rendering, custom layout", 
+  SC.mixin(SC.StandardTests,{
+  
+  setup: function() {
+    SC.CollectionViewTest.setup(this, {
+      
+      rowHeight: 22,
+      
+      layoutItemViewsFor: function(parentView, startingView) {
+        var rowHeight = this.get('rowHeight') ;
+        if (rowHeight == null) return false ;
+
+        if (!startingView) startingView = parentView.firstChild ;
+        var y = (startingView && startingView.previousSibling) ? SC.maxY(startingView.previousSibling.get('frame')) : 0;
+        var f = (parentView || this).get('innerFrame') ; 
+        f = { x: 0, height: rowHeight, width: f.width } ;
+        var view = startingView || parentView.firstChild;
+        while(view) {
+          f.y = y ;
+          if (!SC.rectsEqual(view.get('frame'), f)) view.set('frame', f) ;
+          y += rowHeight; 
+          view = view.nextSibling ;
+        }
+        return true; 
+      },
+      
+      computeFrame: function() {
+        return { height: this.get('content') * this.get('rowHeight') } ;
+      }
+      
+    }) ;
+  },
+
+  teardown: function() {
+    //SC.CollectionViewTest.teardown(this) ;
+  }
+  
+}));
+
+
+Test.context("CASE 3: Autoscrolling, no incremental rendering, no custom layout", 
+  SC.mixin(SC.StandardTests,{
+  
+  setup: function() {
+    SC.CollectionViewTest.setup(this, {
+      exampleView: SC.LabelView.extend({
+        emptyElement: '<div class="text-cell sc-collection-item" style="position: relative;"></div>'
+      }),
+      
+      init: function() {
+        arguments.callee.base.apply(this) ;
+        this.setStyle({ overflow: "auto", height: '200px' }) ;
+      }
+    }) ;
+  },
+
+  teardown: function() {
+    //SC.CollectionViewTest.teardown(this) ;
+  }
+  
+}));
+
+Test.context("CASE 4: Autoscrolling, no incremental rendering, custom layout", 
+  SC.mixin(SC.StandardTests,{
+  
+  setup: function() {
+    SC.CollectionViewTest.setup(this, {
+      
+      rowHeight: 22,
+      
+      layoutItemViewsFor: function(parentView, startingView) {
+        var rowHeight = this.get('rowHeight') ;
+        if (rowHeight == null) return false ;
+
+        if (!startingView) startingView = parentView.firstChild ;
+        var y = (startingView && startingView.previousSibling) ? SC.maxY(startingView.previousSibling.get('frame')) : 0;
+        var f = (parentView || this).get('innerFrame') ; 
+        f = { x: 0, height: rowHeight, width: f.width } ;
+        var view = startingView || parentView.firstChild;
+        while(view) {
+          f.y = y ;
+          if (!SC.rectsEqual(view.get('frame'), f)) view.set('frame', f) ;
+          y += rowHeight; 
+          view = view.nextSibling ;
+        }
+        return true; 
+      },
+      
+      computeFrame: function() {
+        return { height: 200 } ;
+      },
+
+      init: function() {
+        arguments.callee.base.apply(this) ;
+        this.setStyle({ overflow: "auto", height: '200px' }) ;
+      }
+      
+    }) ;
+  },
+
+  teardown: function() {
+    //SC.CollectionViewTest.teardown(this) ;
+  }
+  
+}));
+
+
+
+main = function() { SC.page.awake(); } ;
+
+</script>
+
+<% end %>
+
+<% content_for('body') do %>
+<style>
+
+.test-collection {
+  position: relative;
+  width: 180px;
+  border: 1px #ccc solid;
+  background-color: white;
+}
+
+.root {
+  position: fixed;
+  bottom: 0;
+  left: 0 ;
+  width: 100%;
+  border-top: 1px #ccc solid;
+  padding: 10px;
+  height: 220px;
+  overflow: auto;
+  z-index: 10000000;
+  background-color: #f0f0f0;
+}
+
+.test-container {
+  float: left;
+  width: 200px;
+  padding: 10px;
+  border: 1px #ccc solid;
+  position: relative;
+  overflow: auto;
+  height: 200px;
+  border: 1px red dotted;
+}
+
+</style>
+
+<%= view :root %>
+
+<% end %>