~ubuntuone-hackers/online-services-common-js/trunk
» Revision
33
: src/navbar/tests/unit/js/tests.js
« back to all changes in this revision
Viewing changes to src/navbar/tests/unit/js/tests.js
- browse files at revision 33
- compare with another revision
- download diff
- download tarball
- view history from revision 33
- Committer: jonas-drange
- Date: 2014-05-14 09:56:38 UTC
- mfrom: (32.1.4 searchbar-as-module)
- Revision ID: jonas.drange@canonical.com-20140514095638-kdlj966519ezk7y3
[r=stephen-stewart] - new module 'searchbar', which now builds only one module, 'searchbar-autocomplete'
- removing all search code in navbar
- bumping ulysses dep to 42
- removing all search code in navbar
- bumping ulysses dep to 42
- files added:
- build/searchbar-autocomplete
- src/searchbar
- src/searchbar/js
- src/searchbar/tests
- src/searchbar/tests/manual
- src/searchbar/tests/unit
- src/searchbar/tests/unit/js
- files removed:
- build/navbar-autocomplete
- files modified:
- build/config.js
added
removed
src/navbar/tests/unit/js/tests.js
19
19
});
20
20
21
21
after(function (done) {
22
Y.all('.ues-icon-menu, .ues-icon-search-bordered').remove(true);
22
Y.one('.ues-icon-menu').remove(true);
23
23
done();
24
24
});
25
25
51
51
});
52
52
53
53
after(function (done) {
54
Y.all('.ues-icon-menu, .ues-icon-search-bordered').remove(true);
54
Y.one('.ues-icon-menu').remove(true);
55
55
done();
56
56
});
57
57
100
100
expect(menu.hasClass('collapsing')).to.be.true;
101
101
});
102
102
103
describe('search', function () {
104
105
it('should have added a search icon', function () {
106
expect(Y.one('[data-qa="navbar-search"] .ues-icon-search-bordered')).to.exist;
107
});
108
109
it('should have a search form with collapse plugin plugged in', function () {
110
var search = Y.one('[data-qa="navbar-search"] .ues-navbar-collapse.search');
111
expect(search.collapse).to.exist;
112
});
113
114
it('should open search when search icon clicked', function (done) {
115
var searchIcon = Y.one('[data-qa="navbar-search"] .ues-navbar-header > .ues-icon-search-bordered');
116
var search = Y.one('[data-qa="navbar-search"] .ues-navbar-collapse.search');
117
118
var event = search.collapse.on('stateChange', function (e, done) {
119
expect(this.hasClass('in')).to.be.false;
120
expect(this.hasClass('collapse')).to.be.true;
121
expect(this.hasClass('collapsing')).to.be.false;
122
123
event.detach();
124
done();
125
}, search, done);
126
127
searchIcon.simulate('click');
128
// transition is 300ms, so this should immediately be true
129
expect(search.hasClass('collapsing')).to.be.true;
130
});
131
132
it('should close an open search when search icon clicked', function (done) {
133
var searchIcon = Y.one('[data-qa="navbar-search"] .ues-navbar-header > .ues-icon-search-bordered');
134
var search = Y.one('[data-qa="navbar-search"] .ues-navbar-collapse.search');
135
136
var event = search.collapse.on('stateChange', function (e, done) {
137
expect(this.hasClass('in')).to.be.true;
138
expect(this.hasClass('collapse')).to.be.true;
139
expect(this.hasClass('collapsing')).to.be.false;
140
141
event.detach();
142
done();
143
}, search, done);
144
145
searchIcon.simulate('click');
146
// transition is 300ms, so this should immediately be true
147
expect(search.hasClass('collapsing')).to.be.true;
148
});
149
150
});
151
152
describe('both search and menu together', function () {
153
154
it('should open search', function (done) {
155
var searchIcon = Y.one('[data-qa="navbar-search"] .ues-navbar-header > .ues-icon-search-bordered');
156
var search = Y.one('[data-qa="navbar-search"] .ues-navbar-collapse.search');
157
158
var event = search.collapse.on('stateChange', function (e, done) {
159
event.detach();
160
done();
161
}, search, done);
162
163
searchIcon.simulate('click');
164
165
});
166
167
it('should close an open search when menu icon clicked', function (done) {
168
169
var hamburger = Y.one('[data-qa="navbar-search"] .ues-navbar-header > .ues-icon-menu');
170
var menu = Y.one('[data-qa="navbar-search"] .ues-navbar-collapse');
171
172
var search = Y.one('[data-qa="navbar-search"] .ues-navbar-collapse.search');
173
174
var menuEvent = menu.collapse.on('stateChange', function (e) {
175
expect(this.hasClass('in')).to.be.false;
176
expect(this.hasClass('collapse')).to.be.true;
177
expect(this.hasClass('collapsing')).to.be.false;
178
179
// this would start collapsing search
180
expect(search.hasClass('collapsing')).to.be.true;
181
182
menuEvent.detach();
183
184
}, menu);
185
186
var searchEvent = search.collapse.on('stateChange', function (e, done) {
187
expect(this.hasClass('in')).to.be.true;
188
expect(this.hasClass('collapse')).to.be.true;
189
expect(this.hasClass('collapsing')).to.be.false;
190
191
searchEvent.detach();
192
done();
193
}, search, done);
194
195
hamburger.simulate('click');
196
// transition is 300ms, so this should immediately be true
197
expect(menu.hasClass('collapsing')).to.be.true;
198
});
199
200
it('should close an open menu when search icon clicked', function (done) {
201
202
var menu = Y.one('[data-qa="navbar-search"] .ues-navbar-collapse');
203
204
var search = Y.one('[data-qa="navbar-search"] .ues-navbar-collapse.search');
205
var searchIcon = Y.one('[data-qa="navbar-search"] .ues-navbar-header > .ues-icon-search-bordered');
206
207
var menuEvent = menu.collapse.on('stateChange', function (e) {
208
expect(this.hasClass('in')).to.be.true;
209
expect(this.hasClass('collapse')).to.be.true;
210
expect(this.hasClass('collapsing')).to.be.false;
211
212
213
menuEvent.detach();
214
done();
215
216
}, menu);
217
218
var searchEvent = search.collapse.on('stateChange', function (e, done) {
219
expect(this.hasClass('in')).to.be.false;
220
expect(this.hasClass('collapse')).to.be.true;
221
expect(this.hasClass('collapsing')).to.be.false;
222
223
// this would start collapsing menu
224
expect(menu.hasClass('collapsing')).to.be.true;
225
226
searchEvent.detach();
227
}, search, done);
228
229
searchIcon.simulate('click');
230
// transition is 300ms, so this should immediately be true
231
expect(search.hasClass('collapsing')).to.be.true;
232
});
233
234
});
235
236
});
237
238
})();
239
240
(function () {
241
242
describe('navbar-autocomplete', function () {
243
var Y, input;
244
245
beforeEach(function (done) {
246
Y = YUI().use(
247
'navbar', 'navbar-autocomplete', 'node-event-simulate', function (Y) {
248
input = Y.one('.autocomplete input');
249
done();
250
});
251
});
252
253
afterEach(function () {
254
255
if(input.ac) {
256
input.ac.destroy();
257
}
258
259
Y.all('.ues-icon-menu, .ues-icon-search-bordered').remove(true);
260
261
});
262
263
it('should plug autocomplete input node', function () {
264
Y.one('.autocomplete input').hasPlugin('ac');
265
});
266
267
describe('autocollapse implementation tests', function () {
268
269
var autoCompleteQuery = function () {
270
var val = 'face';
271
272
input.set('value', '');
273
input.ac._onInputValueChange({newVal: ''});
274
275
input.set('value', val);
276
input.ac._onInputValueChange({newVal: val});
277
};
278
279
var autoCompleteClear = function () {
280
var val = 'face';
281
282
input.set('value', val);
283
input.ac._onInputValueChange({newVal: val});
284
285
input.set('value', '');
286
input.ac._onInputValueChange({newVal: ''});
287
};
288
289
var wrapper;
290
291
beforeEach(function (done) {
292
293
wrapper = Y.one('.autocomplete');
294
wrapper.collapse.set('duration', 0);
295
296
var openEvent = wrapper.collapse.on('open', function (e, done) {
297
298
done();
299
openEvent.detach();
300
301
}, wrapper, done);
302
303
wrapper.collapse.open();
304
305
});
306
307
it('should resize to fit input etc as well as autocomplete list on results', function (done) {
308
309
input.ac.set('source', [
310
{ text: 'Facebook' },
311
{ text: 'Google+' }
312
]);
313
314
var baseHeight = wrapper.get('scrollHeight');
315
316
autoCompleteQuery();
317
318
var checkAutoComplete = function () {
319
var listNodeHeight = input.ac.get('listNode').get('scrollHeight');
320
var wrapperHeight = wrapper.get('scrollHeight');
321
var targetHeight = baseHeight + listNodeHeight;
322
323
// estimates are good enough here
324
expect(wrapperHeight).to.be.within(targetHeight, targetHeight + 10);
325
done();
326
};
327
328
// wait for autocomplete to act
329
window.setTimeout(checkAutoComplete, 100);
330
331
});
332
333
it('should resize back to normal on clear', function (done) {
334
335
input.ac.set('source', [
336
{ text: 'Facebook' },
337
{ text: 'Google+' }
338
]);
339
340
var baseHeight = wrapper.get('scrollHeight');
341
342
autoCompleteClear();
343
344
var checkAutoComplete = function () {
345
var wrapperHeight = wrapper.get('scrollHeight');
346
347
// estimates are good enough here
348
expect(wrapperHeight).to.be.within(baseHeight, baseHeight + 10);
349
done();
350
};
351
352
// wait for autocomplete to act
353
window.setTimeout(checkAutoComplete, 100);
354
355
});
356
357
});
358
359
});
360
361
describe('navbar-autocomplete (loaded disorderly)', function () {
362
363
it('should not throw errors even if loaded before navbar', function () {
364
365
var fun = function () {
366
YUI().use(
367
'navbar-autocomplete', 'navbar', function (Y) {
368
});
369
};
370
371
expect(fun).to.not.throw(/./);
372
});
373
374
103
});
375
104
376
105
})();
Loggerhead is a web-based interface for Breezy
Version: 2.0.1