// ========================================================================== // 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"); });