1 files changed, 45 insertions, 10 deletions

diff --git a/spec/frontend/alerts_settings/alerts_settings_wrapper_spec.js b/spec/frontend/alerts_settings/alerts_settings_wrapper_spec.js
index 74f3aa1d995..8c289cb0f1c 100644
--- a/spec/frontend/alerts_settings/alerts_settings_wrapper_spec.js
+++ b/spec/frontend/alerts_settings/alerts_settings_wrapper_spec.js
@@ -1,17 +1,20 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import AlertsSettingsWrapper from '~/alerts_settings/components/alerts_settings_wrapper.vue';
 import AlertsSettingsFormOld from '~/alerts_settings/components/alerts_settings_form_old.vue';
 import AlertsSettingsFormNew from '~/alerts_settings/components/alerts_settings_form_new.vue';
 import IntegrationsList from '~/alerts_settings/components/alerts_integrations_list.vue';
 import { defaultAlertSettingsConfig } from './util';
+import mockIntegrations from './mocks/integrations.json';
 
-jest.mock('~/alerts_settings/services');
-
-describe('AlertsSettingsFormWrapper', () => {
+describe('AlertsSettingsWrapper', () => {
   let wrapper;
 
-  const createComponent = (data = {}, provide = {}) => {
-    wrapper = shallowMount(AlertsSettingsWrapper, {
+  const findLoader = () => wrapper.find(IntegrationsList).find(GlLoadingIcon);
+  const findIntegrations = () => wrapper.find(IntegrationsList).findAll('table tbody tr');
+
+  const createComponent = ({ data = {}, provide = {}, loading = false } = {}) => {
+    wrapper = mount(AlertsSettingsWrapper, {
       data() {
         return { ...data };
       },
@@ -20,6 +23,16 @@ describe('AlertsSettingsFormWrapper', () => {
         glFeatures: { httpIntegrationsList: false },
         ...provide,
       },
+      mocks: {
+        $apollo: {
+          query: jest.fn(),
+          queries: {
+            integrations: {
+              loading,
+            },
+          },
+        },
+      },
     });
   };
 
@@ -30,19 +43,41 @@ describe('AlertsSettingsFormWrapper', () => {
     }
   });
 
-  describe('with default values', () => {
-    it('renders alerts integrations list and old form by default', () => {
+  describe('with httpIntegrationsList feature flag disabled', () => {
+    it('renders data driven alerts integrations list and old form by default', () => {
       createComponent();
       expect(wrapper.find(IntegrationsList).exists()).toBe(true);
       expect(wrapper.find(AlertsSettingsFormOld).exists()).toBe(true);
       expect(wrapper.find(AlertsSettingsFormNew).exists()).toBe(false);
     });
+  });
 
-    it('renders alerts integrations list and new form when httpIntegrationsList feature flag is enabled', () => {
-      createComponent({}, { glFeatures: { httpIntegrationsList: true } });
+  describe('with httpIntegrationsList feature flag enabled', () => {
+    it('renders the GraphQL alerts integrations list and new form', () => {
+      createComponent({ provide: { glFeatures: { httpIntegrationsList: true } } });
       expect(wrapper.find(IntegrationsList).exists()).toBe(true);
       expect(wrapper.find(AlertsSettingsFormOld).exists()).toBe(false);
       expect(wrapper.find(AlertsSettingsFormNew).exists()).toBe(true);
     });
+
+    it('uses a loading state inside the IntegrationsList table', () => {
+      createComponent({
+        data: { integrations: {} },
+        provide: { glFeatures: { httpIntegrationsList: true } },
+        loading: true,
+      });
+      expect(wrapper.find(IntegrationsList).exists()).toBe(true);
+      expect(findLoader().exists()).toBe(true);
+    });
+
+    it('renders the IntegrationsList table using the API data', () => {
+      createComponent({
+        data: { integrations: { list: mockIntegrations } },
+        provide: { glFeatures: { httpIntegrationsList: true } },
+        loading: false,
+      });
+      expect(findLoader().exists()).toBe(false);
+      expect(findIntegrations()).toHaveLength(mockIntegrations.length);
+    });
   });
 });