1 files changed, 118 insertions, 0 deletions
diff --git a/spec/frontend/alerts_settings/components/alerts_integrations_list_spec.js b/spec/frontend/alerts_settings/components/alerts_integrations_list_spec.js
new file mode 100644
index 00000000000..c43d78a1cf3
--- /dev/null
+++ b/spec/frontend/alerts_settings/components/alerts_integrations_list_spec.js
@@ -0,0 +1,118 @@
+import { GlTable, GlIcon, GlButton } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import { useMockIntersectionObserver } from 'helpers/mock_dom_observer';
+import AlertIntegrationsList, {
+  i18n,
+} from '~/alerts_settings/components/alerts_integrations_list.vue';
+import { trackAlertIntegrationsViewsOptions } from '~/alerts_settings/constants';
+import Tracking from '~/tracking';
+
+const mockIntegrations = [
+  {
+    id: '1',
+    active: true,
+    name: 'Integration 1',
+    type: 'HTTP endpoint',
+  },
+  {
+    id: '2',
+    active: false,
+    name: 'Integration 2',
+    type: 'HTTP endpoint',
+  },
+];
+
+describe('AlertIntegrationsList', () => {
+  let wrapper;
+  const { trigger: triggerIntersection } = useMockIntersectionObserver();
+
+  function mountComponent({ data = {}, props = {} } = {}) {
+    wrapper = mount(AlertIntegrationsList, {
+      data() {
+        return { ...data };
+      },
+      propsData: {
+        integrations: mockIntegrations,
+        ...props,
+      },
+      stubs: {
+        GlIcon: true,
+        GlButton: true,
+      },
+    });
+  }
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
+  });
+
+  beforeEach(() => {
+    mountComponent();
+  });
+
+  const findTableComponent = () => wrapper.find(GlTable);
+  const findTableComponentRows = () => wrapper.find(GlTable).findAll('table tbody tr');
+  const finsStatusCell = () => wrapper.findAll('[data-testid="integration-activated-status"]');
+
+  it('renders a table', () => {
+    expect(findTableComponent().exists()).toBe(true);
+  });
+
+  it('renders an empty state when no integrations provided', () => {
+    mountComponent({ props: { integrations: [] } });
+    expect(findTableComponent().text()).toContain(i18n.emptyState);
+  });
+
+  it('renders an an edit and delete button for each integration', () => {
+    expect(findTableComponent().findAll(GlButton).length).toBe(4);
+  });
+
+  it('renders an highlighted row when a current integration is selected to edit', () => {
+    mountComponent({ data: { currentIntegration: { id: '1' } } });
+    expect(findTableComponentRows().at(0).classes()).toContain('gl-bg-blue-50');
+  });
+
+  describe('integration status', () => {
+    it('enabled', () => {
+      const cell = finsStatusCell().at(0);
+      const activatedIcon = cell.find(GlIcon);
+      expect(cell.text()).toBe(i18n.status.enabled.name);
+      expect(activatedIcon.attributes('name')).toBe('check-circle-filled');
+      expect(activatedIcon.attributes('title')).toBe(i18n.status.enabled.tooltip);
+    });
+
+    it('disabled', () => {
+      const cell = finsStatusCell().at(1);
+      const notActivatedIcon = cell.find(GlIcon);
+      expect(cell.text()).toBe(i18n.status.disabled.name);
+      expect(notActivatedIcon.attributes('name')).toBe('warning-solid');
+      expect(notActivatedIcon.attributes('title')).toBe(i18n.status.disabled.tooltip);
+    });
+  });
+
+  describe('Snowplow tracking', () => {
+    beforeEach(() => {
+      mountComponent();
+      jest.spyOn(Tracking, 'event');
+    });
+
+    it('should NOT track alert list page views when list is collapsed', () => {
+      triggerIntersection(wrapper.vm.$el, { entry: { isIntersecting: false } });
+
+      expect(Tracking.event).not.toHaveBeenCalled();
+    });
+
+    it('should track alert list page views only once when list is expanded', () => {
+      triggerIntersection(wrapper.vm.$el, { entry: { isIntersecting: true } });
+      triggerIntersection(wrapper.vm.$el, { entry: { isIntersecting: true } });
+      triggerIntersection(wrapper.vm.$el, { entry: { isIntersecting: true } });
+
+      const { category, action } = trackAlertIntegrationsViewsOptions;
+      expect(Tracking.event).toHaveBeenCalledTimes(1);
+      expect(Tracking.event).toHaveBeenCalledWith(category, action);
+    });
+  });
+});