Add latest changes from gitlab-org/gitlab@16-8-stable-eev16.8.0-rc42

2 files changed, 107 insertions, 1 deletions

diff --git a/spec/frontend/jira_connect/branches/components/project_dropdown_spec.js b/spec/frontend/jira_connect/branches/components/project_dropdown_spec.js
index f4f4936a134..b81bdc6ac74 100644
--- a/spec/frontend/jira_connect/branches/components/project_dropdown_spec.js
+++ b/spec/frontend/jira_connect/branches/components/project_dropdown_spec.js
@@ -8,13 +8,15 @@ import ProjectDropdown from '~/jira_connect/branches/components/project_dropdown
 import { PROJECTS_PER_PAGE } from '~/jira_connect/branches/constants';
 import getProjectsQuery from '~/jira_connect/branches/graphql/queries/get_projects.query.graphql';
 
-import { mockProjects } from '../mock_data';
+import { mockProjects, mockProjects2 } from '../mock_data';
 
 const mockProjectsQueryResponse = {
   data: {
     projects: {
+      __typename: 'ProjectsConnection',
       nodes: mockProjects,
       pageInfo: {
+        __typename: 'PageInfo',
         hasNextPage: false,
         hasPreviousPage: false,
         startCursor: '',
@@ -121,6 +123,80 @@ describe('ProjectDropdown', () => {
     });
   });
 
+  describe('when projects query succeeds and has pagination', () => {
+    const mockProjectsWithPaginationQueryResponse = {
+      data: {
+        projects: {
+          __typename: 'ProjectsConnection',
+          nodes: mockProjects2,
+          pageInfo: {
+            __typename: 'PageInfo',
+            hasNextPage: true,
+            hasPreviousPage: false,
+            startCursor: '',
+            endCursor: 'end123',
+          },
+        },
+      },
+    };
+    const mockGetProjectsQuery = jest.fn();
+
+    beforeEach(async () => {
+      mockGetProjectsQuery
+        .mockResolvedValueOnce(mockProjectsWithPaginationQueryResponse)
+        .mockResolvedValueOnce(mockProjectsQueryResponse);
+
+      createComponent({
+        mockApollo: createMockApolloProvider({
+          mockGetProjectsQuery,
+        }),
+      });
+      await waitForPromises();
+    });
+
+    afterEach(() => {
+      mockGetProjectsQuery.mockReset();
+    });
+
+    it('uses infinite-scroll', () => {
+      expect(findDropdown().props()).toMatchObject({
+        infiniteScroll: true,
+        infiniteScrollLoading: false,
+      });
+    });
+
+    describe('when "bottom-reached" event is emitted', () => {
+      beforeEach(() => {
+        findDropdown().vm.$emit('bottom-reached');
+      });
+
+      it('sets infinite-scroll-loading to true', () => {
+        expect(findDropdown().props('infiniteScrollLoading')).toBe(true);
+      });
+
+      it('calls fetchMore to get next page', () => {
+        expect(mockGetProjectsQuery).toHaveBeenCalledTimes(2);
+        expect(mockGetProjectsQuery).toHaveBeenCalledWith(
+          expect.objectContaining({
+            after: 'end123',
+          }),
+        );
+      });
+
+      it('appends query results to "items"', async () => {
+        const allProjects = [...mockProjects2, ...mockProjects];
+
+        await waitForPromises();
+
+        expect(findDropdown().props('infiniteScrollLoading')).toBe(false);
+
+        const dropdownItems = findDropdown().props('items');
+        expect(dropdownItems).toHaveLength(allProjects.length);
+        expect(dropdownItems).toMatchObject(allProjects);
+      });
+    });
+  });
+
   describe('when projects query fails', () => {
     beforeEach(async () => {
       createComponent({
diff --git a/spec/frontend/jira_connect/branches/mock_data.js b/spec/frontend/jira_connect/branches/mock_data.js
index 1720e0118c8..a9e7182cb86 100644
--- a/spec/frontend/jira_connect/branches/mock_data.js
+++ b/spec/frontend/jira_connect/branches/mock_data.js
@@ -31,6 +31,36 @@ export const mockProjects = [
     },
   },
 ];
+export const mockProjects2 = [
+  {
+    id: 'gitlab-test',
+    name: 'gitlab-test',
+    nameWithNamespace: 'gitlab-test',
+    avatarUrl: 'https://gitlab.com',
+    path: 'gitlab-test-path',
+    fullPath: 'gitlab-test-path',
+    repository: {
+      empty: false,
+    },
+    userPermissions: {
+      pushCode: true,
+    },
+  },
+  {
+    id: 'gitlab-shell',
+    name: 'GitLab Shell',
+    nameWithNamespace: 'gitlab-org/gitlab-shell',
+    avatarUrl: 'https://gitlab.com',
+    path: 'gitlab-shell',
+    fullPath: 'gitlab-org/gitlab-shell',
+    repository: {
+      empty: false,
+    },
+    userPermissions: {
+      pushCode: true,
+    },
+  },
+];
 
 export const mockProjectQueryResponse = (branchNames = mockBranchNames) => ({
   data: {