sproutit-sproutcore 1.0.20090721145236 → 1.0.20090721145251

data/frameworks/sproutcore/frameworks/desktop/tests/views/scroller/methods.js

@@ -0,0 +1,102 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+var pane, view, view1, view2 ;
+module("SC.ScrollerView",{
+  setup: function() {
+    SC.RunLoop.begin();
+	pane = SC.MainPane.create({
+	  childViews: [
+	    SC.ScrollerView.extend({		     
+		}),
+		SC.ScrollerView.extend({		     
+		  minimum:10,
+		  maximum:100,
+		  isEnabled:NO,
+		  value:15,
+		  layoutDirection: SC.LAYOUT_HORIZONTAL
+		}),
+		SC.ScrollerView.extend({	
+      layout:{ top: 0, bottom: 0, right: 0, width: 20 },	     
+		  minimum:0,
+		  maximum:100,
+		})
+
+	  ]	
+	});
+	pane.append(); // make sure there is a layer...
+	SC.RunLoop.end();	
+	view = pane.childViews[0];
+	view1= pane.childViews[1];
+  view2= pane.childViews[2];
+  },
+
+  teardown: function() {
+   	pane.remove();
+   	pane = view = null ;
+  }
+});
+
+test("listing the displayProperties",function(){
+  var obj = view.get('displayProperties');
+  equals(obj.length, 5,'the number of display properties');
+  equals(obj[0],'isFirstResponder','the offset value property');
+  equals(obj[1],'isVisible','the isVisible value property');
+  equals(obj[2],'minimum','the minimum value property');	  
+  equals(obj[3],'maximum','the maximum value property');	  
+  equals(obj[4],'isEnabled','the isEnabled offset value property');	  
+
+});
+
+test("testing properties of a scrollerview", function(){
+  equals(10,view1.get('minimum'),'Minimum offset value for the scroller')	;
+  equals(100,view1.get('maximum'),'Maximum offset value for the scroller');
+  equals(NO,view1.get('isEnabled'),'The scroller should be not enabled');
+  equals(SC.LAYOUT_VERTICAL,view.get('layoutDirection'),'The default scroller direction should be vertical');
+  equals(SC.LAYOUT_HORIZONTAL,view1.get('layoutDirection'),'The scroller direction set as vertical during view creation');
+  equals(0,view.value,'The default offset value set during creation for a scroller should be 0');
+  equals(15,view1.value,'The offset value should be 15');
+  // view1.set('layoutDirection',SC.LAYOUT_VERTICAL);
+  // equals(SC.LAYOUT_VERTICAL,view1.get('layoutDirection'),'The scroller direction set after view creation');
+});
+
+test("ownerScrollValueKey() function of the scroller view",function(){
+  equals('verticalScrollOffset',view.ownerScrollValueKey(),'should have a vertical scroll offset');
+  equals('horizontalScrollOffset',view1.ownerScrollValueKey(),'should have a vertical scroll offset');
+});
+
+test("Setting the scroller to a specific value", function() {
+
+  // should be testing against the layer.scrollTop property
+  view2.set('value', 10);
+  equals(view2._sc_scrollValue, 10, "After setting the value to the 10 on a vertical scroller, the scrollTop property of the layer must be");
+  view2.set('value', 0);
+  equals(view2._sc_scrollValue, 0, "After setting the value to the mimumum (0) on a vertical scroller, the scrollTop property of the layer must be");
+	view2.set('value', 100);
+  equals(view2._sc_scrollValue, 100, "After setting the value to the maximum (100) on a vertical scroller, the scrollTop property of the layer must be");
+	view2.set('value', -1);
+  equals(view2._sc_scrollValue, 0, "After setting the value < minimum (-1) on a vertical scroller, the scrollTop property of the layer must be");
+	view2.set('value', 101);
+  equals(view2._sc_scrollValue, 100, "After setting the value > maximum (101) on a vertical scroller, the scrollTop property of the layer must be");
+
+  // should be testing against the layer.scrollLeft property
+  view2.set('layoutDirection', SC.LAYOUT_HORIZONTAL);   
+  view2.set('value', 10);
+  equals(view2._sc_scrollValue, 10, "After setting the value to 10 on a horizontal scroller, the scrollTop property of the layer must be");
+	view2.set('value', 0);
+  equals(view2._sc_scrollValue, 0, "After setting the value to the mimumum (0) on a horizontal scroller, the scrollTop property of the layer must be");
+	view2.set('value', 100);
+  equals(view2._sc_scrollValue, 100, "After setting the value to the maximum (100) on a horizontal scroller, the scrollTop property of the layer must be");
+	view2.set('value', -1);
+  equals(view2._sc_scrollValue, 0, "After setting the value < minimum (-1) on a horizontal scroller, the scrollTop property of the layer must be");
+	view2.set('value', 101);
+  equals(view2._sc_scrollValue, 100, "After setting the value > maximum (101) on a horizontal scroller, the scrollTop property of the layer must be");
+
+});
+
+// JP: TODO : This unit test have to be completed. This test are not really testing much.

data/frameworks/sproutcore/frameworks/desktop/tests/views/scroller/ui.js

@@ -0,0 +1,70 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+(function() {
+  var scURL='http://www.sproutcore.com/wp-content/themes/sproutcore/images/download.png';
+  var imageView=SC.ImageView.design({value:scURL, layout: {height:400, width:320,top:10,left:10}});
+  var imageView1=SC.ImageView.design({value:scURL, layout: {height:50, width:400,top:10,left:10}});	
+  var pane = SC.ControlTestPane.design({ height: 100 })  	
+  .add("basic horizontal", SC.ScrollerView, {
+    layoutDirection: SC.LAYOUT_HORIZONTAL
+  })    
+  
+  .add("basic vertical", SC.ScrollerView, {
+    layoutDirection: SC.LAYOUT_VERTICAL
+  })
+
+  .add("scrollerViewVertical", SC.ScrollerView, {
+    layoutDirection: SC.LAYOUT_VERTICAL,
+	isEnabled:NO,
+	childViews:[imageView]
+  })
+
+  .add("scrollerViewHorizontal", SC.ScrollerView, {
+    layoutDirection: SC.LAYOUT_HORIZONTAL,
+	isEnabled:NO,
+	childViews:[imageView1]
+  });
+    
+  pane.show(); // add a test to show the test pane
+  
+  // ..........................................................
+  // TEST VIEWS
+  // 
+  module('SC.ScrollerView UI', pane.standardSetup());
+  
+  test("basic horizontal", function() {
+    var view = pane.view('basic horizontal');
+    ok(!view.$().hasClass('disabled'), 'should not have disabled class');
+    ok(!view.$().hasClass('sel'), 'should not have sel class');    
+    ok(view.$().hasClass('sc-scroller-view'), 'should have sc-scroller-view class');
+    ok(view.$().hasClass('sc-horizontal'), 'should have sc-horizontal class');
+    ok(!view.$().hasClass('sc-vertical'), 'should not have sc-vertical class');   
+    equals(view.getPath('childViews.length'), 0, 'scroller views have no children');
+  });
+  
+  test("basic vertical", function() {
+    var view = pane.view('basic vertical');
+    ok(!view.$().hasClass('disabled'), 'should not have disabled class');
+    ok(!view.$().hasClass('sel'), 'should not have sel class');    
+    ok(view.$().hasClass('sc-scroller-view'), 'should have sc-scroller-view class');
+    ok(!view.$().hasClass('sc-horizontal'), 'should not have sc-horizontal class');
+    ok(view.$().hasClass('sc-vertical'), 'should have sc-vertical class');   
+    equals(view.getPath('childViews.length'), 0, 'scroller views have no children');
+  });
+
+  test("scrollerView with a child view", function() {
+	var view = pane.view('scrollerViewVertical');
+    equals(view.getPath('childViews.length'), 1, 'scroller should have a child');
+	view = pane.view('scrollerViewHorizontal');
+	equals(view.getPath('childViews.length'), 1, 'scroller should have a child');
+  });
+  
+  
+})();

data/frameworks/sproutcore/frameworks/desktop/tests/views/segmented/methods.js

@@ -0,0 +1,95 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+var iconURL= "http://www.freeiconsweb.com/Icons/16x16_people_icons/People_046.gif";
+
+module("SC.SegmentedView", {
+  setup: function() {
+    SC.RunLoop.begin();
+    pane = SC.MainPane.create({
+      childViews: [
+        SC.SegmentedView.extend({
+          items: [
+          { value: "Item1", icon: iconURL },
+          { value: "Item2", icon: iconURL },
+          { value: "Item3", icon: iconURL }],
+          itemTitleKey: 'value',
+          itemValueKey: 'value',
+          itemIconKey: 'icon',
+          value: "Item1 Item3".w(),
+          allowsEmptySelection: NO,
+          layout: { height: 25 } 
+        })]
+    });
+    pane.append(); // make sure there is a layer...
+    SC.RunLoop.end();
+    
+    view = pane.childViews[0];
+  }, 
+  
+  teardown: function() {
+    pane.remove();
+    pane = view = null ;
+  }
+});
+
+test("Check that properties are mapped correctly", function() {
+    view.triggerItemAtIndex(1);
+    SC.RunLoop.begin();
+    view.set('isEnabled', YES);
+    SC.RunLoop.end();
+    equals(view.get('value'), "Item2", "the second item should be selected.");
+    var items=view.displayItems();
+    equals(items[0][0], "Item1", 'Computed properties should match');
+    equals(items[0][1], "Item1", 'Computed properties should match');
+    equals(items[0][2], true, 'Computed properties should match');
+    equals(items[0][3], iconURL, 'Computed properties should match');
+    equals(items[0][4], null, 'Computed properties should match');
+    equals(items[0][5], null, 'Computed properties should match');
+    equals(items[0][6], 0, 'Computed properties should match');
+    var elem = view.get('layer').childNodes[0];
+
+    SC.Event.trigger(elem, 'mousedown');
+    equals(view._isMouseDown, YES, 'mousedown');
+    equals(view.get('activeIndex'), 0, '');
+    
+ });
+
+
+
+ test("Check that mouse actions work", function() {
+   view.triggerItemAtIndex(1);
+   SC.RunLoop.begin();
+   view.set('isEnabled', YES);
+   SC.RunLoop.end();
+   var elem = view.get('layer').childNodes[0];
+
+   SC.Event.trigger(elem, 'mousedown');
+   equals(view._isMouseDown, YES, 'Mouse down flag on mousedown should be ');
+   equals(view.get('activeIndex'), 0, 'The active item is the first segment.');
+   
+   var elem = view.get('layer').childNodes[1];
+   SC.Event.trigger(elem, 'mouseup');
+   equals(view._isMouseDown, NO, 'Mouse down flag on mouseup should be ');
+   equals(view.get('activeIndex'), -1, 'Ther shouldnt be any active item');
+   
+   var elem = view.get('layer').childNodes[2];
+   SC.Event.trigger(elem, 'mousedown');
+    
+   SC.Event.trigger(elem, 'mousemoved');
+   equals(view._isMouseDown, YES, 'Mouse down flag on mousemoved should be ');
+   equals(view.get('activeIndex'), 2, 'The active item is the third segment.');
+   
+   SC.Event.trigger(elem, 'mouseover');
+   equals(view._isMouseDown, YES, 'Mouse down flag on mouseover should be ');
+   equals(view.get('activeIndex'), 2, 'The active item is the third segment.');
+   
+  });
+
+

data/frameworks/sproutcore/frameworks/desktop/tests/views/segmented/ui.js

@@ -0,0 +1,222 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            portions copyright @2009 Apple, Inc.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+
+htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>');
+
+(function() {
+  var iconURL= "http://www.freeiconsweb.com/Icons/16x16_people_icons/People_046.gif";
+  
+  var pane = SC.ControlTestPane.design()
+    
+    .add("3_empty", SC.SegmentedView, { 
+      items: [ '', '' , ''],
+      layout: { height: 25 }
+    })
+    .add("3_empty,icon", SC.SegmentedView, { 
+      items: [
+      { value: "", icon: iconURL },
+      { value: "", icon: iconURL },
+      { value: "", icon: iconURL }],
+      itemTitleKey: 'value',
+      itemValueKey: 'value',
+      itemIconKey: 'icon',
+      layout: { height: 25 }
+    })
+    .add("3_items,1_sel", SC.SegmentedView, { 
+      items: "Item1 Item2 Item3".w(),
+      value: "Item2",
+      layout: { height: 25 }
+    })
+    .add("2_items,toolTip", SC.SegmentedView, { 
+      items: [
+      { value: "title1", toolTip: "this is title1's tip" },
+      { value: "title2", toolTip: "this is title2's tip" }],
+      itemTitleKey: 'value',
+      itemValueKey: 'value',
+      itemToolTipKey: 'toolTip',
+      layout: { height: 25 }
+    })
+    .add("3_items,1_sel,disabled", SC.SegmentedView, { 
+      items: "Item1 Item2 Item3".w(),
+      value: "Item2",
+      isEnabled: NO,
+      layout: { height: 25 }
+    })
+    .add("3_items,icon,2_sel", SC.SegmentedView, { 
+      items: [
+      { value: "Item1", icon: iconURL },
+      { value: "Item2", icon: iconURL },
+      { value: "Item3", icon: iconURL }],
+      itemTitleKey: 'value',
+      itemValueKey: 'value',
+      itemIconKey: 'icon',
+      value: "Item1 Item3".w(),
+      allowsEmptySelection: NO,
+      layout: { height: 25 }
+    })
+    .add("3_items,2_sel,disabled", SC.SegmentedView, { 
+       items: [
+        { value: "Item1", icon: iconURL },
+        { value: "Item2", icon: iconURL },
+        { value: "Item3", icon: iconURL }],
+        itemTitleKey: 'value',
+        itemValueKey: 'value',
+        itemIconKey: 'icon',
+        isEnabled: NO,
+        value: "Item1 Item3".w(),
+        layout: { height: 25 }
+    })   
+    .add("3_items,1_sel,emptySel", SC.SegmentedView, { 
+      items: ["Item1", "Very Long Item", "Item 3"],
+        value: "Very Long Item",
+        allowsEmptySelection: YES,
+        layout: { height: 25 }
+    })
+    .add("3_items,2_sel,emptySel", SC.SegmentedView, { 
+      items: ["Item1", "Very Long Item", "Item 3"],
+      value: "Item1 Item3".w(),
+      allowsEmptySelection: YES,
+      layout: { height: 25 }
+    })
+    .add("3_items,1_sel,multipleSel", SC.SegmentedView, { 
+      items: "Item1 Item2 Item3".w(),
+      value: "Item2",
+      allowsMultipleSelection: YES,
+      layout: { height: 25 }
+    })
+    .add("3_items,2_sel,multipleSel", SC.SegmentedView, { 
+      items: "Item1 Item2 Item3".w(),
+      value: "Item1 Item3".w(),
+      allowsMultipleSelection: YES,
+      layout: { height: 25 }
+    })
+    .add("3_items,1_sel,emptySel,multiSel", SC.SegmentedView, { 
+      items: "Item1 Item2 Item3".w(),
+      value: "Item2",
+      allowsEmptySelection: YES,
+      allowsMultipleSelection: YES,
+      layout: { height: 25 }
+    })
+    .add("3_items,2_sel,emptySel,multiSel", SC.SegmentedView, { 
+      items: "Item1 Item2 Item3".w(),
+      value: "Item1 Item3".w(),
+      allowsEmptySelection: YES,
+      allowsMultipleSelection: YES,
+      layout: { height: 25 }
+    });
+    
+  pane.show(); // add a test to show the test pane
+
+  // ..........................................................
+  // TEST VIEWS
+  // 
+  module('SC.SegmentedView ui', pane.standardSetup());
+  
+  test("Check that all segmentedViews are visible", function() {
+    ok(pane.view('3_empty').get('isVisibleInWindow'), '3_empty.isVisibleInWindow should be YES');
+    ok(pane.view('3_empty,icon').get('isVisibleInWindow'), '3_empty,icon.isVisibleInWindow should be YES');
+    ok(pane.view('3_items,1_sel').get('isVisibleInWindow'), '3_items,1_sel.isVisibleInWindow should be YES');
+    ok(pane.view('2_items,toolTip').get('isVisibleInWindow'), '2_items,toolTip.isVisibleInWindow should be YES');
+    ok(pane.view('3_items,1_sel,disabled').get('isVisibleInWindow'), '3_items,1_sel,disabled.isVisibleInWindow should be YES');
+    ok(pane.view('3_items,icon,2_sel').get('isVisibleInWindow'), '3_items,icon,2_sel.isVisibleInWindow should be YES');
+    ok(pane.view('3_items,2_sel,disabled').get('isVisibleInWindow'), '3_items,2_sel,disabled.isVisibleInWindow should be YES');
+    ok(pane.view('3_items,1_sel,emptySel').get('isVisibleInWindow'), '3_items,1 sel,emptySel.isVisibleInWindow should be YES');
+    ok(pane.view('3_items,2_sel,emptySel').get('isVisibleInWindow'), '3_items,2 sel,emptySel.isVisibleInWindow should be YES');
+    ok(pane.view('3_items,1_sel,multipleSel').get('isVisibleInWindow'), '3_items,1_sel,multipleSel.isVisibleInWindow should be YES');
+    ok(pane.view('3_items,2_sel,multipleSel').get('isVisibleInWindow'), '3_items,2_sel,multipleSel.isVisibleInWindow should be YES');
+    ok(pane.view('3_items,1_sel,emptySel,multiSel').get('isVisibleInWindow'), '3_items,1_sel,emptySel,multiSel.isVisibleInWindow should be YES');
+    ok(pane.view('3_items,2_sel,emptySel,multiSel').get('isVisibleInWindow'), '3_items,2_sel,emptySel,multiSel.isVisibleInWindow should be YES');
+  });
+  
+  
+  test("Check that all segments have the right classes set", function() {
+    var viewElem=pane.view('3_empty').$();
+    var segments=pane.view('3_empty').$('a');
+    ok(viewElem.hasClass('sc-view'), '3_empty.hasClass(sc-view) should be YES');
+    ok(viewElem.hasClass('sc-segmented-view'), '3_empty.hasClass(sc-segmented-view) should be YES');
+    for (var i=0, ilen=segments.length; i<ilen; i++){
+      seg=segments[i];
+      if(i==0){
+        ok((seg.className.indexOf('sc-first-segment')>=0), 'first segment has the right classname assigned.');
+      }    
+      if(i==segments.length-1){
+        ok((seg.className.indexOf('sc-last-segment')>=0), 'last segment has the right classname assigned.');
+      }
+      ok((seg.childNodes[0].className.indexOf('sc-button-inner')>=0), 'segment '+i+' should have an inner-button.');
+      ok((seg.childNodes[0].childNodes[0].className.indexOf('sc-button-label')>=0), 'segment '+i+' should have a label.');
+        
+      if(i!=0 && i!=segments.length-1){
+        ok((seg.className.indexOf('sc-middle-segment')>=0), 'middle segment has the right classname assigned.');
+      }
+      viewElem=pane.view('3_items,2_sel,disabled').$();
+      ok(viewElem.hasClass('disabled'), '3_items,2_sel,disabled should have the disabled class set');
+    }
+
+  });
+  
+  
+  test("Check that all segments have the right classes set", function() {
+    var viewElem=pane.view('3_empty,icon').$();
+    var segments=pane.view('3_empty,icon').$('a');
+    ok(viewElem.hasClass('sc-view'), '3_empty.hasClass(sc-view) should be YES');
+    ok(viewElem.hasClass('sc-segmented-view'), '3_empty.hasClass(sc-segmented-view) should be YES');
+    for (var i=0, ilen=segments.length; i<ilen; i++){
+      seg=segments[i];
+      if(i==0){
+        ok((seg.className.indexOf('sc-first-segment')>=0), 'first segment has the right classname assigned.');
+      }    
+      if(i==segments.length-1){
+        ok((seg.className.indexOf('sc-last-segment')>=0), 'last segment has the right classname assigned.');
+      }
+      ok((seg.childNodes[0].className.indexOf('sc-button-inner')>=0), 'segment '+i+' should have an inner-button.');
+      ok((seg.childNodes[0].childNodes[0].className.indexOf('sc-button-label')>=0), 'segment '+i+' should have a label.');
+      ok((seg.childNodes[0].childNodes[0].childNodes[0].src.length>0), 'segment '+i+' should have an icon.');
+        
+      if(i!=0 && i!=segments.length-1){
+        ok((seg.className.indexOf('sc-middle-segment')>=0), 'middle segment has the right classname assigned.');
+      }
+      viewElem=pane.view('3_items,2_sel,disabled').$();
+      ok(viewElem.hasClass('disabled'), '3_items,2_sel,disabled should have the disabled class set');
+    }
+
+  });
+  
+  
+  test("Check that the selected segments have the right classes assigned.", function() {
+    var segments=pane.view('3_empty').$('a');
+    for (var i=0, ilen=segments.length; i<ilen; i++){
+      seg=segments[i];
+      ok((seg.className.indexOf('sel')==-1), 'this element should not be selected.');
+    }
+
+  });
+  
+  
+  test("Check that two items are selected.", function() {
+    var segments=pane.view('3_items,icon,2_sel').$('a');
+    var count=0;
+    for (var i=0, ilen=segments.length; i<ilen; i++){
+      seg=segments[i];
+      if(seg.className.indexOf('sel')!=-1){
+        count++;
+      }
+    }
+    ok((count==2), '3_items,2_sel,disabled should have two segments selected.');
+
+  });
+  
+  
+  test("2_items,toolTip has toolTips assigned.", function() {
+    var segments=pane.view('2_items,toolTip').$('a');
+    ok((segments[0].title=="this is title1's tip"), 'first segment has expected tool tip assigned.');
+    ok((segments[1].title=="this is title2's tip"), 'second segment has expected tool tip assigned.');
+  });
+  
+})();