Commit 7618a30c authored by Daniel Tian's avatar Daniel Tian Committed by Natalia Tepluhina

Add tests for vulnerability report pagination feature

Changelog: other
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/83098
EE: true
parent e6fbd09b
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);
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment