CDK DragDrop Regression between 7.0.0-beta.2 and 7.0.0-rc.2: Protractor tests stopped working

[wilgert]

Bug, feature request, or proposal:

After upgrading @angular/cdk from 7.0.0-beta.2 to 7.0.0-rc.1 (issue still exists in rc.2) our Protractor e2e tests stopped working.

What is the expected behavior?

We can write an e2e test with protractor to verify Drag and Drop functionality.

What is the current behavior?

The e2e test works when running with 7.0.0-beta.2 but fails to drag and drop with 7.0.0-rc.2.

What are the steps to reproduce?

1. Clone this repo: https://github.com/wilgert/angular-cdk-drag-drop-protractor-issue
2. git checkout 7.0.0-beta.2
3. npm install
4. ./node_modules/.bin/webdriver-manager update
5. ng e2e
6. See that both e2e tests pass
7. git checkout 7.0.0-rc.2
8. npm install
9. ng e2e
10. See that now the second test fails because the card is not dragged and dropped.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

• Angular: 6.1.10
• Material/CDK: 7.0.0-beta.2 (works) and 7.0.0-rc.2 (does not work)
• TypeScript: 2.9.2
• Browser: Chrome 69.0.3497.100 (Official Build) (64-bit)

Is there anything else we should know?

Please note that dragging and dropping is working in both version when you just use the app manually.
We also tried running e2e tests using cypress in our own app. There we see the exact same behavior: it works with beta.2 but does not work with rc.2.

[crisbeto]

My guess is that it was caused by #13152. Depending on how the dragAndDrop action is implemented, it might not trigger a drag, because the sequence of events is different now.

[wilgert]

My guess is that it was caused by #13152. Depending on how the dragAndDrop action is implemented, it might not trigger a drag, because the sequence of events is different now.

Thanks for your quick response. Do you have any suggestion how we can change the e2e test so it works again?

[crisbeto]

I don't know how dragAndDrop is implemented, but if I had to guess, it probably dispatches a sequence of events like mousedown -> mousemove -> mouseup, whereas the CDK's drag sequence looks something like mousedown -> wait for the user to move at least X pixels -> mouseup. You should be able to work around it either by reimplementing the action yourself, or reducing the dragging threshold in your e2e app. Here's an example of how to remove the threshold from our unit tests.

[wilgert]

I don't know how dragAndDrop is implemented, but if I had to guess, it probably dispatches a sequence of events like mousedown -> mousemove -> mouseup, whereas the CDK's drag sequence looks something like mousedown -> wait for the user to move at least X pixels -> mouseup. You should be able to work around it either by reimplementing the action yourself, or reducing the dragging threshold in your e2e app. Here's an example of how to remove the threshold from our unit tests.

I tried reducing the treshold to 0, unfortunately it does not have any effect. I will look into implementing the dragAndDrop sequence myself.
Do you have any other suggestions?

[wilgert]

It works now!
We have implemented a custom dragAndDrop sequence that moves the mouse 10 px in the x direction after mouseDown and before moving to the destination. See: wilgert/angular-cdk-drag-drop-protractor-issue@2043535

[crisbeto]

Closing the issue since the CDK works as expected.

[wilgert]

Closing the issue since the CDK works as expected.
The fix also works in our real project.

Thanks for your help!

[dpsthree]

Any chance that closing this could be reconsidered? It seems odd to me that the CDK and protractor (both first party Angular tools) would be at odds with the definition of drag and drop.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}