// ========================================================================== // 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, ok, equals */

var iconURL = sc_static(“sproutcore-32.png”); var pane, view;

module(“SC.SegmentedView”, {

setup: function() {
  SC.run(function () {
    pane = SC.MainPane.create({
      childViews: [
        SC.SegmentedView.extend({
          items: [
          { value: "Item1", icon: iconURL, width: 100 },
          { value: "Item2", icon: iconURL, width: 100 },
          { value: "Item3", icon: iconURL, width: 100 }],
          itemTitleKey: 'value',
          itemValueKey: 'value',
          itemIconKey: 'icon',
          itemWidthKey: 'width',
          itemActionKey: 'action',
          value: "Item1 Item3".w(),
          allowsEmptySelection: NO,
          layout: { height: 25, width: 400 }
        })]
    });
    pane.append(); // make sure there is a layer...
  });

  view = pane.childViews[0];
},

teardown: function() {
  SC.run(function () {
    pane.destroy();
    pane = view = null;
  });
}

});

test(“Check that properties are mapped correctly”, function() {

view.triggerItemAtIndex(1);

SC.RunLoop.begin();
view.set('isEnabled', YES);
SC.RunLoop.end();

equals(view.get('value'), "Item2", "the second item should be selected.");

var childViews = view.get('childViews');
equals(childViews[0].title, "Item1", 'Computed properties should match');
equals(childViews[0].value, "Item1", 'Computed properties should match');
equals(childViews[0].isEnabled, true, 'Computed properties should match');
equals(childViews[0].icon, iconURL, 'Computed properties should match');
equals(childViews[0].width, 100, 'Computed properties should match');
equals(childViews[0].toolTip, null, 'Computed properties should match');
equals(childViews[0].index, 0, 'Computed properties should match');

});

test(“Check the values of value”, function() {

equals(SC.isArray(view.get('value')), true, "the value should initially be an array");
equals(view.getPath('value.length'), 2, "the value array should have 2 items in it");
view.triggerItemAtIndex(1);
equals(SC.isArray(view.get('value')), false, "the value should not be an array if allowsMultipleSelection is false");
equals(view.get('value'), "Item2", "the second item should be selected.");

view.set('allowsMultipleSelection', true);
view.triggerItemAtIndex(2);
equals(SC.isArray(view.get('value')), true, "the value should be an array if allowsMultipleSelection is true");
equals(view.getPath('value.length'), 2, "the value array should have 2 items in it");
view.triggerItemAtIndex(1);
equals(view.getPath('value.length'), 1, "the value array should have 1 item in it");
view.triggerItemAtIndex(2);
equals(view.getPath('value.length'), 1, "the value array should have 1 items in it, because allowsEmptySelection is false");

view.set('allowsEmptySelection', true);
view.triggerItemAtIndex(2);
equals(view.getPath('value.length'), 0, "the value array should have 0 items in it,  because allowsEmptySelection is true");

view.set('allowsMultipleSelection', false);
view.triggerItemAtIndex(1);
equals(SC.isArray(view.get('value')), false, "the value should not be an array if allowsMultipleSelection is false again");
equals(view.get('value'), "Item2", "the second item should be selected.");
view.triggerItemAtIndex(2);
equals(view.get('value'), "Item3", "the third item should be selected.");

view.set('allowsEmptySelection', false);
view.triggerItemAtIndex(2);
equals(view.get('value'), "Item3", "the third item should still be selected, because allowsEmptySelection is false");

view.set('allowsEmptySelection', true);
view.triggerItemAtIndex(2);
equals(view.get('value'), null, "the value should go to null if allowsMultipleSelection is false and allowsEmptySelection is true.");

});

// Test that if the clientX & clientY are over an element, that the proper index of that view is returned. // Note: the test segmented view is centered by default and the items are only 50px wide. test('displayItemIndexForEvent(evt)', function () {

var evt = {};

// Check not over the view.
evt.target = view.get('layer');
evt.clientX = 500;
evt.clientY = 500;
equals(view.displayItemIndexForEvent(evt), -1, "Clicking at 500,500 which is not over the view element at all should return");

// Check not over any child elements but in view at 0,0. This tests a special accessibility fix-up where events at 0,0
// are converted into a point over an element, because WebKit sends clientX & client& of 0,0 for accessibility events.
evt.target = view.get('layer');
evt.clientX = 0;
evt.clientY = 0;
equals(view.displayItemIndexForEvent(evt), -1, "Clicking at 0,0 which is not over any child elements, but is over the view element should return");

// Check not over any child elements but in view at 1,1.
evt.clientX = 1;
evt.clientY = 1;
equals(view.displayItemIndexForEvent(evt), -1, "Clicking at 1,1 which is not over any child elements, but is over the view element should return");

// Check over first child element.
evt.target = view.get('childViews')[0].get('layer');
evt.clientX = 51;
evt.clientY = 0;
equals(view.displayItemIndexForEvent(evt), 0, "Clicking at 0,51 which is over the first child element should return");

// Check over second child element.
evt.target = view.get('childViews')[1].get('layer');
evt.clientX = 151;
evt.clientY = 0;
equals(view.displayItemIndexForEvent(evt), 1, "Clicking at 0,151 which is over the second child element should return");

// Check over third child element.
evt.target = view.get('childViews')[2].get('layer');
evt.clientX = 251;
evt.clientY = 0;
equals(view.displayItemIndexForEvent(evt), 2, "Clicking at 0,251 which is over the third child element should return");

// Check past third child element.
evt.target = view.get('layer');
evt.clientX = 351;
evt.clientY = 0;
equals(view.displayItemIndexForEvent(evt), -1, "Clicking at 0,351 which is past the third child element should return");

});