Write end-to-end test for dragging components into slots

Overview

The codebase has an E2E spec named component-slots which was introduced to test dragging components into slots. E.g. dragging an Image component inside one of the columns of a Two Column component. To aid this, the realDnD() command was introduced (tests/src/Cypress/cypress/support/realDnd.js).

Making this test work reliably became increasingly difficult after 🐛 Make it easier to drag and drop content to the top or bottom of the page Active . We couldn't simply target the example content of a slot anymore, we needed to make sure that the slot is detected instead of a potential drop target adjacent to the component that provides the slot.

After trying to improve the realDnD command to support this, we decided that in favor of productivity, we disable running the end-to-end test. This is currently done by using describe.skip() in the E2E spec file.

Proposed resolution

1. Remove the use of describe.skip() in components-slots.cy.js#L1.
2. Come up with a solid way of dropping a component into a slot in an end-to-end test.

Approaches tried so far — adjustments to the realDnD command:

• Slowing down the movement of the mouse cursor;
• Supporting customizable segments of the movement with variable speed;
• Supporting intermediate stops with custom durations;

A successful strategy could be that we create components specifically for these tests where empty slots have oversized drop targets. Maybe that in combination with approaches already tried can work.