1 // ========================================================================== 2 // Project: SproutCore - JavaScript Application Framework 3 // Copyright: ©2006-2011 Strobe Inc. and contributors. 4 // portions copyright @2011 Apple Inc. 5 // License: Licensed under MIT license (see license.js) 6 // ========================================================================== 7 8 /*global module test htmlbody ok equals same stop start */ 9 10 11 //control test pane 12 var pane = SC.ControlTestPane.design() 13 //sample1 14 .add("Basic", SC.SelectView, { 15 items: ['None', 'Low', 'Medium', 'High'] 16 }) 17 18 //sample2 19 .add("Disabled", SC.SelectView, { 20 isEnabled: NO, items: ['None', 'Low', 'Medium', 'High'] 21 }) 22 23 //sample3 24 .add("NotVisible", SC.SelectView, { 25 isVisible: NO, items: ['None', 'Low', 'Medium', 'High'] 26 }) 27 28 //sample4 29 .add("SortedObjects", SC.SelectView, { 30 items:['None', 'Low', 'Medium', 'High'], 31 disableSort: NO 32 }) 33 34 //sample5 35 .add("UnsortedObjects", SC.SelectView, { 36 items: ['None', 'Low', 'Medium', 'High'], 37 disableSort: YES 38 }) 39 40 //sample6 41 .add("redraw", SC.SelectView, { 42 layout: { width: '150', right: '0' } 43 }) 44 45 //sample7 46 .add("SelectButtonWithIcon", SC.SelectView, { 47 items: [{ title: "None", icon: 'select-button-icon' }, 48 { title: "Low", icon: 'select-button-icon' }, 49 { title: "Medium", icon: 'select-button-icon' }, 50 { title: "High", icon: 'select-button-icon' }], 51 itemTitleKey: 'title', 52 itemIconKey: 'icon', 53 itemValueKey: 'title', 54 value: 'None', 55 showCheckbox: YES 56 }) 57 58 //sample8 59 .add("SortKey", SC.SelectView, { 60 items: [{ title: "None", pos: 3}, 61 { title: "Low", pos: 1}, 62 { title: "Medium", pos: 2 }, 63 { title: "High", pos: 4}], 64 itemTitleKey: 'title', 65 disableSort: NO, 66 itemSortKey: 'pos', 67 showCheckbox: YES 68 }) 69 70 //sample9 71 .add("StaticLayout", SC.SelectView, { 72 useStaticLayout: YES, 73 items:['None', 'Low', 'Medium', 'High'], 74 layout: { width: '150', right: '0' } 75 }) 76 77 //sample10 78 .add("DisableItem", SC.SelectView, { 79 items: [{ title: "None", pos: 3, isEnabled: YES }, 80 { title: "Low", pos: 1, isEnabled: NO }, 81 { title: "Medium", pos: 2, isEnabled: YES }, 82 { title: "High", pos: 4, isEnabled: NO }], 83 itemTitleKey: 'title', 84 disableSort: NO, 85 isEnabledKey: 'isEnabled', 86 itemSortKey: 'pos', 87 showCheckbox: YES 88 }) 89 90 // sample11 91 .add("SelectButtonWithEmptyName", SC.SelectView, { 92 items: [{ title: "None", icon: 'select-button-icon' }, 93 { title: "Low", icon: 'select-button-icon' }, 94 { title: "Medium", icon: 'select-button-icon' }, 95 { title: "High", icon: 'select-button-icon' }], 96 itemTitleKey: 'title', 97 itemIconKey: 'icon', 98 emptyName: '<empty>', 99 escapeHTML: NO, 100 showCheckbox: YES 101 }) 102 103 .add("SelectWithSeparator", SC.SelectView, { 104 items: [{ title: "None", isSeparator: YES }, 105 { title: "Low", isEnabled: NO }, 106 { isSeparator: YES }, 107 { title: "High" }], 108 itemTitleKey: 'title' 109 }); 110 111 112 // .......................................................... 113 // TEST VIEWS 114 // 115 116 module('SC.SelectView ui', { 117 setup: function(){ 118 htmlbody('<style> .sc-static-layout { border: 1px red dotted; } </style>'); 119 pane.standardSetup().setup(); 120 }, 121 teardown: function(){ 122 pane.standardSetup().teardown(); 123 clearHtmlbody(); 124 } 125 }); 126 127 // test1 128 test("Check the visiblity of the selectButtons", function() { 129 ok(pane.view('Basic').get('isVisibleInWindow'), 'Basic.isVisibleInWindow should be YES') ; 130 ok(pane.view('Disabled').get('isVisibleInWindow'), 'Disabled.isVisibleInWindow should be YES') ; 131 ok(!pane.view('NotVisible').get('isVisibleInWindow'), 'NotVisible.isVisibleInWindow should be NO') ; 132 ok(pane.view('SortedObjects').get('isVisibleInWindow'), 'SortedObjects.isVisibleInWindow should be YES') ; 133 ok(pane.view('UnsortedObjects').get('isVisibleInWindow'), 'UnsortedObjects.isVisibleInWindow should be YES') ; 134 ok(pane.view('redraw').get('isVisibleInWindow'), 'redraw.isVisibleInWindow should be YES') ; 135 ok(pane.view('SelectButtonWithIcon').get('isVisibleInWindow'), 'SelectButtonWithIcon.isVisibleInWindow should be YES') ; 136 ok(pane.view('StaticLayout').get('isVisibleInWindow'), 'StaticLayout.isVisibleInWindow should be YES') ; 137 ok(pane.view('SelectButtonWithEmptyName').get('isVisibleInWindow'), 'SelectButtonWithEmptyName.isVisibleInWindow should be YES') ; 138 ok(pane.view('SelectWithSeparator').get('isVisibleInWindow'), 'SelectButtonWithEmptyName.isVisibleInWindow should be YES') ; 139 }) ; 140 141 //test2 142 test("Basic", function() { 143 var view=pane.view('Basic').$(); 144 ok(view.hasClass('sc-view'), 'hasClass(sc-view) should be YES') ; 145 ok(view.hasClass('sc-button-view'), 'hasClass(sc-button-view) should be YES') ; 146 ok(view.hasClass('sc-regular-size'), 'hasClass(sc-regular-size) should be YES') ; 147 ok(!view.hasClass('icon'), 'hasClass(icon) should be NO') ; 148 ok(!view.hasClass('sel'), 'hasClass(sel) should be NO') ; 149 ok(!view.hasClass('disabled'), 'hasClass(disabled) should be NO') ; 150 ok(!view.hasClass('def'), 'hasClass(def) should be NO') ; 151 }) ; 152 153 //test3 154 test("Disabled", function() { 155 var view=pane.view('Disabled').$() ; 156 ok(view.hasClass('disabled'), 'hasClass(disabled) should be YES') ; 157 ok(view.hasClass('sc-view'), 'hasClass(sc-view) should be YES') ; 158 ok(view.hasClass('sc-button-view'), 'hasClass(sc-button-view) should be YES') ; 159 ok(view.hasClass('sc-regular-size'), 'hasClass(sc-regular-size) should be YES') ; 160 ok(!view.hasClass('icon'), 'hasClass(icon) should be NO') ; 161 ok(!view.hasClass('sel'), 'hasClass(sel) should be NO') ; 162 ok(!view.hasClass('def'), 'hasClass(def) should be NO') ; 163 }) ; 164 165 //test4 166 test("NotVisible", function() { 167 var view=pane.view('NotVisible').$(); 168 ok(view.hasClass('sc-view'), 'hasClass(sc-view) should be YES') ; 169 ok(view.hasClass('sc-button-view'), 'hasClass(sc-button-view) should be YES') ; 170 ok(view.hasClass('sc-regular-size'), 'hasClass(sc-regular-size) should be YES') ; 171 ok(!view.hasClass('sel'), 'hasClass(sel) should be NO') ; 172 ok(!view.hasClass('disabled'), 'hasClass(disabled) should be NO') ; 173 ok(!view.hasClass('def'), 'hasClass(def) should be NO') ; 174 ok(!view.hasClass('sel'), 'should not have sel class') ; 175 }) ; 176 177 //test5 178 test("SortedObjects", function() { 179 var view = pane.view('SortedObjects'); 180 equals(null,view.get('itemSortKey'), 'sortkey not specified') ; 181 ok(view.$().hasClass('sc-view'), 'hasClass(sc-view) should be YES') ; 182 ok(view.$().hasClass('sc-button-view'), 'hasClass(sc-button-view) should be YES') ; 183 ok(view.$().hasClass('sc-regular-size'), 'hasClass(sc-regular-size) should be YES') ; 184 ok(!view.$().hasClass('sel'), 'hasClass(sel) should be NO') ; 185 ok(!view.$().hasClass('icon'), 'hasClass(icon) should be NO') ; 186 ok(!view.$().hasClass('disabled'), 'hasClass(disabled) should be NO') ; 187 ok(!view.$().hasClass('def'), 'hasClass(def) should be NO') ; 188 SC.run(function() { view.showMenu(); }); 189 equals(view.getPath("menu.displayItems")[0].title, "High", "The first item, when sorted, should be High."); 190 SC.run(function() { view.hideMenu(); }); 191 }) ; 192 193 //test6 194 test("UnsortedObjects", function() { 195 var view = pane.view('UnsortedObjects'); 196 equals(YES,view.get('disableSort'), 'Sorting disabled') ; 197 198 ok(view.$().hasClass('sc-view'), 'hasClass(sc-view) should be YES') ; 199 ok(view.$().hasClass('sc-button-view'), 'hasClass(sc-button-view) should be YES') ; 200 ok(view.$().hasClass('sc-regular-size'), 'hasClass(sc-regular-size) should be YES') ; 201 ok(!view.$().hasClass('sel'), 'hasClass(sel) should be NO') ; 202 ok(!view.$().hasClass('icon'), 'hasClass(icon) should be NO') ; 203 ok(!view.$().hasClass('disabled'), 'hasClass(disabled) should be NO') ; 204 ok(!view.$().hasClass('def'), 'hasClass(def) should be NO') ; 205 }) ; 206 207 //test7 208 test("redraw", function() { 209 var view=pane.view('redraw'); 210 ok(view.$().hasClass('sc-view'), 'hasClass(sc-view) should be YES') ; 211 ok(view.$().hasClass('sc-button-view'), 'hasClass(sc-button-view) should be YES') ; 212 ok(view.$().hasClass('sc-regular-size'), 'hasClass(sc-regular-size) should be YES') ; 213 ok(!view.$().hasClass('sel'), 'hasClass(sel) should be NO') ; 214 ok(!view.$().hasClass('icon'), 'hasClass(icon) should be NO') ; 215 ok(!view.$().hasClass('disabled'), 'hasClass(disabled) should be NO') ; 216 ok(!view.$().hasClass('def'), 'hasClass(def) should be NO'); 217 218 ok(view.get('items') === null, "Items should be empty"); 219 SC.RunLoop.begin(); 220 view.set('items', ['Calendar', 'Work', 'Home']); 221 SC.RunLoop.end(); 222 ok(view.get('items').length === 3, "Items length should be 3"); 223 224 // Can someone actually put a redraw test here? 225 }) ; 226 227 //test8 228 test("SelectButtonWithIcon", function() { 229 var view=pane.view('SelectButtonWithIcon').$(); 230 ok(view.hasClass('icon'), 'hasClass(Icon) should be YES') ; 231 ok(view.hasClass('sc-view'), 'hasClass(sc-view) should be YES') ; 232 ok(view.hasClass('sc-button-view'), 'hasClass(sc-button-view) should be YES') ; 233 ok(view.hasClass('sc-regular-size'), 'hasClass(sc-regular-size) should be YES') ; 234 ok(!view.hasClass('sel'), 'hasClass(sel) should be NO') ; 235 ok(!view.hasClass('disabled'), 'hasClass(disabled) should be NO') ; 236 ok(!view.hasClass('def'), 'hasClass(def) should be NO') ; 237 }) ; 238 239 //test9 240 test("Check if the objects are sorted based on sortKey", function() { 241 var view=pane.view('SortKey'); 242 243 244 SC.run(function() { view.showMenu(); }); 245 246 equals('None',view.getPath("menu.displayItems")[2].title, 'Third object should be "None" ') ; 247 SC.run(function() { view.hideMenu(); }); 248 }) ; 249 250 //test10 251 test("StaticLayout", function() { 252 var view = pane.view('StaticLayout'); 253 ok(!view.$().hasClass('disabled'), 'should not have disabled class'); 254 ok(!view.$().hasClass('sel'), 'should not have sel class'); 255 }); 256 257 //test11 258 test("SelectButtonWithEmptyName", function() { 259 var view=pane.view('SelectButtonWithEmptyName').$(), 260 label = pane.view('SelectButtonWithEmptyName').$('label'); 261 ok(!view.hasClass('icon'), 'hasClass(Icon) should be NO') ; 262 ok(view.hasClass('sc-view'), 'hasClass(sc-view) should be YES') ; 263 ok(view.hasClass('sc-button-view'), 'hasClass(sc-button-view) should be YES') ; 264 ok(view.hasClass('sc-regular-size'), 'hasClass(sc-regular-size) should be YES') ; 265 ok(!view.hasClass('sel'), 'hasClass(sel) should be NO') ; 266 ok(!view.hasClass('disabled'), 'hasClass(disabled) should be NO') ; 267 ok(!view.hasClass('def'), 'hasClass(def) should be NO') ; 268 equals(label[0].innerHTML, '<empty>', 'The label should be "<empty>"'); 269 }); 270 271 /** 272 This is just a simple test that shows that when the first item provided to 273 SC.SelectView is a separator, it ignores it as the default 274 in favor of the first item with a value that is selectable. 275 */ 276 test("SelectWithSeparator", function() { 277 var view=pane.view('SelectWithSeparator'); 278 ok(!view.$().hasClass('icon'), 'hasClass(Icon) should be NO') ; 279 ok(view.$().hasClass('sc-view'), 'hasClass(sc-view) should be YES') ; 280 ok(view.$().hasClass('sc-button-view'), 'hasClass(sc-button-view) should be YES') ; 281 ok(view.$().hasClass('sc-regular-size'), 'hasClass(sc-regular-size) should be YES') ; 282 ok(!view.$().hasClass('sel'), 'hasClass(sel) should be NO') ; 283 ok(!view.$().hasClass('disabled'), 'hasClass(disabled) should be NO') ; 284 ok(!view.$().hasClass('def'), 'hasClass(def) should be NO') ; 285 286 SC.run(function() { view.showMenu(); }); 287 equals(view.getPath("menu.displayItems")[0].title, 'Low', 'The label should be "Low"'); 288 SC.run(function() { view.hideMenu(); }); 289 }); 290