Merge branch '26207-issue-board-loading-infinite-if-closing-the-closed-row' into 'master'

Fix loading all issues when board list is collapsed

Closes #26207

See merge request gitlab-org/gitlab!19347

app/assets/javascripts/boards/components/board_list.vue

@@ -84,7 +84,8 @@ export default {
       this.$nextTick(() => {
         if (
           this.scrollHeight() <= this.listHeight() &&
-          this.list.issuesSize > this.list.issues.length
+          this.list.issuesSize > this.list.issues.length &&
+          this.list.isExpanded
         ) {
           this.list.page += 1;
           this.list.getIssues(false).catch(() => {

app/assets/javascripts/boards/models/list.js

@@ -50,8 +50,8 @@ class List {
     this.page = 1;
     this.loading = true;
     this.loadingMore = false;
-    this.issues = [];
-    this.issuesSize = 0;
+    this.issues = obj.issues || [];
+    this.issuesSize = obj.issuesSize ? obj.issuesSize : 0;
     this.defaultAvatar = defaultAvatar;
 
     if (obj.label) {

changelogs/unreleased/26207-issue-board-loading-infinite-if-closing-the-closed-row.yml

+---
+title: Fix closed board list loading issue
+merge_request:
+author:
+type: fixed

spec/javascripts/boards/board_list_common_spec.js

@@ -15,7 +15,12 @@ import boardsStore from '~/boards/stores/boards_store';
 
 window.Sortable = Sortable;
 
-export default function createComponent({ done, listIssueProps = {}, componentProps = {} }) {
+export default function createComponent({
+  done,
+  listIssueProps = {},
+  componentProps = {},
+  listProps = {},
+}) {
   const el = document.createElement('div');
 
   document.body.appendChild(el);
@@ -25,7 +30,7 @@ export default function createComponent({ done, listIssueProps = {}, componentPr
   boardsStore.create();
 
   const BoardListComp = Vue.extend(BoardList);
-  const list = new List(listObj);
+  const list = new List({ ...listObj, ...listProps });
   const issue = new ListIssue({
     title: 'Testing',
     id: 1,
@@ -35,7 +40,9 @@ export default function createComponent({ done, listIssueProps = {}, componentPr
     assignees: [],
     ...listIssueProps,
   });
+  if (!Object.prototype.hasOwnProperty.call(listProps, 'issuesSize')) {
     list.issuesSize = 1;
+  }
   list.issues.push(issue);
 
   const component = new BoardListComp({

spec/javascripts/boards/board_list_spec.js

+/* global List */
+
 import Vue from 'vue';
 import eventHub from '~/boards/eventhub';
 import createComponent from './board_list_common_spec';
+import waitForPromises from '../helpers/wait_for_promises';
+
+import '~/boards/models/list';
 
 describe('Board list component', () => {
   let mock;
   let component;
+  let getIssues;
+  function generateIssues(compWrapper) {
+    for (let i = 1; i < 20; i += 1) {
+      const issue = Object.assign({}, compWrapper.list.issues[0]);
+      issue.id += i;
+      compWrapper.list.issues.push(issue);
+    }
+  }
 
+  describe('When Expanded', () => {
     beforeEach(done => {
+      getIssues = spyOn(List.prototype, 'getIssues').and.returnValue(new Promise(() => {}));
       ({ mock, component } = createComponent({ done }));
     });
 
     afterEach(() => {
       mock.restore();
+      component.$destroy();
+    });
+
+    it('loads first page of issues', done => {
+      waitForPromises()
+        .then(() => {
+          expect(getIssues).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
     it('renders component', () => {
@@ -114,25 +139,21 @@ describe('Board list component', () => {
       spyOn(component.list, 'nextPage');
       component.$refs.list.style.height = '100px';
       component.$refs.list.style.overflow = 'scroll';
-
-    for (let i = 1; i < 20; i += 1) {
-      const issue = Object.assign({}, component.list.issues[0]);
-      issue.id += i;
-      component.list.issues.push(issue);
-    }
+      generateIssues(component);
 
       Vue.nextTick(() => {
         component.$refs.list.scrollTop = 20000;
 
-      setTimeout(() => {
+        waitForPromises()
+          .then(() => {
             expect(component.list.nextPage).toHaveBeenCalled();
-
-        done();
-      });
+          })
+          .then(done)
+          .catch(done.fail);
       });
     });
 
-  it('does not load issues if already loading', () => {
+    it('does not load issues if already loading', done => {
       component.list.nextPage = spyOn(component.list, 'nextPage').and.returnValue(
         new Promise(() => {}),
       );
@@ -140,7 +161,12 @@ describe('Board list component', () => {
       component.onScroll();
       component.onScroll();
 
+      waitForPromises()
+        .then(() => {
           expect(component.list.nextPage).toHaveBeenCalledTimes(1);
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
     it('shows loading more spinner', done => {
@@ -153,4 +179,32 @@ describe('Board list component', () => {
         done();
       });
     });
+  });
+
+  describe('When Collapsed', () => {
+    beforeEach(done => {
+      getIssues = spyOn(List.prototype, 'getIssues').and.returnValue(new Promise(() => {}));
+      ({ mock, component } = createComponent({
+        done,
+        listProps: { type: 'closed', collapsed: true, issuesSize: 50 },
+      }));
+      generateIssues(component);
+      component.scrollHeight = spyOn(component, 'scrollHeight').and.returnValue(0);
+    });
+
+    afterEach(() => {
+      mock.restore();
+      component.$destroy();
+    });
+
+    it('does not load all issues', done => {
+      waitForPromises()
+        .then(() => {
+          // Initial getIssues from list constructor
+          expect(getIssues).toHaveBeenCalledTimes(1);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
 });