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