cy.trigger('mousedown', ...) doesn't fill in event.view property

[fr0]

Current behavior:

  cy.get('#thing').trigger('mousedown', 10, 10);

When the browser creates the MouseEvent object, it has a view property which points to the Window object.

Cypress does not add it during a trigger.

Apparently the d3-zoom library depends on this property being there. My app breaks when run via cypress but not when the user clicks.

Here is the property:
https://github.com/Microsoft/TypeScript/blob/master/lib/lib.dom.d.ts#L15454

Desired behavior:

During a trigger, fill in all of the same properties that the browser does when the user clicks.

Steps to reproduce: (app code and test code)

https://stackblitz.com/edit/typescript-eurovj?file=index.ts

  it('should click just like the user does', () => {
    cy.visit('https://typescript-eurovj.stackblitz.io');
    cy.get('#rect').trigger('mousedown', 5, 5);
    cy.get('#app').should('contain', 'got the view');
  });

Versions

Cypress 3.1.5

[OSInsight]

By the way, I find sth confused in cy.trigger()
https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/commands/actions/trigger.coffee#L9

event = new Event(eventName, options) // why not new MouseEvent or ?

This occurs Cypress can not test React re-resizable.
https://github.com/bokuweb/re-resizable/blob/master/src/index.tsx#L659

const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;

cc @jennifer-shehane Thanks.

---

ok, give a pr to re-resizable #439

---

ok, I have figured it out.

Attention:

1. Cypress MouseEvent !== Window.MouseEvent
2. window.addEventListener('mousemove', this.onMouseMove); in re-resizable

cy.wrap(mousedownDom).trigger('mousedown', { which: 1 });

cy.window()
  .then(win => {
    win.dispatchEvent(
      new win.MouseEvent('mousemove', {
        bubbles: true, // must
        clientX: deltaWidth,
        clientY: deltaHeight,
      })
    );
  })
  .trigger('mouseup', { which: 1 });