1 files changed, 69 insertions, 8 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 309a9cd4cd6..184c16fda6e 100644
--- a/spec/frontend/security_configuration/components/training_provider_list_spec.js
+++ b/spec/frontend/security_configuration/components/training_provider_list_spec.js
@@ -36,7 +36,6 @@ import {
   testProjectPath,
   testProviderIds,
   testProviderName,
-  tempProviderLogos,
 } from '../mock_data';
 
 Vue.use(VueApollo);
@@ -54,6 +53,31 @@ const TEST_TRAINING_PROVIDERS_ALL_ENABLED = getSecurityTrainingProvidersData({
 });
 const TEST_TRAINING_PROVIDERS_DEFAULT = TEST_TRAINING_PROVIDERS_ALL_DISABLED;
 
+const TEMP_PROVIDER_LOGOS = {
+  Kontra: {
+    svg: '<svg>Kontra</svg>',
+  },
+  'Secure Code Warrior': {
+    svg: '<svg>Secure Code Warrior</svg>',
+  },
+};
+jest.mock('~/security_configuration/components/constants', () => {
+  return {
+    TEMP_PROVIDER_URLS: jest.requireActual('~/security_configuration/components/constants')
+      .TEMP_PROVIDER_URLS,
+    // NOTE: Jest hoists all mocks to the top so we can't use TEMP_PROVIDER_LOGOS
+    // here directly.
+    TEMP_PROVIDER_LOGOS: {
+      Kontra: {
+        svg: '<svg>Kontra</svg>',
+      },
+      'Secure Code Warrior': {
+        svg: '<svg>Secure Code Warrior</svg>',
+      },
+    },
+  };
+});
+
 describe('TrainingProviderList component', () => {
   let wrapper;
   let apolloProvider;
@@ -76,7 +100,7 @@ describe('TrainingProviderList component', () => {
     apolloProvider = createMockApollo(mergedHandlers);
   };
 
-  const createComponent = () => {
+  const createComponent = (props = {}) => {
     wrapper = shallowMountExtended(TrainingProviderList, {
       provide: {
         projectFullPath: testProjectPath,
@@ -84,6 +108,10 @@ describe('TrainingProviderList component', () => {
       directives: {
         GlTooltip: createMockDirective(),
       },
+      propsData: {
+        securityTrainingEnabled: true,
+        ...props,
+      },
       apolloProvider,
     });
   };
@@ -99,6 +127,7 @@ describe('TrainingProviderList component', () => {
   const findLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findErrorAlert = () => wrapper.findComponent(GlAlert);
   const findLogos = () => wrapper.findAllByTestId('provider-logo');
+  const findUnavailableTexts = () => wrapper.findAllByTestId('unavailable-text');
 
   const toggleFirstProvider = () => findFirstToggle().vm.$emit('change', testProviderIds[0]);
 
@@ -212,7 +241,6 @@ describe('TrainingProviderList component', () => {
 
     describe('provider logo', () => {
       beforeEach(async () => {
-        wrapper.vm.$options.TEMP_PROVIDER_LOGOS = tempProviderLogos;
         await waitForQueryToBeLoaded();
       });
 
@@ -226,9 +254,9 @@ describe('TrainingProviderList component', () => {
         expect(findLogos().at(provider).attributes('role')).toBe('presentation');
       });
 
-      it.each(providerIndexArray)('renders the svg content for provider %s', (provider) => {
+      it.each(providerIndexArray)('renders the svg content for provider %s', async (provider) => {
         expect(findLogos().at(provider).html()).toContain(
-          tempProviderLogos[testProviderName[provider]].svg,
+          TEMP_PROVIDER_LOGOS[testProviderName[provider]].svg,
         );
       });
     });
@@ -351,6 +379,41 @@ describe('TrainingProviderList component', () => {
         );
       });
     });
+
+    describe('non ultimate users', () => {
+      beforeEach(async () => {
+        createComponent({
+          securityTrainingEnabled: false,
+        });
+        await waitForQueryToBeLoaded();
+      });
+
+      it('displays unavailable text', () => {
+        findUnavailableTexts().wrappers.forEach((unavailableText) => {
+          expect(unavailableText.text()).toBe(TrainingProviderList.i18n.unavailableText);
+        });
+      });
+
+      it('has disabled state for toggle', () => {
+        findToggles().wrappers.forEach((toggle) => {
+          expect(toggle.props('disabled')).toBe(true);
+        });
+      });
+
+      it('has disabled state for radio', () => {
+        findPrimaryProviderRadios().wrappers.forEach((radio) => {
+          expect(radio.attributes('disabled')).toBeTruthy();
+        });
+      });
+
+      it('adds backgrounds color', () => {
+        findCards().wrappers.forEach((card) => {
+          expect(card.props('bodyClass')).toMatchObject({
+            'gl-bg-gray-10': true,
+          });
+        });
+      });
+    });
   });
 
   describe('primary provider settings', () => {
@@ -442,7 +505,7 @@ describe('TrainingProviderList component', () => {
       ${'backend error'} | ${jest.fn().mockReturnValue(dismissUserCalloutErrorResponse)}
       ${'network error'} | ${jest.fn().mockRejectedValue()}
     `('when dismissing the callout and a "$errorType" happens', ({ mutationHandler }) => {
-      beforeEach(async () => {
+      it('logs the error to sentry', async () => {
         jest.spyOn(Sentry, 'captureException').mockImplementation();
 
         createApolloProvider({
@@ -460,9 +523,7 @@ describe('TrainingProviderList component', () => {
 
         await waitForQueryToBeLoaded();
         toggleFirstProvider();
-      });
 
-      it('logs the error to sentry', async () => {
         expect(Sentry.captureException).not.toHaveBeenCalled();
 
         await waitForMutationToBeLoaded();