Add latest changes from gitlab-org/gitlab@master

3 files changed, 50 insertions, 56 deletions

diff --git a/spec/frontend/security_configuration/components/app_spec.js b/spec/frontend/security_configuration/components/app_spec.js
index 87b1f5f65d0..0a2b18caf25 100644
--- a/spec/frontend/security_configuration/components/app_spec.js
+++ b/spec/frontend/security_configuration/components/app_spec.js
@@ -1,12 +1,10 @@
 import { GlTab } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
-import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
 import stubChildren from 'helpers/stub_children';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import createMockApollo from 'helpers/mock_apollo_helper';
 import SecurityConfigurationApp, { i18n } from '~/security_configuration/components/app.vue';
 import AutoDevopsAlert from '~/security_configuration/components/auto_dev_ops_alert.vue';
 import AutoDevopsEnabledAlert from '~/security_configuration/components/auto_dev_ops_enabled_alert.vue';
@@ -29,8 +27,6 @@ import {
   REPORT_TYPE_LICENSE_COMPLIANCE,
   REPORT_TYPE_SAST,
 } from '~/vue_shared/security_reports/constants';
-import waitForPromises from 'helpers/wait_for_promises';
-import { securityTrainingProviders } from '../mock_data';
 
 const upgradePath = '/upgrade';
 const autoDevopsHelpPagePath = '/autoDevopsHelpPagePath';
@@ -39,21 +35,10 @@ const gitlabCiHistoryPath = 'test/historyPath';
 const projectPath = 'namespace/project';
 
 useLocalStorageSpy();
-Vue.use(VueApollo);
 
 describe('App component', () => {
   let wrapper;
   let userCalloutDismissSpy;
-  let mockApollo;
-  let mockSecurityTrainingProvidersData;
-
-  const mockResolvers = {
-    Query: {
-      securityTrainingProviders() {
-        return securityTrainingProviders;
-      },
-    },
-  };
 
   const createComponent = ({
     shouldShowCallout = true,
@@ -61,11 +46,9 @@ describe('App component', () => {
     ...propsData
   }) => {
     userCalloutDismissSpy = jest.fn();
-    mockApollo = createMockApollo([], mockResolvers);
 
     wrapper = extendedWrapper(
       mount(SecurityConfigurationApp, {
-        apolloProvider: mockApollo,
         propsData,
         provide: {
           upgradePath,
@@ -148,14 +131,10 @@ describe('App component', () => {
 
   afterEach(() => {
     wrapper.destroy();
-    mockApollo = null;
   });
 
   describe('basic structure', () => {
     beforeEach(() => {
-      mockSecurityTrainingProvidersData = jest.fn();
-      mockSecurityTrainingProvidersData.mockResolvedValue(securityTrainingProviders);
-
       createComponent({
         augmentedSecurityFeatures: securityFeaturesMock,
         augmentedComplianceFeatures: complianceFeaturesMock,
@@ -204,9 +183,8 @@ describe('App component', () => {
       expect(findSecurityViewHistoryLink().exists()).toBe(false);
     });
 
-    it('renders training provider list with correct props', async () => {
-      await waitForPromises();
-      expect(findTrainingProviderList().props('providers')).toEqual(securityTrainingProviders);
+    it('renders TrainingProviderList component', () => {
+      expect(findTrainingProviderList().exists()).toBe(true);
     });
   });
 
diff --git a/spec/frontend/security_configuration/components/training_provider_list_spec.js b/spec/frontend/security_configuration/components/training_provider_list_spec.js
index 2d5cc0e80c9..60cc36a634c 100644
--- a/spec/frontend/security_configuration/components/training_provider_list_spec.js
+++ b/spec/frontend/security_configuration/components/training_provider_list_spec.js
@@ -1,43 +1,66 @@
 import { GlLink, GlToggle, GlCard, GlSkeletonLoader } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createMockApollo from 'helpers/mock_apollo_helper';
 import TrainingProviderList from '~/security_configuration/components/training_provider_list.vue';
-import { securityTrainingProviders } from '../mock_data';
+import waitForPromises from 'helpers/wait_for_promises';
+import { securityTrainingProviders, mockResolvers } from '../mock_data';
 
-const DEFAULT_PROPS = {
-  providers: securityTrainingProviders,
-};
+Vue.use(VueApollo);
 
 describe('TrainingProviderList component', () => {
   let wrapper;
+  let mockApollo;
+  let mockSecurityTrainingProvidersData;
+
+  const createComponent = () => {
+    mockApollo = createMockApollo([], mockResolvers);
 
-  const createComponent = (props = {}) => {
     wrapper = shallowMount(TrainingProviderList, {
-      propsData: {
-        ...DEFAULT_PROPS,
-        ...props,
-      },
+      apolloProvider: mockApollo,
     });
   };
 
+  const waitForQueryToBeLoaded = () => waitForPromises();
+
   const findCards = () => wrapper.findAllComponents(GlCard);
   const findLinks = () => wrapper.findAllComponents(GlLink);
   const findToggles = () => wrapper.findAllComponents(GlToggle);
   const findLoader = () => wrapper.findComponent(GlSkeletonLoader);
 
+  beforeEach(() => {
+    mockSecurityTrainingProvidersData = jest.fn();
+    mockSecurityTrainingProvidersData.mockResolvedValue(securityTrainingProviders);
+
+    createComponent();
+  });
+
   afterEach(() => {
     wrapper.destroy();
+    mockApollo = null;
+  });
+
+  describe('when loading', () => {
+    it('shows the loader', () => {
+      expect(findLoader().exists()).toBe(true);
+    });
+
+    it('does not show the cards', () => {
+      expect(findCards().exists()).toBe(false);
+    });
   });
 
   describe('basic structure', () => {
-    beforeEach(() => {
-      createComponent();
+    beforeEach(async () => {
+      await waitForQueryToBeLoaded();
     });
 
     it('renders correct amount of cards', () => {
-      expect(findCards()).toHaveLength(DEFAULT_PROPS.providers.length);
+      expect(findCards()).toHaveLength(securityTrainingProviders.length);
     });
 
-    DEFAULT_PROPS.providers.forEach(({ name, description, url, isEnabled }, index) => {
+    securityTrainingProviders.forEach(({ name, description, url, isEnabled }, index) => {
       it(`shows the name for card ${index}`, () => {
         expect(findCards().at(index).text()).toContain(name);
       });
@@ -56,25 +79,10 @@ describe('TrainingProviderList component', () => {
       it(`shows the toggle with the correct value for card ${index}`, () => {
         expect(findToggles().at(index).props('value')).toEqual(isEnabled);
       });
-    });
-  });
-
-  describe('loading', () => {
-    beforeEach(() => {
-      createComponent({ loading: true });
-    });
 
-    it('shows the loader', () => {
-      expect(findLoader().exists()).toBe(true);
-    });
-
-    it('does not show the cards', () => {
-      expect(findCards().exists()).toBe(false);
-    });
-
-    it('does not show loader when not loading', () => {
-      createComponent({ loading: false });
-      expect(findLoader().exists()).toBe(false);
+      it('does not show loader when query is populated', () => {
+        expect(findLoader().exists()).toBe(false);
+      });
     });
   });
 });
diff --git a/spec/frontend/security_configuration/mock_data.js b/spec/frontend/security_configuration/mock_data.js
index b70259cef8d..cdb859c3800 100644
--- a/spec/frontend/security_configuration/mock_data.js
+++ b/spec/frontend/security_configuration/mock_data.js
@@ -20,3 +20,11 @@ export const securityTrainingProvidersResponse = {
     securityTrainingProviders,
   },
 };
+
+export const mockResolvers = {
+  Query: {
+    securityTrainingProviders() {
+      return securityTrainingProviders;
+    },
+  },
+};