[Discover] Fix infinite scrolling using Classic table (elastic#97634)

* Fix infinite scrolling * Add functional tests
VladLasitsa · May 31, 2021 · 0cf48f3 · 0cf48f3
1 parent 7b127ac
commit 0cf48f3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts b/src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts
@@ -34,11 +34,12 @@ export function createInfiniteScrollDirective() {
         const isMobileView = document.getElementsByClassName('dscSidebar__mobile').length > 0;
         const usedScrollDiv = isMobileView ? scrollDivMobile : scrollDiv;
         const scrollTop = usedScrollDiv.scrollTop();
+        const scrollOffset = usedScrollDiv.prop('offsetTop') || 0;
 
         const winHeight = Number(usedScrollDiv.height());
         const winBottom = Number(winHeight) + Number(scrollTop);
         const elTop = $element.get(0).offsetTop || 0;
-        const remaining = elTop - winBottom;
+        const remaining = elTop - scrollOffset - winBottom;
 
         if (remaining <= winHeight) {
           $scope[$scope.$$phase ? '$eval' : '$apply'](function () {

diff --git a/test/functional/apps/discover/_doc_table.ts b/test/functional/apps/discover/_doc_table.ts
@@ -10,6 +10,7 @@ import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const browser = getService('browser');
   const log = getService('log');
   const retry = getService('retry');
   const esArchiver = getService('esArchiver');
@@ -59,6 +60,46 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.timePicker.setDefaultAbsoluteRange();
     });
 
+    describe('classic table in window 900x700', async function () {
+      before(async () => {
+        await kibanaServer.uiSettings.update({ 'doc_table:legacy': true });
+        await browser.setWindowSize(900, 700);
+        await PageObjects.common.navigateToApp('discover');
+        await PageObjects.discover.waitUntilSearchingHasFinished();
+      });
+
+      it(`should load up to ${rowsHardLimit} rows when scrolling at the end of the table with `, async function () {
+        const initialRows = await testSubjects.findAll('docTableRow');
+        await testSubjects.scrollIntoView('discoverBackToTop');
+        // now count the rows
+        await retry.waitFor('next batch of documents to be displayed', async () => {
+          const actual = await testSubjects.findAll('docTableRow');
+          log.debug(`initial doc nr: ${initialRows.length}, actual doc nr: ${actual.length}`);
+          return actual.length > initialRows.length;
+        });
+      });
+    });
+
+    describe('classic table in window 600x700', async function () {
+      before(async () => {
+        await kibanaServer.uiSettings.update({ 'doc_table:legacy': true });
+        await browser.setWindowSize(600, 700);
+        await PageObjects.common.navigateToApp('discover');
+        await PageObjects.discover.waitUntilSearchingHasFinished();
+      });
+
+      it(`should load up to ${rowsHardLimit} rows when scrolling at the end of the table with `, async function () {
+        const initialRows = await testSubjects.findAll('docTableRow');
+        await testSubjects.scrollIntoView('discoverBackToTop');
+        // now count the rows
+        await retry.waitFor('next batch of documents to be displayed', async () => {
+          const actual = await testSubjects.findAll('docTableRow');
+          log.debug(`initial doc nr: ${initialRows.length}, actual doc nr: ${actual.length}`);
+          return actual.length > initialRows.length;
+        });
+      });
+    });
+
     describe('legacy', async function () {
       before(async () => {
         await kibanaServer.uiSettings.update({ 'doc_table:legacy': true });