sproutit-sproutcore 1.0.20090721145236 → 1.0.20090721145251

data/frameworks/sproutcore/frameworks/foundation/tests/views/text_field/methods.js

@@ -0,0 +1,76 @@
+// ==========================================================================
+// 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 */
+
+
+// note: need to test interaction with Validators here
+// possibly move Validator support to TextFieldView specifically.
+
+var pane, view ;
+module("SC.TextFieldView",{
+	setup: function() {
+	    SC.RunLoop.begin();
+	    pane = SC.MainPane.create({
+		  childViews: [
+		   SC.TextFieldView.extend({
+			hint:'First Name',
+			value:'',
+			title:'First Name'
+		   }),
+		   SC.TextFieldView.extend({
+			hint:'Name',
+			value:'SproutCore',
+			isEnabled: NO
+		   })]	
+		});
+		pane.append(); // make sure there is a layer...
+	    SC.RunLoop.end();
+	
+		view = pane.childViews[0];
+		view1= pane.childViews[1];
+	},
+	
+	teardown: function() {
+    	pane.remove();
+    	pane = view = null ;
+  	}		
+});
+
+test("renders an text field input tag with appropriate attributes", function() {
+  equals(view.get('value'), '', 'value should be empty');
+  equals(view1.get('value'), 'SproutCore', 'value should not be empty ');
+  equals(view.get('isEnabled'),YES,'field enabled' );	
+  equals(view1.get('isEnabled'),NO,'field not enabled' );
+  var q = Q$('input', view.get('layer'));
+  equals(q.attr('type'), 'text', 'should have type as text');
+  equals(q.attr('name'), SC.guidFor(view), 'should have name as view_guid');
+});
+
+test("isEnabled=NO should add disabled class", function() {
+  SC.RunLoop.begin();
+  view.set('isEnabled', NO);
+  SC.RunLoop.end();  
+  ok(view.$().hasClass('disabled'), 'should have disabled class');
+});
+
+// test("isEnabled=NO should add disabled attr to input", function() {
+//   SC.RunLoop.begin();
+//   view1.set('isEnabled', NO);
+//   SC.RunLoop.end();  
+//   ok(view1.$input().attr('disabled'), 'should have disabled attr');  
+//   view1.set('isEditing',YES);
+//   ok(view1.get('value') === 'SproutCore', 'value cannot be changed');
+//   });
+
+test("isEnabled and isEditable mapping", function() {
+  	obj= SC.TextFieldView.create();
+	obj.set('isEnabled',false)
+	equals(obj.get('isEditable'),false);
+	obj.set('isEnabled',true)
+	equals(obj.get('isEditable'),true);
+});

data/frameworks/sproutcore/frameworks/foundation/tests/views/text_field/ui.js

@@ -0,0 +1,250 @@
+// ==========================================================================
+// 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 pane = SC.ControlTestPane.design()
+  .add("empty", SC.TextFieldView, { 
+    hint: "Full Name", 
+    value: ''
+  })
+  
+  .add("with value", SC.TextFieldView, { 
+    hint: "Full Name", 
+    value: 'John Doe'
+  })
+  
+  .add("disabled - empty", SC.TextFieldView, { 
+    hint: "Full Name", 
+    value: null,
+    isEnabled: NO
+  })
+  
+  .add("disabled - with value", SC.TextFieldView, { 
+    hint: "Full Name", 
+    value: 'John Doe',
+    isEnabled: NO
+  })
+  
+  .add("textarea - empty", SC.TextFieldView, { 
+    hint: "Full Name", 
+    value: '',
+    isTextArea: YES
+  })
+  
+  .add("textarea - with value", SC.TextFieldView, { 
+    hint: "Full Name", 
+    value: 'John Doe',
+    isTextArea: YES
+  })
+  
+  .add("textarea - disabled - empty", SC.TextFieldView, { 
+    hint: "Full Name", 
+    value: '',
+    isTextArea: YES,
+    isEnabled: NO
+  })
+  
+  .add("textarea - disabled - with value", SC.TextFieldView, { 
+    hint: "Full Name", 
+    value: 'John Doe',
+    isTextArea: YES,
+    isEnabled: NO
+  });
+  
+  
+    
+pane.show(); // add a test to show the test pane
+
+// ..........................................................
+// VERIFY STANDARD STATES
+// 
+pane.verifyEmpty = function verifyEmpty(view, expectedHint) {
+  var input = view.$('input');
+  var layer = view.$();
+  
+  ok(!layer.hasClass('not-empty'), 'layer should not have not-empty class');
+  equals(input.val(), '', 'input should have empty value');
+  
+  if (expectedHint) {
+    var hint = view.$('.sc-hint');
+    equals(hint.length, 1, 'should have a hint span');
+    equals(hint.text(), expectedHint, 'hint span should have expected hint');
+  }
+};
+
+pane.verifyNotEmpty = function verifyNotEmpty(view, expectedValue, expectedHint) {
+  var input = view.$('input');
+  var layer = view.$();
+  
+  ok(layer.hasClass('not-empty'), 'layer should have not-empty class');
+  equals(input.val(), expectedValue, 'input should have value');
+  
+  if (expectedHint) {
+    var hint = view.$('.sc-hint');
+    equals(hint.length, 1, 'should have a hint span');
+    equals(hint.text(), expectedHint, 'hint span should have expected hint');
+  }
+};
+
+pane.verifyDisabled = function verifyDisabled(view, isDisabled) {
+  var layer = view.$();
+  var input = view.$('input');
+  
+  if (isDisabled) {
+    ok(layer.hasClass('disabled'), 'layer should have disabled class');
+    ok(input.attr('disabled'), 'input should have disabled attr');
+  } else {
+    ok(!layer.hasClass('disabled'), 'layer should not have disabled class');
+    ok(!input.attr('disabled'), 'input should not have disabled attr');
+  }
+};
+
+
+// ..........................................................
+// TEST INITIAL STATES
+// 
+
+module('SC.TextFieldView ui', pane.standardSetup());
+
+test("empty", function() {
+   var view = pane.view('empty');
+   pane.verifyEmpty(view, 'Full Name');
+   pane.verifyDisabled(view, NO);
+});
+
+test("with value", function() {
+  var view = pane.view('with value');
+  pane.verifyNotEmpty(view, 'John Doe', 'Full Name');
+  pane.verifyDisabled(view, NO);
+});
+
+test("disabled - empty", function() {
+  var view = pane.view('disabled - empty');
+  pane.verifyEmpty(view, 'Full Name');
+  pane.verifyDisabled(view, YES);
+});
+
+test("disabled - with value", function() {
+  var view = pane.view('disabled - with value');
+  pane.verifyNotEmpty(view, 'John Doe', 'Full Name');
+  pane.verifyDisabled(view, YES);
+});
+
+test("textarea - empty", function() {
+   var view = pane.view('empty');
+   pane.verifyEmpty(view, 'Full Name');
+   pane.verifyDisabled(view, NO);
+});
+
+test("textarea - with value", function() {
+  var view = pane.view('with value');
+  pane.verifyNotEmpty(view, 'John Doe', 'Full Name');
+  pane.verifyDisabled(view, NO);
+});
+
+test("textarea - disabled - empty", function() {
+  var view = pane.view('disabled - empty');
+  pane.verifyEmpty(view, 'Full Name');
+  pane.verifyDisabled(view, YES);
+});
+
+test("textarea - disabled - with value", function() {
+  var view = pane.view('disabled - with value');
+  pane.verifyNotEmpty(view, 'John Doe', 'Full Name');
+  pane.verifyDisabled(view, YES);
+});
+
+// ..........................................................
+// TEST CHANGING VIEWS
+// 
+
+test("changing value from empty -> value", function() {
+  var view = pane.view('empty');
+  
+  // test changing value updates like it should
+  SC.RunLoop.begin();
+  view.set('value', 'John Doe');
+  SC.RunLoop.end();
+  pane.verifyNotEmpty(view, 'John Doe', 'Full Name');
+});
+
+test("disabling view", function() {  
+  var view = pane.view('empty');
+  
+  // test changing enabled state updates like it should
+  SC.RunLoop.begin();
+  view.set('isEnabled', NO);
+  SC.RunLoop.end();
+  pane.verifyDisabled(view, YES);
+});
+
+test("changing value to null", function() {
+  var view = pane.view('with value');
+
+  // test changing value updates like it should
+  SC.RunLoop.begin();
+  view.set('value', null);
+  SC.RunLoop.end();
+  equals(view.get('fieldValue'), null, 'should have empty fieldValue');
+  pane.verifyEmpty(view, 'Full Name');
+});
+
+test("enabling disabled view", function() {
+  var view = pane.view('disabled - empty');
+
+  // test changing enabled state updates like it should
+  SC.RunLoop.begin();
+  view.set('isEnabled', YES);
+  SC.RunLoop.end();
+  pane.verifyDisabled(view, NO);
+});
+
+
+// ..........................................................
+// TEST EVENTS
+// 
+
+test("focus and blurring text field", function() {
+  var view = pane.view('empty');
+  var input = view.$('input');
+  
+  // attempt to focus...
+  SC.Event.trigger(input, 'focus');
+  
+  // verify editing state changed...
+  ok(view.get('isEditing'), 'view.isEditing should be YES');
+  ok(view.$().hasClass('focus'), 'view layer should have focus class');
+  
+  // simulate typing a letter
+  SC.Event.trigger(input, 'keydown');
+  SC.Event.trigger(input, 'keyup');
+  input.val('f');
+  SC.Event.trigger(input, 'change');
+  
+  // wait a little bit to let text field propograte changes
+  stop();
+  
+  setTimeout(function() {
+    start();
+    
+    equals(view.get('value'), 'f', 'view should have new value');
+    ok(view.$().hasClass('not-empty'), 'should have not-empty class');
+
+    // attempt to blur...
+    SC.Event.trigger(input, 'blur');
+
+    // verify editing state changed...
+    ok(!view.get('isEditing'), 'view.isEditing should be NO');
+    ok(!view.$().hasClass('focus'), 'view layer should NOT have focus class');
+  }, 100);  
+  
+});
+})();
+
+
+

data/frameworks/sproutcore/frameworks/foundation/tests/views/view/clippingFrame.js

@@ -0,0 +1,133 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Apple, Inc. and contributors.
+// License:   Licened under MIT license (see license.js)
+// ==========================================================================
+
+/*global module test equals context ok same Q$ htmlbody */
+htmlbody('<style> .sc-view { border: 1px blue solid; position: absolute;  overflow: hidden; }</style>');
+
+var pane, a, aa ;
+module("SC.View#clippingFrame", {
+  setup: function() {
+    SC.RunLoop.begin();
+    pane = SC.Pane.design()
+      .layout({ top: 0, left: 0, width: 200, height: 200 })
+      .childView(SC.View.design()
+        .layout({ top: 50, left: 50, width: 100, height: 100 })
+        .childView(SC.View.design()
+          .layout({ top: 20, left: 20, width: 40, height: 40 })))
+      .create();
+    pane.append();
+    a = pane.childViews[0];
+    aa = a.childViews[0];
+  },
+  
+  teardown: function() { 
+    pane.remove();
+    pane = a = aa = null ;
+    SC.RunLoop.end();
+  }
+});
+
+test("clippingFrame === frame w/ 0 offset if not partially hidden", function() {
+  var result = pane.get('clippingFrame'), expected = pane.get('frame');
+  expected.x = expected.y = 0 ;
+  same(result, expected, 'pane');
+
+  result = a.get('clippingFrame'); expected = a.get('frame');
+  expected.x = expected.y = 0 ;
+  same(result, expected, 'child');
+
+  result = aa.get('clippingFrame'); expected = aa.get('frame');
+  expected.x = expected.y = 0 ;
+  same(result, expected, 'nested child');
+});
+
+test("cuts off top of frame", function() {
+  var result, expected;
+  
+  a.adjust('top', -50);
+  result = a.get('clippingFrame'); expected = a.get('frame');
+  expected.x = 0 ; expected.y = 50 ; expected.height = 50 ;
+  same(result, expected, 'child');
+
+  result = aa.get('clippingFrame'); expected = aa.get('frame');
+  expected.x = 0 ; expected.y = 30 ; expected.height = 10 ;
+  same(result, expected, 'nested child');
+});
+
+test("cuts off bottom of frame", function() {
+  var result, expected;
+  
+  a.adjust('top', 150);
+  result = a.get('clippingFrame'); expected = a.get('frame');
+  expected.x = 0 ; expected.y = 0 ; expected.height = 50 ;
+  same(result, expected, 'child');
+
+  result = aa.get('clippingFrame'); expected = aa.get('frame');
+  expected.x = 0 ; expected.y = 0 ; expected.height = 30 ;
+  same(result, expected, 'nested child');
+});
+
+test("cuts off left of frame", function() {
+  var result, expected;
+  
+  a.adjust('left', -50);
+  result = a.get('clippingFrame'); expected = a.get('frame');
+  expected.y = 0 ; expected.x = 50 ; expected.width = 50 ;
+  same(result, expected, 'child');
+
+  result = aa.get('clippingFrame'); expected = aa.get('frame');
+  expected.y = 0 ; expected.x = 30 ; expected.width = 10 ;
+  same(result, expected, 'nested child');
+});
+
+test("cuts off bottom of frame", function() {
+  var result, expected;
+  
+  a.adjust('left', 150);
+  result = a.get('clippingFrame'); expected = a.get('frame');
+  expected.y = 0 ; expected.x = 0 ; expected.width = 50 ;
+  same(result, expected, 'child');
+
+  result = aa.get('clippingFrame'); expected = aa.get('frame');
+  expected.y = 0 ; expected.x = 0 ; expected.width = 30 ;
+  same(result, expected, 'nested child');
+});
+
+test("notifies receiver and each child if parent clipping frame changes", function() {
+  var callCount = 0;
+  
+  // setup observers
+  function observer() { callCount++; }
+  a.addObserver('clippingFrame', observer);
+  aa.addObserver('clippingFrame', observer);
+  
+  // now, adjust layout of child so that clipping frame will change...
+  a.adjust('top', -50);
+  
+  // IMPORTANT:  If this test fails because the callCount is > 2 it means that
+  // when you set the layout, the frame is getting invalidated more than once.
+  // This should not happen.  If this is the case, fix the view code so that
+  // it does not invalidate frame more than once before you change this 
+  // number.
+  equals(callCount, 2, 'should invoke observer on child and nested child');
+});
+
+
+test("does not notify child views of clippingFrame changes if child view hasStaticLayout", function() {
+  var callCount = 0;
+  
+  // setup observers
+  function observer() { callCount++; }
+  a.addObserver('clippingFrame', observer);
+  aa.addObserver('clippingFrame', observer);
+  aa.hasStaticLayout = YES ; // fake it till u make it
+  
+  // now, adjust layout of child so that clipping frame will change...
+  a.adjust('top', -50);
+  
+  equals(callCount, 1, 'should invoke observer on child only');
+});
+