ajax_autocompleter_test.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  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. <!-- Log output -->
  23. <div id="testlog"> </div>
  24. <input id="ac_input" type="text" autocomplete="off" />
  25. <div id="ac_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
  26. <input id="ac_input_br" type="text" autocomplete="off" />
  27. <div id="ac_update_br" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
  28. <input id="ac2_input" type="text" autocomplete="off" />
  29. <div id="ac2_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
  30. <input id="actoken_input" type="text" autocomplete="off" />
  31. <div id="actoken_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
  32. <input id="dummy_element" type="text" autocomplete="off" />
  33. <!-- Tests follow -->
  34. <script type="text/javascript" language="javascript" charset="utf-8">
  35. // <![CDATA[
  36. new Test.Unit.Runner({
  37. // Integration test, tests the entire cycle
  38. testAjaxAutocompleter: function() { with(this) {
  39. var ac = new Ajax.Autocompleter('ac_input','ac_update','_autocomplete_result.html',
  40. { method: 'get' }); //override so we can use a static for the result
  41. assertInstanceOf(Ajax.Autocompleter, ac);
  42. // box not visible
  43. assertNotVisible('ac_update');
  44. // focus, but box not visible
  45. Event.simulateMouse('ac_input', 'click');
  46. assertNotVisible('ac_update');
  47. Event.simulateKeys('ac_input','abcdefg');
  48. assertEqual('abcdefg', $('ac_input').value);
  49. // check box popping up on input
  50. wait(1000, function() { with(this) {
  51. assertVisible('ac_update');
  52. assertEqual('test1', $('ac_update').firstChild.firstChild.innerHTML);
  53. assertEqual('test2', $('ac_update').firstChild.firstChild.nextSibling.innerHTML);
  54. // intl. characters return (UTF-8)
  55. assertEqual('Here we have some international ©∏Á®Äç†∑rß', $('ac_update').firstChild.lastChild.innerHTML);
  56. // first entry should be selected
  57. assert(Element.hasClassName($('ac_update').firstChild.firstChild, 'selected'),'Selected item should have a className of: selected');
  58. Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_DOWN});
  59. // second entry should be selected
  60. assert(!Element.hasClassName($('ac_update').firstChild.firstChild),'Item shouldn\'t have a className of: selected');
  61. assert(Element.hasClassName($('ac_update').firstChild.firstChild.nextSibling, 'selected'),'Second entry should have a className of: selected');
  62. // check selecting with <TAB>
  63. Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_TAB});
  64. assertEqual('test2',$('ac_input').value);
  65. // check box going away
  66. wait(500, function() { with(this) {
  67. assertNotVisible('ac_update');
  68. // check selecting with mouse click
  69. Event.simulateKeys('ac_input','3');
  70. assertEqual('test23', $('ac_input').value);
  71. wait(1000, function() { with(this) {
  72. assertVisible('ac_update');
  73. Event.simulateMouse($('ac_update').firstChild.childNodes[4],'click');
  74. wait(1000, function() { with(this) {
  75. // tests if removal of 'informal' nodes and HTML escaping works
  76. assertEqual('(GET <ME> INSTEAD)',$('ac_input').value);
  77. assertNotVisible('ac_update');
  78. // check cancelling with <ESC>
  79. Event.simulateKeys('ac_input','abcdefg');
  80. wait(1000, function() { with(this) {
  81. assertVisible('ac_update');
  82. assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input').value);
  83. Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_DOWN});
  84. Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_ESC});
  85. assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input').value);
  86. }});
  87. }});
  88. }});
  89. }});
  90. }});
  91. }},
  92. testAfterUpdateElement: function() { with(this) {
  93. var ac = new Ajax.Autocompleter('ac2_input','ac2_update','_autocomplete_result.html',
  94. { method: 'get',
  95. afterUpdateElement: function(element,selectedElement) {
  96. element.value = 'afterupdate:' + selectedElement.tagName;
  97. }
  98. });
  99. assertInstanceOf(Ajax.Autocompleter, ac);
  100. Event.simulateMouse('ac2_input', 'click');
  101. Event.simulateKeys('ac2_input','abcdefg');
  102. wait(1000, function() { with(this) {
  103. assertVisible('ac2_update');
  104. Event.simulateKey('ac2_input','keypress',{keyCode:Event.KEY_TAB});
  105. assertEqual('afterupdate:LI',$('ac2_input').value);
  106. }});
  107. }},
  108. testTokenizing: function() { with(this) {
  109. var actoken = new Ajax.Autocompleter('actoken_input','ac_update','_autocomplete_result.html',
  110. { tokens:',', method: 'get' });
  111. assertInstanceOf(Ajax.Autocompleter, actoken);
  112. Event.simulateKeys('actoken_input','abc');
  113. wait(1000, function() { with(this) {
  114. Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_TAB});
  115. assertEqual('test1',$('actoken_input').value);
  116. Event.simulateKeys('actoken_input',',abc');
  117. wait(1000, function() { with(this) {
  118. Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_DOWN});
  119. Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_TAB});
  120. assertEqual('test1,test2',$('actoken_input').value);
  121. // Simulating KEY_LEFT's prior to a 'b' doesn't work! So slightly ugly here...
  122. $('actoken_input').value = 'test1b,test2';
  123. actoken.onObserverEvent();
  124. wait(1000, function() { with(this) {
  125. for (var index = 0; index < 2; ++index)
  126. Event.simulateKey('actoken_input', 'keypress', {keyCode: Event.KEY_DOWN});
  127. Event.simulateKey('actoken_input', 'keypress', {keyCode: Event.KEY_TAB});
  128. assertEqual('test3,test2', $('actoken_input').value);
  129. }});
  130. }});
  131. }});
  132. }},
  133. // Same integration test, results has no linebreaks
  134. testAjaxAutocompleterNoLinebreaksInResult: function() { with(this) {
  135. var ac = new Ajax.Autocompleter('ac_input_br','ac_update_br','_autocomplete_result_nobr.html',
  136. { method: 'get' }); //override so we can use a static for the result
  137. assertInstanceOf(Ajax.Autocompleter, ac);
  138. // box not visible
  139. assertNotVisible('ac_update_br');
  140. // focus, but box not visible
  141. Event.simulateMouse('ac_input_br', 'click');
  142. assertNotVisible('ac_update_br');
  143. Event.simulateKeys('ac_input_br','abcdefg');
  144. assertEqual('abcdefg', $('ac_input_br').value);
  145. // check box popping up on input
  146. wait(1000, function() { with(this) {
  147. assertVisible('ac_update_br');
  148. assertEqual('test1', $('ac_update_br').firstChild.firstChild.innerHTML);
  149. assertEqual('test2', $('ac_update_br').firstChild.firstChild.nextSibling.innerHTML);
  150. // intl. characters return (UTF-8)
  151. assertEqual('Here we have some international ©∏Á®Äç†∑rß', $('ac_update_br').firstChild.lastChild.innerHTML);
  152. // first entry should be selected
  153. assert(Element.hasClassName($('ac_update_br').firstChild.firstChild, 'selected'),'Selected item should have a className of: selected');
  154. Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_DOWN});
  155. // second entry should be selected
  156. assert(!Element.hasClassName($('ac_update_br').firstChild.firstChild),'Item shouldn\'t have a className of: selected');
  157. assert(Element.hasClassName($('ac_update_br').firstChild.firstChild.nextSibling, 'selected'),'Second entry should have a className of: selected');
  158. // check selecting with <TAB>
  159. Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_TAB});
  160. assertEqual('test2',$('ac_input_br').value);
  161. // check box going away
  162. wait(500, function() { with(this) {
  163. assertNotVisible('ac_update_br');
  164. // check selecting with mouse click
  165. Event.simulateKeys('ac_input_br','3');
  166. assertEqual('test23', $('ac_input_br').value);
  167. wait(1000, function() { with(this) {
  168. assertVisible('ac_update_br');
  169. Event.simulateMouse($('ac_update_br').firstChild.childNodes[4],'click');
  170. wait(1000, function() { with(this) {
  171. // tests if removal of 'informal' nodes and HTML escaping works
  172. assertEqual('(GET <ME> INSTEAD)',$('ac_input_br').value);
  173. assertNotVisible('ac_update_br');
  174. // check cancelling with <ESC>
  175. Event.simulateKeys('ac_input_br','abcdefg');
  176. wait(1000, function() { with(this) {
  177. assertVisible('ac_update_br');
  178. assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input_br').value);
  179. Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_DOWN});
  180. Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_ESC});
  181. assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input_br').value);
  182. }});
  183. }});
  184. }});
  185. }});
  186. }});
  187. }}
  188. });
  189. // ]]>
  190. </script>
  191. </body>
  192. </html>