sproutcore 1.10.3.1 → 1.11.0.rc1

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

@@ -10,10 +10,9 @@
 
 var pane;
 (function () {
-  var iconURL = sc_static("sproutcore-32.png");
+  var iconURL = sc_static("foundation:sproutcore-32.png");
 
   pane = SC.ControlTestPane.design()
-
     .add("3_empty", SC.SegmentedView, {
       items: ['', '', ''],
       layout: { height: 25 }
@@ -174,6 +173,21 @@ var pane;
       value: "E",
       layout: { height: 25 }
     })
+    .add("5_items,layerIds,overflow", SC.SegmentedView, {
+      items: [
+        { value: "A", width: 70, layerId: 'segment-a' },
+        { value: "B", width: 70, layerId: 'segment-b' },
+        { value: "C", width: 70, layerId: 'segment-c' },
+        { value: "D", width: 70, layerId: 'segment-d' },
+        { value: "E", width: 70, layerId: 'segment-e' }
+      ],
+      itemTitleKey: 'value',
+      itemValueKey: 'value',
+      itemWidthKey: 'width',
+      itemLayerIdKey: 'layerId',
+      value: "E",
+      layout: { height: 25 }
+    })
     .add("aria-role_tab,tablist", SC.SegmentedView, {
       items: [
         { title: "Item 1" },
@@ -191,8 +205,21 @@ var pane;
       ],
       itemTitleKey: "title",
       layout: { height: 25 }
+    })
+    .add("3_items,1_sel,shouldAutoResize", SC.SegmentedView, {
+      items: "Item1 Item2 Item3".w(),
+      value: "Item2",
+      layout: { height: 25, width: 0 },
+      shouldAutoResize: YES
+    })
+    .add("3_items,1_sel,shouldAutoResize,flexible_layout", SC.SegmentedView, {
+      items: "Item1 Item2 Item3".w(),
+      value: "Item2",
+      layout: { height: 25, left: 0, right: 0 },
+      shouldAutoResize: YES
     });
 
+
   // ..........................................................
   // TEST VIEWS
   //
@@ -452,6 +479,32 @@ var pane;
     ok($(overflowEl).hasClass('sel'), 'overflow segment should have .sel class');
   });
 
+  test("Check that the overflow menu does not consume hidden buttons when the menu pane shows because of matching layer ids", function () {
+    var sv = pane.view("5_items,layerIds,overflow");
+    var segments = sv.$('.sc-segment-view');
+
+    // Check that we have six segments, five items and one overflow
+    var numberOfSegments = segments.size();
+    equals(numberOfSegments, 6, 'We should start with 6 segment child divs in the segment view');
+
+    sv.showOverflowMenu();
+
+    // the overflow menu should be showing
+    var menu = SC.viewFor(SC.$('.sc-menu')[0]);
+    ok(menu && menu.get('isVisible'), 'overflow menu should be visible');
+
+    // We need the run loop to end so that we go through cleaning up views at the end of the run loop,
+    // this is where the bug I was seeing occurs. (one of my buttons gets destroyed by the menu pane)
+    SC.run(function () {
+      menu.remove();
+    });
+
+    // check that no elements have been consumed
+    segments = sv.$('.sc-segment-view');
+    numberOfSegments = segments.size();
+    equals(numberOfSegments, 6, 'We should end with 6 segment child divs in the segment view');
+  });
+
   test("Check that the segmented view and segments have aria roles set", function () {
     var sv = pane.view("aria-role_tab,tablist"),
         viewElem  = sv.$(),
@@ -487,7 +540,7 @@ var pane;
     layer1 = view1.get('layer');
     point = SC.offset(layer1);
 
-    ev = SC.Event.simulateEvent(layer1, 'mousedown', { clientX: point.x, clientY: point.y });
+    ev = SC.Event.simulateEvent(layer1, 'mousedown', { clientX: point.x, clientY: point.y, which: 1 });
     SC.Event.trigger(layer1, 'mousedown', [ev]);
 
     ok(view1.$().hasClass('active'), 'The first segment should have an active class on mousedown');
@@ -521,4 +574,36 @@ var pane;
     ok(view3.$().hasClass('sel'), 'The third segment should have a sel class on mouseUp');
   });
 
+  test("passes on mouse events that don't map to a segment", function () {
+    var segmentedView, view1, layer1, point, ev;
+
+    segmentedView = pane.view('3_items,2_sel,1_disabled');
+    view1 = segmentedView.get('childViews').objectAt(0); // $('.sc-segment-view')[0];
+    layer1 = view1.get('layer');
+    point = SC.offset(layer1);
+
+    SC.RunLoop.begin();
+    ev = SC.Event.simulateEvent(layer1, 'mousedown', { clientX: point.x, clientY: point.y, which: 1 });
+    ok(segmentedView.mouseDown(ev), "mouseDown event handler accepts event which maps to a segment.");
+    SC.RunLoop.end();
+
+    SC.RunLoop.begin();
+    ev = SC.Event.simulateEvent(layer1, 'mousedown', { clientX: point.x - 1, clientY: point.y, which: 1 });
+    ok(!segmentedView.mouseDown(ev), "mouseDown event handler passes on event which doesn't map to a segment.");
+    SC.RunLoop.end();
+  });
+
+  test("shouldAutoResize", function () {
+    var segmentedView;
+
+    segmentedView = pane.view('3_items,1_sel,shouldAutoResize');
+
+    ok(segmentedView.getPath('layout.width') !== 0, "View auto-resized to fit the present items.");
+
+    segmentedView = pane.view('3_items,1_sel,shouldAutoResize,flexible_layout');
+
+    ok(SC.none(segmentedView.getPath('layout.width')), "Having flexible layout prevents view from auto-resizing.");
+  });
+
+
 })();

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

@@ -158,6 +158,14 @@ test("The content of the popup should be recalculated correctly when the list of
   equals(view3.get("_itemList")[2].title, "Again", "The list should have on the 3rd position the title Again");
 });
 
+test("The content of the popup should be recalculated correctly when the list of items is empty", function() {
+  equals(view3.get("_itemList").length, 3, "The list should have 3 items.");
+  SC.RunLoop.begin() ;
+  view3.set('items', [] );
+  SC.RunLoop.end() ;
+  equals(view3.get("_itemList").length, 0, "The list should have 0 items.");
+});
+
 test("Setting the value of the view should change the title & icon properties", function () {
   equals(view4.get('value'), "World", "The view gets a default value by sort");
   equals(view4.get('title'), "World", "The view's title should originally be");

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

@@ -16,7 +16,8 @@ module("SC.SliderView Methods", {
         SC.SliderView.extend({
           value: 50,
           minimum: 0,
-          maximum: 100
+          maximum: 100,
+          step: 25
         })]
     });
     pane.append(); // make sure there is a layer...
@@ -56,6 +57,8 @@ test("going over maximum slider limit", function() {
   SC.RunLoop.end();
 
   // TODO: should we allow setting value higher then maximum?
+  // Yes I think so: the value (e.g. from a record) should not be constrained by the view layer just because its value was
+  // bound to an unused slider. - DCP
   equals(view.get('value'), 150, 'value should now be 150');
   equals(parseFloat(view.$('.sc-handle').css('left')), 500, 'left of sc-handle should be 100%');
 });
@@ -70,6 +73,18 @@ test("going below minimum slider limit", function() {
   SC.RunLoop.end();
 
   // TODO: should we allow setting value lower then minimum?
+  // Yes I think so: the value (e.g. from a record) should not be constrained by the view layer just because its value was
+  // bound to an unused slider. - DCP
   equals(view.get('value'), -10, 'value should now be -10');
   equals(parseFloat(view.$('.sc-handle').css('left')), 0, 'left of sc-handle should be 0%');
 });
+
+test("steps and stepPositions give the correct values.", function() {
+  // This test is of course sensitive to the view's min, max and step.
+  var steps = view.get('steps'),
+    positions = view.get('stepPositions');
+  ok(steps.length === 5 && steps[0] === 0 && steps[1] === 25 && steps[2] === 50 && steps[3] === 75 && steps[4] === 100,
+    "The view's steps property returns [0, 25, 50, 75, 100].");
+  ok(positions.length === 5 && positions[0] === 0 && positions[1] === 0.25 && positions[2] === 0.5 && positions[3] === 0.75 && positions[4] === 1,
+    "The view's stepPositions property returns [0, 0.25, 0.5, 0.75, 1].");
+})

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

@@ -22,6 +22,13 @@ var pane = SC.ControlTestPane.design()
     maximum: 100,
     isEnabled: NO
   })
+  .add("slider no-scroll", SC.SliderView, {
+    layout: {top:0, bottom:0, left:0, width: 250},
+    value: 50,
+    minimum: 0,
+    maximum: 100,
+    updateOnScroll: false
+  })
   .add("slider value 100", SC.SliderView, {
     layout: {top:0, bottom:0, left:0, width: 250},
     value: 100,
@@ -70,6 +77,14 @@ var pane = SC.ControlTestPane.design()
     value: 50,
     minimum: 0,
     maximum: 100
+  })
+  .add("slider markSteps", SC.SliderView, {
+    layout: { top:0, bottom:0, left:0, width: 250 },
+    value: 20,
+    minimum: 0,
+    maximum: 100,
+    step: 20,
+    markSteps: true
   });
 
 // ..........................................................
@@ -96,6 +111,12 @@ test("disabled", function() {
   equals(view.$('.sc-handle')[0].style.left, '50%', 'left of sc-handle should be 50%');
 });
 
+test("no scroll", function() {
+  var view = pane.view('slider no-scroll');
+
+  ok(!view.mouseWheel({}), "A slider view with updateOnScroll set to false should return NO from the mouseWheel event handler.");
+});
+
 test("basic value 100", function() {
   var view = pane.view('slider value 100');
 
@@ -138,4 +159,37 @@ 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');
 });
+
+// markSteps
+
+test("markStep", function() {
+  var view = pane.view('slider markSteps'),
+      marks, expectedCount;
+
+  // Initial.
+  marks = view.$().find('.sc-slider-step-mark');
+  expectedCount = Math.floor((view.get('maximum') - view.get('minimum')) / view.get('step')) + 1; // yeah yeah math.floor + 1 is math.ciel
+  equals(marks.length, expectedCount, "A view with markSteps set to true contains the correct number of marks");
+  ok(marks.eq(2).hasClass('sc-slider-step-mark-2'), "The nth mark has sc-slider-step-mark-n class.");
+  ok(view.$().find('.sc-slider-step-mark-first').length === 1, "Only one mark is labeled as the first.");
+  ok(view.$().find('.sc-slider-step-mark-last').length === 1, "Only one mark is labeled as the last.");
+
+  // Change.
+  SC.run(function() { view.set('maximum', 200); });
+  marks = view.$().find('.sc-slider-step-mark');
+  expectedCount = Math.floor((view.get('maximum') - view.get('minimum')) / view.get('step')) + 1; // yeah yeah math.floor + 1 is math.ciel
+  equals(marks.length, expectedCount, "Changing maximum correctly updates the number of marks");
+  ok(view.$().find('.sc-slider-step-mark-first').length === 1, "Only one mark is labeled as the first.");
+  ok(view.$().find('.sc-slider-step-mark-last').length === 1, "Only one mark is labeled as the last.");
+
+  // Test mark at value = 0. (See https://github.com/sproutcore/sproutcore/issues/1229)
+  SC.run(function() {
+    view.set('minimum', -1).set('maximum', 4).set('step', 1);
+  });
+  
+  marks = view.$('.sc-slider-step-mark');
+  equals(marks[1].style.left, "20%", "The mark representing value zero is positioned correctly when minimum is less than zero");
+
+});
+
 })();

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/split/dividers.js

@@ -213,7 +213,7 @@ test("Adding and removing before a divider doesn't screw things majorly", functi
 
 });
 
-test("Adding and removing several views doesn't screw things", function() {
+test("Adding and removing several views doesn't screw things up", function() {
   var view = createSplitView({
     childViews: 'left middle right'.w(),
     middle: SC.View.design(SC.SplitChild, { name: 'middle' })
@@ -240,4 +240,23 @@ test("Adding and removing several views doesn't screw things", function() {
   SC.RunLoop.end();
   
   checkDividers(view, 5);
-});
+});
+
+test("SplitView#layoutDirection is correctly propagated to its dividers.", function() {
+  var view = createSplitView(),
+      layoutDirection = view.get('layoutDirection'),
+      nextLayoutDirection = layoutDirection === SC.LAYOUT_VERTICAL ? SC.LAYOUT_HORIZONTAL : SC.LAYOUT_VERTICAL; // hey just in case the default changes
+
+  var divider = view.childViews[1];
+  ok(divider.isSplitDivider, "PRELIM: We found the divider.");
+
+  equals(divider.get('layoutDirection'), layoutDirection, "The divider's layoutDirection should match that of the SplitView.");
+
+  SC.RunLoop.begin();
+  view.set('layoutDirection', nextLayoutDirection);
+  SC.RunLoop.end();
+
+  equals(divider.get('layoutDirection'), nextLayoutDirection, "The divider's layoutDirection should update when the SplitView's does.");
+
+  view.destroy();
+});

data/lib/frameworks/sproutcore/frameworks/desktop/tests/views/static_content.js

@@ -4,7 +4,7 @@
 //            portions copyright ©2011 Apple Inc.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
-
+/*globals module, test, ok */
 module('SC.StaticContentView - Basic UI');
 
 test("Frame Recalculation", function() {
@@ -15,33 +15,39 @@ test("Frame Recalculation", function() {
       layout: { top: 10, right: 10, bottom: 10, left: 10 }
     })
   });
+
   var view = SC.StaticContentView.create({
         content: '<p style="position: relative; margin-top: 80px; font-size: 3em">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>',
         frameDidChange: function() {
           callCount += 1;
         }.observes('frame')
       });
-   pane.setPath('contentView.contentView', view);
-   pane.append();
-   baseCount = callCount;
-   ok(callCount > 0, 'precond - frame should be called at least once when displayed');
-   callCount = 0;
-
-   SC.run(function() { pane.adjust('width', 499); });
-   ok(callCount > 1, 'frame should recompute after parent resizes');
-   callCount = 0;
-
-   content = 'For today, we celebrate the first glorious anniversary of the Information Purification Directives. We have created, for the first time in all history, a garden of pure ideology. Where each worker may bloom secure from the pests of contradictory and confusing truths.Our Unification of Thought is more powerful a weapon than any fleet or army on earth. We are one people. With one will. One resolve. One cause. Our enemies shall talk themselves to death. And we will bury them with their own confusion. We shall prevail!';
-   view.set('content', content);
-   ok(callCount > 0, 'frame should recompute after content changes');
-   callCount = 0;
-
-   SC.RunLoop.begin().end();
-   var layer = view.get('layer');
-
-   ok(layer.innerHTML.indexOf(content) > -1, 'view should rerender when content changes');
-   view.contentLayoutDidChange();
-   ok(callCount > 0, 'frame should recompute after calling contentLayoutDidChange()');
-
-   pane.remove();
-});
+
+  SC.run(function() {
+    pane.setPath('contentView.contentView', view);
+    pane.append();
+
+    baseCount = callCount;
+    ok(callCount > 0, 'precond - frame should be called at least once when displayed');
+
+    callCount = 0;pane.adjust('width', 499);
+    ok(callCount > 0, 'frame should recompute after parent resizes');
+
+    callCount = 0;
+    content = 'For today, we celebrate the first glorious anniversary of the Information Purification Directives. We have created, for the first time in all history, a garden of pure ideology. Where each worker may bloom secure from the pests of contradictory and confusing truths.Our Unification of Thought is more powerful a weapon than any fleet or army on earth. We are one people. With one will. One resolve. One cause. Our enemies shall talk themselves to death. And we will bury them with their own confusion. We shall prevail!';
+
+    view.set('content', content);
+    ok(callCount > 0, 'frame should recompute after content changes');
+    callCount = 0;
+  });
+
+  SC.run(function() {
+    var layer = view.get('layer');
+
+    ok(layer.innerHTML.indexOf(content) > -1, 'view should rerender when content changes');
+    view.contentLayoutDidChange();
+    ok(callCount > 0, 'frame should recompute after calling contentLayoutDidChange()');
+
+    pane.remove();
+  });
+});

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

@@ -5,40 +5,120 @@
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-/*global module test htmlbody ok equals same stop start */
+/*globals module, test, ok */
 
-var iconURL= "http://www.freeiconsweb.com/Icons/16x16_people_icons/People_046.gif";
-var pane, view;
 module("SC.TabView", {
   setup: function() {
-    SC.RunLoop.begin();
-    pane = SC.MainPane.create({
-      childViews: [
-        SC.TabView.extend({
-          nowShowing: 'tab2',
-
-          items: [
-            { title: "tab1", value: "tab1" , icon: iconURL},
-            { title: "tab2", value: "tab2" , icon: iconURL},
-            { title: "tab3", value: "tab3" , icon: iconURL}
-          ],
-
-          itemTitleKey: 'title',
-          itemValueKey: 'value',
-          itemIconKey: 'icon',
-          layout: { left:12, height: 200, right:12, top:12 }
-          
-        })]
+    SC.run(function() {
+      window.globalPage = SC.Page.create({
+        view1: SC.View.create(),
+        view2: SC.View.create()
+      });
     });
-    pane.append(); // make sure there is a layer...
-    SC.RunLoop.end();
-    
-    view = pane.childViews[0];
-  }, 
-  
+  },
+
   teardown: function() {
-    pane.remove();
-    pane = view = null ;
+    window.globalPage.destroy();
+    delete window.globalPage;
   }
 });
 
+test("Tabs referencing global views.", function() {
+  var pane, view;
+  SC.run(function() {
+    pane = SC.MainPane.create({
+      childViews: ['tabView'],
+      tabView: SC.TabView.extend({
+        nowShowing: 'globalPage.view1',
+
+        items: [
+          { title: "tab1", value: "globalPage.view1" },
+          { title: "tab2", value: "globalPage.view2" }
+        ]
+      })
+    }).append();
+    view = pane.tabView;
+  });
+
+  ok(view.getPath('containerView.contentView') === window.globalPage.get('view1'), "The tab view should now be showing globalPage.view1.");
+
+  SC.run(function() {
+    view.set('nowShowing', 'globalPage.view2');
+  });
+
+  ok(view.getPath('containerView.contentView') === window.globalPage.get('view2'), "The tab view should now be showing globalPage.view2.");
+
+  // Clean up.
+  SC.run(function() {
+    pane.destroy();
+  });
+});
+
+test("Tabs referencing local views.", function() {
+  var pane, view;
+  SC.run(function() {
+    pane = SC.MainPane.create({
+      childViews: ['tabView'],
+      tabView: SC.TabView.extend({
+        nowShowing: 'view1',
+
+        items: [
+          { title: "tab1", value: "view1" },
+          { title: "tab2", value: "view2" }
+        ],
+
+        view1: SC.View.create(),
+        view2: SC.View.create()
+      })
+    }).append();
+    view = pane.tabView;
+  });
+
+  ok(view.getPath('containerView.contentView') === view.get('view1'), "The tab view's local view1 should now be showing.");
+
+  SC.run(function() {
+    view.set('nowShowing', 'view2');
+  });
+
+  ok(view.getPath('containerView.contentView') === view.get('view2'), "The tab view's local view2 should now be showing.");
+
+  // Clean up.
+  SC.run(function() {
+    pane.destroy();
+  });
+});
+
+test("Tabs referencing deep local views.", function() {
+  var pane, view;
+  SC.run(function() {
+    pane = SC.MainPane.create({
+      childViews: ['tabView'],
+      tabView: SC.TabView.extend({
+        nowShowing: '.localPage.view1',
+
+        items: [
+          { title: "tab1", value: ".localPage.view1" },
+          { title: "tab2", value: ".localPage.view2" }
+        ],
+        localPage: SC.Page.create({
+          view1: SC.View.create(),
+          view2: SC.View.create()
+        })
+      })
+    }).append();
+    view = pane.tabView;
+  });
+
+  ok(view.getPath('containerView.contentView') === view.getPath('localPage.view1'), "The tab view's local view1 should now be showing.");
+
+  SC.run(function() {
+    view.set('nowShowing', '.localPage.view2');
+  });
+
+  ok(view.getPath('containerView.contentView') === view.getPath('localPage.view2'), "The tab view's local view2 should now be showing.");
+
+  // Clean up.
+  SC.run(function() {
+    pane.destroy();
+  });
+});