sproutcore 1.8.2.1 → 1.9.0

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

@@ -48,6 +48,17 @@ var pane;
       isEnabled: NO,
       layout: { height: 25 }
     })
+    .add("3_items,2_sel,1_disabled", SC.SegmentedView, {
+      items: [
+      { value: "Item1" },
+      { value: "Item2", isEnabled: false },
+      { value: "Item3" }],
+      itemTitleKey: 'value',
+      itemValueKey: 'value',
+      itemIsEnabledKey: 'isEnabled',
+      value: ["Item1","Item2"],
+      layout: { height: 25 }
+    })
     .add("3_items,icon,2_sel", SC.SegmentedView, {
       items: [
       { value: "Item1", icon: iconURL },
@@ -196,8 +207,9 @@ var pane;
     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,2_sel,1_disabled').get('isVisibleInWindow'), '3_items,2_sel,1_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,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');
@@ -208,7 +220,6 @@ var pane;
     ok(pane.view('3_items,rightAligned').get('isVisibleInWindow'), '3_items,rightAligned.isVisibleInWindow should be YES');
     ok(pane.view('aria-role_tab,tablist').get('isVisibleInWindow'), 'aria-role_tab,tablist.isVisibleInWindow should be YES');
     ok(pane.view('aria-labelledby').get('isVisibleInWindow'), 'aria-labelledby.isVisibleInWindow should be YES');
-
   });
 
 
@@ -234,10 +245,16 @@ var pane;
       if(i !== 0 && i < seglen-1) {
         ok((seg.className.indexOf('sc-middle-segment')>=0), 'middle segments have 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');
     }
 
+    viewElem=pane.view('3_items,1_sel,disabled').$();
+    ok(viewElem.hasClass('disabled'), '3_items,1_sel,disabled should have the disabled class set');
+
+    viewElem=pane.view('3_items,2_sel,disabled').$();
+    ok(viewElem.hasClass('disabled'), '3_items,2_sel,disabled should have the disabled class set');
+
+    seg=pane.view('3_items,2_sel,1_disabled').$('.sc-segment-view')[1];
+    ok($(seg).hasClass('disabled'), '3_items,2_sel,1_disabled should have the disabled class set on the middle segment');
   });
 
 
@@ -263,13 +280,12 @@ var pane;
       if(i!==0 && i!=seglen-1){
         ok((seg.className.indexOf('sc-middle-segment')>=0), 'middle segments have 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');
     }
 
+    viewElem=pane.view('3_items,2_sel,disabled').$();
+    ok(viewElem.hasClass('disabled'), '3_items,2_sel,disabled should have the disabled class set');
   });
 
-
   test("No value set", function() {
     var segments=pane.view('3_empty').$('.sc-segment-view');
 
@@ -284,7 +300,6 @@ var pane;
 
   });
 
-
   test("Check that two items are selected.", function() {
     var segments=pane.view('3_items,icon,2_sel').$('.sc-segment-view');
     var count=0;
@@ -301,7 +316,6 @@ var pane;
 
   });
 
-
   test("2_items,toolTip has toolTips assigned.", function() {
     var segments=pane.view('2_items,toolTip').$('.sc-segment-view');
     ok((segments[0].title=="this is title1's tip"), 'first segment has expected tool tip assigned.');
@@ -454,4 +468,45 @@ var pane;
     }
   });
 
+test("Check that mouse events change the active classes.", function() {
+  var view1, view2, view3, layer1, layer2, layer3, point, ev;
+
+  view1 = pane.view('3_items,2_sel,1_disabled').get('childViews').objectAt(0); // $('.sc-segment-view')[0];
+  layer1 = view1.get('layer');
+  point = SC.offset(layer1);
+
+  ev = SC.Event.simulateEvent(layer1, 'mousedown', { clientX: point.x, clientY: point.y });
+  SC.Event.trigger(layer1, 'mousedown', [ev]);
+
+  ok(view1.$().hasClass('active'), 'The first segment should have an active class on mousedown');
+
+  ev = SC.Event.simulateEvent(layer1, 'mousemove', { clientX: point.x + 1, clientY: point.y });
+  SC.Event.trigger(layer1, 'mousemove', [ev]);
+
+  view2 = pane.view('3_items,2_sel,1_disabled').get('childViews').objectAt(1);
+  layer2 = view2.get('layer');
+  point = SC.offset(layer2);
+
+  ev = SC.Event.simulateEvent(layer2, 'mousemove', { clientX: point.x + 1, clientY: point.y + 1 });
+  SC.Event.trigger(layer2, 'mousemove', [ev]);
+
+  ok(!view1.$().hasClass('active'), 'The first segment should no longer have an active class on mouseExited (via mousemove)');
+  ok(!view2.$().hasClass('active'), 'The disabled second segment should not have an active class on mouseEntered (via mousemove)');
+
+  view3 = pane.view('3_items,2_sel,1_disabled').get('childViews').objectAt(2);
+  layer3 = view3.get('layer');
+  point = SC.offset(layer3);
+
+  ev = SC.Event.simulateEvent(layer3, 'mousemove', { clientX: point.x + 1, clientY: point.y + 1 });
+  SC.Event.trigger(layer3, 'mousemove', [ev]);
+
+  ok(view3.$().hasClass('active'), 'The third segment should have an active class on mouseMoved');
+
+  ev = SC.Event.simulateEvent(layer3, 'mouseup', { clientX: point.x + 1, clientY: point.y + 1 });
+  SC.Event.trigger(layer3, 'mouseup', [ev]);
+
+  ok(!view1.$().hasClass('sel'), 'The first segment should lose its sel class on mouseUp');
+  ok(view3.$().hasClass('sel'), 'The third segment should have a sel class on mouseUp');
+});
+
 })();

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/select/methods.js

@@ -53,12 +53,12 @@ module("SC.SelectView",{
           itemTitleKey: 'title',
           itemSortKey: 'pos'
         }),
-        
+
         //view5
         SC.SelectView.extend({
           items: ["My","New", "List"]
         }),
-        
+
         //view6
         SC.SelectView.extend({
           items: ["My","New", "List"],
@@ -74,7 +74,7 @@ module("SC.SelectView",{
     view4 = pane.childViews[3] ;
     view5 = pane.childViews[4] ;
     view6 = pane.childViews[5] ;
-    
+
     pane.append(); // make sure there is a layer...
     SC.RunLoop.end();
   },
@@ -91,8 +91,6 @@ test("Check if valueBinding works", function() {
   equals('World',view4.get('value'),'Value should be') ;
 });
 
-// the test that was here pretty much tested nothing.
-
 //test5
 test("sortObjects() sorts the items of the Drop Down component", function() {
   var obj = view1.get("items");
@@ -103,8 +101,6 @@ test("sortObjects() sorts the items of the Drop Down component", function() {
   equals("You",obj.get(2),'Third item should be') ;
 });
 
-// There was an awful test here. I can't even tell what it was supposed to do.
-
 //test7
 test("isEnabled=NO should add disabled class", function() {
   SC.RunLoop.begin() ;
@@ -113,9 +109,7 @@ test("isEnabled=NO should add disabled class", function() {
   ok(view1.$().hasClass('disabled'), 'should have disabled class') ;
 });
 
-// there is NO need to test binding.
-
-// I think this one is probably somewhat pointless as well, but perhaps some
+// I think this test is probably somewhat pointless, but perhaps some
 // buggy observers being called could break it or something...
 test("Check if setting a value actually changes the selection value", function() {
   SC.RunLoop.begin() ;
@@ -125,7 +119,13 @@ test("Check if setting a value actually changes the selection value", function()
   equals(view2.get('value'), 'Menu', 'value of Drop down should change to') ;
 }) ;
 
-// No need to test binding (was test10)
+//test10
+test('Setting the view\'s items should not result in an error.', function() {
+  try { view1.set('items', null); }
+  catch (e) {
+    ok(false, 'Nulling out items should not throw an error.');
+  }
+});
 
 //test11
 test("The properties for select button should take default values unless specified", function() {

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/select/ui.js

@@ -96,6 +96,14 @@ var pane = SC.ControlTestPane.design()
       emptyName: '<empty>',
       escapeHTML: NO,
       showCheckbox: YES
+    })
+
+    .add("SelectWithSeparator", SC.SelectView, {
+      items: [{ title: "None", separator: YES },
+        { title: "Low", isEnabled: NO },
+        { separator: YES },
+        { title: "High" }],
+      itemTitleKey: 'title'
     });
 
 pane.show();
@@ -115,7 +123,7 @@ module('SC.SelectView ui', {
   }
 });
 
-//test1
+// test1
 test("Check the visiblity of the selectButtons", function() {
   ok(pane.view('Basic').get('isVisibleInWindow'), 'Basic.isVisibleInWindow should be YES') ;
   ok(pane.view('Disabled').get('isVisibleInWindow'), 'Disabled.isVisibleInWindow should be YES') ;
@@ -126,6 +134,7 @@ test("Check the visiblity of the selectButtons", function() {
   ok(pane.view('SelectButtonWithIcon').get('isVisibleInWindow'), 'SelectButtonWithIcon.isVisibleInWindow should be YES') ;
   ok(pane.view('StaticLayout').get('isVisibleInWindow'), 'StaticLayout.isVisibleInWindow should be YES') ;
   ok(pane.view('SelectButtonWithEmptyName').get('isVisibleInWindow'), 'SelectButtonWithEmptyName.isVisibleInWindow should be YES') ;
+  ok(pane.view('SelectWithSeparator').get('isVisibleInWindow'), 'SelectButtonWithEmptyName.isVisibleInWindow should be YES') ;
 }) ;
 
 //test2
@@ -241,7 +250,6 @@ test("StaticLayout", function() {
 test("SelectButtonWithEmptyName", function() {
   var view=pane.view('SelectButtonWithEmptyName').$(),
       label = pane.view('SelectButtonWithEmptyName').$('label');
-      console.log('label = ' + label);
   ok(!view.hasClass('icon'), 'hasClass(Icon) should be NO') ;
   ok(view.hasClass('sc-view'), 'hasClass(sc-view) should be YES') ;
   ok(view.hasClass('sc-button-view'), 'hasClass(sc-button-view) should be YES') ;
@@ -251,3 +259,21 @@ test("SelectButtonWithEmptyName", function() {
   ok(!view.hasClass('def'), 'hasClass(def) should be NO') ;
   equals(label[0].innerHTML, '<empty>', 'The label should be "<empty>"');
 });
+
+/**
+  This is just a simple test that shows that when the first item provided to
+  SC.SelectView is a separator or is not enabled, it ignores it as the default
+  in favor of the first item with a value that is selectable.
+*/
+test("SelectWithSeparator", function() {
+  var view=pane.view('SelectWithSeparator').$(),
+      label = pane.view('SelectWithSeparator').$('label');
+  ok(!view.hasClass('icon'), 'hasClass(Icon) should be NO') ;
+  ok(view.hasClass('sc-view'), 'hasClass(sc-view) should be YES') ;
+  ok(view.hasClass('sc-button-view'), 'hasClass(sc-button-view) should be YES') ;
+  ok(view.hasClass('sc-regular-size'), 'hasClass(sc-regular-size) should be YES') ;
+  ok(!view.hasClass('sel'), 'hasClass(sel) should be NO') ;
+  ok(!view.hasClass('disabled'), 'hasClass(disabled) should be NO') ;
+  ok(!view.hasClass('def'), 'hasClass(def) should be NO') ;
+  equals(label[0].innerHTML, 'High', 'The label should be "High"');
+});

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/slider/methods.js

@@ -0,0 +1,74 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            portions copyright @2011 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+/*global module test htmlbody ok equals same stop start */
+
+
+module("SC.SliderView Methods", {
+  setup: function() {
+    // SC.RunLoop.begin();
+    pane = SC.MainPane.create({
+      childViews: [
+        SC.SliderView.extend({
+          value: 50,
+          minimum: 0,
+          maximum: 100
+        })]
+    });
+    pane.append(); // make sure there is a layer...
+    // SC.RunLoop.end();
+
+    view = pane.childViews[0];
+  },
+
+  teardown: function() {
+    pane.remove();
+    pane = view = null ;
+  }
+});
+
+test("changing value of the slider will change its left position", function() {
+  equals(view.get('value'), 50, 'precond - value should be 50');
+  equals(view.$('.sc-handle').css('left'), '50%', 'left of sc-handle should be 50%');
+
+  var elem = view.get('layer');
+
+  SC.RunLoop.begin();
+  view.set('value', 100);
+  SC.RunLoop.end();
+
+  equals(view.get('value'), 100, 'value should now be 100');
+  equals(view.$('.sc-handle').css('left'), '100%', 'left of sc-handle should be 100%');
+
+});
+
+test("going over maximum slider limit", function() {
+  equals(view.get('value'), 50, 'precond - value should be 50');
+
+  var elem = view.get('layer');
+
+  SC.RunLoop.begin();
+  view.set('value', 150);
+  SC.RunLoop.end();
+
+  // TODO: should we allow setting value higher then maximum?
+  equals(view.get('value'), 150, 'value should now be 150');
+  equals(view.$('.sc-handle').css('left'), '100%', 'left of sc-handle should be 100%');
+});
+
+test("going below minimum slider limit", function() {
+  equals(view.get('value'), 50, 'precond - value should be 50');
+
+  var elem = view.get('layer');
+
+  SC.RunLoop.begin();
+  view.set('value', -10);
+  SC.RunLoop.end();
+
+  // TODO: should we allow setting value lower then minimum?
+  equals(view.get('value'), -10, 'value should now be -10');
+  equals(view.$('.sc-handle').css('left'), '0%', 'left of sc-handle should be 0%');
+});

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/slider/ui.js

@@ -0,0 +1,141 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            portions copyright @2011 Apple Inc.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test htmlbody ok equals same stop start */
+
+(function() {
+var pane = SC.ControlTestPane.design()
+  .add("slider basic", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 50,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("slider disabled", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 50,
+    minimum: 0,
+    maximum: 100,
+    isEnabled: NO
+  })
+  .add("slider value 100", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 100,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("slider basic step 20", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 50,
+    minimum: 0,
+    maximum: 100,
+    step: 20
+  })
+  .add("slider aria-role", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 10,
+    minimum: 0,
+    maximum: 50
+  })
+  .add("slider aria-valuemax", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 40,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("slider aria-valuemin", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 20,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("slider aria-valuenow", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 40,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("slider aria-valuetext", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 20,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("slider aria-orientation", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 50,
+    minimum: 0,
+    maximum: 100
+  });
+
+// ..........................................................
+// TEST VIEWS
+//
+
+module("SC.SliderView UI", pane.standardSetup());
+
+test("basic", function() {
+  var view = pane.view('slider basic');
+
+  ok(!view.$().hasClass('disabled'), 'should NOT have disabled class');
+  ok(view.$('.track').length > 0, 'should have track classed element');
+  ok(view.$('.sc-handle').length > 0, 'should have sc-handle classed element');
+  equals(view.$('.sc-handle')[0].style.left, '50%', 'left of sc-handle should be 50%');
+});
+
+test("disabled", function() {
+  var view = pane.view('slider disabled');
+
+  ok(view.$().hasClass('disabled'), 'should have disabled class');
+  ok(view.$('.track').length > 0, 'should have track classed element');
+  ok(view.$('.sc-handle').length > 0, 'should have sc-handle classed element');
+  equals(view.$('.sc-handle')[0].style.left, '50%', 'left of sc-handle should be 50%');
+});
+
+test("basic value 100", function() {
+  var view = pane.view('slider value 100');
+
+  ok(!view.$().hasClass('disabled'), 'should have disabled class');
+  ok(view.$('.track').length > 0, 'should have track classed element');
+  ok(view.$('.sc-handle').length > 0, 'should have sc-handle classed element');
+  equals(view.$('.sc-handle')[0].style.left, '100%', 'left of sc-handle should be 100%');
+});
+
+test("basic step 20", function() {
+  var view = pane.view('slider basic step 20');
+
+  ok(!view.$().hasClass('disabled'), 'should have disabled class');
+  ok(view.$('.track').length > 0, 'should have track classed element');
+  ok(view.$('.sc-handle').length > 0, 'should have sc-handle classed element');
+  equals(view.$('.sc-handle')[0].style.left, '60%', 'left of sc-handle should be 60%');
+});
+
+test("Check if aria role is set to slider view", function() {
+  var viewElem = pane.view('slider aria-role').$();
+  ok(viewElem.attr('role') === 'slider', 'aria-role is set to the slider  view');
+});
+
+test("Check if attribute aria-valuemax is set correctly", function() {
+  var viewElem = pane.view('slider aria-valuemax').$();
+  equals(viewElem.attr('aria-valuemax'), 100, 'aria-valuemax should be 100');
+});
+
+test("Check if attribute aria-valuemin is set correctly", function() {
+  var viewElem = pane.view('slider aria-valuemin').$();
+  equals(viewElem.attr('aria-valuemin'), 0, 'aria-valuemin should be 0');
+});
+
+test("Check if attribute aria-valuenow is set correctly", function() {
+  var viewElem = pane.view('slider aria-valuenow').$();
+  equals(viewElem.attr('aria-valuenow'), 40, 'aria-valuenow should be 40');
+});
+
+test("Check if attribute aria-orientation is set correctly", function() {
+  var viewElem = pane.view('slider aria-orientation').$();
+  equals(viewElem.attr('aria-orientation'), "horizontal", 'aria-orientation should be horizontal');
+});
+})();