root/public/javascripts/scriptaculous/test/unit/ajax_autocompleter_test.html @ 11

Revision 1, 10.2 kB (checked in by falcon, 17 years ago)

Version one -> initial work from the laptop.
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<!-- vim:expandtab=on
4  -->
5<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6<head>
7  <title>script.aculo.us Unit test file</title>
8  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
9  <script src="../../lib/prototype.js" type="text/javascript"></script>
10  <script src="../../src/scriptaculous.js" type="text/javascript"></script>
11  <script src="../../src/unittest.js" type="text/javascript"></script>
12  <link rel="stylesheet" href="../test.css" type="text/css" />
13  <style>
14    .selected { background-color: #888; }
15  </style>
16</head>
17<body>
18<h1>script.aculo.us Unit test file</h1>
19<p>
20  Tests for Ajax.Autocompleter in controls.js.
21</p>
22
23<!-- Log output -->
24<div id="testlog"> </div>
25
26<input id="ac_input" type="text" autocomplete="off" />
27<div id="ac_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
28
29<input id="ac_input_br" type="text" autocomplete="off" />
30<div id="ac_update_br" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
31
32<input id="ac2_input" type="text" autocomplete="off" />
33<div id="ac2_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
34
35<input id="actoken_input" type="text" autocomplete="off" />
36<div id="actoken_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
37
38<input id="dummy_element" type="text" autocomplete="off" />
39
40<!-- Tests follow -->
41<script type="text/javascript" language="javascript" charset="utf-8">
42// <![CDATA[
43
44 
45  new Test.Unit.Runner({
46   
47    // Integration test, tests the entire cycle
48    testAjaxAutocompleter: function() { with(this) {
49      var ac = new Ajax.Autocompleter('ac_input','ac_update','_autocomplete_result.html',
50        { method: 'get' }); //override so we can use a static for the result
51      assertInstanceOf(Ajax.Autocompleter, ac);
52     
53      // box not visible
54      assertNotVisible('ac_update');
55     
56      // focus, but box not visible
57      Event.simulateMouse('ac_input', 'click');
58      assertNotVisible('ac_update');
59     
60      Event.simulateKeys('ac_input','abcdefg');
61      assertEqual('abcdefg', $('ac_input').value);
62     
63      // check box popping up on input
64      wait(1000, function() { with(this) {
65        assertVisible('ac_update');
66        assertEqual('test1', $('ac_update').firstChild.firstChild.innerHTML);
67        assertEqual('test2', $('ac_update').firstChild.firstChild.nextSibling.innerHTML);
68       
69        // intl. characters return (UTF-8)
70        assertEqual('Here we have some international ©∏Á®Äç†∑rß', $('ac_update').firstChild.lastChild.innerHTML);
71               
72        // first entry should be selected
73        assert(Element.hasClassName($('ac_update').firstChild.firstChild, 'selected'),'Selected item should have a className of: selected');
74       
75        Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_DOWN});
76       
77        // second entry should be selected
78        assert(!Element.hasClassName($('ac_update').firstChild.firstChild),'Item shouldn\'t have a className of: selected');
79        assert(Element.hasClassName($('ac_update').firstChild.firstChild.nextSibling, 'selected'),'Second entry should have a className of: selected');
80       
81        // check selecting with <TAB>
82        Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_TAB});
83        assertEqual('test2',$('ac_input').value);
84       
85        // check box going away
86        wait(500, function() { with(this) {
87          assertNotVisible('ac_update');
88         
89          // check selecting with mouse click
90          Event.simulateKeys('ac_input','3');
91          assertEqual('test23', $('ac_input').value);
92          wait(1000, function() { with(this) {
93            assertVisible('ac_update');
94            Event.simulateMouse($('ac_update').firstChild.childNodes[4],'click');
95                   
96            wait(1000, function() { with(this) {
97              // tests if removal of 'informal' nodes and HTML escaping works
98              assertEqual('(GET <ME> INSTEAD)',$('ac_input').value);
99              assertNotVisible('ac_update');
100             
101                // check cancelling with <ESC>
102                Event.simulateKeys('ac_input','abcdefg');
103               
104                wait(1000, function() { with(this) {
105                  assertVisible('ac_update');
106                  assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input').value);
107                 
108                  Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_DOWN});
109                  Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_ESC});
110
111                  assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input').value);
112                }});
113            }});
114          }});
115        }});
116      }});
117    }},
118   
119    testAfterUpdateElement: function() { with(this) {
120      var ac = new Ajax.Autocompleter('ac2_input','ac2_update','_autocomplete_result.html',
121        { method: 'get',
122          afterUpdateElement: function(element,selectedElement) { 
123            element.value = 'afterupdate:' + selectedElement.tagName; 
124          }
125         });
126      assertInstanceOf(Ajax.Autocompleter, ac);
127     
128      Event.simulateMouse('ac2_input', 'click');
129      Event.simulateKeys('ac2_input','abcdefg');
130     
131      wait(1000, function() { with(this) {
132        assertVisible('ac2_update');
133        Event.simulateKey('ac2_input','keypress',{keyCode:Event.KEY_TAB});
134       
135        assertEqual('afterupdate:LI',$('ac2_input').value);
136      }});
137    }},
138   
139    testTokenizing: function() { with(this) {
140      var actoken = new Ajax.Autocompleter('actoken_input','ac_update','_autocomplete_result.html',
141        { tokens:',', method: 'get' });
142      assertInstanceOf(Ajax.Autocompleter, actoken);
143     
144      Event.simulateKeys('actoken_input','abc');
145     
146      wait(1000, function() { with(this) {
147        Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_TAB});
148        assertEqual('test1',$('actoken_input').value);
149        Event.simulateKeys('actoken_input',',abc');
150        wait(1000, function() { with(this) {
151          Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_DOWN});
152          Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_TAB});
153          assertEqual('test1,test2',$('actoken_input').value);
154          // Simulating KEY_LEFT's prior to a 'b' doesn't work!  So slightly ugly here...
155          $('actoken_input').value = 'test1b,test2';
156          actoken.onObserverEvent(); 
157          wait(1000, function() { with(this) {
158            for (var index = 0; index < 2; ++index)
159              Event.simulateKey('actoken_input', 'keypress', {keyCode: Event.KEY_DOWN});
160            Event.simulateKey('actoken_input', 'keypress', {keyCode: Event.KEY_TAB});
161            assertEqual('test3,test2', $('actoken_input').value);
162          }});
163        }});
164      }});
165    }},
166   
167    // Same integration test, results has no linebreaks
168    testAjaxAutocompleterNoLinebreaksInResult: function() { with(this) {
169      var ac = new Ajax.Autocompleter('ac_input_br','ac_update_br','_autocomplete_result_nobr.html',
170        { method: 'get' }); //override so we can use a static for the result
171      assertInstanceOf(Ajax.Autocompleter, ac);
172
173      // box not visible
174      assertNotVisible('ac_update_br');
175
176      // focus, but box not visible
177      Event.simulateMouse('ac_input_br', 'click');
178      assertNotVisible('ac_update_br');
179
180      Event.simulateKeys('ac_input_br','abcdefg');
181      assertEqual('abcdefg', $('ac_input_br').value);
182
183      // check box popping up on input
184      wait(1000, function() { with(this) {
185        assertVisible('ac_update_br');
186        assertEqual('test1', $('ac_update_br').firstChild.firstChild.innerHTML);
187        assertEqual('test2', $('ac_update_br').firstChild.firstChild.nextSibling.innerHTML);
188
189        // intl. characters return (UTF-8)
190        assertEqual('Here we have some international ©∏Á®Äç†∑rß', $('ac_update_br').firstChild.lastChild.innerHTML);
191
192        // first entry should be selected
193        assert(Element.hasClassName($('ac_update_br').firstChild.firstChild, 'selected'),'Selected item should have a className of: selected');
194
195        Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_DOWN});
196
197        // second entry should be selected
198        assert(!Element.hasClassName($('ac_update_br').firstChild.firstChild),'Item shouldn\'t have a className of: selected');
199        assert(Element.hasClassName($('ac_update_br').firstChild.firstChild.nextSibling, 'selected'),'Second entry should have a className of: selected');
200
201        // check selecting with <TAB>
202        Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_TAB});
203        assertEqual('test2',$('ac_input_br').value);
204
205        // check box going away
206        wait(500, function() { with(this) {
207          assertNotVisible('ac_update_br');
208
209          // check selecting with mouse click
210          Event.simulateKeys('ac_input_br','3');
211          assertEqual('test23', $('ac_input_br').value);
212          wait(1000, function() { with(this) {
213            assertVisible('ac_update_br');
214            Event.simulateMouse($('ac_update_br').firstChild.childNodes[4],'click');
215
216            wait(1000, function() { with(this) {
217              // tests if removal of 'informal' nodes and HTML escaping works
218              assertEqual('(GET <ME> INSTEAD)',$('ac_input_br').value);
219              assertNotVisible('ac_update_br');
220
221                // check cancelling with <ESC>
222                Event.simulateKeys('ac_input_br','abcdefg');
223
224                wait(1000, function() { with(this) {
225                  assertVisible('ac_update_br');
226                  assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input_br').value);
227
228                  Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_DOWN});
229                  Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_ESC});
230
231                  assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input_br').value);
232                }});
233            }});
234          }});
235        }});
236      }});
237    }}
238
239  });
240// ]]>
241</script>
242</body>
243</html>
Note: See TracBrowser for help on using the browser.