sproutit-sproutcore 1.0.20090721145236 → 1.0.20090721145251

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

@@ -0,0 +1,128 @@
+// ==========================================================================
+// 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 */
+/*
+module("SC.ProgressView Methods", {
+  setup: function() {
+    SC.RunLoop.begin();
+    pane = SC.MainPane.create({
+      childViews: [
+        SC.ProgressView.extend({
+          value: 25,
+          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 a progress view value to maximum", function() {
+  equals(view.get('value'), 25, 'precon - value should be 25');
+  equals(view.get('isIndeterminate'), NO, 'precon - value should be NO');
+  equals(view.get('isRunning'), NO, 'precon - value should be NO');
+  equals(view.get('isEnabled'), YES, 'precon - value should be YES');
+  
+  SC.RunLoop.begin();
+  view.set('value', 100);
+  SC.RunLoop.end();
+  
+  equals(view.get('value'), 100, 'should be 100');
+});
+
+test("changing value of a disabled progress view", function() {
+  equals(view.get('value'), 25, 'precon - value should be 25');
+  equals(view.get('isEnabled'), YES, 'precon - value should be YES');
+  
+  SC.RunLoop.begin();
+  view.set('isEnabled', NO);
+  view.set('value', 100);
+  SC.RunLoop.end();
+  
+  // changing while disabled is allowed
+  equals(view.get('value'), 100, 'should be 100');
+});
+
+// ..........................................................
+// SC.SliderView
+//
+
+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/frameworks/sproutcore/frameworks/desktop/tests/views/progress/ui.js

@@ -0,0 +1,240 @@
+// ==========================================================================
+// 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 pane = SC.ControlTestPane.design()
+
+  .add("progress basic", SC.ProgressView, {
+    value: 25,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("progress disabled", SC.ProgressView, {
+    value: 25,
+    minimum: 0,
+    maximum: 100,
+    isEnabled: NO
+  })
+  .add("progress basic value 0", SC.ProgressView, {
+    value: 0,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("progress basic value 100", SC.ProgressView, {
+    value: 100,
+    minimum: 0,
+    maximum: 100
+  })
+  .add("progress basic max 50", SC.ProgressView, {
+    value: 25,
+    minimum: 0,
+    maximum: 50
+  })
+  
+  // Slider View UI
+  .add("slider basic", SC.SliderView, {
+    value: 50, 
+    minimum: 0, 
+    maximum: 100
+  })
+  .add("slider disabled", SC.SliderView, {
+    value: 50, 
+    minimum: 0, 
+    maximum: 100,
+    isEnabled: NO
+  })
+  .add("slider value 100", SC.SliderView, {
+    value: 100, 
+    minimum: 0, 
+    maximum: 100
+  })
+  .add("slider basic step 20", SC.SliderView, {
+    value: 50, 
+    minimum: 0, 
+    maximum: 100,
+    step: 20
+  });
+
+pane.show(); // add a test to show the test pane
+
+// ..........................................................
+// TEST VIEWS
+// 
+module("SC.ProgressView UI");
+
+test("basic", function() {
+  
+  var view = pane.view('progress basic');
+  
+  ok(!view.$().hasClass('disabled'), 'should NOT have disabled class');
+  ok(view.$('.sc-inner'), 'should have sc-inner class');
+  ok(view.$('.sc-outer-head'), 'should have sc-outer-head class');
+  ok(view.$('.sc-outer-tail'), 'should have sc-outer-tail class');
+  ok(view.$('.sc-inner-head'), 'should have sc-inner-head class');
+  ok(view.$('.sc-inner-tail'), 'should have sc-inner-tail class');
+  equals(view.$('.sc-inner').css("width"), "25%", 'width should be 25%');
+  equals(view.$('.sc-inner').width(), 84, 'pixel width ');
+  
+});
+
+test("disabled", function() {
+  
+  var view = pane.view('progress disabled');
+  
+  ok(view.$().hasClass('disabled'), 'should have disabled class');
+  ok(view.$('.sc-inner'), 'should have sc-inner class');
+  equals(view.$('.sc-inner').css("width"), "0%", 'width should be 0%');
+  equals(view.$('.sc-inner').width(), 0, 'pixel width ');
+  
+});
+
+test("basic value 0", function() {
+  
+  var view = pane.view('progress basic value 0');
+  
+  ok(!view.$().hasClass('disabled'), 'should NOT have disabled class');
+  ok(view.$('.sc-inner'), 'should have sc-inner class');
+  equals(view.$('.sc-inner').css("width"), "0%", 'width should be 0%');
+  equals(view.$('.sc-inner').width(), 0, 'pixel width ');
+  
+});
+
+test("basic value 100", function() {
+  
+  var view = pane.view('progress basic value 100');
+  
+  ok(!view.$().hasClass('disabled'), 'should NOT have disabled class');
+  ok(view.$('.sc-inner'), 'should have sc-inner class');
+  equals(view.$('.sc-inner').css("width"), "100%", 'width should be 100%');
+  equals(view.$('.sc-inner').width(), 338, 'pixel width ');
+  
+});
+
+test("basic max 50", function() {
+  
+  var view = pane.view('progress basic max 50');
+  
+  ok(!view.$().hasClass('disabled'), 'should NOT have disabled class');
+  ok(view.$('.sc-inner'), 'should have sc-inner class');
+  equals(view.$('.sc-inner').css("width"), "50%", 'width should be 50%');
+  equals(view.$('.sc-inner').width(), 169, 'pixel width ');
+  
+});
+
+// ..........................................................
+// TEST CHANGING PROGRESS BARS
+//
+
+test("changing value from empty -> value", function() {
+  var view = pane.view('progress basic value 0');
+  
+  equals(view.$('.sc-inner').width(), 0, 'precon - pixel width should be 0');
+  SC.RunLoop.begin();
+  view.set('value', 50);
+  SC.RunLoop.end();
+  equals(view.$('.sc-inner').css("width"), "50%", 'width should be 50%');
+  equals(view.$('.sc-inner').width(), 169, 'pixel width ');
+});
+
+test("changing value from full -> empty", function() {
+  var view = pane.view('progress basic value 100');
+  
+  equals(view.$('.sc-inner').width(), 338, 'precon - pixel width should be 316');
+  SC.RunLoop.begin();
+  view.set('value', 0);
+  SC.RunLoop.end();
+  equals(view.$('.sc-inner').css("width"), "0%", 'width should be 0%');
+  equals(view.$('.sc-inner').width(), 0, 'pixel width ');
+});
+
+
+test("changing value from full -> negative number", function() {
+  var view = pane.view('progress basic value 100');
+	
+  SC.RunLoop.begin();
+  view.set('value', 100);
+  SC.RunLoop.end();
+  
+  equals(view.$('.sc-inner').width(), 338, 'precon - pixel width should be 338');
+  SC.RunLoop.begin();
+  view.set('value', -10);
+  SC.RunLoop.end();
+  equals(view.$('.sc-inner').css("width"), "0%", 'width should be 0%');
+  equals(view.$('.sc-inner').width(), 0, 'pixel width ');
+});
+
+test("changing value to over maximum", function() {
+  var view = pane.view('progress basic');
+  
+  equals(view.$('.sc-inner').width(), 84, 'precon - pixel width should be 84');
+  SC.RunLoop.begin();
+  view.set('value', 110);
+  SC.RunLoop.end();
+  equals(view.$('.sc-inner').css("width"), "100%", 'width should be 100%');
+  equals(view.$('.sc-inner').width(), 338, 'pixel width ');
+});
+
+test("changing value to a string", function() {
+  var view = pane.view('progress basic');
+  
+  SC.RunLoop.begin();
+  view.set('value', 25);
+  SC.RunLoop.end();
+  equals(view.$('.sc-inner').width(), 84, 'precon - pixel width should be 84');
+  SC.RunLoop.begin();
+  view.set('value', 'aString');
+  SC.RunLoop.end();
+  equals(view.$('.sc-inner').css("width"), "0%", 'width should be 0%');
+  equals(view.$('.sc-inner').width(), 0, 'pixel width ');
+});
+
+
+// ..........................................................
+// SC.SliderView
+//
+
+module("SC.SliderView UI");
+
+test("basic", function() {
+  var view = pane.view('slider basic');
+  
+  ok(!view.$().hasClass('disabled'), 'should NOT have disabled class');
+  ok(view.$('.sc-inner'), 'should have sc-inner class');
+  ok(view.$('.sc-handle'), 'should have sc-handle class');
+  equals(view.$('.sc-handle').css('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.$('.sc-inner'), 'should have sc-inner class');
+  ok(view.$('.sc-handle'), 'should have sc-handle class');
+  equals(view.$('.sc-handle').css('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.$('.sc-inner'), 'should have sc-inner class');
+  ok(view.$('.sc-handle'), 'should have sc-handle class');
+  equals(view.$('.sc-handle').css('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.$('.sc-inner'), 'should have sc-inner class');
+  ok(view.$('.sc-handle'), 'should have sc-handle class');
+  equals(view.$('.sc-handle').css('left'), '60%', 'left of sc-handle should be 60%');
+});
+})();

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

@@ -0,0 +1,113 @@
+// ==========================================================================
+// 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 ;
+module("SC.RadioView Logic", {
+  setup: function() {
+    SC.RunLoop.begin();
+    pane = SC.MainPane.create({
+      childViews: [
+        SC.RadioView.extend({
+          layout: { right: 20, bottom: 20, width: 100, height: 23 },
+          items: 'Red Green'.w(),
+          value: 'Red',
+          isEnabled: YES
+        })]
+    });
+    pane.append(); // make sure there is a layer...
+    SC.RunLoop.end();
+    
+    view = pane.childViews[0];
+  }, 
+  
+  teardown: function() {
+    pane.remove();
+    pane = view = null ;
+  }
+});
+
+test("renders an input tag with appropriate attributes", function() {
+  equals(view.get('value'), 'Red', 'precon - value should be YES');
+
+  var q = Q$('input', view.get('layer'));
+  equals(q.attr('type'), 'radio', 'should have type=radio');
+  equals(q.attr('name'), SC.guidFor(view), 'should have name=view_guid');
+  equals(q.attr('checked'), YES, 'should be checked');
+});
+
+test("changing the value should update the group", function() {
+  var oldValue = view.get('value');
+  SC.RunLoop.begin();
+  view.set('value', 'Green');
+  SC.RunLoop.end();
+
+  ok(view.get('value') !== oldValue, 'precond - should have changed value');
+  var q = Q$('.sel > span', view.get('layer'));
+  equals(q.text(), view.get('value'), 'label should have new value');
+});
+
+test("isEnabled should alter group classname and sync with isEnabled property", function() {
+
+  // check initial render state
+  ok(view.get('isEnabled'), 'isEnabled should match value');
+  ok(!view.$().hasClass('disabled'), 'should NOT have disabled class');
+
+  // update value -- make sure isEnabled changes.  
+  SC.RunLoop.begin();
+  view.set('isEnabled', 0); // make falsy. (but not NO exactly)
+  SC.RunLoop.end();
+  
+  ok(!view.get('isEnabled'), 'isEnabled should now be NO');
+  ok(view.$().hasClass('disabled'), 'should have disabled class');
+
+  // update isEnabled -- make sure it edits the value
+  SC.RunLoop.begin();
+  view.set('isEnabled', YES);
+  SC.RunLoop.end();
+  
+  ok(view.get('isEnabled'), 'isEnabled should match value');
+  ok(!view.$().hasClass('disabled'), 'should NOT have disabled class');
+});
+
+test("clicking on a radio button will change toggle the value", function() {
+  equals(view.get('value'), 'Red', 'precond - value should be Red');
+  view.$('input').get(1).click();
+  equals(view.get('value'), 'Green', 'value should have changed');
+});
+
+test("pressing mouseDown and then mouseUp anywhere in a radio button should toggle the selection", function() {
+  var elem = view.get('layer'), input = SC.$('input', elem);
+  
+  SC.Event.trigger(elem, 'mousedown');
+  ok(view.get('isActive'), 'view should be active');
+  equals(view.get('value'), 'Red', 'value should not change yet');
+  
+  // simulate mouseUp and browser-native change to control
+  SC.Event.trigger(elem,'mouseup');
+  input.attr('checked', NO);
+  // loose focus of the element since it was changed
+  SC.Event.trigger(input.get(1),'change');
+  
+  ok(!view.get('isActive'), 'view should no longer be active');
+  equals(view.get('value'), undefined, 'value should be undefined (none checked)');
+  
+  input = elem = null ;
+});
+
+test("isEnabled=NO should add disabled attr to input", function() {
+  SC.RunLoop.begin();
+  view.set('isEnabled', NO);
+  SC.RunLoop.end();
+  
+  ok(view.$input().attr('disabled'), 'should have disabled attr');
+  
+  ok(view.get('value'), 'precond - value should be true');
+  view.$input().get(1).click();
+  ok(view.get('value'), 'value should not change when clicked');
+});