Fixed extra distance in scroll automation (closes DevExpress#987) (De…

…vExpress#988) * Fixed extra distance in scroll automation (closes DevExpress#987) * Test names fixed
kirovboris · Dec 18, 2019 · 58d01ce · 58d01ce
1 parent 7469962
commit 58d01ce
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 6 deletions.
diff --git a/src/client/automation/playback/scroll.js b/src/client/automation/playback/scroll.js
@@ -77,30 +77,36 @@ export default class ScrollAutomation {
         var fullViewScrollLeft = null;
         var fullViewScrollTop  = null;
 
-        var canShowFullElementWidth  = parentDimensions.width >= childDimensions.width + MAX_SCROLL_MARGIN;
-        var canShowFullElementHeight = parentDimensions.height >= childDimensions.height + MAX_SCROLL_MARGIN;
+        var canShowFullElementWidth  = parentDimensions.width >= childDimensions.width;
+        var canShowFullElementHeight = parentDimensions.height >= childDimensions.height;
 
         var relativePosition = positionUtils.calcRelativePosition(childDimensions, parentDimensions);
 
         if (canShowFullElementWidth) {
+            var maxLeftScrollMargin = Math.min(MAX_SCROLL_MARGIN, Math.floor(parentDimensions.width -
+                                                                             childDimensions.width));
+
             if (relativePosition.left < 0) {
                 fullViewScrollLeft = Math.round(parentDimensions.scroll.left + relativePosition.left -
-                                                MAX_SCROLL_MARGIN);
+                                                maxLeftScrollMargin);
             }
             else if (relativePosition.left > 0 && relativePosition.right < 0) {
                 fullViewScrollLeft = Math.round(parentDimensions.scroll.left +
                                                 Math.min(relativePosition.left, -relativePosition.right) +
-                                                MAX_SCROLL_MARGIN);
+                                                maxLeftScrollMargin);
             }
         }
 
         if (canShowFullElementHeight) {
+            var maxTopScrollMargin = Math.min(MAX_SCROLL_MARGIN, Math.floor(parentDimensions.height -
+                                                                            childDimensions.height));
+
             if (relativePosition.top < 0)
-                fullViewScrollTop = Math.round(parentDimensions.scroll.top + relativePosition.top - MAX_SCROLL_MARGIN);
+                fullViewScrollTop = Math.round(parentDimensions.scroll.top + relativePosition.top - maxTopScrollMargin);
             else if (relativePosition.top > 0 && relativePosition.bottom < 0) {
                 fullViewScrollTop = Math.round(parentDimensions.scroll.top +
                                                Math.min(relativePosition.top, -relativePosition.bottom) +
-                                               MAX_SCROLL_MARGIN);
+                                               maxTopScrollMargin);
             }
         }
 

diff --git a/test/functional/fixtures/regression/gh-987/pages/index.html b/test/functional/fixtures/regression/gh-987/pages/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>GH-987</title>
+    <style>
+        .row {
+            height: 24px;
+            width: 75px;
+            background: grey;
+            border: 1px solid black;
+        }
+
+        .column {
+            display: inline-block;
+            color: white;
+            width: 20px;
+            height: 70px;
+            border: 1px solid black;
+            background: grey;
+        }
+
+        .verticalContainer {
+            overflow-y: scroll;
+            left: 100px;
+            position: absolute;
+            height: 70px;
+            width: 100px;
+        }
+
+        .horizontalConatainer {
+            overflow-x: scroll;
+            white-space: nowrap;
+            height: 100px;
+            width: 70px;
+        }
+    </style>
+</head>
+<body>
+<div id="verticalContainer" class="verticalContainer">
+    <div id="targetTop" class="row"></div>
+    <div class="row"></div>
+    <div id="targetBottom" class="row"></div>
+</div>
+<div id="horizontalContainer" class="horizontalConatainer">
+    <div id="targetLeft" class="column"></div>
+    <div class="column"></div>
+    <div id="targetRight" class="column"></div>
+</div>
+</body>
+</html>
diff --git a/test/functional/fixtures/regression/gh-987/test.js b/test/functional/fixtures/regression/gh-987/test.js
@@ -0,0 +1,19 @@
+describe('[Regression](GH-987)', function () {
+    describe('Should fully show the target element on performing an action', function () {
+        it('Click on the bottom element in the vertical container', function () {
+            return runTests('./testcafe-fixtures/index.test.js', 'Scroll the vertical container to the bottom element');
+        });
+
+        it('Click on the top element in the vertical container', function () {
+            return runTests('./testcafe-fixtures/index.test.js', 'Scroll the vertical container to the top element');
+        });
+
+        it('Click on the left element in the horizontal container', function () {
+            return runTests('./testcafe-fixtures/index.test.js', 'Scroll the horizontal container to the left element');
+        });
+
+        it('Click on the right element in the horizontal container', function () {
+            return runTests('./testcafe-fixtures/index.test.js', 'Scroll the horizontal container to the right element');
+        });
+    });
+});
diff --git a/test/functional/fixtures/regression/gh-987/testcafe-fixtures/index.test.js b/test/functional/fixtures/regression/gh-987/testcafe-fixtures/index.test.js
@@ -0,0 +1,42 @@
+import { Selector } from 'testcafe';
+import { expect } from 'chai';
+
+
+fixture `Scroll a div container`
+    .page `http://localhost:3000/fixtures/regression/gh-987/pages/index.html`;
+
+
+const horizontalContainer = Selector('#horizontalContainer');
+const verticalContainer   = Selector('#verticalContainer');
+
+test('Scroll the vertical container to the bottom element', async t => {
+    await t.click('#targetBottom');
+
+    expect(await verticalContainer.scrollTop).to.be.least(8);
+});
+
+test('Scroll the vertical container to the top element', async t => {
+    await t.eval(() => {
+        document.querySelector('#verticalContainer').scrollTop = 8;
+    });
+
+    await t.click('#targetTop');
+
+    expect(await verticalContainer.scrollTop).eql(0);
+});
+
+test('Scroll the horizontal container to the left element', async t => {
+    await t.eval(() => {
+        document.querySelector('#horizontalContainer').scrollLeft = 8;
+    });
+
+    await t.click('#targetLeft');
+
+    expect(await horizontalContainer.scrollLeft).eql(0);
+});
+
+test('Scroll the horizontal container to the right element', async t => {
+    await t.click('#targetRight');
+
+    expect(await horizontalContainer.scrollLeft).to.be.least(3);
+});