As you could see in previous posts I'm working on a large application for Intracto where they want a lot of fancy visuals and this turned into a mess when it came to write behat tests. This post will help you test position moving with drag and drop.

Our case

The moving with drag and drop gets pretty complex to make this with behat and do this in a rock solid way. But the one thing we do have in our control is the api call that actually gets executed when you do a drag and drop. I know we're skipping the actually user action but the idea here is to 'fake' the moving and create the experience by calling the api.

This context feature is based on a post written by Joeri Verdeyen which you can see here

STEP 1: Create a custom context extending or including feature context writen by Joeri V

More info can be found https://www.jverdeyen.be/php/behat-file-downloads/

STEP 2: Create your custom action

/** * Move page from position via curl call. * * @When /^I move page "(?P<page>(?:[^"]|\\")*)" to position "(?P<position>(?:[^"]|\\")*)" in chapter "(?P<chapter>(?:[^"]|\\")*)"$/ */ public function movePagePosition($page, $position, $chapter) { // 1. Call the move url with the right data $url = sprintf('/api/page/%s/move', $page); $client = $this->getClient(); $request = $client->put($url, [], [ 'position' => $position, 'chapter' => $chapter, ]); // 2. Send the request $this->response = $request->send(); // 3. Validate the success of the request $this->iShouldSeeResponseStatusCode(204); // 4. Refresh your browser since you want to view your move $this->minkContext->getSession()->reload(); }

In our case the page could also be moved from one chapter to another. So we can pass a new chapter id if we want to do that, or keep the old chapter id.

STEP 3: Call the move

When I move page "xxx" to position "4" in chapter "yyy"

STEP 4: Benefit