Add latest changes from gitlab-org/gitlab@master

3 files changed, 71 insertions, 10 deletions

diff --git a/spec/frontend/security_configuration/components/app_spec.js b/spec/frontend/security_configuration/components/app_spec.js
index 759844b941a..87b1f5f65d0 100644
--- a/spec/frontend/security_configuration/components/app_spec.js
+++ b/spec/frontend/security_configuration/components/app_spec.js
@@ -1,14 +1,13 @@
 import { GlTab } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
 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 SecurityConfigurationApp, {
-  i18n,
-  TRAINING_PROVIDERS,
-} from '~/security_configuration/components/app.vue';
+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';
 import {
@@ -30,6 +29,8 @@ 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';
@@ -38,10 +39,21 @@ 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,
@@ -49,9 +61,11 @@ describe('App component', () => {
     ...propsData
   }) => {
     userCalloutDismissSpy = jest.fn();
+    mockApollo = createMockApollo([], mockResolvers);
 
     wrapper = extendedWrapper(
       mount(SecurityConfigurationApp, {
+        apolloProvider: mockApollo,
         propsData,
         provide: {
           upgradePath,
@@ -134,10 +148,14 @@ describe('App component', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    mockApollo = null;
   });
 
   describe('basic structure', () => {
     beforeEach(() => {
+      mockSecurityTrainingProvidersData = jest.fn();
+      mockSecurityTrainingProvidersData.mockResolvedValue(securityTrainingProviders);
+
       createComponent({
         augmentedSecurityFeatures: securityFeaturesMock,
         augmentedComplianceFeatures: complianceFeaturesMock,
@@ -186,8 +204,9 @@ describe('App component', () => {
       expect(findSecurityViewHistoryLink().exists()).toBe(false);
     });
 
-    it('renders training provider list with correct props', () => {
-      expect(findTrainingProviderList().props('providers')).toEqual(TRAINING_PROVIDERS);
+    it('renders training provider list with correct props', async () => {
+      await waitForPromises();
+      expect(findTrainingProviderList().props('providers')).toEqual(securityTrainingProviders);
     });
   });
 
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 1169a977d44..2d5cc0e80c9 100644
--- a/spec/frontend/security_configuration/components/training_provider_list_spec.js
+++ b/spec/frontend/security_configuration/components/training_provider_list_spec.js
@@ -1,10 +1,10 @@
-import { GlLink, GlToggle, GlCard } from '@gitlab/ui';
+import { GlLink, GlToggle, GlCard, GlSkeletonLoader } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import TrainingProviderList from '~/security_configuration/components/training_provider_list.vue';
-import { TRAINING_PROVIDERS } from '~/security_configuration/components/app.vue';
+import { securityTrainingProviders } from '../mock_data';
 
 const DEFAULT_PROPS = {
-  providers: TRAINING_PROVIDERS,
+  providers: securityTrainingProviders,
 };
 
 describe('TrainingProviderList component', () => {
@@ -22,6 +22,7 @@ describe('TrainingProviderList component', () => {
   const findCards = () => wrapper.findAllComponents(GlCard);
   const findLinks = () => wrapper.findAllComponents(GlLink);
   const findToggles = () => wrapper.findAllComponents(GlToggle);
+  const findLoader = () => wrapper.findComponent(GlSkeletonLoader);
 
   afterEach(() => {
     wrapper.destroy();
@@ -57,4 +58,23 @@ describe('TrainingProviderList component', () => {
       });
     });
   });
+
+  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);
+    });
+  });
 });
diff --git a/spec/frontend/security_configuration/mock_data.js b/spec/frontend/security_configuration/mock_data.js
new file mode 100644
index 00000000000..b70259cef8d
--- /dev/null
+++ b/spec/frontend/security_configuration/mock_data.js
@@ -0,0 +1,22 @@
+export const securityTrainingProviders = [
+  {
+    id: 101,
+    name: 'Kontra',
+    description: 'Interactive developer security education.',
+    url: 'https://application.security/',
+    isEnabled: false,
+  },
+  {
+    id: 102,
+    name: 'SecureCodeWarrior',
+    description: 'Security training with guide and learning pathways.',
+    url: 'https://www.securecodewarrior.com/',
+    isEnabled: true,
+  },
+];
+
+export const securityTrainingProvidersResponse = {
+  data: {
+    securityTrainingProviders,
+  },
+};