123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!-- vim:expandtab=on
- -->
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title>script.aculo.us Unit test file</title>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <script src="../../lib/prototype.js" type="text/javascript"></script>
- <script src="../../src/scriptaculous.js" type="text/javascript"></script>
- <script src="../../src/unittest.js" type="text/javascript"></script>
- <link rel="stylesheet" href="../test.css" type="text/css" />
- <style>
- .selected { background-color: #888; }
- </style>
- </head>
- <body>
- <h1>script.aculo.us Unit test file</h1>
- <p>
- Tests for Ajax.Autocompleter in controls.js.
- </p>
- <!-- Log output -->
- <div id="testlog"> </div>
- <input id="ac_input" type="text" autocomplete="off" />
- <div id="ac_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
- <input id="ac_input_br" type="text" autocomplete="off" />
- <div id="ac_update_br" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
- <input id="ac2_input" type="text" autocomplete="off" />
- <div id="ac2_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
- <input id="actoken_input" type="text" autocomplete="off" />
- <div id="actoken_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
- <input id="dummy_element" type="text" autocomplete="off" />
- <!-- Tests follow -->
- <script type="text/javascript" language="javascript" charset="utf-8">
- // <![CDATA[
-
- new Test.Unit.Runner({
-
- // Integration test, tests the entire cycle
- testAjaxAutocompleter: function() { with(this) {
- var ac = new Ajax.Autocompleter('ac_input','ac_update','_autocomplete_result.html',
- { method: 'get' }); //override so we can use a static for the result
- assertInstanceOf(Ajax.Autocompleter, ac);
-
- // box not visible
- assertNotVisible('ac_update');
-
- // focus, but box not visible
- Event.simulateMouse('ac_input', 'click');
- assertNotVisible('ac_update');
-
- Event.simulateKeys('ac_input','abcdefg');
- assertEqual('abcdefg', $('ac_input').value);
-
- // check box popping up on input
- wait(1000, function() { with(this) {
- assertVisible('ac_update');
- assertEqual('test1', $('ac_update').firstChild.firstChild.innerHTML);
- assertEqual('test2', $('ac_update').firstChild.firstChild.nextSibling.innerHTML);
-
- // intl. characters return (UTF-8)
- assertEqual('Here we have some international ©∏Á®Äç†∑rß', $('ac_update').firstChild.lastChild.innerHTML);
-
- // first entry should be selected
- assert(Element.hasClassName($('ac_update').firstChild.firstChild, 'selected'),'Selected item should have a className of: selected');
-
- Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_DOWN});
-
- // second entry should be selected
- assert(!Element.hasClassName($('ac_update').firstChild.firstChild),'Item shouldn\'t have a className of: selected');
- assert(Element.hasClassName($('ac_update').firstChild.firstChild.nextSibling, 'selected'),'Second entry should have a className of: selected');
-
- // check selecting with <TAB>
- Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_TAB});
- assertEqual('test2',$('ac_input').value);
-
- // check box going away
- wait(500, function() { with(this) {
- assertNotVisible('ac_update');
-
- // check selecting with mouse click
- Event.simulateKeys('ac_input','3');
- assertEqual('test23', $('ac_input').value);
- wait(1000, function() { with(this) {
- assertVisible('ac_update');
- Event.simulateMouse($('ac_update').firstChild.childNodes[4],'click');
-
- wait(1000, function() { with(this) {
- // tests if removal of 'informal' nodes and HTML escaping works
- assertEqual('(GET <ME> INSTEAD)',$('ac_input').value);
- assertNotVisible('ac_update');
-
- // check cancelling with <ESC>
- Event.simulateKeys('ac_input','abcdefg');
-
- wait(1000, function() { with(this) {
- assertVisible('ac_update');
- assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input').value);
-
- Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_DOWN});
- Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_ESC});
- assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input').value);
- }});
- }});
- }});
- }});
- }});
- }},
-
- testAfterUpdateElement: function() { with(this) {
- var ac = new Ajax.Autocompleter('ac2_input','ac2_update','_autocomplete_result.html',
- { method: 'get',
- afterUpdateElement: function(element,selectedElement) {
- element.value = 'afterupdate:' + selectedElement.tagName;
- }
- });
- assertInstanceOf(Ajax.Autocompleter, ac);
-
- Event.simulateMouse('ac2_input', 'click');
- Event.simulateKeys('ac2_input','abcdefg');
-
- wait(1000, function() { with(this) {
- assertVisible('ac2_update');
- Event.simulateKey('ac2_input','keypress',{keyCode:Event.KEY_TAB});
-
- assertEqual('afterupdate:LI',$('ac2_input').value);
- }});
- }},
-
- testTokenizing: function() { with(this) {
- var actoken = new Ajax.Autocompleter('actoken_input','ac_update','_autocomplete_result.html',
- { tokens:',', method: 'get' });
- assertInstanceOf(Ajax.Autocompleter, actoken);
-
- Event.simulateKeys('actoken_input','abc');
-
- wait(1000, function() { with(this) {
- Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_TAB});
- assertEqual('test1',$('actoken_input').value);
- Event.simulateKeys('actoken_input',',abc');
- wait(1000, function() { with(this) {
- Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_DOWN});
- Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_TAB});
- assertEqual('test1,test2',$('actoken_input').value);
- // Simulating KEY_LEFT's prior to a 'b' doesn't work! So slightly ugly here...
- $('actoken_input').value = 'test1b,test2';
- actoken.onObserverEvent();
- wait(1000, function() { with(this) {
- for (var index = 0; index < 2; ++index)
- Event.simulateKey('actoken_input', 'keypress', {keyCode: Event.KEY_DOWN});
- Event.simulateKey('actoken_input', 'keypress', {keyCode: Event.KEY_TAB});
- assertEqual('test3,test2', $('actoken_input').value);
- }});
- }});
- }});
- }},
-
- // Same integration test, results has no linebreaks
- testAjaxAutocompleterNoLinebreaksInResult: function() { with(this) {
- var ac = new Ajax.Autocompleter('ac_input_br','ac_update_br','_autocomplete_result_nobr.html',
- { method: 'get' }); //override so we can use a static for the result
- assertInstanceOf(Ajax.Autocompleter, ac);
- // box not visible
- assertNotVisible('ac_update_br');
- // focus, but box not visible
- Event.simulateMouse('ac_input_br', 'click');
- assertNotVisible('ac_update_br');
- Event.simulateKeys('ac_input_br','abcdefg');
- assertEqual('abcdefg', $('ac_input_br').value);
- // check box popping up on input
- wait(1000, function() { with(this) {
- assertVisible('ac_update_br');
- assertEqual('test1', $('ac_update_br').firstChild.firstChild.innerHTML);
- assertEqual('test2', $('ac_update_br').firstChild.firstChild.nextSibling.innerHTML);
- // intl. characters return (UTF-8)
- assertEqual('Here we have some international ©∏Á®Äç†∑rß', $('ac_update_br').firstChild.lastChild.innerHTML);
- // first entry should be selected
- assert(Element.hasClassName($('ac_update_br').firstChild.firstChild, 'selected'),'Selected item should have a className of: selected');
- Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_DOWN});
- // second entry should be selected
- assert(!Element.hasClassName($('ac_update_br').firstChild.firstChild),'Item shouldn\'t have a className of: selected');
- assert(Element.hasClassName($('ac_update_br').firstChild.firstChild.nextSibling, 'selected'),'Second entry should have a className of: selected');
- // check selecting with <TAB>
- Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_TAB});
- assertEqual('test2',$('ac_input_br').value);
- // check box going away
- wait(500, function() { with(this) {
- assertNotVisible('ac_update_br');
- // check selecting with mouse click
- Event.simulateKeys('ac_input_br','3');
- assertEqual('test23', $('ac_input_br').value);
- wait(1000, function() { with(this) {
- assertVisible('ac_update_br');
- Event.simulateMouse($('ac_update_br').firstChild.childNodes[4],'click');
- wait(1000, function() { with(this) {
- // tests if removal of 'informal' nodes and HTML escaping works
- assertEqual('(GET <ME> INSTEAD)',$('ac_input_br').value);
- assertNotVisible('ac_update_br');
- // check cancelling with <ESC>
- Event.simulateKeys('ac_input_br','abcdefg');
- wait(1000, function() { with(this) {
- assertVisible('ac_update_br');
- assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input_br').value);
- Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_DOWN});
- Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_ESC});
- assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input_br').value);
- }});
- }});
- }});
- }});
- }});
- }}
- });
- // ]]>
- </script>
- </body>
- </html>
|