Add latest changes from gitlab-org/gitlab@master

2 files changed, 48 insertions, 3 deletions

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 60cc36a634c..183deec0f10 100644
--- a/spec/frontend/security_configuration/components/training_provider_list_spec.js
+++ b/spec/frontend/security_configuration/components/training_provider_list_spec.js
@@ -4,8 +4,14 @@ 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 configureSecurityTrainingProvidersMutation from '~/security_configuration/graphql/configure_security_training_providers.mutation.graphql';
 import waitForPromises from 'helpers/wait_for_promises';
-import { securityTrainingProviders, mockResolvers } from '../mock_data';
+import {
+  securityTrainingProviders,
+  mockResolvers,
+  testProjectPath,
+  textProviderIds,
+} from '../mock_data';
 
 Vue.use(VueApollo);
 
@@ -18,6 +24,9 @@ describe('TrainingProviderList component', () => {
     mockApollo = createMockApollo([], mockResolvers);
 
     wrapper = shallowMount(TrainingProviderList, {
+      provide: {
+        projectPath: testProjectPath,
+      },
       apolloProvider: mockApollo,
     });
   };
@@ -85,4 +94,36 @@ describe('TrainingProviderList component', () => {
       });
     });
   });
+
+  describe('success mutation', () => {
+    const firstToggle = () => findToggles().at(0);
+
+    beforeEach(async () => {
+      jest.spyOn(mockApollo.defaultClient, 'mutate');
+
+      await waitForQueryToBeLoaded();
+
+      firstToggle().vm.$emit('change');
+    });
+
+    it('calls mutation when toggle is changed', () => {
+      expect(mockApollo.defaultClient.mutate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          mutation: configureSecurityTrainingProvidersMutation,
+          variables: { input: { enabledProviders: textProviderIds, fullPath: testProjectPath } },
+        }),
+      );
+    });
+
+    it.each`
+      loading  | wait     | desc
+      ${true}  | ${false} | ${'enables loading of GlToggle when mutation is called'}
+      ${false} | ${true}  | ${'disables loading of GlToggle when mutation is complete'}
+    `('$desc', async ({ loading, wait }) => {
+      if (wait) {
+        await waitForPromises();
+      }
+      expect(firstToggle().props('isLoading')).toBe(loading);
+    });
+  });
 });
diff --git a/spec/frontend/security_configuration/mock_data.js b/spec/frontend/security_configuration/mock_data.js
index cdb859c3800..b01dd1fc07b 100644
--- a/spec/frontend/security_configuration/mock_data.js
+++ b/spec/frontend/security_configuration/mock_data.js
@@ -1,13 +1,17 @@
+export const testProjectPath = 'foo/bar';
+
+export const textProviderIds = [101, 102];
+
 export const securityTrainingProviders = [
   {
-    id: 101,
+    id: textProviderIds[0],
     name: 'Kontra',
     description: 'Interactive developer security education.',
     url: 'https://application.security/',
     isEnabled: false,
   },
   {
-    id: 102,
+    id: textProviderIds[1],
     name: 'SecureCodeWarrior',
     description: 'Security training with guide and learning pathways.',
     url: 'https://www.securecodewarrior.com/',