From f2e657fc42462d1c496cf1e2353de01de244557f Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongnv13@gmail.com>
Date: Thu, 15 Aug 2024 00:20:34 +0700
Subject: [PATCH] MDL-82798 qtype_ddmarker: Fix Behat failure

---
 .../tests/behat/behat_qtype_ddmarker.php      | 50 +++++++++++--------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/question/type/ddmarker/tests/behat/behat_qtype_ddmarker.php b/question/type/ddmarker/tests/behat/behat_qtype_ddmarker.php
index 71454a3a56f..2fbf3eadeb4 100644
--- a/question/type/ddmarker/tests/behat/behat_qtype_ddmarker.php
+++ b/question/type/ddmarker/tests/behat/behat_qtype_ddmarker.php
@@ -68,31 +68,37 @@ class behat_qtype_ddmarker extends behat_base {
         // DOM node so that its centre is over the centre of anothe DOM node.
         // Therefore to make it drag to the specified place, we have to add
         // a target div.
+        // We also need to scroll the marker into view so we can calculate the correct offsetHeight and offsetWidth.
         $markerxpath = $this->marker_xpath($marker);
         $this->execute_script("
                 (function() {
-                    if (document.getElementById('target-{$x}-{$y}')) {
-                        return;
-                    }
-                    var image = document.querySelector('.dropbackground');
-                    var target = document.createElement('div');
-                    target.setAttribute('id', 'target-{$x}-{$y}');
-                    var container = document.querySelector('.droparea');
-                    container.insertBefore(target, image);
-                    var widthRatio = image.offsetWidth / image.naturalWidth;
-                    var heightRatio = image.offsetHeight / image.naturalHeight;
-                    var marker = document.evaluate('{$markerxpath}', document, null, XPathResult.ANY_TYPE, null).iterateNext();
-                    var xadjusted = {$x} * widthRatio
-                                    + (container.offsetWidth - image.offsetWidth) / 2
-                                    + marker.offsetWidth / 2;
-                    var yadjusted = {$y} * heightRatio
-                                    + (container.offsetHeight - image.offsetHeight) / 2
-                                    + marker.offsetHeight / 2;
-                    target.style.setProperty('position', 'absolute');
-                    target.style.setProperty('left', xadjusted + 'px');
-                    target.style.setProperty('top', yadjusted + 'px');
-                    target.style.setProperty('width', '1px');
-                    target.style.setProperty('height', '1px');
+                    require(['core/pending'], function(Pending) {
+                        if (document.getElementById('target-{$x}-{$y}')) {
+                            return;
+                        }
+                        const pendingPromise = new Pending('qtype_ddmarker:drag-drop');
+                        const image = document.querySelector('.dropbackground');
+                        const target = document.createElement('div');
+                        target.setAttribute('id', 'target-{$x}-{$y}');
+                        const container = document.querySelector('.droparea');
+                        container.insertBefore(target, image);
+                        const widthRatio = image.offsetWidth / image.naturalWidth;
+                        const heightRatio = image.offsetHeight / image.naturalHeight;
+                        const marker = document.evaluate('{$markerxpath}', document, null, XPathResult.ANY_TYPE, null).iterateNext();
+                        marker.scrollIntoView();
+                        const xadjusted = {$x} * widthRatio
+                                        + (container.offsetWidth - image.offsetWidth) / 2
+                                        + marker.offsetWidth / 2;
+                        const yadjusted = {$y} * heightRatio
+                                        + (container.offsetHeight - image.offsetHeight) / 2
+                                        + marker.offsetHeight / 2;
+                        target.style.setProperty('position', 'absolute');
+                        target.style.setProperty('left', xadjusted + 'px');
+                        target.style.setProperty('top', yadjusted + 'px');
+                        target.style.setProperty('width', '1px');
+                        target.style.setProperty('height', '1px');
+                        pendingPromise.resolve();
+                    });
                 }())"
         );