ajax_inplaceeditor_test.html

scriptaculous是ajax的一个框架

        // submitOnBlur == true
        ipe = new Ajax.InPlaceEditor('newtbe',
          '_ajax_inplaceeditor_result2.html', { submitOnBlur: true });
        Event.simulateMouse('newtbe', 'mouseover');
        Event.simulateMouse('newtbe', 'click');
        ipe._controls.editor.blur();
        wait(1200, function() {
          assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
          ipe.dispose();
        });
      });
    }},

    testEscReturnKeys: function() {with(this) {
      // No controls, Esc
      var ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { okControl: false, cancelControl: false});
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_ESC });
      assert(!ipe._editing, 'Esc should have disabled IPE');
      ipe.dispose();
      // Cancel control, Esc
      var ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { okControl: false });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_ESC });
      assert(!ipe._editing, 'Esc should have disabled IPE');
      ipe.dispose();
      // OK control, Esc
      var ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { cancelControl: false });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_ESC });
      assert(!ipe._editing, 'Esc should have disabled IPE');
      ipe.dispose();
      // Both controls, Esc
      ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html');
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_ESC });
      assert(!ipe._editing, 'Esc should have disabled IPE');
      ipe.dispose();
      // No controls, Return
      $('newtbe').update('New to be edited');
      ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { okControl: false, cancelControl: false });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
      wait(1000, function() {
        assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
        ipe.dispose();
        // Cancel control, Return
        $('newtbe').update('New to be edited');
        ipe = new Ajax.InPlaceEditor('newtbe',
          '_ajax_inplaceeditor_result2.html', { okControl: false });
        Event.simulateMouse('newtbe', 'mouseover');
        Event.simulateMouse('newtbe', 'click');
        Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
        wait(1000, function() {
          assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
          ipe.dispose();
          // OK control, Return
          $('newtbe').update('New to be edited');
          ipe = new Ajax.InPlaceEditor('newtbe',
            '_ajax_inplaceeditor_result2.html', { cancelControl: false });
          Event.simulateMouse('newtbe', 'mouseover');
          Event.simulateMouse('newtbe', 'click');
          Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
          wait(1000, function() {
            assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
            ipe.dispose();
            // Both controls, Return
            $('newtbe').update('New to be edited');
            ipe = new Ajax.InPlaceEditor('newtbe',
              '_ajax_inplaceeditor_result2.html');
            Event.simulateMouse('newtbe', 'mouseover');
            Event.simulateMouse('newtbe', 'click');
            Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
            wait(1000, function() {
              assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
              ipe.dispose();
            });
          });
        });
      });
    }},

    testIPCEBasic: function() {with(this) {
      // Basic creation, population and choice.
      $('newtbe').update('ntbe');
      var fieldValue = '';
      var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { paramName: 'test',
        collection: IPCE_COLLECTION, callback: function(f, value) {
          fieldValue = value;
        }, onComplete: Prototype.emptyFunction
      });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      var editor = ipe._controls.editor;
      assertEqual('test', editor.name);
      assertEqual('select', editor.tagName.toLowerCase());
      assertEqual(IPCE_COLLECTION.length, editor.options.length, 'Incorrect amount of options');
      for (var index = 0; index < IPCE_COLLECTION.length; ++index) {
        var ref = IPCE_COLLECTION[index];
        var item = editor.options[index];
        assertEqual(ref[0], item.value, 'Incorrect OPTION value');
        assertEqual(ref[1], item.text.strip(), 'Incorrect OPTION text');
      };
      assertEqual(1, editor.selectedIndex, 'Did not properly select item');
      editor.selectedIndex = 2;
      Event.simulateMouse(ipe._controls.ok, 'click');
      assertEqual('ntbe2', fieldValue);
      ipe.dispose();
      // Test the value option
      $('newtbe').update('ntbe');
      ipe = new Ajax.InPlaceCollectionEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { paramName: 'test',
        collection: IPCE_COLLECTION, onComplete: Prototype.emptyFunction,
        value: 'ntbe2'
      });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      editor = ipe._controls.editor;
      assertEqual(2, editor.selectedIndex, 'Did not properly select item');
      ipe.dispose();
    }},

    testIPCECollectionSyntaxes: function() {with(this) {
      // Array of two-item arrays (0 = value, 1 = text)
      $('newtbe').update('ntbe');
      var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { paramName: 'test',
        collection: IPCE_COLLECTION, onComplete: Prototype.emptyFunction
      });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      var editor = ipe._controls.editor;
      assertEqual(1, editor.selectedIndex, 'Did not properly select item');
      // (further contents testing already done in Basic)
      ipe.dispose();
      // Array of one-item arrays
      ipe = new Ajax.InPlaceCollectionEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { paramName: 'test',
        collection: [['tbe'], ['ntbe'], ['ntbe2'], ['ntbe3']],
        onComplete: Prototype.emptyFunction
      });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      var editor = ipe._controls.editor;
      assertEqual(1, editor.selectedIndex, 'Did not properly select item');
      assertEqual('ntbe', $F(editor).strip(), 'Did not properly define text');
      ipe.dispose();
      // Array of items
      ipe = new Ajax.InPlaceCollectionEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { paramName: 'test',
        collection: ['tbe', 'ntbe', 'ntbe2', 'ntbe3'],
        onComplete: Prototype.emptyFunction
      });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      var editor = ipe._controls.editor;
      assertEqual(1, editor.selectedIndex, 'Did not properly select item');
      assertEqual('ntbe', $F(editor).strip(), 'Did not properly define text');
      ipe.dispose();
    }},

    testIPCEAlternateTextOptions: function() {with(this) {
      // loadTextURL (check loading text, verify alternate text eventually)
      $('newtbe').update('New to be edited');
      var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { paramName: 'test',
        collection: IPCE_COLLECTION, loadTextURL: '_ajax_inplaceeditor_ipce_alt_text.html',
        onComplete: Prototype.emptyFunction
      });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      var editor = ipe._controls.editor;
      var text = editor.options[editor.selectedIndex].text.strip();
      assertEqual(Ajax.InPlaceEditor.DefaultOptions.loadingText, text);
      wait(1200, function() {
        assertEqual(1, editor.selectedIndex, 'Did not properly select item based on alternate text.');
        ipe.dispose();
      });
    }},

    testIPCEDynamicCollectionOptions: function() {with(this) {
      // loadCollectionURL, default loadingCollectionText
      $('newtbe').update('ntbe');
      var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { paramName: 'test',
        loadCollectionURL: '_ajax_inplaceeditor_ipce_collection.js',
        onComplete: Prototype.emptyFunction
      });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      var editor = ipe._controls.editor;
      var text = editor.options[editor.selectedIndex].text.strip();
      assertEqual(Ajax.InPlaceCollectionEditor.DefaultOptions.loadingCollectionText, text);
      wait(1000, function() {
        assertEqual(5, ipe._collection.length);
        assertEqual(2, editor.selectedIndex, 'Did not properly select item');
        ipe.dispose();
        // loadCollectionURL, custom loadingCollectionText
        $('newtbe').update('bar');
        ipe = new Ajax.InPlaceCollectionEditor('newtbe',
          '_ajax_inplaceeditor_result2.html', { paramName: 'test',
          loadCollectionURL: '_ajax_inplaceeditor_ipce_collection.js',
          loadingCollectionText: 'There we go...',
          onComplete: Prototype.emptyFunction
        });
        Event.simulateMouse('newtbe', 'mouseover');
        Event.simulateMouse('newtbe', 'click');
        editor = ipe._controls.editor;
        text = editor.options[editor.selectedIndex].text.strip();
        assertEqual('There we go...', text);
        wait(1000, function() {
          assertEqual(1, editor.selectedIndex, 'Did not properly select item');
          ipe.dispose();
        });
      });
    }},

    testIPCEATPlusDC: function() {with(this) {
      // loadCollectionURL, loadTextURL
      $('newtbe').update('Like I care');
      var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { paramName: 'test',
        loadCollectionURL: '_ajax_inplaceeditor_ipce_collection.js',
        loadingCollectionText: 'There we go...',
        loadTextURL: '_ajax_inplaceeditor_ipce_alt_text.html',
        loadingText: 'OK, so, the text...',
        onComplete: Prototype.emptyFunction
      });
      ipe._regularCFET = ipe.checkForExternalText;
      ipe.checkForExternalText = function() {
        assert(5, ipe._collection.length);
        ipe._regularCFET();
        var editor = ipe._controls.editor;
        var text = editor.options[editor.selectedIndex].text.strip();
        assertEqual('OK, so, the text...', text);
      };
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      var editor = ipe._controls.editor;
      var text = editor.options[editor.selectedIndex].text.strip();
      assertEqual('There we go...', text);
      wait(2000, function() {
        assertEqual(2, editor.selectedIndex, 'Did not properly select item');
        ipe.dispose();
      });
    }},

    testDeprecationLayer: function() {with(this) {
      // FIXME: needs to be coded yet, doesn't it?
      var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { paramName: 'test',
        okButton: false, cancelLink: false
      });
      assertIdentical(false, ipe.options.okControl, 'OK control should be disabled');
      assertIdentical(false, ipe.options.cancelControl, 'Cancel control should be disabled');
      ipe.dispose();
      ipe = new Ajax.InPlaceCollectionEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { paramName: 'test',
        okLink: true, cancelButton: true
      });
      assertEqual('link', ipe.options.okControl, 'OK control should be a link');
      assertEqual('button', ipe.options.cancelControl, 'Cancel control should be a button');
      ipe.dispose();
      ipe = new Ajax.InPlaceCollectionEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { paramName: 'test',
        highlightcolor: '#ff0000', highlightendcolor: '#00ff00'
      });
      assertEqual('#ff0000', ipe.options.highlightColor, 'Highlight color was not migrated');
      assertEqual('#00ff00', ipe.options.highlightEndColor, 'Highlight end color was not migrated');
      ipe.dispose();
    }},


    testShouldShowAmpersandsProperly: function() {with(this) {
      var ipe = new Ajax.InPlaceEditor('contains_ampersand', '', {});
      Event.simulateMouse('contains_ampersand', 'click');
      assertEqual("Me & Myself", $$('form#contains_ampersand-inplaceeditor input.editor_field')[0].value);
      ipe.dispose();
    }}
    // FIXME: add AC w/o key conflicts?
    // FIXME: doc w/ full details on what's new, what's changed, etc. + deprecation layer info.
  });
// ]]>
</script>
</body>
</html>