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