fix IE11 contains usage (closes DevExpress#4709)

AlexKamaev · Mar 2, 2020 · 88c3c92 · 88c3c92
1 parent 5b4979d
commit 88c3c92
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 1 deletion.
diff --git a/src/client/automation/playback/visible-element-automation.js b/src/client/automation/playback/visible-element-automation.js
@@ -76,7 +76,7 @@ export default class VisibleElementAutomation extends serviceUtils.EventEmitter
             })
             .then(getElementUnderCursor)
             .then(currentElement => {
-                const elementUnderCursorContainsTarget = !!currentElement && this.element.contains(currentElement);
+                const elementUnderCursorContainsTarget = !!currentElement && domUtils.contains(this.element, currentElement);
 
                 if (!elementUnderCursorContainsTarget || !wasScrolled)
                     return null;

diff --git a/src/client/core/utils/dom.js b/src/client/core/utils/dom.js
@@ -503,3 +503,13 @@ export function setElementValue (element, value) {
 export function isShadowElement (element) {
     return element && element.getRootNode && findDocument(element) !== element.getRootNode();
 }
+
+export function contains (element, target) {
+    if (!element || !target)
+        return false;
+
+    if (element.contains)
+        return element.contains(target);
+
+    return !!findParent(target, true, node => node === element);
+}
diff --git a/test/client/fixtures/automation/click-test.js b/test/client/fixtures/automation/click-test.js
@@ -754,6 +754,39 @@ $(document).ready(function () {
 
     module('regression');
 
+    asyncTest('GH-4709 - Fails to click on svg element', function () {
+        const div   = document.createElement('div');
+        let clicked = false;
+
+        div.innerHTML        = '<svg><circle cx=\'50\' cy=\'50\' r=\'40\' stroke=\'black\' stroke-width=\'3\' fill=\'red\'></circle></svg>';
+        div.className        = TEST_ELEMENT_CLASS;
+        div.style.paddingTop = '200px';
+
+        const svg = div.childNodes[0];
+
+        svg.style.width  = '80px';
+        svg.style.height = '80px';
+
+        document.body.appendChild(div);
+
+        svg.addEventListener('click', function () {
+            clicked = true;
+        });
+
+        const click = new ClickAutomation(svg, { offsetX: 40, offsetY: 40, speed: 1 });
+
+        // NOTE: we need to execute the `run` method twice to satisfy required conditions in code
+        click
+            .run()
+            .then(function () {
+                return click.run();
+            })
+            .then(function () {
+                equal(clicked, true);
+                startNext();
+            });
+    });
+
     asyncTest('Q558721 - Test running hangs if element is hidden in non-scrollable container', function () {
         let clickRaised = false;
 

diff --git a/test/client/fixtures/core/dom-utils-test.js b/test/client/fixtures/core/dom-utils-test.js
@@ -1,5 +1,7 @@
 const hammerhead    = window.getTestCafeModule('hammerhead');
 const browserUtils  = hammerhead.utils.browser;
+const testCafeCore  = window.getTestCafeModule('testCafeCore');
+const domUtils      = testCafeCore.get('./utils/dom');
 
 asyncTest('isIFrameWindowInDOM', function () {
     expect(browserUtils.isIE ? 2 : 1);
@@ -45,3 +47,40 @@ asyncTest('isIFrameWindowInDOM', function () {
 
     document.body.appendChild(iframe);
 });
+
+test('contains', function () {
+    const div1 = document.createElement('div');
+    const div2 = document.createElement('div');
+    const div3 = document.createElement('div');
+
+    document.body.appendChild(div1);
+    document.body.appendChild(div2);
+
+    div1.appendChild(div3);
+
+    div3.innerHTML = '<svg><circle></circle></svg>';
+
+    const svg = div3.childNodes[0];
+    const circle = svg.childNodes[0];
+
+    ok(domUtils.contains(document.body, div1));
+    ok(domUtils.contains(document.body, div2));
+    ok(domUtils.contains(document.body, div3));
+    ok(domUtils.contains(document.body, svg));
+    ok(domUtils.contains(document.body, circle));
+    ok(domUtils.contains(div1, div1));
+    ok(domUtils.contains(div1, div3));
+    ok(domUtils.contains(div1, svg));
+    ok(domUtils.contains(div1, circle));
+    ok(domUtils.contains(div3, svg));
+    ok(domUtils.contains(div3, circle));
+    ok(domUtils.contains(svg, circle));
+
+    notOk(domUtils.contains(div1, div2));
+    notOk(domUtils.contains(div2, svg));
+    notOk(domUtils.contains(svg, div2));
+    notOk(domUtils.contains(div2, circle));
+
+    document.body.removeChild(div1);
+    document.body.removeChild(div2);
+});