← Back to branch summary

~bac/juju-gui/trunkcopy

« back to all changes in this revision

Viewing changes to lib/yui/tests/event-valuechange/tests/functional/event-valuechange-test.js

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/tests/event-valuechange/tests/functional/event-valuechange-test.js
1
 
YUI.add('event-valuechange-test', function (Y) {
2
 
 
3
 
var Assert      = Y.Assert,
4
 
    ArrayAssert = Y.ArrayAssert,
5
 
 
6
 
    ignoreFocus = Y.UA.ie && Y.UA.ie < 10,
7
 
    suite       = new Y.Test.Suite('Y.ValueChange');
8
 
 
9
 
// -- Basic Subscriptions ------------------------------------------------------
10
 
suite.add(new Y.Test.Case({
11
 
    name: 'Basic',
12
 
 
13
 
    _should: {
14
 
        ignore: {
15
 
            // IE doesn't simulate focus/blur events properly, so these tests
16
 
            // fail. Have to rely on manual testing.
17
 
            'valuechange should stop polling on blur': ignoreFocus,
18
 
            'valuechange should start polling on focus': ignoreFocus,
19
 
            'valuechange should not report stale changes that occurred while a node was not focused': ignoreFocus
20
 
        }
21
 
    },
22
 
 
23
 
    setUp: function () {
24
 
        this.textArea  = Y.Node.create('<textarea></textarea>');
25
 
        this.textInput = Y.Node.create('<input type="text">');
26
 
 
27
 
        Y.one('#test').append(this.textArea).append(this.textInput);
28
 
    },
29
 
 
30
 
    tearDown: function () {
31
 
        this.textArea.remove().destroy(true);
32
 
        this.textInput.remove().destroy(true);
33
 
    },
34
 
 
35
 
    'valuechange event should start polling on mousedown and fire an event when the value changes': function () {
36
 
        var test = this;
37
 
 
38
 
        this.textInput.once('valuechange', function (e) {
39
 
            test.resume(function () {
40
 
                Assert.areSame('', e.prevVal, 'prevVal should be ""');
41
 
                Assert.areSame('foo', e.newVal, 'newVal should be "foo"');
42
 
                Assert.areSame(test.textInput, e.currentTarget, 'currentTarget should be the input node');
43
 
                Assert.areSame(test.textInput, e.target, 'target should be the input node');
44
 
            });
45
 
        });
46
 
 
47
 
        this.textInput.simulate('mousedown');
48
 
        this.textInput.set('value', 'foo');
49
 
 
50
 
        this.wait(200);
51
 
    },
52
 
 
53
 
    'valuechange should support textareas as well': function () {
54
 
        var test = this;
55
 
 
56
 
        this.textArea.once('valuechange', function (e) {
57
 
            test.resume(function () {
58
 
                Assert.areSame('', e.prevVal, 'prevVal should be ""');
59
 
                Assert.areSame('foo', e.newVal, 'newVal should be "foo"');
60
 
                Assert.areSame(test.textArea, e.currentTarget, 'currentTarget should be the textarea node');
61
 
                Assert.areSame(test.textArea, e.target, 'target should be the textarea node');
62
 
            });
63
 
        });
64
 
 
65
 
        this.textArea.simulate('mousedown');
66
 
        this.textArea.set('value', 'foo');
67
 
 
68
 
        this.wait(200);
69
 
    },
70
 
 
71
 
    'valuechange should start polling on keydown': function () {
72
 
        var test = this;
73
 
 
74
 
        this.textInput.once('valuechange', function (e) {
75
 
            test.resume();
76
 
        });
77
 
 
78
 
        this.textInput.simulate('keydown');
79
 
        this.textInput.set('value', 'foo');
80
 
 
81
 
        this.wait(200);
82
 
    },
83
 
 
84
 
    'valuechange should stop polling on blur': function () {
85
 
        var fired;
86
 
 
87
 
        this.textInput.on('valuechange', function (e) {
88
 
            fired = true;
89
 
        });
90
 
 
91
 
        this.textInput.simulate('mousedown');
92
 
        this.textInput.set('value', 'foo');
93
 
 
94
 
        this.wait(function () {
95
 
            Assert.isTrue(fired);
96
 
            fired = false;
97
 
 
98
 
            this.textInput.simulate('blur');
99
 
            this.textInput.set('value', 'bar');
100
 
 
101
 
            this.wait(function () {
102
 
                Assert.isFalse(fired);
103
 
            }, 200);
104
 
        }, 200);
105
 
    },
106
 
 
107
 
    'valuechange should start polling on focus': function () {
108
 
        var test = this;
109
 
 
110
 
        this.textInput.once('valuechange', function (e) {
111
 
            test.resume();
112
 
        });
113
 
 
114
 
        this.textInput.simulate('focus');
115
 
        this.textInput.set('value', 'foo');
116
 
 
117
 
        this.wait(200);
118
 
    },
119
 
 
120
 
    'valuechange should not report stale changes that occurred while a node was not focused': function () {
121
 
        var fired = false;
122
 
 
123
 
        this.textInput.simulate('mousedown');
124
 
        this.textInput.set('value', 'foo');
125
 
 
126
 
        this.textInput.on('valuechange', function (e) {
127
 
            fired = true;
128
 
        });
129
 
 
130
 
        this.textInput.simulate('blur');
131
 
        this.textInput.set('value', 'bar');
132
 
        this.textInput.simulate('focus');
133
 
        this.textInput.simulate('mousedown');
134
 
 
135
 
        this.wait(function () {
136
 
            Assert.isFalse(fired);
137
 
        }, 200);
138
 
    },
139
 
 
140
 
    'valuechange should start polling on keyup for IME keystrokes': function () {
141
 
        var fired = false;
142
 
 
143
 
        this.textInput.on('valuechange', function (e) {
144
 
            fired = true;
145
 
        });
146
 
 
147
 
        this.textInput.simulate('keyup', {keyCode: 123}); // should not trigger IME behavior
148
 
        this.textInput.set('value', 'foo');
149
 
 
150
 
        this.wait(function () {
151
 
            Assert.isFalse(fired);
152
 
 
153
 
            this.textInput.simulate('blur'); // stop polling
154
 
            this.textInput.simulate('keyup', {keyCode: 197});
155
 
            this.textInput.set('value', 'bar');
156
 
 
157
 
            this.wait(function () {
158
 
                Assert.isTrue(fired);
159
 
 
160
 
                fired = false;
161
 
 
162
 
                this.textInput.simulate('blur');
163
 
                this.textInput.simulate('keyup', {keyCode: 229});
164
 
                this.textInput.set('value', 'baz');
165
 
 
166
 
                this.wait(function () {
167
 
                    Assert.isTrue(fired);
168
 
                }, 200);
169
 
            }, 200);
170
 
        }, 200);
171
 
    },
172
 
 
173
 
    'valuechange should stop polling after timeout': function () {
174
 
        var oldTimeout = Y.ValueChange.TIMEOUT,
175
 
            fired;
176
 
 
177
 
        this.textInput.on('valuechange', function (e) {
178
 
            fired = true;
179
 
        });
180
 
 
181
 
        Y.ValueChange.TIMEOUT = 70;
182
 
 
183
 
        this.textInput.simulate('mousedown');
184
 
        this.textInput.set('value', 'foo');
185
 
 
186
 
        this.wait(function () {
187
 
            Assert.isTrue(fired);
188
 
            fired = false;
189
 
 
190
 
            this.wait(function () {
191
 
                this.textInput.set('value', 'bar');
192
 
 
193
 
                this.wait(function () {
194
 
                    Assert.isFalse(fired);
195
 
                    Y.ValueChange.TIMEOUT = oldTimeout;
196
 
                }, 60);
197
 
            }, 71);
198
 
        }, 60);
199
 
    },
200
 
 
201
 
    'valueChange should be an alias for valuechange for backcompat': function () {
202
 
        var test = this;
203
 
 
204
 
        this.textInput.on('valueChange', function () {
205
 
            test.resume();
206
 
        });
207
 
 
208
 
        this.textInput.simulate('mousedown');
209
 
        this.textInput.set('value', 'monkeys');
210
 
 
211
 
        this.wait(200);
212
 
    }
213
 
}));
214
 
 
215
 
// -- Delegation ---------------------------------------------------------------
216
 
 
217
 
suite.add(new Y.Test.Case({
218
 
    name: 'Delegation',
219
 
 
220
 
    setUp: function () {
221
 
        this.container = Y.one('#test')
222
 
            .append('<input type="text" id="vc-delegate-a" class="odd">')
223
 
            .append('<input type="text" id="vc-delegate-b" class="even">')
224
 
            .append('<input type="text" id="vc-delegate-c" class="odd">')
225
 
            .append('<textarea id="vc-delegate-d" class="even"></textarea>')
226
 
            .append('<textarea id="vc-delegate-e" class="odd"></textarea>')
227
 
            .append('<textarea id="vc-delegate-f" class="even"></textarea>');
228
 
 
229
 
        this.a = Y.one('#vc-delegate-a');
230
 
        this.b = Y.one('#vc-delegate-b');
231
 
        this.c = Y.one('#vc-delegate-c');
232
 
        this.d = Y.one('#vc-delegate-d');
233
 
        this.e = Y.one('#vc-delegate-e');
234
 
        this.f = Y.one('#vc-delegate-f');
235
 
    },
236
 
 
237
 
    tearDown: function () {
238
 
        this.container.purge().empty();
239
 
    },
240
 
 
241
 
    'delegation should be supported on input nodes': function () {
242
 
        var test = this;
243
 
 
244
 
        this.container.delegate('valuechange', function (e) {
245
 
            test.resume(function () {
246
 
                Assert.areSame('', e.prevVal, 'prevVal should be ""');
247
 
                Assert.areSame('foo', e.newVal, 'newVal should be "foo"');
248
 
                Assert.areSame('input', e.currentTarget.get('nodeName').toLowerCase(), 'currentTarget should be the input node');
249
 
                Assert.areSame('input', e.target.get('nodeName').toLowerCase(), 'target should be the input node');
250
 
            });
251
 
        }, '.odd');
252
 
 
253
 
        this.a.simulate('mousedown');
254
 
        this.a.set('value', 'foo');
255
 
 
256
 
        this.wait(200);
257
 
    },
258
 
 
259
 
    'delegation should be supported on textareas': function () {
260
 
        var test = this;
261
 
 
262
 
        this.container.delegate('valuechange', function (e) {
263
 
            test.resume(function () {
264
 
                Assert.areSame('', e.prevVal, 'prevVal should be ""');
265
 
                Assert.areSame('foo', e.newVal, 'newVal should be "foo"');
266
 
                Assert.areSame('textarea', e.currentTarget.get('nodeName').toLowerCase(), 'currentTarget should be the textarea node');
267
 
                Assert.areSame('textarea', e.target.get('nodeName').toLowerCase(), 'target should be the textarea node');
268
 
            });
269
 
        }, '.even');
270
 
 
271
 
        this.f.simulate('mousedown');
272
 
        this.f.set('value', 'foo');
273
 
 
274
 
        this.wait(200);
275
 
    },
276
 
 
277
 
    'delegate filters should work properly': function () {
278
 
        var test = this;
279
 
 
280
 
        this.container.delegate('valuechange', function (e) {
281
 
            test.resume();
282
 
        }, '.even');
283
 
 
284
 
        this.container.delegate('valuechange', function (e) {
285
 
            test.resume(function () {
286
 
                Assert.fail('.odd handler should not be called');
287
 
            });
288
 
        }, '.odd');
289
 
 
290
 
        this.b.simulate('mousedown');
291
 
        this.b.set('value', 'foo');
292
 
 
293
 
        this.wait(200);
294
 
    },
295
 
 
296
 
    'multiple delegated handlers should be supported': function () {
297
 
        var calls = [],
298
 
            test  = this;
299
 
 
300
 
        this.container.delegate('valuechange', function (e) {
301
 
            calls.push('one');
302
 
        }, '.odd');
303
 
 
304
 
        this.container.delegate('valuechange', function (e) {
305
 
            test.resume(function () {
306
 
                Assert.fail('.even handler should not be called');
307
 
            });
308
 
        }, '.even');
309
 
 
310
 
        this.container.delegate('valuechange', function (e) {
311
 
            calls.push('two');
312
 
        }, '.odd,.even');
313
 
 
314
 
        this.container.delegate('valuechange', function (e) {
315
 
            calls.push('three');
316
 
        }, 'input');
317
 
 
318
 
        this.c.simulate('mousedown');
319
 
        this.c.set('value', 'foo');
320
 
 
321
 
        this.wait(function () {
322
 
            ArrayAssert.itemsAreSame(['one', 'two', 'three'], calls, 'delegated handlers should all be called in the correct order');
323
 
        }, 200);
324
 
    }
325
 
}));
326
 
 
327
 
Y.Test.Runner.add(suite);
328
 
 
329
 
}, '@VERSION@', {requires:['event-valuechange', 'node-base', 'node-event-simulate', 'test']});