sproutit-sproutcore 1.0.0.20090407205609 → 1.0.0.20090408130025

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

@@ -0,0 +1,110 @@
+// ==========================================================================
+// 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 content = []
+  for (var idx=0, len=20; idx<len; ++idx) {
+    content.push(SC.Record.create({
+      id: 'item_'+idx,
+      title: 'Item ' + idx
+    }))
+  }
+  
+  var singleSelection = [content[0]];
+  var multiSelectionContiguous = [content[0], content[1], content[2]];
+  var multiSelectionDiscontiguous = [content[0], content[2], content[4]];
+  
+  // var offScreenSingleSelection = [content[1]];
+  // var offScreenMultiSelectionContiguous = [content[10], content[11], content[12]];
+  // var offScreenMultiSelectionDiscontiguous = [content[10], content[12], content[14]];
+  
+  var pane = SC.ControlTestPane.design({ height: 100 })
+    .add("basic", SC.ListView, {
+      content: content,
+      contentValueKey: 'title'
+    })
+    
+    .add("disabled", SC.ListView, {
+      isEnabled: NO,
+      content: content,
+      contentValueKey: 'title'
+    })
+    
+    .add("disabled - single selection", SC.ListView, {
+      isEnabled: NO,
+      content: content,
+      contentValueKey: 'title',
+      selection: singleSelection
+    })
+    
+    .add("single selection", SC.ListView, {
+      content: content,
+      contentValueKey: 'title',
+      selection: singleSelection
+    })
+    
+    .add("multiple selection, contiguous", SC.ListView, {
+      content: content,
+      contentValueKey: 'title',
+      selection: multiSelectionContiguous
+    })
+    
+    .add("multiple selection, discontiguous", SC.ListView, {
+      content: content,
+      contentValueKey: 'title',
+      selection: multiSelectionDiscontiguous
+    })
+    
+  pane.show(); // add a test to show the test pane
+
+  // ..........................................................
+  // TEST VIEWS
+  // 
+  module('SC.ListView UI', pane.standardSetup());
+  
+  test("basic", function() {
+    var view = pane.view('basic');
+    ok(!view.$().hasClass('disabled'), 'should not have disabled class');
+    ok(!view.$().hasClass('sel'), 'should not have sel class');
+    
+    ok(SC.rangesEqual(view.get('nowShowingRange'), { start: 0, length: 5}), 'now showing range should be 0-4');
+    
+    for (var idx=0, len=20; idx<len; idx++) {
+      var itemView = view.itemViewAtContentIndex(idx) ;
+      if (idx < 5) {
+        ok(itemView, 'should return an itemView for the visible record %@ displayed in the list'.fmt(idx));
+        ok(itemView.get('isVisible'), 'itemViews for visible record %@ should have isVisible === YES'.fmt(idx));
+        ok(itemView.get('layer'), 'itemViews for visible record %@ should have a layer'.fmt(idx));
+      } else {
+        ok(itemView, 'should return an itemView for the non-visible record %@ displayed in the list'.fmt(idx));
+        ok(!itemView.get('isVisible'), 'itemViews for the non-visible record %@ should have isVisible === NO'.fmt(idx));
+        ok(!itemView.get('layer'), 'itemViews for the non-visible record %@ should NOT have a layer'.fmt(idx));
+      }
+    }
+  });
+  
+  test("disabled", function() {
+    var view = pane.view('disabled');
+    ok(view.$().hasClass('disabled'), 'should have disabled class');
+    ok(!view.$().hasClass('sel'), 'should not have sel class');
+  });
+   
+  test("disabled - single selection", function() {
+    var view = pane.view('disabled - single selection');
+    ok(view.$().hasClass('disabled'), 'should have disabled class');
+    ok(view.itemViewAtContentIndex(0).$().hasClass('sel'), 'should have sel class');
+   });
+
+   test("single selection", function() {
+     var view = pane.view('single selection');
+     ok(view.itemViewAtContentIndex(0).$().hasClass('sc-collection-item'), 'should have sc-collection-item class');
+     ok(view.itemViewAtContentIndex(0).$().hasClass('sel'), 'should have sel class');
+    });
+
+})();

data/frameworks/sproutcore/frameworks/desktop/tests/views/list_item.js

@@ -0,0 +1,255 @@
+// ==========================================================================
+// 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 = SC.ControlTestPane.design({ height: 32 })
+  .add("basic", SC.ListItemView.design({ 
+    content: "List Item"
+  }))
+
+  .add("full", SC.ListItemView.design({ 
+    content: SC.Object.create({ 
+      icon: "sc-icon-folder-16",
+      title: "List Item", 
+      checkbox: YES,
+      count: 23,
+      branch: YES 
+    }),
+    
+    hasContentIcon:  YES,
+    hasContentBranch: YES,
+
+    contentValueKey: "title",
+    contentCheckboxKey: 'checkbox',
+    contentIconKey:  "icon",
+    contentUnreadCountKey: 'count',
+    contentIsBranchKey: 'branch'
+
+  }))
+
+  .add("full - sel", SC.ListItemView.design({ 
+    content: SC.Object.create({ 
+      icon: "sc-icon-folder-16",
+      title: "List Item", 
+      checkbox: YES,
+      count: 23,
+      branch: YES
+    }),
+
+    isSelected: YES,
+        
+    hasContentIcon:  YES,
+    hasContentBranch: YES,
+
+    contentValueKey: "title",
+    contentLeftActionKey: 'checkbox',
+    leftAction: 'checkbox',
+    
+    contentRightActionKey: 'isLoading',
+    
+    contentCheckboxKey: 'checkbox',
+    contentIconKey:  "icon",
+    contentUnreadCountKey: 'count',
+    contentIsBranchKey: 'branch'
+
+  }))
+  
+  .add("icon", SC.ListItemView.design({ 
+    content: SC.Object.create({ 
+      title: "List Item", 
+      icon: "sc-icon-folder-16" 
+    }),
+    
+    contentValueKey: "title",
+
+    contentIconKey:  "icon",
+    hasContentIcon:  YES
+
+  }))
+
+  .add("checkbox - YES", SC.ListItemView.design({ 
+    content: SC.Object.create({ title: "List Item", checkbox: YES }),
+    contentValueKey: "title",
+    contentCheckboxKey:  "checkbox"
+  }))
+
+  .add("checkbox - NO", SC.ListItemView.design({ 
+    content: SC.Object.create({ title: "List Item", checkbox: NO }),
+    contentValueKey: "title",
+    contentCheckboxKey:  "checkbox"
+  }))
+
+  .add("count - 0", SC.ListItemView.design({ 
+    content: SC.Object.create({ title: "List Item", count: 0 }),
+    contentValueKey: "title",
+    contentUnreadCountKey:  "count"
+  }))
+
+  .add("count - 10", SC.ListItemView.design({ 
+    content: SC.Object.create({ title: "List Item", count: 10 }),
+    contentValueKey: "title",
+    contentUnreadCountKey:  "count"
+  })) ;
+
+pane.show();
+
+window.pane = pane ;
+
+// ..........................................................
+// DETECTORS
+// 
+// The functions below test the presence of a particular part of the view.  If
+// you pass the second param then it expects the part to be in the view.  If
+// you pass null, then it expects the part to NOT be in the view.
+
+function basic(view, sel, disabled) {
+  var cq = view.$();
+  ok(cq.hasClass('sc-list-item-view'), 'should have sc-list-item-view class');
+  ok(cq.hasClass('sc-collection-item'), 'should have sc-collection-item class');
+  
+  equals(cq.hasClass('sel'), !!sel, 'expect sel class');
+  equals(cq.hasClass('disabled'), !!disabled, 'expect disabled class');
+}
+
+function label(view, labelText) {
+  if (labelText === null) {
+    equals(view.$('label').size(), 0, 'should not have label');
+  } else {
+    equals(view.$('label').text(), labelText, 'should have label text');
+  }
+}
+
+function icon(view, spriteName) {
+  if (spriteName === null) {
+    equals(view.$('img.icon').size(), 0, 'should not have image');
+  } else {
+    var cq = view.$('img.icon');
+    equals(cq.size(), 1, 'should have icon');
+    ok(cq.hasClass(spriteName), 'icon should have class name %@'.fmt(spriteName));
+  }
+}
+
+function checkbox(view, state) {
+  if (state === null) {
+    equals(view.$('.sc-checkbox-view').size(), 0, 'should not have checkbox');
+  } else {
+    var cq =view.$('.sc-checkbox-view');
+    equals(cq.size(), 1, 'should have checkbox element');
+    equals(cq.hasClass('sel'), state === true, 'expects sel class');
+    equals(cq.hasClass('mixed'), state === SC.MIXED_STATE, 'expects mixed class');
+  }
+}
+
+function count(view, cnt) {
+  if (cnt === null) {
+    equals(view.$('.count').size(), 0, 'should not have count') ;
+  } else {
+    var cq = view.$('.count');
+    equals(cq.size(), 1, 'should have count');
+    equals(cq.text(), cnt.toString(), 'should have count');
+  }
+}
+
+function branch(view, visible) {
+  if (visible === null) {
+    equals(view.$('.branch').size(), 0, 'should not have branch') ;
+  } else {
+    var cq = view.$('.branch');
+    equals(cq.size(), 1, 'should have branch');
+    equals(cq.hasClass('branch-visible'), visible, 'is visible');
+  }
+}
+
+// ..........................................................
+// Test Basic Setup
+// 
+
+module("SC.ListItemView UI", pane.standardSetup());
+
+test("basic", function() {
+  var view = pane.view('basic');
+
+  basic(view, NO, NO);
+  icon(view, null);
+  label(view, 'List Item');
+  checkbox(view, null);
+  count(view, null);
+  branch(view, null);
+});
+
+test("full", function() {
+  var view = pane.view('full');
+  basic(view, NO, NO);
+  icon(view, 'sc-icon-folder-16');
+  label(view, 'List Item');
+  checkbox(view, YES);
+  count(view, 23);
+  branch(view, YES);
+});
+
+test("full - sel", function() {
+  var view = pane.view('full - sel');
+  basic(view, YES, NO);
+  icon(view, 'sc-icon-folder-16');
+  label(view, 'List Item');
+  checkbox(view, YES);
+  count(view, 23);
+  branch(view, YES);
+});
+
+test("icon", function() {
+  var view = pane.view('icon');
+  icon(view, 'sc-icon-folder-16');
+});
+
+test('checkbox', function() {
+  checkbox(pane.view('checkbox - YES'), YES);
+  checkbox(pane.view('checkbox - NO'), NO);
+});
+
+test('count', function() {
+  // no count should show when count = 0;
+  count(pane.view('count - 0'), null); 
+  count(pane.view('count - 10'), 10);
+});
+
+// ..........................................................
+// EDITING CONTENT
+// 
+
+// gets the view content and adjusts the value inside of a runloop, ensuring
+// the UI gets an update also.
+function adjustContent(view, key, value) {
+  var content = view.get('content');
+  SC.RunLoop.begin();
+  content.set(key, value);
+  SC.RunLoop.end();
+}
+
+test("changing label should change display", function() {
+  var view = pane.view('full');
+  adjustContent(view, 'title', 'FOO');
+  label(view, 'FOO'); // verify change
+});
+
+test("changing checkbox value should update display", function() {
+  var view = pane.view('full');
+  adjustContent(view, 'checkbox', NO);
+  checkbox(view, NO); // verify change
+});
+
+test("changing count value should update display", function() {
+  var view = pane.view('full');
+
+  adjustContent(view, 'count', 100);
+  count(view, 100); // verify change
+
+  adjustContent(view, 'count', 0);
+  count(view, null); // verify change
+});
+

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

@@ -0,0 +1,10 @@
+// ==========================================================================
+// 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("TODO: Test SC.MenuItemView Methods");

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

@@ -0,0 +1,44 @@
+// ==========================================================================
+// 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 method = function() { console.log("done"); };
+var pane = SC.ControlTestPane.design({ width:200,height: 32 })
+  .add("full", SC.MenuItemView.design({ 
+    content: SC.Object.create({ 
+      icon: "sc-icon-folder-16",
+      title1: "List Item 1",
+      checkbox:YES,
+      shortcut:"Text",
+      keyEquivalent:"alt_shift_z"
+   }),
+  isAnOption: YES,
+  contentValueKey: "title1",
+  contentIconKey:  "icon",
+  shortCutKey: "shortcut",
+  contentCheckboxKey:"checkbox",
+  keyEquivalent:"shift_>",
+  action: method,
+  isEnabled:NO
+    // contentIsBranchKey: 'branch'
+  }))
+  
+  .add("disabled menu item with no content", SC.MenuItemView.design({ 
+    content: SC.Object.create(),
+    isSeperator: YES,
+    isEnabled: NO
+  }));
+ 
+pane.show();
+
+module("Menu Item View");
+test("Changing the properties", function() {
+  pane.view('full').set('isEnabledKey', YES);
+});
+})();

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%');
+});
+*/