ajax_inplaceeditor_test.html

scriptaculous是ajax的一个框架

      assertEqual(3, text.nodeType, 'Missing/misplaced middle text');
      assertEqual(' ', text.nodeValue, 'Incorrect text');
      ipe.dispose();
      // Texts: before w/ no control
      ipe = new Ajax.InPlaceEditor('newtbe', '', { textBeforeControls: '[', okControl: false, cancelControl: false });
      Event.simulateMouse('newtbe', 'click');
      var nodes = $('newtbe-inplaceeditor').childNodes;
      assertEqual(1, nodes.length, 'Too many nodes in the form.');
      ipe.dispose();
      // Texts: after w/ no control
      ipe = new Ajax.InPlaceEditor('newtbe', '', { textAfterControls: ']', okControl: false, cancelControl: false });
      Event.simulateMouse('newtbe', 'click');
      var nodes = $('newtbe-inplaceeditor').childNodes;
      assertEqual(1, nodes.length, 'Too many nodes in the form.');
      ipe.dispose();
      // Texts: between w/ less than two controls
      ipe = new Ajax.InPlaceEditor('newtbe', '', { textBetweenControls: ' ', okControl: false });
      Event.simulateMouse('newtbe', 'click');
      var nodes = $('newtbe-inplaceeditor').childNodes;
      assertEqual(2, nodes.length, 'The form should have only two nodes (edit+cancel)');
      assertEnumEqual(['input', 'a'], $A(nodes).pluck('tagName').invoke('toLowerCase'), 'Incorrect nodes');
      ipe.dispose();
    }},

    testExternalControlOnly: function() {with(this) {
      var ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
        externalControl: 'newtbe_external'
      });
      Event.simulateMouse('newtbe', 'click');
      assert(ipe._editing, 'Clicking on the element should turn editable.');
      ipe.leaveEditMode();
      Event.simulateMouse('newtbe_external', 'click');
      assert(ipe._editing, 'Clicking on the external control should turn editable.');
      ipe.dispose();
      ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
        externalControl: 'newtbe_external', externalControlOnly: true
      });
      Event.simulateMouse('newtbe', 'click');
      assert(!ipe._editing, 'Clicking on the element should not turn editable.');
      Event.simulateMouse('newtbe_external', 'click');
      assert(ipe._editing, 'Clicking on the external control should turn editable.');
      ipe.dispose();
    }},

    testNewCallbacks: function() {with(this) {
      var called = [];
      var opts = {
        onEnterHover: function() { called.push('onEnterHover') },
        onEnterEditMode: function() { called.push('onEnterEditMode') },
        onLeaveEditMode: function() { called.push('onLeaveEditMode') },
        callback: function(form) {
          called.push('callback');
          return form.serialize();
        },
        onFailure: function() { called.push('onFailure') },
        onComplete: function() { called.push('onComplete') },
        onLeaveEditMode: function() { called.push('onLeaveEditMode') }
      }
      // Proper success
      $('newtbe').update('New to be edited');
      var ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', opts);
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
      var postUpdateHTML;
      wait(1000, function() {
        assertEnumEqual(['onEnterHover', 'onEnterEditMode', 'callback', 'onLeaveEditMode', 'onComplete'],
          called.uniq(), 'Incorrect callback sequence');
        postUpdateHTML = $('newtbe').innerHTML.strip();
        assertEqual('New to be edited - edited', postUpdateHTML, 'Update trouble');
        ipe.dispose();
        // Failure
        called.clear();
        // Any ideas?  Requesting file:// URLs on non-existent stuff doesn't trigger A.U's onFailure...
      });
    }},

    testCallbackFunctionReturnTypes: function() { with(this) {
      var params = [];
      var responder = {
        onCreate: function(req) {
          params.push(req.options.parameters);
        }
      };
      Ajax.Responders.register(responder);
      var ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
        callback: function(form) {
          return 'foo=bar';
        }
      });
      Event.simulateMouse('newtbe', 'click');
      Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
      wait(200, function() {
        assert(params[0] && params[0].foo == 'bar');
        ipe.dispose();
        ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
          callback: function(form) {
            return { bar: '?', 'r&d': 42 };
          }
        });
        Event.simulateMouse('newtbe', 'click');
        Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
        wait(200, function() {
          assert(params[1] && params[1].bar == '?' && params[1]['r&d'] == 42);
          ipe.dispose();
          Ajax.Responders.unregister(responder);
        })
      });
    }},

    testHtmlResponse: function() {with(this) {
      // Default (true) -> A.U w/ evalScripts: true
      $('newtbe').update('New to be edited');
      var 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 });
      var postUpdateHTML;
      wait(1000, function() {
        postUpdateHTML = $('newtbe').innerHTML.strip();
        assertEqual('New to be edited - edited', postUpdateHTML, 'Should have updated contents');
        ipe.dispose();
        // Explicit htmlResponse: true -> A.U w/ evalScripts: true
        $('newtbe').update('New to be edited');
        ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', { htmlResponse: true });
        Event.simulateMouse('newtbe', 'mouseover');
        Event.simulateMouse('newtbe', 'click');
        Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
        wait(1000, function() {
          postUpdateHTML = $('newtbe').innerHTML.strip();
          assertEqual('New to be edited - edited', postUpdateHTML, 'Should have updated contents');
          ipe.dispose();
          // Explicit htmlResponse: false -> A.R
          $('newtbe').update('New to be edited');
          ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', { htmlResponse: false });
          Event.simulateMouse('newtbe', 'mouseover');
          Event.simulateMouse('newtbe', 'click');
          Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
          wait(1000, function() {
            postUpdateHTML = $('newtbe').innerHTML.strip();
            assertEqual(ipe.options.savingText, postUpdateHTML, 'Should not have updated contents');
            ipe.dispose();
          });
        });
      });
    }},

    testSingleOrMultipleRows: function() {with(this) {
      // Single-line value, rows <= 1 -> 1
      $('newtbe').update('New to be edited');
      var ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html');
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      assertEqual('input', ipe._controls.editor.tagName.toLowerCase());
      ipe.dispose();
      // Single-line value, rows > 1 (2) -> 2
      var ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { rows: 2 });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
      assertEqual(2, ipe._controls.editor.rows);
      ipe.dispose();
      // Multiple-line value, rows <= 1, autoRows default (3) -> 3
      $('newtbe').update('Line 1\nLine 2\nLine 3');
      var ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html');
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
      assertEqual(Ajax.InPlaceEditor.DefaultOptions.autoRows, ipe._controls.editor.rows);
      ipe.dispose();
      // Multiple-line value, rows <= 1, autoRows custom (5) -> 5
      var ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { autoRows: 5 });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
      assertEqual(5, ipe._controls.editor.rows);
      ipe.dispose();
      // Multiple-line value, rows > 1 (2), autoRows default (3) -> 2
      var ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { rows: 2 });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
      assertEqual(2, ipe._controls.editor.rows);
      ipe.dispose();
      // Multiple-line value, rows > 1 (2), autoRows custom (5) -> 2
      var ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { rows: 2, autoRows: 5 });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
      assertEqual(2, ipe._controls.editor.rows);
      ipe.dispose();
    }},

    testFormCustomizationCallback: function() {with(this) {
      var ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
        onFormCustomization: function(ipe, form) {
          form.appendChild(new Element('input', { type: 'text', name: 'test', value: 'foobar' }));
        }
      });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      assertEqual('foobar', Form.serialize(ipe._form, true).test, 'Custom field not present');
      ipe.dispose();
    }},

    testPostCreationBehavior: function() {with(this) {
      var focused = false, activated = false;
      function override(name, fx) {
        arguments.callee.backups[name] = Field.Methods[name];
        Field.Methods[name] = fx;
      };
      override.backups = {};
      function restore() {
        $A(arguments).each(function(n) {
          Field.Methods[name] = override.backups[name];
        });
        Element.addMethods();
      };
      override('activate', function(elt) {
        override.backups['activate'](elt);
        activated = true;
      });
      override('focus', function(elt) { focused = true; });
      Element.addMethods();
      // fieldPostCreation default (activate)
      var ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html');
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      assert(focused && activated, "Should be focused and activated (resp. " + focused + " and " + activated + ')');
      ipe.dispose();
      // fieldPostCreation == 'focus'
      focused = activated = false;
      ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { fieldPostCreation: 'focus' });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      assert(focused && !activated, "Should be focused, not activated (resp. " + focused + " and " + activated + ')');
      ipe.dispose();
      // fieldPostCreation == false
      focused = activated = false;
      ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { fieldPostCreation: false });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      assert(!focused && !activated, "Should be neither focused nor activated (resp. " + focused + " and " + activated + ')');
      ipe.dispose();
      // fieldPostCreation == non-false yet neither activate nor focus -> default
      focused = activated = false;
      ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html', { fieldPostCreation: 'foobar' });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      assert(focused && activated, "Should be focused and activated (resp. " + focused + " and " + activated + ')');
      ipe.dispose();
      restore('activate', 'focus');
    }},

    testResponseTagStripping: function() {with(this) {
      // stripLoadedTextTags default (false)
      var ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html',
        { loadTextURL: '_ajax_inplaceeditor_tagged.html' });
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      wait(1000, function() {
        assertEqual('<span>New to be edited - edited</span>', ipe._controls.editor.value.strip());
        ipe.dispose();
        // stripLoadedTextTags == true
        ipe = new Ajax.InPlaceEditor('newtbe',
          '_ajax_inplaceeditor_result2.html',
          { loadTextURL: '_ajax_inplaceeditor_tagged.html',
            stripLoadedTextTags: true });
        Event.simulateMouse('newtbe', 'mouseover');
        Event.simulateMouse('newtbe', 'click');
        wait(1000, function() {
          assertEqual('New to be edited - edited', ipe._controls.editor.value.strip());
          ipe.dispose();
        });
      });
    }},

    testSubmitOnBlur: function() {with(this) {
      // submitOnBlur default (false)
      $('newtbe').update('To be edited');
      var ipe = new Ajax.InPlaceEditor('newtbe',
        '_ajax_inplaceeditor_result2.html');
      Event.simulateMouse('newtbe', 'mouseover');
      Event.simulateMouse('newtbe', 'click');
      ipe._controls.editor.blur();
      wait(1000, function() {
        assertEqual('To be edited', ipe._controls.editor ?  ipe._controls.editor.value : '');
        ipe.dispose();