From aefc4fd5c91705d7375eda05363547e63b502a09 Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Wed, 23 Aug 2023 15:51:41 +0700
Subject: [PATCH 1/7] Add infinite scroll to source branch dropdown

- Allow loading more branch names by using offset pagination
with GraphQL. This fixes an issue with not being able to display
all branches.
- Add specs and refactor mocking of Apollo to follow newest
guidelines.

Changelog: fixed
---
 .../components/source_branch_dropdown.vue     |  47 +++++--
 .../components/source_branch_dropdown_spec.js | 118 +++++++++++-------
 .../jira_connect/branches/mock_data.js        |  15 +++
 3 files changed, 126 insertions(+), 54 deletions(-)

diff --git a/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue b/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
index e443df35ad2360..53973a8928b3a3 100644
--- a/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
+++ b/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
@@ -26,7 +26,9 @@ export default {
     return {
       initialSourceBranchNamesLoading: false,
       sourceBranchNamesLoading: false,
+      sourceBranchNamesLoadingMore: false,
       sourceBranchNames: [],
+      sourceBranchNamesOffset: 0,
     };
   },
   computed: {
@@ -59,45 +61,64 @@ export default {
     onSearch: debounce(function debouncedSearch(branchSearchQuery) {
       this.onSourceBranchSearchQuery(branchSearchQuery);
     }, 250),
-    onSourceBranchSearchQuery(branchSearchQuery) {
+    async onSourceBranchSearchQuery(branchSearchQuery) {
       this.branchSearchQuery = branchSearchQuery;
-      this.fetchSourceBranchNames({
+      this.sourceBranchNamesOffset = 0;
+      this.sourceBranchNamesLoading = true;
+
+      await this.fetchSourceBranchNames({
+        projectPath: this.selectedProject.fullPath,
+        searchPattern: this.branchSearchQuery,
+      });
+      this.sourceBranchNamesLoading = false;
+    },
+    async onBottomReached() {
+      this.sourceBranchNamesOffset = this.sourceBranchNames.length;
+      this.sourceBranchNamesLoadingMore = true;
+
+      await this.fetchSourceBranchNames({
         projectPath: this.selectedProject.fullPath,
         searchPattern: this.branchSearchQuery,
+        append: true,
       });
+
+      this.sourceBranchNamesLoadingMore = false;
     },
     onError({ message } = {}) {
       this.$emit('error', { message });
     },
-    async fetchSourceBranchNames({ projectPath, searchPattern } = {}) {
-      this.sourceBranchNamesLoading = true;
+    async fetchSourceBranchNames({ projectPath, searchPattern, append = false } = {}) {
       try {
         const { data } = await this.$apollo.query({
           query: getProjectQuery,
           variables: {
             projectPath,
             branchNamesLimit: this.$options.BRANCHES_PER_PAGE,
-            branchNamesOffset: 0,
+            branchNamesOffset: this.sourceBranchNamesOffset,
             branchNamesSearchPattern: searchPattern ? `*${searchPattern}*` : '*',
           },
         });
 
         const { branchNames, rootRef } = data?.project.repository || {};
-        this.sourceBranchNames =
+        const branchNameItems =
           branchNames.map((value) => {
             return { text: value, value };
           }) || [];
 
-        // Use root ref as the default selection
-        if (rootRef && !this.hasSelectedSourceBranch) {
-          this.onSourceBranchSelect(rootRef);
+        if (append) {
+          this.sourceBranchNames.push(...branchNameItems);
+        } else {
+          this.sourceBranchNames = branchNameItems;
+
+          // Use root ref as the default selection
+          if (rootRef && !this.hasSelectedSourceBranch) {
+            this.onSourceBranchSelect(rootRef);
+          }
         }
       } catch (err) {
         this.onError({
           message: __('Something went wrong while fetching source branches.'),
         });
-      } finally {
-        this.sourceBranchNamesLoading = false;
       }
     },
   },
@@ -107,6 +128,7 @@ export default {
 <template>
   <gl-collapsible-listbox
     :class="{ 'gl-font-monospace': hasSelectedSourceBranch }"
+    :selected="selectedBranchName"
     :disabled="!hasSelectedProject"
     :items="sourceBranchNames"
     :loading="initialSourceBranchNamesLoading"
@@ -114,6 +136,9 @@ export default {
     :searching="sourceBranchNamesLoading"
     :toggle-text="branchDropdownText"
     fluid-width
+    infinite-scroll
+    :infinite-scroll-loading="sourceBranchNamesLoadingMore"
+    @bottom-reached="onBottomReached"
     @search="onSearch"
     @select="onSourceBranchSelect"
   />
diff --git a/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js b/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
index cf2dacb50d8433..5b21ba15361600 100644
--- a/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
+++ b/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
@@ -1,58 +1,45 @@
-import { GlCollapsibleListbox } from '@gitlab/ui';
-import { mount, shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { GlCollapsibleListbox } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+
 import SourceBranchDropdown from '~/jira_connect/branches/components/source_branch_dropdown.vue';
 import { BRANCHES_PER_PAGE } from '~/jira_connect/branches/constants';
 import getProjectQuery from '~/jira_connect/branches/graphql/queries/get_project.query.graphql';
-import { mockProjects } from '../mock_data';
-
-const mockProject = {
-  id: 'test',
-  repository: {
-    branchNames: ['main', 'f-test', 'release'],
-    rootRef: 'main',
-  },
-};
-const mockSelectedProject = mockProjects[0];
-
-const mockProjectQueryResponse = {
-  data: {
-    project: mockProject,
-  },
-};
-const mockGetProjectQuery = jest.fn().mockResolvedValue(mockProjectQueryResponse);
-const mockQueryLoading = jest.fn().mockReturnValue(new Promise(() => {}));
+import {
+  mockBranchNames,
+  mockBranchNames2,
+  mockProjects,
+  mockProjectQueryResponse,
+} from '../mock_data';
+
+Vue.use(VueApollo);
 
 describe('SourceBranchDropdown', () => {
   let wrapper;
 
+  const mockSelectedProject = mockProjects[0];
+  const querySuccessHandler = jest.fn().mockResolvedValue(mockProjectQueryResponse());
+  const queryLoadingHandler = jest.fn().mockReturnValue(new Promise(() => {}));
+
   const findListbox = () => wrapper.findComponent(GlCollapsibleListbox);
 
-  const assertListboxItems = () => {
+  const assertListboxItems = (branchNames = mockBranchNames) => {
     const listboxItems = findListbox().props('items');
-    expect(listboxItems).toHaveLength(mockProject.repository.branchNames.length);
-    expect(listboxItems.map((item) => item.text)).toEqual(mockProject.repository.branchNames);
+    expect(listboxItems).toHaveLength(branchNames.length);
+    expect(listboxItems.map((item) => item.text)).toEqual(branchNames);
   };
 
-  function createMockApolloProvider({ getProjectQueryLoading = false } = {}) {
-    Vue.use(VueApollo);
+  const createComponent = ({ props, handler = querySuccessHandler } = {}) => {
+    const mockApollo = createMockApollo([[getProjectQuery, handler]]);
 
-    const mockApollo = createMockApollo([
-      [getProjectQuery, getProjectQueryLoading ? mockQueryLoading : mockGetProjectQuery],
-    ]);
-
-    return mockApollo;
-  }
-
-  function createComponent({ mockApollo, props, mountFn = shallowMount } = {}) {
-    wrapper = mountFn(SourceBranchDropdown, {
-      apolloProvider: mockApollo || createMockApolloProvider(),
+    wrapper = shallowMount(SourceBranchDropdown, {
+      apolloProvider: mockApollo,
       propsData: props,
     });
-  }
+  };
 
   describe('when `selectedProject` prop is not specified', () => {
     beforeEach(() => {
@@ -92,23 +79,26 @@ describe('SourceBranchDropdown', () => {
     describe('when branches are loading', () => {
       it('sets loading prop to true', () => {
         createComponent({
-          mockApollo: createMockApolloProvider({ getProjectQueryLoading: true }),
           props: { selectedProject: mockSelectedProject },
+          handler: queryLoadingHandler,
         });
-        expect(findListbox().props('loading')).toEqual(true);
+        expect(findListbox().props('loading')).toBe(true);
       });
     });
 
     describe('when branches have loaded', () => {
       describe('when searching branches', () => {
         it('triggers a refetch', async () => {
-          createComponent({ mountFn: mount, props: { selectedProject: mockSelectedProject } });
+          createComponent({ props: { selectedProject: mockSelectedProject } });
           await waitForPromises();
 
           const mockSearchTerm = 'mai';
+          expect(querySuccessHandler).toHaveBeenCalledTimes(1);
+
           await findListbox().vm.$emit('search', mockSearchTerm);
 
-          expect(mockGetProjectQuery).toHaveBeenCalledWith({
+          expect(querySuccessHandler).toHaveBeenCalledTimes(2);
+          expect(querySuccessHandler).toHaveBeenLastCalledWith({
             branchNamesLimit: BRANCHES_PER_PAGE,
             branchNamesOffset: 0,
             branchNamesSearchPattern: `*${mockSearchTerm}*`,
@@ -142,19 +132,19 @@ describe('SourceBranchDropdown', () => {
         });
 
         it("emits `change` event with the repository's `rootRef` by default", () => {
-          expect(wrapper.emitted('change')[0]).toEqual([mockProject.repository.rootRef]);
+          expect(wrapper.emitted('change')[0]).toEqual([mockBranchNames[0]]);
         });
 
         describe('when selecting a listbox item', () => {
           it('emits `change` event with the selected branch name', () => {
-            const mockBranchName = mockProject.repository.branchNames[1];
+            const mockBranchName = mockBranchNames[1];
             findListbox().vm.$emit('select', mockBranchName);
             expect(wrapper.emitted('change')[1]).toEqual([mockBranchName]);
           });
         });
 
         describe('when `selectedBranchName` prop is specified', () => {
-          const mockBranchName = mockProject.repository.branchNames[2];
+          const mockBranchName = mockBranchNames[2];
 
           beforeEach(() => {
             wrapper.setProps({
@@ -171,6 +161,48 @@ describe('SourceBranchDropdown', () => {
           });
         });
       });
+
+      describe('when loading more branches from infinite scroll', () => {
+        const queryLoadMoreHandler = jest.fn();
+
+        beforeEach(async () => {
+          queryLoadMoreHandler.mockResolvedValueOnce(mockProjectQueryResponse());
+          queryLoadMoreHandler.mockResolvedValueOnce(mockProjectQueryResponse(mockBranchNames2));
+          createComponent({
+            props: { selectedProject: mockSelectedProject },
+            handler: queryLoadMoreHandler,
+          });
+
+          await waitForPromises();
+
+          await findListbox().vm.$emit('bottom-reached');
+        });
+
+        it('sets loading more prop to true', () => {
+          expect(findListbox().props('infiniteScrollLoading')).toBe(true);
+        });
+
+        it('triggers load more query', () => {
+          expect(queryLoadMoreHandler).toHaveBeenLastCalledWith({
+            branchNamesLimit: BRANCHES_PER_PAGE,
+            branchNamesOffset: 3,
+            branchNamesSearchPattern: '*',
+            projectPath: 'test-path',
+          });
+        });
+
+        it('renders available source branches as listbox items', async () => {
+          await waitForPromises();
+
+          assertListboxItems([...mockBranchNames, ...mockBranchNames2]);
+        });
+
+        it('sets loading more prop to false once done', async () => {
+          await waitForPromises();
+
+          expect(findListbox().props('infiniteScrollLoading')).toBe(false);
+        });
+      });
     });
   });
 });
diff --git a/spec/frontend/jira_connect/branches/mock_data.js b/spec/frontend/jira_connect/branches/mock_data.js
index 742ab5392c8712..1720e0118c8489 100644
--- a/spec/frontend/jira_connect/branches/mock_data.js
+++ b/spec/frontend/jira_connect/branches/mock_data.js
@@ -1,3 +1,6 @@
+export const mockBranchNames = ['main', 'f-test', 'release'];
+export const mockBranchNames2 = ['dev', 'dev-1', 'dev-2'];
+
 export const mockProjects = [
   {
     id: 'test',
@@ -28,3 +31,15 @@ export const mockProjects = [
     },
   },
 ];
+
+export const mockProjectQueryResponse = (branchNames = mockBranchNames) => ({
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/27',
+      repository: {
+        branchNames,
+        rootRef: 'main',
+      },
+    },
+  },
+});
-- 
GitLab


From a9d819113b6eff0e5cfd4c047ab99d09b1e0f808 Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Wed, 23 Aug 2023 16:32:57 +0700
Subject: [PATCH 2/7] Fix pagination offset when changing projects

---
 .../branches/components/source_branch_dropdown.vue           | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue b/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
index 53973a8928b3a3..e4ebe9f634d956 100644
--- a/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
+++ b/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
@@ -28,7 +28,6 @@ export default {
       sourceBranchNamesLoading: false,
       sourceBranchNamesLoadingMore: false,
       sourceBranchNames: [],
-      sourceBranchNamesOffset: 0,
     };
   },
   computed: {
@@ -63,7 +62,6 @@ export default {
     }, 250),
     async onSourceBranchSearchQuery(branchSearchQuery) {
       this.branchSearchQuery = branchSearchQuery;
-      this.sourceBranchNamesOffset = 0;
       this.sourceBranchNamesLoading = true;
 
       await this.fetchSourceBranchNames({
@@ -73,7 +71,6 @@ export default {
       this.sourceBranchNamesLoading = false;
     },
     async onBottomReached() {
-      this.sourceBranchNamesOffset = this.sourceBranchNames.length;
       this.sourceBranchNamesLoadingMore = true;
 
       await this.fetchSourceBranchNames({
@@ -94,7 +91,7 @@ export default {
           variables: {
             projectPath,
             branchNamesLimit: this.$options.BRANCHES_PER_PAGE,
-            branchNamesOffset: this.sourceBranchNamesOffset,
+            branchNamesOffset: append ? this.sourceBranchNames.length : 0,
             branchNamesSearchPattern: searchPattern ? `*${searchPattern}*` : '*',
           },
         });
-- 
GitLab


From 3f2c5d8e65b018c200492057dd3db50cc1806ccc Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Thu, 24 Aug 2023 13:20:46 +0700
Subject: [PATCH 3/7] Reset search query when project changes

Also add Vue app name
---
 .../jira_connect/branches/components/new_branch_form.vue         | 1 +
 app/assets/javascripts/jira_connect/branches/index.js            | 1 +
 2 files changed, 2 insertions(+)

diff --git a/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue b/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
index 46c27c33f56e7f..1d926c0d0c50f1 100644
--- a/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
+++ b/app/assets/javascripts/jira_connect/branches/components/new_branch_form.vue
@@ -193,6 +193,7 @@ export default {
       >
         <source-branch-dropdown
           id="source-branch-select"
+          :key="selectedProject.id"
           :selected-project="selectedProject"
           :selected-branch-name="selectedSourceBranchName"
           @change="onSourceBranchSelect"
diff --git a/app/assets/javascripts/jira_connect/branches/index.js b/app/assets/javascripts/jira_connect/branches/index.js
index a9a56a6362e682..893b9dfa1c7328 100644
--- a/app/assets/javascripts/jira_connect/branches/index.js
+++ b/app/assets/javascripts/jira_connect/branches/index.js
@@ -19,6 +19,7 @@ export default function initJiraConnectBranches() {
 
   return new Vue({
     el,
+    name: 'JiraConnectNewBranchRoot',
     apolloProvider,
     provide: {
       initialBranchName,
-- 
GitLab


From 3959e39d963aca8c9fa6970770de5c20dfb91a94 Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Thu, 14 Sep 2023 22:34:16 +0700
Subject: [PATCH 4/7] Add error logging for request

---
 .../branches/components/source_branch_dropdown.vue           | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue b/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
index e4ebe9f634d956..eae48ab015f1a4 100644
--- a/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
+++ b/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
@@ -2,6 +2,8 @@
 import { GlCollapsibleListbox } from '@gitlab/ui';
 import { debounce } from 'lodash';
 import { __ } from '~/locale';
+import { logError } from '~/lib/logger';
+
 import { BRANCHES_PER_PAGE } from '../constants';
 import getProjectQuery from '../graphql/queries/get_project.query.graphql';
 
@@ -98,7 +100,7 @@ export default {
 
         const { branchNames, rootRef } = data?.project.repository || {};
         const branchNameItems =
-          branchNames.map((value) => {
+          branchNames?.map((value) => {
             return { text: value, value };
           }) || [];
 
@@ -113,6 +115,7 @@ export default {
           }
         }
       } catch (err) {
+        logError(err);
         this.onError({
           message: __('Something went wrong while fetching source branches.'),
         });
-- 
GitLab


From 33c39722407cf55b38ffea3196a1786114df5869 Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Thu, 14 Sep 2023 22:52:12 +0700
Subject: [PATCH 5/7] Add conditional for infinite scroll

We will only enable infinite scroll when there are some source
branches and the reminder from the division with BRANCHES_PER_PAGE
is 0. When the reminder is not 0, it means that we have fetched
the last items in the list and we no longer need to continue fetching
them.
---
 .../branches/components/source_branch_dropdown.vue        | 7 ++++++-
 .../branches/components/source_branch_dropdown_spec.js    | 8 ++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue b/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
index eae48ab015f1a4..3f9dd4eb6c6c41 100644
--- a/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
+++ b/app/assets/javascripts/jira_connect/branches/components/source_branch_dropdown.vue
@@ -39,6 +39,11 @@ export default {
     hasSelectedSourceBranch() {
       return Boolean(this.selectedBranchName);
     },
+    hasMoreBranches() {
+      return (
+        this.sourceBranchNames.length > 0 && this.sourceBranchNames.length % BRANCHES_PER_PAGE === 0
+      );
+    },
     branchDropdownText() {
       return this.selectedBranchName || __('Select a branch');
     },
@@ -136,7 +141,7 @@ export default {
     :searching="sourceBranchNamesLoading"
     :toggle-text="branchDropdownText"
     fluid-width
-    infinite-scroll
+    :infinite-scroll="hasMoreBranches"
     :infinite-scroll-loading="sourceBranchNamesLoadingMore"
     @bottom-reached="onBottomReached"
     @search="onSearch"
diff --git a/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js b/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
index 5b21ba15361600..381908f62cf569 100644
--- a/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
+++ b/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
@@ -15,6 +15,10 @@ import {
   mockProjectQueryResponse,
 } from '../mock_data';
 
+jest.mock('~/jira_connect/branches/constants', () => ({
+  BRANCHES_PER_PAGE: 3,
+}));
+
 Vue.use(VueApollo);
 
 describe('SourceBranchDropdown', () => {
@@ -123,6 +127,10 @@ describe('SourceBranchDropdown', () => {
           });
         });
 
+        it('enables infinite scroll', () => {
+          expect(findListbox().props('infiniteScroll')).toBe(true);
+        });
+
         it('omits monospace styling from listbox', () => {
           expect(findListbox().classes()).not.toContain('gl-font-monospace');
         });
-- 
GitLab


From b5e210da1efb13f6ce01ab145b9ac006b1cc3919 Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Thu, 14 Sep 2023 23:14:10 +0700
Subject: [PATCH 6/7] Add unit test for `selected` value

---
 .../branches/components/source_branch_dropdown_spec.js      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js b/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
index 381908f62cf569..f6a5b0365ce33a 100644
--- a/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
+++ b/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
@@ -69,6 +69,7 @@ describe('SourceBranchDropdown', () => {
           loading: false,
           searchable: true,
           searching: false,
+          selected: null,
           toggleText: 'Select a branch',
         });
       });
@@ -123,6 +124,7 @@ describe('SourceBranchDropdown', () => {
             loading: false,
             searchable: true,
             searching: false,
+            selected: null,
             toggleText: 'Select a branch',
           });
         });
@@ -160,6 +162,10 @@ describe('SourceBranchDropdown', () => {
             });
           });
 
+          it('sets listbox selected to `selectedBranchName`', () => {
+            expect(findListbox().props('selected')).toBe(mockBranchName);
+          });
+
           it('sets listbox text to `selectedBranchName` value', () => {
             expect(findListbox().props('toggleText')).toBe(mockBranchName);
           });
-- 
GitLab


From b987f3012057e9ac607e6c3775fd6ad6220cdad7 Mon Sep 17 00:00:00 2001
From: Justin Ho Tuan Duong <hduong@gitlab.com>
Date: Fri, 15 Sep 2023 12:31:37 +0700
Subject: [PATCH 7/7] Update spec to use actual constant

---
 .../components/source_branch_dropdown_spec.js | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js b/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
index f6a5b0365ce33a..95658f66d09794 100644
--- a/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
+++ b/spec/frontend/jira_connect/branches/components/source_branch_dropdown_spec.js
@@ -15,10 +15,6 @@ import {
   mockProjectQueryResponse,
 } from '../mock_data';
 
-jest.mock('~/jira_connect/branches/constants', () => ({
-  BRANCHES_PER_PAGE: 3,
-}));
-
 Vue.use(VueApollo);
 
 describe('SourceBranchDropdown', () => {
@@ -129,8 +125,8 @@ describe('SourceBranchDropdown', () => {
           });
         });
 
-        it('enables infinite scroll', () => {
-          expect(findListbox().props('infiniteScroll')).toBe(true);
+        it('disables infinite scroll', () => {
+          expect(findListbox().props('infiniteScroll')).toBe(false);
         });
 
         it('omits monospace styling from listbox', () => {
@@ -174,6 +170,24 @@ describe('SourceBranchDropdown', () => {
             expect(findListbox().classes()).toContain('gl-font-monospace');
           });
         });
+
+        describe('when full page of branches returns', () => {
+          const fullPageBranchNames = Array(BRANCHES_PER_PAGE)
+            .fill(1)
+            .map((_, i) => mockBranchNames[i % mockBranchNames.length]);
+
+          beforeEach(async () => {
+            createComponent({
+              props: { selectedProject: mockSelectedProject },
+              handler: () => Promise.resolve(mockProjectQueryResponse(fullPageBranchNames)),
+            });
+            await waitForPromises();
+          });
+
+          it('enables infinite scroll', () => {
+            expect(findListbox().props('infiniteScroll')).toBe(true);
+          });
+        });
       });
 
       describe('when loading more branches from infinite scroll', () => {
-- 
GitLab