Merge branch '249556-use-mock-apollo-client-spec' into 'master'

Use mock-apollo-provider in SAST UI tests

See merge request gitlab-org/gitlab!52897

ee/spec/frontend/security_configuration/sast/components/analyzer_configuration_spec.js

 import { mount } from '@vue/test-utils';
 import AnalyzerConfiguration from 'ee/security_configuration/sast/components/analyzer_configuration.vue';
 import DynamicFields from 'ee/security_configuration/sast/components/dynamic_fields.vue';
-import { makeAnalyzerEntities, makeEntities, makeSastCiConfiguration } from './helpers';
+import { makeAnalyzerEntities, makeEntities, makeSastCiConfiguration } from '../helpers';
 
 describe('AnalyzerConfiguration component', () => {
   let wrapper;

ee/spec/frontend/security_configuration/sast/components/app_spec.js

+import { merge } from 'lodash';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
 import { GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import SASTConfigurationApp from 'ee/security_configuration/sast/components/app.vue';
 import ConfigurationForm from 'ee/security_configuration/sast/components/configuration_form.vue';
-import { makeSastCiConfiguration } from './helpers';
+import { stripTypenames } from 'helpers/graphql_helpers';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import sastCiConfigurationQuery from 'ee/security_configuration/sast/graphql/sast_ci_configuration.query.graphql';
+import { sastCiConfigurationQueryResponse } from '../mock_data';
+
+Vue.use(VueApollo);
 
 const sastDocumentationPath = '/help/sast';
 const projectPath = 'namespace/project';
@@ -10,29 +18,29 @@ const projectPath = 'namespace/project';
 describe('SAST Configuration App', () => {
   let wrapper;
 
-  const createComponent = ({
-    stubs = {},
-    loading = true,
-    hasLoadingError = false,
-    sastCiConfiguration = null,
-  } = {}) => {
-    wrapper = shallowMount(SASTConfigurationApp, {
-      mocks: { $apollo: { loading } },
-      stubs,
-      provide: {
-        sastDocumentationPath,
-        projectPath,
-      },
-      // While setting data is usually frowned upon, it is the documented way
-      // of mocking GraphQL response data:
-      // https://docs.gitlab.com/ee/development/fe_guide/graphql.html#testing
-      data() {
-        return {
-          hasLoadingError,
-          sastCiConfiguration,
-        };
-      },
-    });
+  const pendingHandler = () => new Promise(() => {});
+  const successHandler = async () => sastCiConfigurationQueryResponse;
+  const failureHandler = async () => ({ errors: [{ message: 'some error' }] });
+  const createMockApolloProvider = (handler) =>
+    createMockApollo([[sastCiConfigurationQuery, handler]]);
+
+  const createComponent = (options) => {
+    wrapper = shallowMount(
+      SASTConfigurationApp,
+      merge(
+        {
+          // Use a function reference here so it's lazily initialized, and can
+          // be replaced with other handlers in certain tests without
+          // initialising twice.
+          apolloProvider: () => createMockApolloProvider(successHandler),
+          provide: {
+            sastDocumentationPath,
+            projectPath,
+          },
+        },
+        options,
+      ),
+    );
   };
 
   const findHeader = () => wrapper.find('header');
@@ -98,7 +106,7 @@ describe('SAST Configuration App', () => {
   describe('when loading', () => {
     beforeEach(() => {
       createComponent({
-        loading: true,
+        apolloProvider: createMockApolloProvider(pendingHandler),
       });
     });
 
@@ -118,8 +126,7 @@ describe('SAST Configuration App', () => {
   describe('when loading failed', () => {
     beforeEach(() => {
       createComponent({
-        loading: false,
-        hasLoadingError: true,
+        apolloProvider: createMockApolloProvider(failureHandler),
       });
     });
 
@@ -137,14 +144,8 @@ describe('SAST Configuration App', () => {
   });
 
   describe('when loaded', () => {
-    let sastCiConfiguration;
-
     beforeEach(() => {
-      sastCiConfiguration = makeSastCiConfiguration();
-      createComponent({
-        loading: false,
-        sastCiConfiguration,
-      });
+      createComponent();
     });
 
     it('does not display a loading spinner', () => {
@@ -156,7 +157,9 @@ describe('SAST Configuration App', () => {
     });
 
     it('passes the sastCiConfiguration to the sastCiConfiguration prop', () => {
-      expect(findConfigurationForm().props('sastCiConfiguration')).toBe(sastCiConfiguration);
+      expect(findConfigurationForm().props('sastCiConfiguration')).toEqual(
+        stripTypenames(sastCiConfigurationQueryResponse.data.project.sastCiConfiguration),
+      );
     });
 
     it('does not display an alert message', () => {

ee/spec/frontend/security_configuration/sast/components/configuration_form_spec.js

@@ -8,7 +8,7 @@ import ExpandableSection from 'ee/security_configuration/sast/components/expanda
 import configureSastMutation from 'ee/security_configuration/sast/graphql/configure_sast.mutation.graphql';
 import { redirectTo } from '~/lib/utils/url_utility';
 import * as Sentry from '~/sentry/wrapper';
-import { makeEntities, makeSastCiConfiguration } from './helpers';
+import { makeEntities, makeSastCiConfiguration } from '../helpers';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   redirectTo: jest.fn(),

ee/spec/frontend/security_configuration/sast/components/dynamic_fields_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
 import DynamicFields from 'ee/security_configuration/sast/components/dynamic_fields.vue';
-import { makeEntities } from './helpers';
+import { makeEntities } from '../helpers';
 
 describe('DynamicFields component', () => {
   let wrapper;

ee/spec/frontend/security_configuration/sast/components/utils_spec.js

@@ -4,7 +4,7 @@ import {
   toSastCiConfigurationEntityInput,
   toSastCiConfigurationAnalyzerEntityInput,
 } from 'ee/security_configuration/sast/components/utils';
-import { makeEntities, makeAnalyzerEntities } from './helpers';
+import { makeEntities, makeAnalyzerEntities } from '../helpers';
 
 describe('isValidConfigurationEntity', () => {
   const validEntities = makeEntities(3);

ee/spec/frontend/security_configuration/sast/components/helpers.js → ee/spec/frontend/security_configuration/sast/helpers.js

@@ -15,6 +15,7 @@ export const makeEntities = (count, changes) =>
     label: `label${i}`,
     type: 'string',
     value: `value${i}`,
+    size: `MEDIUM`,
     ...changes,
   }));
 

ee/spec/frontend/security_configuration/sast/mock_data.js

+import { makeEntities } from './helpers';
+
+export const sastCiConfigurationQueryResponse = {
+  data: {
+    project: {
+      sastCiConfiguration: {
+        global: {
+          nodes: makeEntities(2, { __typename: 'SastCiConfigurationEntity' }),
+          __typename: 'SastCiConfigurationEntityConnection',
+        },
+        pipeline: {
+          nodes: makeEntities(2, { __typename: 'SastCiConfigurationEntity' }),
+          __typename: 'SastCiConfigurationEntityConnection',
+        },
+        analyzers: {
+          nodes: [
+            {
+              description: 'Ruby on Rails',
+              enabled: false,
+              label: 'Brakeman',
+              name: 'brakeman',
+              variables: {
+                nodes: makeEntities(2, { __typename: 'SastCiConfigurationEntity' }),
+                __typename: 'SastCiConfigurationEntityConnection',
+              },
+              __typename: 'SastCiConfigurationAnalyzersEntity',
+            },
+            {
+              description: 'Python',
+              enabled: false,
+              label: 'Bandit',
+              name: 'bandit',
+              variables: {
+                nodes: [],
+                __typename: 'SastCiConfigurationEntityConnection',
+              },
+              __typename: 'SastCiConfigurationAnalyzersEntity',
+            },
+          ],
+          __typename: 'SastCiConfigurationAnalyzersEntityConnection',
+        },
+        __typename: 'SastCiConfiguration',
+      },
+      __typename: 'Project',
+    },
+  },
+};

spec/frontend/__helpers__/graphql_helpers.js

+/**
+ * Returns a clone of the given object with all __typename keys omitted,
+ * including deeply nested ones.
+ *
+ * Only works with JSON-serializable objects.
+ *
+ * @param {object} An object with __typename keys (e.g., a GraphQL response)
+ * @returns {object} A new object with no __typename keys
+ */
+export const stripTypenames = (object) => {
+  return JSON.parse(
+    JSON.stringify(object, (key, value) => (key === '__typename' ? undefined : value)),
+  );
+};

spec/frontend/__helpers__/graphql_helpers_spec.js

+import { stripTypenames } from './graphql_helpers';
+
+describe('stripTypenames', () => {
+  it.each`
+    input                                                  | expected
+    ${{}}                                                  | ${{}}
+    ${{ __typename: 'Foo' }}                               | ${{}}
+    ${{ bar: 'bar', __typename: 'Foo' }}                   | ${{ bar: 'bar' }}
+    ${{ bar: { __typename: 'Bar' }, __typename: 'Foo' }}   | ${{ bar: {} }}
+    ${{ bar: [{ __typename: 'Bar' }], __typename: 'Foo' }} | ${{ bar: [{}] }}
+    ${[]}                                                  | ${[]}
+    ${[{ __typename: 'Foo' }]}                             | ${[{}]}
+    ${[{ bar: [{ a: 1, __typename: 'Bar' }] }]}            | ${[{ bar: [{ a: 1 }] }]}
+  `('given $input returns $expected, with all __typename keys removed', ({ input, expected }) => {
+    const actual = stripTypenames(input);
+    expect(actual).toEqual(expected);
+    expect(input).not.toBe(actual);
+  });
+
+  it('given null returns null', () => {
+    expect(stripTypenames(null)).toEqual(null);
+  });
+});

spec/frontend/vue_shared/security_reports/security_reports_app_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import { merge } from 'lodash';
+import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import Vuex from 'vuex';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -26,8 +27,8 @@ import securityReportDownloadPathsQuery from '~/vue_shared/security_reports/quer
 
 jest.mock('~/flash');
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(VueApollo);
+Vue.use(Vuex);
 
 const SAST_COMPARISON_PATH = '/sast.json';
 const SECRET_SCANNING_COMPARISON_PATH = '/secret_detection.json';
@@ -47,7 +48,6 @@ describe('Security reports app', () => {
       SecurityReportsApp,
       merge(
         {
-          localVue,
           propsData: { ...props },
           stubs: {
             HelpIcon: true,
@@ -64,8 +64,6 @@ describe('Security reports app', () => {
     Promise.resolve({ data: securityReportDownloadPathsQueryNoArtifactsResponse });
   const failureHandler = () => Promise.resolve({ errors: [{ message: 'some error' }] });
   const createMockApolloProvider = (handler) => {
-    localVue.use(VueApollo);
-
     const requestHandlers = [[securityReportDownloadPathsQuery, handler]];
 
     return createMockApollo(requestHandlers);