Add tests for vulnerability report pagination feature

Changelog: other
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/83098
EE: true

ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql_spec.js

 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
-import { GlIntersectionObserver } from '@gitlab/ui';
+import { GlIntersectionObserver, GlKeysetPagination } from '@gitlab/ui';
 import VueRouter from 'vue-router';
 import VulnerabilityListGraphql from 'ee/security_dashboard/components/shared/vulnerability_report/vulnerability_list_graphql.vue';
 import VulnerabilityList from 'ee/security_dashboard/components/shared/vulnerability_report/vulnerability_list.vue';
@@ -24,7 +24,7 @@ const portalName = 'portal-name';
 const SORT_OBJECT = { sortBy: 'state', sortDesc: true };
 const DEFAULT_SORT = `${FIELDS.SEVERITY.key}_desc`;
 
-const createVulnerabilitiesRequestHandler = ({ hasNextPage }) =>
+const createVulnerabilitiesRequestHandler = (options) =>
   jest.fn().mockResolvedValue({
     data: {
       group: {
@@ -35,15 +35,16 @@ const createVulnerabilitiesRequestHandler = ({ hasNextPage }) =>
             __typename: 'PageInfo',
             startCursor: 'abc',
             endCursor: 'def',
-            hasNextPage,
+            hasNextPage: true,
             hasPreviousPage: false,
+            ...options,
           },
         },
       },
     },
   });
 
-const vulnerabilitiesRequestHandler = createVulnerabilitiesRequestHandler({ hasNextPage: true });
+const vulnerabilitiesRequestHandler = createVulnerabilitiesRequestHandler();
 
 describe('Vulnerability list GraphQL component', () => {
   let wrapper;
@@ -53,6 +54,7 @@ describe('Vulnerability list GraphQL component', () => {
     canViewFalsePositive = false,
     showProjectNamespace = false,
     hasJiraVulnerabilitiesIntegrationEnabled = false,
+    vulnerabilityReportPagination = false,
     filters = {},
     fields = [],
   } = {}) => {
@@ -64,6 +66,7 @@ describe('Vulnerability list GraphQL component', () => {
         dashboardType: DASHBOARD_TYPES.GROUP,
         canViewFalsePositive,
         hasJiraVulnerabilitiesIntegrationEnabled,
+        glFeatures: { vulnerabilityReportPagination },
       },
       propsData: {
         query: vulnerabilitiesQuery,
@@ -77,6 +80,7 @@ describe('Vulnerability list GraphQL component', () => {
 
   const findVulnerabilityList = () => wrapper.findComponent(VulnerabilityList);
   const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
+  const findPagination = () => wrapper.findComponent(GlKeysetPagination);
 
   afterEach(() => {
     wrapper.destroy();
@@ -259,7 +263,62 @@ describe('Vulnerability list GraphQL component', () => {
     });
   });
 
+  describe('pagination', () => {
+    it('is not shown if the pagination feature flag is off', () => {
+      createWrapper();
+
+      expect(findPagination().exists()).toBe(false);
+    });
+
+    it.each([
+      { startCursor: 'abc', endCursor: 'def', hasPreviousPage: true, hasNextPage: false },
+      { startCursor: 'ghi', endCursor: 'jkl', hasPreviousPage: false, hasNextPage: true },
+    ])('has the expected props for pageInfo %s', async (pageInfo) => {
+      const vulnerabilitiesHandler = createVulnerabilitiesRequestHandler(pageInfo);
+      createWrapper({ vulnerabilityReportPagination: true, vulnerabilitiesHandler });
+      await waitForPromises();
+
+      expect(findPagination().props()).toMatchObject(pageInfo);
+    });
+
+    it('syncs the disabled prop with the query loading state', async () => {
+      createWrapper({ vulnerabilityReportPagination: true });
+      // When the component is mounted, the Apollo query will immediately start to load.
+      expect(findPagination().props('disabled')).toBe(true);
+      await waitForPromises();
+      // After the query handler is resolved, the Apollo query will no longer be loading.
+      expect(findPagination().props('disabled')).toBe(false);
+    });
+
+    it.each`
+      navigationDirection | expectedQueryVariables
+      ${'next'}           | ${{ after: 'endCursor' }}
+      ${'prev'}           | ${{ before: 'startCursor' }}
+    `(
+      'it navigates to the $navigationDirection page',
+      async ({ navigationDirection, expectedQueryVariables }) => {
+        const pageInfo = { startCursor: 'startCursor', endCursor: 'endCursor' };
+        const vulnerabilitiesHandler = createVulnerabilitiesRequestHandler(pageInfo);
+        createWrapper({ vulnerabilityReportPagination: true, vulnerabilitiesHandler });
+        await waitForPromises();
+
+        findPagination().vm.$emit(navigationDirection);
+        await nextTick();
+
+        expect(vulnerabilitiesHandler).toHaveBeenLastCalledWith(
+          expect.objectContaining(expectedQueryVariables),
+        );
+      },
+    );
+  });
+
   describe('intersection observer', () => {
+    it('is not shown if the pagination feature flag is on', () => {
+      createWrapper({ vulnerabilityReportPagination: true });
+
+      expect(findIntersectionObserver().exists()).toBe(false);
+    });
+
     it('is not shown when the vulnerabilities query is loading for the first time', () => {
       createWrapper();
 
@@ -281,8 +340,7 @@ describe('Vulnerability list GraphQL component', () => {
       createWrapper({
         vulnerabilitiesHandler: createVulnerabilitiesRequestHandler({ hasNextPage: false }),
       });
-
-      await nextTick();
+      await waitForPromises();
 
       expect(findIntersectionObserver().exists()).toBe(false);
     });