Add latest changes from gitlab-org/gitlab@master

2 files changed, 17 insertions, 2 deletions

diff --git a/spec/frontend/alerts_settings/alerts_integrations_list_spec.js b/spec/frontend/alerts_settings/alerts_integrations_list_spec.js
index 051caf0e49d..90bb38f0c2b 100644
--- a/spec/frontend/alerts_settings/alerts_integrations_list_spec.js
+++ b/spec/frontend/alerts_settings/alerts_integrations_list_spec.js
@@ -1,5 +1,6 @@
 import { GlTable, GlIcon, GlButton } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { useMockIntersectionObserver } from 'helpers/mock_dom_observer';
 import Tracking from '~/tracking';
 import AlertIntegrationsList, {
   i18n,
@@ -23,6 +24,7 @@ const mockIntegrations = [
 
 describe('AlertIntegrationsList', () => {
   let wrapper;
+  const { trigger: triggerIntersection } = useMockIntersectionObserver();
 
   function mountComponent({ data = {}, props = {} } = {}) {
     wrapper = mount(AlertIntegrationsList, {
@@ -100,12 +102,23 @@ describe('AlertIntegrationsList', () => {
 
   describe('Snowplow tracking', () => {
     beforeEach(() => {
-      jest.spyOn(Tracking, 'event');
       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', () => {
+    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);
     });
   });
diff --git a/spec/frontend/alerts_settings/alerts_settings_wrapper_spec.js b/spec/frontend/alerts_settings/alerts_settings_wrapper_spec.js
index c24a76f1df0..7384cf9a095 100644
--- a/spec/frontend/alerts_settings/alerts_settings_wrapper_spec.js
+++ b/spec/frontend/alerts_settings/alerts_settings_wrapper_spec.js
@@ -3,6 +3,7 @@ import { mount, createLocalVue } from '@vue/test-utils';
 import createMockApollo from 'jest/helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
+import { useMockIntersectionObserver } from 'helpers/mock_dom_observer';
 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';
@@ -47,6 +48,7 @@ describe('AlertsSettingsWrapper', () => {
   let wrapper;
   let fakeApollo;
   let destroyIntegrationHandler;
+  useMockIntersectionObserver();
 
   const findLoader = () => wrapper.find(IntegrationsList).find(GlLoadingIcon);
   const findIntegrations = () => wrapper.find(IntegrationsList).findAll('table tbody tr');