Merge branch '328385-deduplicate-specs-2' into 'master'

Deduplicate ManageViaMr specs [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!61886

app/assets/javascripts/vue_shared/security_configuration/components/manage_via_mr.vue

@@ -16,6 +16,16 @@ export default {
       type: Object,
       required: true,
     },
+    variant: {
+      type: String,
+      required: false,
+      default: 'success',
+    },
+    category: {
+      type: String,
+      required: false,
+      default: 'secondary',
+    },
   },
   data() {
     return {
@@ -65,8 +75,8 @@ export default {
   <gl-button
     v-if="!feature.configured"
     :loading="isLoading"
-    variant="success"
-    category="secondary"
+    :variant="variant"
+    :category="category"
     @click="mutate"
     >{{ $options.i18n.buttonLabel }}</gl-button
   >

ee/spec/frontend/security_configuration/components/configuration_table_spec.js

@@ -67,7 +67,7 @@ describe('ConfigurationTable component', () => {
       gitlabCiHistoryPath: propsData.gitlabCiHistoryPath,
       autoDevopsEnabled: propsData.autoDevopsEnabled,
     });
-    expect(manage.find(ManageFeature).props()).toEqual({ feature });
+    expect(manage.find(ManageFeature).props()).toMatchObject({ feature });
     expect(description.find(GlLink).attributes('href')).toBe(feature.helpPath);
   });
 

ee/spec/frontend/security_configuration/components/manage_feature_spec.js

@@ -73,7 +73,7 @@ describe('ManageFeature component', () => {
     });
 
     it('passes through props to expected component', () => {
-      expect(component.props()).toEqual({ feature });
+      expect(component.props()).toMatchObject({ feature });
     });
   });
 

ee/spec/frontend/vue_shared/security_reports/components/manage_via_mr_spec.js

-import { GlButton } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import configureDependencyScanningMutation from 'ee/security_configuration/graphql/configure_dependency_scanning.mutation.graphql';
-import configureSecretDetectionMutation from 'ee/security_configuration/graphql/configure_secret_detection.mutation.graphql';
-import createMockApollo from 'helpers/mock_apollo_helper';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import waitForPromises from 'helpers/wait_for_promises';
-import { buildConfigureSecurityFeatureMockFactory } from 'jest/vue_shared/security_reports/components/apollo_mocks';
-import { redirectTo } from '~/lib/utils/url_utility';
-import ManageViaMr from '~/vue_shared/security_configuration/components/manage_via_mr.vue';
-import {
-  REPORT_TYPE_DEPENDENCY_SCANNING,
-  REPORT_TYPE_SECRET_DETECTION,
-} from '~/vue_shared/security_reports/constants';
-
-jest.mock('~/lib/utils/url_utility');
-
-Vue.use(VueApollo);
-
-const projectPath = 'namespace/project';
-
-describe('ManageViaMr component', () => {
-  let wrapper;
-
-  const findButton = () => wrapper.findComponent(GlButton);
-  describe.each`
-    featureName              | featureType                        | mutation                               | mutationId
-    ${'SECRET_DETECTION'}    | ${REPORT_TYPE_DEPENDENCY_SCANNING} | ${configureDependencyScanningMutation} | ${'configureDependencyScanning'}
-    ${'DEPENDENCY_SCANNING'} | ${REPORT_TYPE_SECRET_DETECTION}    | ${configureSecretDetectionMutation}    | ${'configureSecretDetection'}
-  `('$featureType', ({ featureName, mutation, featureType, mutationId }) => {
-    const buildConfigureSecurityFeatureMock = buildConfigureSecurityFeatureMockFactory(mutationId);
-    const successHandler = jest.fn(async () => buildConfigureSecurityFeatureMock());
-    const noSuccessPathHandler = async () =>
-      buildConfigureSecurityFeatureMock({
-        successPath: '',
-      });
-    const errorHandler = async () =>
-      buildConfigureSecurityFeatureMock({
-        errors: ['foo'],
-      });
-    const pendingHandler = () => new Promise(() => {});
-
-    function createMockApolloProvider(handler) {
-      const requestHandlers = [[mutation, handler]];
-
-      return createMockApollo(requestHandlers);
-    }
-
-    function createComponent({ mockApollo, isFeatureConfigured = false } = {}) {
-      wrapper = extendedWrapper(
-        mount(ManageViaMr, {
-          apolloProvider: mockApollo,
-          provide: {
-            projectPath,
-          },
-          propsData: {
-            feature: {
-              name: featureName,
-              type: featureType,
-              configured: isFeatureConfigured,
-            },
-          },
-        }),
-      );
-    }
-
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
-    describe('when feature is configured', () => {
-      beforeEach(() => {
-        const mockApollo = createMockApolloProvider(successHandler);
-        createComponent({ mockApollo, isFeatureConfigured: true });
-      });
-
-      it('it does not render a button', () => {
-        expect(findButton().exists()).toBe(false);
-      });
-    });
-
-    describe('when feature is not configured', () => {
-      beforeEach(() => {
-        const mockApollo = createMockApolloProvider(successHandler);
-        createComponent({ mockApollo, isFeatureConfigured: false });
-      });
-
-      it('it does render a button', () => {
-        expect(findButton().exists()).toBe(true);
-      });
-
-      it('clicking on the button triggers the configure mutation', () => {
-        findButton().trigger('click');
-
-        expect(successHandler).toHaveBeenCalledTimes(1);
-        expect(successHandler).toHaveBeenCalledWith({
-          input: {
-            projectPath,
-          },
-        });
-      });
-    });
-
-    describe('given a pending response', () => {
-      beforeEach(() => {
-        const mockApollo = createMockApolloProvider(pendingHandler);
-        createComponent({ mockApollo });
-      });
-
-      it('renders spinner correctly', async () => {
-        const button = findButton();
-        expect(button.props('loading')).toBe(false);
-        await button.trigger('click');
-        expect(button.props('loading')).toBe(true);
-      });
-    });
-
-    describe('given a successful response', () => {
-      beforeEach(() => {
-        const mockApollo = createMockApolloProvider(successHandler);
-        createComponent({ mockApollo });
-      });
-
-      it('should call redirect helper with correct value', async () => {
-        await wrapper.trigger('click');
-        await waitForPromises();
-        expect(redirectTo).toHaveBeenCalledTimes(1);
-        expect(redirectTo).toHaveBeenCalledWith('testSuccessPath');
-        // This is done for UX reasons. If the loading prop is set to false
-        // on success, then there's a period where the button is clickable
-        // again. Instead, we want the button to display a loading indicator
-        // for the remainder of the lifetime of the page (i.e., until the
-        // browser can start painting the new page it's been redirected to).
-        expect(findButton().props().loading).toBe(true);
-      });
-    });
-
-    describe.each`
-      handler                 | message
-      ${noSuccessPathHandler} | ${`${featureName} merge request creation mutation failed`}
-      ${errorHandler}         | ${'foo'}
-    `('given an error response', ({ handler, message }) => {
-      beforeEach(() => {
-        const mockApollo = createMockApolloProvider(handler);
-        createComponent({ mockApollo });
-      });
-
-      it('should catch and emit error', async () => {
-        await wrapper.trigger('click');
-        await waitForPromises();
-        expect(wrapper.emitted('error')).toEqual([[message]]);
-        expect(findButton().props('loading')).toBe(false);
-      });
-    });
-  });
-});

spec/frontend/vue_shared/security_reports/components/manage_via_mr_spec.js

@@ -2,51 +2,44 @@ import { GlButton } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { featureToMutationMap } from 'ee_else_ce/security_configuration/components/constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import { humanize } from '~/lib/utils/text_utility';
 import { redirectTo } from '~/lib/utils/url_utility';
-import configureSast from '~/security_configuration/graphql/configure_sast.mutation.graphql';
 import ManageViaMr from '~/vue_shared/security_configuration/components/manage_via_mr.vue';
-import { REPORT_TYPE_SAST } from '~/vue_shared/security_reports/constants';
 import { buildConfigureSecurityFeatureMockFactory } from './apollo_mocks';
 
 jest.mock('~/lib/utils/url_utility');
 
 Vue.use(VueApollo);
 
+const projectPath = 'namespace/project';
+
 describe('ManageViaMr component', () => {
   let wrapper;
 
   const findButton = () => wrapper.findComponent(GlButton);
-  describe.each`
-    featureName | featureType         | mutation         | mutationId
-    ${'SAST'}   | ${REPORT_TYPE_SAST} | ${configureSast} | ${'configureSast'}
-  `('$featureType', ({ featureName, mutation, featureType, mutationId }) => {
-    const buildConfigureSecurityFeatureMock = buildConfigureSecurityFeatureMockFactory(mutationId);
-    const successHandler = async () => buildConfigureSecurityFeatureMock();
-    const noSuccessPathHandler = async () =>
-      buildConfigureSecurityFeatureMock({
-        successPath: '',
-      });
-    const errorHandler = async () =>
-      buildConfigureSecurityFeatureMock({
-        errors: ['foo'],
-      });
-    const pendingHandler = () => new Promise(() => {});
 
-    function createMockApolloProvider(handler) {
+  function createMockApolloProvider(mutation, handler) {
     const requestHandlers = [[mutation, handler]];
 
     return createMockApollo(requestHandlers);
   }
 
-    function createComponent({ mockApollo, isFeatureConfigured = false } = {}) {
+  function createComponent({
+    featureName = 'SAST',
+    featureType = 'sast',
+    isFeatureConfigured = false,
+    variant = undefined,
+    category = undefined,
+    ...options
+  } = {}) {
     wrapper = extendedWrapper(
       mount(ManageViaMr, {
-          apolloProvider: mockApollo,
         provide: {
-            projectPath: 'testProjectPath',
+          projectPath,
         },
         propsData: {
           feature: {
@@ -54,7 +47,10 @@ describe('ManageViaMr component', () => {
             type: featureType,
             configured: isFeatureConfigured,
           },
+          variant,
+          category,
         },
+        ...options,
       }),
     );
   }
@@ -63,10 +59,37 @@ describe('ManageViaMr component', () => {
     wrapper.destroy();
   });
 
+  // This component supports different report types/mutations depending on
+  // whether it's in a CE or EE context. This makes sure we are only testing
+  // the ones available in the current test context.
+  const supportedReportTypes = Object.entries(featureToMutationMap).map(
+    ([featureType, { getMutationPayload, mutationId }]) => {
+      const { mutation, variables: mutationVariables } = getMutationPayload(projectPath);
+      return [humanize(featureType), featureType, mutation, mutationId, mutationVariables];
+    },
+  );
+
+  describe.each(supportedReportTypes)(
+    '%s',
+    (featureName, featureType, mutation, mutationId, mutationVariables) => {
+      const buildConfigureSecurityFeatureMock = buildConfigureSecurityFeatureMockFactory(
+        mutationId,
+      );
+      const successHandler = jest.fn(async () => buildConfigureSecurityFeatureMock());
+      const noSuccessPathHandler = async () =>
+        buildConfigureSecurityFeatureMock({
+          successPath: '',
+        });
+      const errorHandler = async () =>
+        buildConfigureSecurityFeatureMock({
+          errors: ['foo'],
+        });
+      const pendingHandler = () => new Promise(() => {});
+
       describe('when feature is configured', () => {
         beforeEach(() => {
-        const mockApollo = createMockApolloProvider(successHandler);
-        createComponent({ mockApollo, isFeatureConfigured: true });
+          const apolloProvider = createMockApolloProvider(mutation, successHandler);
+          createComponent({ apolloProvider, featureName, featureType, isFeatureConfigured: true });
         });
 
         it('it does not render a button', () => {
@@ -76,19 +99,26 @@ describe('ManageViaMr component', () => {
 
       describe('when feature is not configured', () => {
         beforeEach(() => {
-        const mockApollo = createMockApolloProvider(successHandler);
-        createComponent({ mockApollo, isFeatureConfigured: false });
+          const apolloProvider = createMockApolloProvider(mutation, successHandler);
+          createComponent({ apolloProvider, featureName, featureType, isFeatureConfigured: false });
         });
 
         it('it does render a button', () => {
           expect(findButton().exists()).toBe(true);
         });
+
+        it('clicking on the button triggers the configure mutation', () => {
+          findButton().trigger('click');
+
+          expect(successHandler).toHaveBeenCalledTimes(1);
+          expect(successHandler).toHaveBeenCalledWith(mutationVariables);
+        });
       });
 
       describe('given a pending response', () => {
         beforeEach(() => {
-        const mockApollo = createMockApolloProvider(pendingHandler);
-        createComponent({ mockApollo });
+          const apolloProvider = createMockApolloProvider(mutation, pendingHandler);
+          createComponent({ apolloProvider, featureName, featureType });
         });
 
         it('renders spinner correctly', async () => {
@@ -101,8 +131,8 @@ describe('ManageViaMr component', () => {
 
       describe('given a successful response', () => {
         beforeEach(() => {
-        const mockApollo = createMockApolloProvider(successHandler);
-        createComponent({ mockApollo });
+          const apolloProvider = createMockApolloProvider(mutation, successHandler);
+          createComponent({ apolloProvider, featureName, featureType });
         });
 
         it('should call redirect helper with correct value', async () => {
@@ -125,8 +155,8 @@ describe('ManageViaMr component', () => {
         ${errorHandler}         | ${'foo'}
       `('given an error response', ({ handler, message }) => {
         beforeEach(() => {
-        const mockApollo = createMockApolloProvider(handler);
-        createComponent({ mockApollo });
+          const apolloProvider = createMockApolloProvider(mutation, handler);
+          createComponent({ apolloProvider, featureName, featureType });
         });
 
         it('should catch and emit error', async () => {
@@ -136,5 +166,19 @@ describe('ManageViaMr component', () => {
           expect(findButton().props('loading')).toBe(false);
         });
       });
+    },
+  );
+
+  describe('button props', () => {
+    it('passes the variant and category props to the GlButton', () => {
+      const variant = 'danger';
+      const category = 'tertiary';
+      createComponent({ variant, category });
+
+      expect(wrapper.findComponent(GlButton).props()).toMatchObject({
+        variant,
+        category,
+      });
+    });
   });
 });