Merge branch...

Merge branch '323081-scrolling-to-the-bottom-of-the-user-profile-overview-page-triggers-the-infinite-scroll' into 'master'

Fix infinite activities requests on profile

See merge request gitlab-org/gitlab!84999

app/assets/javascripts/pager.js

@@ -22,7 +22,10 @@ export default {
     this.prepareData = prepareData;
     this.successCallback = successCallback;
     this.errorCallback = errorCallback;
-    this.loading = $(`${container} .loading`).first();
+    this.$container = $(container);
+    this.$loading = this.$container.length
+      ? this.$container.find('.loading').first()
+      : $('.loading').first();
     if (preload) {
       this.offset = 0;
       this.getOld();
@@ -31,7 +34,7 @@ export default {
   },
 
   getOld() {
-    this.loading.show();
+    this.$loading.show();
     const url = $('.content_list').data('href') || removeParams(['limit', 'offset']);
 
     axios
@@ -49,11 +52,11 @@ export default {
         if (!this.disable && !this.isScrollable()) {
           this.getOld();
         } else {
-          this.loading.hide();
+          this.$loading.hide();
         }
       })
       .catch((err) => this.errorCallback(err))
-      .finally(() => this.loading.hide());
+      .finally(() => this.$loading.hide());
   },
 
   append(count, html) {
@@ -83,8 +86,12 @@ export default {
       fireOnce: true,
       ceaseFire: () => this.disable === true,
       callback: () => {
-        if (!this.loading.is(':visible')) {
-          this.loading.show();
+        if (this.$container.length && !this.$container.is(':visible')) {
+          return;
+        }
+
+        if (!this.$loading.is(':visible')) {
+          this.$loading.show();
           this.getOld();
         }
       },

spec/frontend/pager_spec.js

@@ -68,34 +68,34 @@ describe('pager', () => {
     it('shows loader while loading next page', async () => {
       mockSuccess();
 
-      jest.spyOn(Pager.loading, 'show').mockImplementation(() => {});
+      jest.spyOn(Pager.$loading, 'show').mockImplementation(() => {});
       Pager.getOld();
 
       await waitForPromises();
 
-      expect(Pager.loading.show).toHaveBeenCalled();
+      expect(Pager.$loading.show).toHaveBeenCalled();
     });
 
     it('hides loader on success', async () => {
       mockSuccess();
 
-      jest.spyOn(Pager.loading, 'hide').mockImplementation(() => {});
+      jest.spyOn(Pager.$loading, 'hide').mockImplementation(() => {});
       Pager.getOld();
 
       await waitForPromises();
 
-      expect(Pager.loading.hide).toHaveBeenCalled();
+      expect(Pager.$loading.hide).toHaveBeenCalled();
     });
 
     it('hides loader on error', async () => {
       mockError();
 
-      jest.spyOn(Pager.loading, 'hide').mockImplementation(() => {});
+      jest.spyOn(Pager.$loading, 'hide').mockImplementation(() => {});
       Pager.getOld();
 
       await waitForPromises();
 
-      expect(Pager.loading.hide).toHaveBeenCalled();
+      expect(Pager.$loading.hide).toHaveBeenCalled();
     });
 
     it('sends request to url with offset and limit params', async () => {
@@ -122,12 +122,12 @@ describe('pager', () => {
       Pager.limit = 20;
 
       mockSuccess(1);
-      jest.spyOn(Pager.loading, 'hide').mockImplementation(() => {});
+      jest.spyOn(Pager.$loading, 'hide').mockImplementation(() => {});
       Pager.getOld();
 
       await waitForPromises();
 
-      expect(Pager.loading.hide).toHaveBeenCalled();
+      expect(Pager.$loading.hide).toHaveBeenCalled();
       expect(Pager.disable).toBe(true);
     });
 
@@ -175,5 +175,46 @@ describe('pager', () => {
         expect(axios.get).toHaveBeenCalledWith(href, expect.any(Object));
       });
     });
+
+    describe('when `container` is passed', () => {
+      const href = '/some_list';
+      const container = '#js-pager';
+      let endlessScrollCallback;
+
+      beforeEach(() => {
+        jest.spyOn(axios, 'get');
+        jest.spyOn($.fn, 'endlessScroll').mockImplementation(({ callback }) => {
+          endlessScrollCallback = callback;
+        });
+      });
+
+      describe('when `container` is visible', () => {
+        it('makes API request', () => {
+          setFixtures(
+            `<div id="js-pager"><div class="content_list" data-href="${href}"></div></div>`,
+          );
+
+          Pager.init({ container });
+
+          endlessScrollCallback();
+
+          expect(axios.get).toHaveBeenCalledWith(href, expect.any(Object));
+        });
+      });
+
+      describe('when `container` is not visible', () => {
+        it('does not make API request', () => {
+          setFixtures(
+            `<div id="js-pager" style="display: none;"><div class="content_list" data-href="${href}"></div></div>`,
+          );
+
+          Pager.init({ container });
+
+          endlessScrollCallback();
+
+          expect(axios.get).not.toHaveBeenCalled();
+        });
+      });
+    });
   });
 });