sproutit-sproutcore 1.0.20090721145236 → 1.0.20090721145251

data/frameworks/sproutcore/frameworks/deprecated/tests/views/classic_view/frame.rhtml

@@ -0,0 +1,357 @@
+<% # ========================================================================
+   # SC.ClassicView Frame/Rects Unit Test
+   #
+   # This test validates the various frame properties for a view given 
+   # different configurations.
+   #
+   # ========================================================================
+%>
+<% content_for('final') do %>
+
+<script>
+
+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')) ;
+    SC.rectsEqual(f, this.v.get('frame')).shouldEqual(true) ;
+  },
+  
+  "frame should change when CSS changed": function() {
+    var origFrame = this.v.get('frame') ;
+    
+    this.v.addClassName('half') ;
+    this.v.viewFrameDidChange() ;
+
+    SC.rectsEqual(this.v.get('frame'), origFrame).shouldEqual(false) ;    
+    
+    // remove the class.  make sure we have restored the frame
+    this.v.removeClassName('half') ; //reset 
+    this.v.viewFrameDidChange() ; 
+    SC.rectsEqual(this.v.get('frame'), origFrame).shouldEqual(true) ;    
+  },
+  
+  "setting frame should change style, even if it does not impact actual value": function() {
+    var f = this.v.get('frame') ;
+    var ret = this.v.set('frame', { x: 10, y: 10 }) ;
+
+    // it should change the style though
+    this.v.getStyle('left').shouldEqual('10px');  
+    this.v.getStyle('top').shouldEqual('10px');  
+
+    // change the top & left.  Since the layout is static here, this should not actually 
+    // change anything.
+    SC.rectsEqual(ret, f).shouldEqual(true) ;
+  },
+  
+  setup: function() { this.v = SC.page.get('case1'); }
+  
+});
+// 
+// CASE 2: Manual-layout of view
+Test.context("CASE 2: Manual-layout of view", {
+
+  "frame should reflect current offset settings at first": function() {
+    var el = this.v.rootElement ;
+    var f = { x: el.offsetTop, y: el.offsetLeft, width: el.offsetWidth, height: el.offsetHeight };
+    SC.rectsEqual(f, this.v.get('frame')).shouldEqual(true) ;
+  },
+
+  "should get absolute positioning": function() {
+    this.v.getStyle('position').shouldEqual('absolute') ;  
+  },
+  
+  "frame should reflect set values exactly": function() {
+    var f = { x: 10, y: 10, width: 20, height: 20 } ;
+    var ret = this.v.set('frame', f);
+    SC.rectsEqual(f,ret).shouldEqual(true) ;
+    SC.rectsEqual(this.v.get('frame'), f).shouldEqual(true) ;
+  },
+  
+  "actual offset should reflect set values exactly": function() {
+    var f = { x: 10, y: 10, width: 20, height: 20 } ;
+    var ret = this.v.set('frame', f);
+    var el = this.v.rootElement;
+    el.offsetLeft.shouldEqual(10) ;
+    el.offsetTop.shouldEqual(10) ;
+    el.offsetWidth.shouldEqual(20) ;
+    el.offsetHeight.shouldEqual(20) ;
+  },
+  
+  "applying CSS class should not change frame": function() {
+    var f = this.v.get('frame') ;
+    this.v.addClassName('half') ;
+    SC.rectsEqual(this.v.get('frame'),f).shouldEqual(true) ;  
+  },
+  
+  "getting frame should cache the value": function() {
+    f = this.v.get('frame') ;
+    this.assertNotNull(this.v._frame) ;
+  },
+  
+  setup: function() { this.v = SC.page.get('case2'); }
+  
+});
+
+// CASE 3: Manual-layout View with padding & border
+Test.context("CASE 3: Manual-layout of view with padding & border", {
+
+  "frame size should include padding and border": function() {
+    var f = v.get('frame') ;
+    var el = v.rootElement ;
+
+    //debugger ;
+    equals(Math.round(v.get('styleWidth')), f.width-24, 'width') ;
+    equals(Math.round(v.get('styleHeight')), f.height-24, 'height') ;
+  },
+  
+  "changing frame size should subtract padding and border": function() {
+    this.v.set('frame', { width: 50, height: 50 }) ;
+    var f = this.v.get('frame') ;
+    f.width.shouldEqual(50) ;
+    f.height.shouldEqual(50);
+    
+    var el = this.v.rootElement ;
+    Math.round(parseFloat(el.getStyle('width'),0)).shouldEqual(f.width - 24) ;
+    Math.round(parseFloat(el.getStyle('height'),0)).shouldEqual(f.height - 24) ;
+  },
+  
+  setup: function() { this.v = SC.page.get('case3'); }
+  
+}) ;
+
+// CASE 4: Child view inside of view with overflow = hidden
+// NOTE: Cases 4,5 & 6 test a specific bug in FireFox.
+Test.context("CASE 4: Absolute positioned Child view inside of view with overflow = hidden", {
+
+  "frame origin should be 0,0 & size should match owner's innerFrame": function() {
+    var vf = this.v.get('innerFrame') ;
+    var f = this.v.child.get('frame') ;
+    f.x.shouldEqual(0) ;
+    f.y.shouldEqual(0) ;
+    f.width.shouldEqual(62) ;
+  },
+  
+  "nested frame origin should be 0,0 inside of parent": function() {
+    var f = this.v.child.nestedChild.get('frame') ;
+    f.x.shouldEqual(0) ;
+    f.y.shouldEqual(0) ;
+  },
+  
+  "setting child frame should reflect in new frame value": function() {
+    this.v.child.set('frame', { x: 10, y: 10 }) ;
+    var f = this.v.child.get('frame') ;
+    f.x.shouldEqual(10) ;
+    f.y.shouldEqual(10) ;
+  },
+  
+  setup: function() { this.v = SC.page.get('case4'); }
+  
+}) ;
+
+// CASE 5: Child view inside of view with overflow = hidden
+Test.context("CASE 5: Non-positioned Child view inside of view with overflow = hidden", {
+
+  "frame origin should be 0,0 & size should match owner's innerFrame": function() {
+    SC.DEBUGIT = YES ;
+    var vf = this.v.get('innerFrame') ;
+    var f = this.v.child.get('frame') ;
+    f.x.shouldEqual(0) ;
+    f.y.shouldEqual(0) ;
+    f.width.shouldEqual(vf.width) ;
+    SC.DEBUGIT = NO ;
+  },
+  
+  "nested frame origin should be 1,1 to account for border offset of parent": function() {
+    var f = this.v.child.nestedChild.get('frame') ;
+    f.x.shouldEqual(1) ;
+    f.y.shouldEqual(1) ;
+  },
+  
+  "setting child frame should not move child frame": function() {
+    this.v.child.set('frame', { x: 10, y: 10 }) ;
+    var f = this.v.child.get('frame') ;
+    f.x.shouldEqual(0) ;
+    f.y.shouldEqual(0) ;
+  },
+  
+  setup: function() { this.v = SC.page.get('case5'); }
+  
+}) ;
+
+Test.context("CASE 6: Relative positioned Child view inside of view with overflow = hidden", {
+
+  "frame origin should be 0,0 & size should match owner's innerFrame": function() {
+    var vf = this.v.get('innerFrame') ;
+    var f = this.v.child.get('frame') ;
+    f.x.shouldEqual(0) ;
+    f.y.shouldEqual(0) ;
+    f.width.shouldEqual(62) ;
+  },
+  
+  "nested frame origin should be 0,0 inside of parent": function() {
+    var f = this.v.child.nestedChild.get('frame') ;
+    f.x.shouldEqual(0) ;
+    f.y.shouldEqual(0) ;
+  },
+  
+  "setting child frame should reflect in new frame value that includes borders": function() {
+    this.v.child.set('frame', { x: 10, y: 10 }) ;
+    var f = this.v.child.get('frame') ;
+    f.x.shouldEqual(10) ;
+    f.y.shouldEqual(10) ;
+  },
+  
+  setup: function() { this.v = SC.page.get('case6'); }
+  
+}) ;
+
+Test.context("CASE 7: Create view (not in the window)", {
+
+  "frame should be 10,10,30,30 even though it is not on screen": function() {
+    var f = { x: 10, y: 10, width: 30, height: 30 };
+    var vf = this.v.get('frame') ;
+    SC.rectsEqual(f,vf).shouldEqual(true) ;
+  },
+
+  "resizing frame should update frame": function() {
+    var f = { x: 20, y: 20, width: 40, height: 40 } ;
+    this.v.set('frame', f) ;
+    var vf = this.v.get('frame') ;
+    SC.rectsEqual(f,vf).shouldEqual(true) ;
+  },
+  
+  setup: function() { this.v = SC.ClassicView.extend({
+    emptyElement: '<div style="width: 30px; height: 30px; left: 10px; top: 10px; position: absolute;"></div>'
+  }).create(); }
+  
+}) ;
+
+main = function() { SC.page.awake(); };
+
+</script>
+
+<% end %>
+
+<% # Create the views for the various use cases. %>
+<% content_for('page_javascript') do %>
+<script>
+</script>
+<% end %>
+
+<% content_for('body') do %>
+
+<style>
+
+.case { background-color: white; }
+.case .child { border: 1px red solid; }
+
+.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;
+}
+
+.half { width: 50%; }
+
+.case2, .case3 { position: absolute; }
+
+.case3 {
+  border: 2px red solid ;
+  padding: 10px;
+}
+
+.case4 { 
+  overflow: hidden; 
+  position: relative; 
+  border-left: 5px blue solid; 
+  height: 60px;
+}
+
+.case5 { 
+  overflow: auto; 
+  position: relative; 
+  border-left: 5px blue solid; 
+  height: 60px;
+}
+
+.case4 .child {
+  position: absolute;
+  width: 60px;
+}
+
+.case6 .child {
+  position: relative;
+  width: 60px;
+}
+
+.nested_child { border: 1px green solid; }
+
+</style>
+
+<div class="cases">
+<div class="base">
+<label>Case 1</label>
+<% view :case1, :class => 'case' do %>
+  <%= view :child, :outlet => true, :inner_html => 'Child' %>
+<% end %>
+</div>
+
+<div class="base">
+  <label>Case 2</label>
+<% view :case2, :class => 'case' do %>
+  <%= view :child, :outlet => true, :inner_html => 'Child' %>
+<% end %>
+</div>
+
+<div class="base">
+  <label>Case 3</label>
+<% view :case3, :class => 'case' do %>
+  <%= view :child, :outlet => true, :inner_html => 'Child' %>
+<% end %>
+</div>
+
+<div class="base">
+  <label>Case 4</label>
+<% view :case4, :class => 'case' do %>
+  <% view :child, :outlet => true do %>
+    <%= view :nested_child, :outlet => true, :inner_html => 'Nested' %>
+  <% end %>
+<% end %>
+</div>
+
+<div class="base">
+  <label>Case 5</label>
+<% view :case5, :class => 'case' do %>
+  <% view :child, :outlet => true do %>
+    <%= view :nested_child, :outlet => true, :inner_html => 'Nested' %>
+  <% end %>
+<% end %>
+</div>
+
+<div class="base">
+  <label>Case 6</label>
+<% view :case6, :class => 'case' do %>
+  <% view :child, :outlet => true do %>
+    <%= view :nested_child, :outlet => true, :inner_html => 'Nested' %>
+  <% end %>
+<% end %>
+</div>
+
+</div>
+
+<% end %>

data/frameworks/sproutcore/frameworks/deprecated/tests/views/classic_view/isVisibleInWindow.rhtml

@@ -0,0 +1,147 @@
+<% # ========================================================================
+   # SC.ClassicView isVisibleInWindow Unit Test
+   # ========================================================================
+%>
+<% content_for('final') do %>
+
+<script>
+
+var FRAME = { x: 10, y: 10, width: 30, height: 30 } ;
+
+Test.context("CASE 1: View created outside of window", {
+
+  "initial isVisibleInWindow should be false": function() {
+    v.get('isVisibleInWindow').shouldEqual(false) ;
+  },
+  
+  "adding to window should make it true": function() {
+    SC.page.get('root').get('isVisibleInWindow').shouldEqual(true) ;
+    
+    SC.page.get('root').appendChild(v) ;
+    v.get('isVisibleInWindow').shouldEqual(true) ;
+  },
+
+  "removing from window should make it false again": function() {
+    SC.page.get('root').appendChild(v) ;
+    v.get('isVisibleInWindow').shouldEqual(true) ;
+    
+    v.removeFromParent() ;
+    v.get('isVisibleInWindow').shouldEqual(false) ;
+  },
+  
+  setup: function() { 
+    v = SC.ClassicView.extend({
+      emptyElement: '<div class="case"></div>'
+    }).create(); 
+  }
+  
+});
+
+Test.context("CASE 2: View in body", {
+
+  "initial isVisibleInWindow should be true": function() {
+    v.get('isVisibleInWindow').shouldEqual(true) ;
+  },
+  
+  "moving to another view in window should still be true": function() {
+    SC.page.get('root').appendChild(v) ;
+    v.get('isVisibleInWindow').shouldEqual(true) ;
+  },
+
+  "removing from window should make it false": function() {
+    v.removeFromParent() ;
+    v.get('isVisibleInWindow').shouldEqual(false) ;
+
+    // readd to window
+    SC.page.get('root').appendChild(v) ;
+  },
+  
+  "moving to a view that is offscreen should make it false": function() {
+    v.get('isVisibleInWindow').shouldEqual(true) ;
+    offscreen.appendChild(v) ;
+    v.get('isVisibleInWindow').shouldEqual(false) ;
+  },
+  
+  setup: function() { 
+    v = SC.page.get('case2');
+    offscreen = SC.ClassicView.create() ; 
+  }
+});
+
+Test.context("CASE 3: View created in resources", {
+
+  "initial isVisibleInWindow should be YES": function() {
+    v.get('isVisibleInWindow').shouldEqual(YES) ;
+  },
+  
+  "moving to a visible view in window should be true": function() {
+    SC.page.get('root').appendChild(v) ;
+    v.get('isVisibleInWindow').shouldEqual(true) ;
+  },
+
+  "removing from window should make it false": function() {
+    v.removeFromParent() ;
+    v.get('isVisibleInWindow').shouldEqual(false) ;
+  },
+  
+  "moving to a view that is offscreen should make it false": function() {
+    offscreen.appendChild(v) ;
+    v.get('isVisibleInWindow').shouldEqual(false) ;
+  },
+  
+  setup: function() { 
+    v = SC.page.get('case3');
+    offscreen = SC.ClassicView.create() ; 
+  }
+
+});
+
+main = function() { SC.page.awake(); };
+
+</script>
+
+<% end %>
+
+<% content_for('body') do %>
+
+<style>
+
+.case { background-color: white; }
+.case .child { border: 1px red solid; }
+
+.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;
+}
+
+.nested_child { border: 1px green solid; }
+
+.case { 
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 30px;
+  height: 30px;
+}
+
+</style>
+
+<%= view :case2, :class => 'case', :inner_html => 'Case' %>
+
+<%= view :root %>
+
+<% end %>
+
+<%= view :case3, :class => 'case', :inner_html => 'Case' %>