#217 new
Berin Loritsch

Make unit test event dispatching work with IE6 (patch included)

Reported by Berin Loritsch | July 7th, 2009 @ 03:55 PM

Below is an updated "Event.simulateMouse" function for the unittest.js file. I have tested this in Firefox 3.5, IE 6, and Safari 4 (PC). There are two key changes to make it work in multiple browsers:

  1. the mark.style.property assignments can't have ending semicolons for IE
  2. IE uses document.createEventObject() and $(element).fireEvent to send the events
// experimental
Event.simulateMouse = function(element, eventName) {
  var options = Object.extend({
    pointerX: 0,
    pointerY: 0,
    buttons:  0,
    ctrlKey:  false,
    altKey:   false,
    shiftKey: false,
    metaKey:  false
  }, arguments[2] || {});
  
  if (document.createEvent) {
      var oEvent = document.createEvent("MouseEvents");
      oEvent.initMouseEvent(eventName, true, true, document.defaultView, 
        options.buttons, options.pointerX, options.pointerY, options.pointerX, options.pointerY, 
        options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, 0, $(element));
  } else if (document.createEventObject) {
      var oEvent = document.createEventObject();
      oEvent.detail = 0;
      oEvent.screenX = options.pointerX;
      oEvent.screenY = options.pointerY;
      oEvent.clientX = options.pointerX;
      oEvent.clientY = options.pointerY;
      oEvent.ctrlKey = options.ctrlKey;
      oEvent.altKey = options.altKey;
      oEvent.shiftKey = options.shiftKey;
      oEvent.metaKey = options.metaKey;
      oEvent.button = options.buttons;
      oEvent.relatedTarget = $(element);
  }
  
  if(this.mark) Element.remove(this.mark);
  this.mark = document.createElement('div');
  this.mark.appendChild(document.createTextNode(" "));
  document.body.appendChild(this.mark);
  this.mark.style.position = 'absolute';
  this.mark.style.top = options.pointerY + "px";
  this.mark.style.left = options.pointerX + "px";
  this.mark.style.width = "5px";
  this.mark.style.height = "5px";
  this.mark.style.borderTop = "1px solid red";
  this.mark.style.borderLeft = "1px solid red";
  
  if(this.step)
    alert('['+new Date().getTime().toString()+'] '+eventName+'/'+Test.Unit.inspect(options));
  
  if (document.createEvent) {
      $(element).dispatchEvent(oEvent);
  } else if (document.createEventObject) {
      $(element).fireEvent('on' + eventName, oEvent);
  }
};

Comments and changes to this ticket

  • Berin Loritsch

    Berin Loritsch July 7th, 2009 @ 03:57 PM

    // experimental
    Event.simulateMouse = function(element, eventName) {
      var options = Object.extend({
        pointerX: 0,
        pointerY: 0,
        buttons:  0,
        ctrlKey:  false,
        altKey:   false,
        shiftKey: false,
        metaKey:  false
      }, arguments[2] || {});
      
      if (document.createEvent) {
          var oEvent = document.createEvent("MouseEvents");
          oEvent.initMouseEvent(eventName, true, true, document.defaultView, 
            options.buttons, options.pointerX, options.pointerY, options.pointerX, options.pointerY, 
            options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, 0, $(element));
      } else if (document.createEventObject) {
          var oEvent = document.createEventObject();
          oEvent.detail = 0;
          oEvent.screenX = options.pointerX;
          oEvent.screenY = options.pointerY;
          oEvent.clientX = options.pointerX;
          oEvent.clientY = options.pointerY;
          oEvent.ctrlKey = options.ctrlKey;
          oEvent.altKey = options.altKey;
          oEvent.shiftKey = options.shiftKey;
          oEvent.metaKey = options.metaKey;
          oEvent.button = options.buttons;
          oEvent.relatedTarget = $(element);
      }
      
      if(this.mark) Element.remove(this.mark);
      this.mark = document.createElement('div');
      this.mark.appendChild(document.createTextNode(" "));
      document.body.appendChild(this.mark);
      this.mark.style.position = 'absolute';
      this.mark.style.top = options.pointerY + "px";
      this.mark.style.left = options.pointerX + "px";
      this.mark.style.width = "5px";
      this.mark.style.height = "5px";
      this.mark.style.borderTop = "1px solid red";
      this.mark.style.borderLeft = "1px solid red";
      
      if(this.step)
        alert('['+new Date().getTime().toString()+'] '+eventName+'/'+Test.Unit.inspect(options));
      
      if (document.createEvent) {
          $(element).dispatchEvent(oEvent);
      } else if (document.createEventObject) {
          $(element).fireEvent('on' + eventName, oEvent);
      }
    };
    
  • Berin Loritsch
  • Radoslav Stankov

    Radoslav Stankov July 7th, 2009 @ 06:05 PM

    • Assigned user cleared.

    Actually there is already a similar ticket - https://prototype.lighthouseapp.com/projects/8886/tickets/697-event..., So Event.simulateMouse will be just Event.fire

    I'm 90% ready with it, and expect by Monday to submit a patch for it

    http://github.com/RStankov/javascript-playground/tree/4bffb2ef4a7b7...

    As a bonus I'm currently porting all Prototype's event functional tests with Event.fire.

  • Justin Meyer

    Justin Meyer August 31st, 2010 @ 05:25 PM

    • Assigned user set to “ronin-15560 (at lighthouseapp)”
    • Importance changed from “” to “”

    You guys might just punt and use Syn: http://jupiterjs.com/news/syn-a-standalone-synthetic-event-library

    It's library independent and being adopted by Mootools.

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket

Pages