sproutcore 0.9.1 → 0.9.2

data/frameworks/sproutcore/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.View.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", 
+  Object.extend(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", 
+  Object.extend(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", 
+  Object.extend(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, arguments) ;
+        this.setStyle({ overflow: "auto", height: '200px' }) ;
+      }
+    }) ;
+  },
+
+  teardown: function() {
+    //SC.CollectionViewTest.teardown(this) ;
+  }
+  
+}));
+
+Test.context("CASE 4: Autoscrolling, no incremental rendering, custom layout", 
+  Object.extend(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, arguments) ;
+        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 %>

data/frameworks/sproutcore/tests/views/image_cell.rhtml

@@ -0,0 +1,19 @@
+<% # ========================================================================
+   # SC.LabelItemView Unit Test
+   # ========================================================================
+%>
+<% content_for('final') do %>
+
+<script>
+
+Test.context("SC.ImageCellView",{
+
+  "TODO: Add your own tests here": function() {
+    true.shouldEqual(true) ;
+  }
+
+}) ;
+
+</script>
+
+<% end %>

data/frameworks/sproutcore/tests/views/label_item.rhtml

@@ -1,12 +1,12 @@
 <% # ========================================================================
-   # Sproutcore.LabelItemView Unit Test
+   # SC.LabelItemView Unit Test
    # ========================================================================
 %>
 <% content_for('final') do %>
 
 <script>
 
-Test.context("Sproutcore.LabelItemView",{
+Test.context("SC.LabelItemView",{
 
   "TODO: Add your own tests here": function() {
     true.shouldEqual(true) ;
@@ -14,8 +14,6 @@ Test.context("Sproutcore.LabelItemView",{
 
 }) ;
 
-appMain = main; main = null ; // Cancel main() so app does not start
-
 </script>
 
 <% end %>

data/frameworks/sproutcore/tests/views/list.rhtml

@@ -1,12 +1,12 @@
 <% # ========================================================================
-   # Sproutcore.ListView Unit Test
+   # SC.ListView Unit Test
    # ========================================================================
 %>
 <% content_for('final') do %>
 
 <script>
 
-Test.context("Sproutcore.ListView",{
+Test.context("SC.ListView",{
 
   "TODO: Add your own tests here": function() {
     true.shouldEqual(true) ;
@@ -14,7 +14,6 @@ Test.context("Sproutcore.ListView",{
 
 }) ;
 
-appMain = main; main = null ; // Cancel main() so app does not start
 
 </script>
 

data/frameworks/sproutcore/tests/views/list_item.rhtml

@@ -0,0 +1,20 @@
+<% # ========================================================================
+   # SC.ListItemView Unit Test
+   # ========================================================================
+%>
+<% content_for('final') do %>
+
+<script>
+
+Test.context("SC.ListItemView",{
+
+  "TODO: Add your own tests here": function() {
+    true.shouldEqual(true) ;
+  }
+
+}) ;
+
+if (window.main && (appMain = main)) main = null ; 
+</script>
+
+<% end %>

data/frameworks/sproutcore/tests/views/slider.rhtml

@@ -0,0 +1,20 @@
+<% # ========================================================================
+   # SC.SliderView Unit Test
+   # ========================================================================
+%>
+<% content_for('final') do %>
+
+<script>
+
+Test.context("SC.SliderView",{
+
+  "TODO: Add your own tests here": function() {
+    true.shouldEqual(true) ;
+  }
+
+}) ;
+
+if (window.main && (appMain = main)) main = null ; 
+</script>
+
+<% end %>

data/frameworks/sproutcore/tests/views/text_cell.rhtml

@@ -0,0 +1,19 @@
+<% # ========================================================================
+   # SC.LabelItemView Unit Test
+   # ========================================================================
+%>
+<% content_for('final') do %>
+
+<script>
+
+Test.context("SC.LabelView",{
+
+  "TODO: Add your own tests here": function() {
+    true.shouldEqual(true) ;
+  }
+
+}) ;
+
+</script>
+
+<% end %>

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

@@ -0,0 +1,395 @@
+<% # ========================================================================
+   # SC.View clippingFrame Unit Test
+   #
+   # The clippingFrame tells you what portion of the view is actually visible
+   # on screen.  If the view is not on screen or is scrolled out of view,
+   # then the size of the clipping frame will be 0.
+   #
+   # ========================================================================
+%>
+<% content_for('final') do %>
+
+<script>
+
+VIEW_HEIGHT = 90 ;
+CHILD_HEIGHT = 150;
+NESTED_CHILD_HEIGHT = 40 ;
+
+Test.context("CASE 1: Non-scrollable view - all view fits within content", {
+
+  "child clippingFrame should == child innerFrame": function() {
+    //debugger ;
+    var v = this.v.child ;
+    var f = v.get('frame') ;
+    var cf = v.get('clippingFrame') ;
+
+    SC.rectsEqual(f, cf).shouldEqual(true) ;  
+  },
+  
+  "resizing child frame should reflect child clippingFrame -also should notify change": function() {
+    var v = this.v.child ;
+    var f = v.get('frame') ;
+    var cf = v.get('clippingFrame') ; // give system a chance to cache
+
+    var didChange = false ;
+    v.addObserver('clippingFrame', function() { didChange = true; }) ;
+    v.set('frame', { width: 50, height: 50 }); 
+    didChange.shouldEqual(true) ;
+
+    var f = v.get('frame') ;
+    var cf = v.get('clippingFrame') ;
+    SC.rectsEqual(f, cf).shouldEqual(true) ;  
+  },
+  
+  "resizing parent frame should not change child clippingFrame - also should notify change": function() {
+    var v = this.v.child ;
+    var f = v.get('frame') ;
+    var cf = v.get('clippingFrame') ; // give system a chance to cache
+
+    var didChange = false ;
+    v.addObserver('clippingFrame', function() { didChange = true; }) ;
+    this.v.set('frame', { width: 80, height: 80 }) ;
+    didChange.shouldEqual(true) ;
+
+
+    var nf = v.get('frame') ;
+    var cf = v.get('clippingFrame') ;
+    SC.rectsEqual(nf, f).shouldEqual(false) ;  
+    SC.rectsEqual(nf, cf).shouldEqual(true) ;  
+  },
+  
+  setup: function() { this.v = SC.page.get('case1'); }
+  
+});
+
+Test.context("CASE 2: A scrollable view - child view cannot fit within visible area", {
+
+  "clippingFrame should reflect only the visible portion of the view": function() {
+    var v = this.v.child ;
+    var cf = v.get('clippingFrame') ;
+    var f = v.get('frame') ;
+    f.height = VIEW_HEIGHT ;
+    
+    console.log('cf = %@ - f = %@ - pos = %@'.fmt($I(cf), $I(f), v.getStyle('position'))) ;
+    
+    SC.rectsEqual(f,cf).shouldEqual(true) ;
+  },
+  
+  "scrolling parent frame should change child clippingFrame (and notify)": function() {
+    var child = this.v.child ;
+    var cf = child.get('clippingFrame') ;
+    
+    var didChange = false ;
+    child.addObserver('clippingFrame', function() { didChange = true; }) ;
+    
+    // scroll
+    this.v.set('scrollFrame', { y: -20 }) ;
+
+    var ncf = child.get('clippingFrame') ;
+    cf.y = 20 ; // adjust expected frame
+
+    SC.rectsEqual(ncf, cf).shouldEqual(true) ;
+    didChange.shouldEqual(true) ;
+
+    this.v.set('scrollFrame', { y: 0 }) ;
+  },
+  
+  "resizing parent frame should change child clippingFrame (and notify)": function() {
+    var child = this.v.child ;
+    var cf = child.get('clippingFrame') ;
+    
+    var didChange = false ;
+    child.addObserver('clippingFrame', function() { didChange = true; }) ;
+
+    // scroll
+    this.v.set('frame', { height: 50 }) ;
+
+    var ncf = child.get('clippingFrame') ;
+    cf.height = 48 ; // adjust expected frame
+
+    SC.rectsEqual(ncf, cf).shouldEqual(true) ;
+    didChange.shouldEqual(true) ;
+
+    this.v.set('frame', { height: 90 }) ;
+  },
+
+  "resizing child should change clippingFrame (and notify)": function() {
+    var child = this.v.child ;
+    var cf = child.get('clippingFrame') ;
+    
+    var didChange = false ;
+    child.addObserver('clippingFrame', function() { didChange = true; }) ;
+
+    // scroll
+    child.set('frame', { height: 50 }) ;
+
+    var ncf = child.get('clippingFrame') ;
+    cf.height = 50 ; // adjust expected frame
+
+    SC.rectsEqual(ncf, cf).shouldEqual(true) ;
+    didChange.shouldEqual(true) ;
+    
+    // reset
+    child.set('frame', { height: 152 }) ;
+  },
+  
+  "moving child should change clipping frame (and notify)": function() {
+    var child = this.v.child ;
+    var cf = child.get('clippingFrame') ;
+    
+    var didChange = false ;
+    child.addObserver('clippingFrame', function() { didChange = true; }) ;
+
+    // scroll
+    child.set('frame', { y: 20 }) ;
+
+    var ncf = child.get('clippingFrame') ;
+    cf.y = 20; cf.height -= 20 ; // adjust expected frame
+
+    SC.rectsEqual(ncf, cf).shouldEqual(true) ;
+    didChange.shouldEqual(true) ;
+    
+    // reset
+    child.set('frame', { y: 0 }) ;
+  },
+  
+  "moving parent should NOT change child clipping frame": function() {  
+    var child = this.v.child ;
+    var cf = child.get('clippingFrame') ;
+
+    // move parent frame -- make sure this does not exceed the parent or 
+    // else the clipping frame will be miscalculated.
+    this.v.set('frame', { y: 5 }) ;
+
+    var ncf = child.get('clippingFrame') ;
+    SC.rectsEqual(ncf, cf).shouldEqual(true) ;
+    
+    // reset
+    this.v.set('frame', { y: 0 }) ;
+  },
+  
+  setup: function() { this.v = SC.page.get('case2'); }
+  
+});
+
+Test.context("CASE 3: A scrollable view with extra height - nested child view can fit within visible area", {
+
+  "clippingFrame should == frame when view is entirely visible": function() {
+    var f = this.nested.get('frame') ;
+    var cf = this.nested.get('clippingFrame') ;  
+    SC.rectsEqual(f,cf).shouldEqual(true) ;
+  },
+  
+  "clippingFrame should be partial when view is partially scrolled out (and notify)": function() {
+
+    // register observer
+    var didChange = false ;
+    this.nested.addObserver('clippingFrame', function() { didChange = true; }) ;
+    
+    // adjust expected.  Note that this expects .case .child to be statically positioned
+    // so that clippingFrame is based on .case3.
+    var cf = this.nested.get('clippingFrame') ;  
+    cf.y = 30; cf.height -= 20 ;
+
+    // scroll
+    this.v.set('scrollFrame', { y: -30 }) ;
+    
+    // collect new frame and compare
+    var ncf = this.nested.get('clippingFrame') ;
+    
+    console.log('ncf: %@'.fmt($H(ncf).inspect()));
+    console.log('cf: %@'.fmt($H(cf).inspect()));
+    window.case3 = this ;
+    
+    SC.rectsEqual(ncf,cf).shouldEqual(true) ;
+    
+    // force notifications
+    didChange.shouldEqual(true) ;
+    
+    // reset
+    this.v.set('scrollFrame', { y: 0 }) ;
+  },
+  
+  "clippingFrame should be 0 height when scroll completely out of view": function() {
+    this.v.set('scrollFrame', { y: -150 }) ;
+    this.nested.get('clippingFrame').height.shouldEqual(0) ;
+    this.v.set('scrollFrame', { y: 0 }) ; // reset  
+  },
+  
+  "clippingFrame should == frame when moved around within view (and notify)": function() {
+    var of= this.nested.get('frame') ;
+    this.nested.set('frame', { x: 20, y: 20 }) ;
+
+    var f = this.nested.get('frame') ;
+    var cf = this.nested.get('clippingFrame') ;  
+    SC.rectsEqual(f,cf).shouldEqual(true) ;
+    
+    // reset
+    this.nested.set('frame', of) ;
+  },
+  
+  setup: function() { this.v = SC.page.get('case3'); this.nested = this.v.child.nestedChild; }
+  
+});
+
+Test.context("CASE 4: Child view is not actually in window", {
+
+  "clippingFrame should have 0 width or height": function() {
+
+    // get clipping frame to force caching
+    this.child.get('clippingFrame') ;
+    
+    // remove child and get clippingFrame again
+    this.child.removeFromParent() ;
+    var cf = this.child.get('clippingFrame') ;
+    cf.width.shouldEqual(0) ;
+    cf.height.shouldEqual(0) ;  
+  },
+  
+  setup: function() { 
+    this.v = SC.page.get('case4'); 
+    this.child = this.v.child ;
+  }
+  
+});
+
+
+Test.context("CASE 5: Child view's parent is not actually in window", {
+
+  "clippingFrame should have 0 width of height for nested view": function() {
+    
+    // get clipping frame to cause caching
+    this.nested.get('clippingFrame') ;
+    
+    this.v.child.removeFromParent() ;
+    var cf = this.nested.get('clippingFrame') ;
+    cf.width.shouldEqual(0) ;
+    cf.height.shouldEqual(0) ;  
+  },
+  
+  setup: function() { 
+    this.v = SC.page.get('case5'); 
+    this.nested = this.v.child.nestedChild;
+  }
+  
+});
+
+
+
+main = function() { SC.page.awake(); };
+
+</script>
+
+<% end %>
+
+<% content_for('body') do %>
+
+<style>
+
+.case { 
+  background-color: white; 
+  position: absolute; 
+  width: 190px; 
+  height: 90px; 
+  border: 1px blue solid; 
+  overflow: auto; 
+  border-left-width: 5px;
+}
+
+.case .child { 
+  border: 1px red solid;  
+}
+
+.case .nested_child { 
+  border: 1px green solid; 
+  width: 40px; 
+  height: 40px; 
+  position: absolute; 
+  top: 10px; 
+  left: 10px; 
+}
+
+.base {
+  float: left;
+  width: 200px;
+  height: 100px;
+  border: 1px #aaa solid;
+  position: relative;
+  margin: 2px;
+}
+
+.cases { 
+  position: absolute; 
+  bottom: 0 ; 
+  left: 0; 
+  right: 0; 
+  border-top: 1px #ccc solid; 
+}
+
+.base label {
+  position: absolute;
+  bottom: 4px;
+  left: 4px;
+}
+
+.case1 .child { width: 60px; height: 60px; }
+
+.case2 .child,
+.case4 .child {
+  position: relative;
+  height: 150px;
+}
+
+/* case3 child is statically positioned, so offset parent of nested child should be .case3 */
+.case3 .child,
+.case5 .child {
+  height: 150px;
+}
+
+
+
+</style>
+
+<div class="cases">
+<div class="base">
+<label>Case 1</label>
+<% view :case1, :class => 'case' do %>
+  <%= view :child, :outlet => true, :inner_html => 'Child', :properties => { :needs_clipping_frame => true } %>
+<% end %>
+</div>
+
+<div class="base">
+  <label>Case 2</label>
+<% view :case2, :class => 'case', :properties => { :is_scrollable => true } do %>
+  <%= view :child, :outlet => true, :inner_html => 'Child', :properties => { :needs_clipping_frame => true } %>
+<% end %>
+</div>
+
+<div class="base">
+  <label>Case 3</label>
+<% view :case3, :class => 'case', :properties => { :is_scrollable => true } do %>
+  <%  view :child, :outlet => true do %>
+   <%= view :nested_child, :outlet => true, :inner_html => 'Nested Child', :properties => { :needs_clipping_frame => true } %>
+  <% end %>
+<% end %>
+</div>
+
+<div class="base">
+  <label>Case 4</label>
+<% view :case4, :class => 'case', :properties => { :is_scrollable => true } do %>
+  <%= view :child, :outlet => true, :inner_html => 'Child', :properties => { :needs_clipping_frame => true } %>
+<% end %>
+</div>
+
+<div class="base">
+  <label>Case 5</label>
+<% view :case5, :class => 'case', :properties => { :is_scrollable => true } do %>
+  <%  view :child, :outlet => true do %>
+   <%= view :nested_child, :outlet => true, :inner_html => 'Nested Child', :properties => { :needs_clipping_frame => true } %>
+  <% end %>
+<% end %>
+</div>
+
+</div>
+
+<% end %>