1 files changed, 127 insertions, 0 deletions
diff --git a/' b/'
new file mode 100644
index 00000000000..4f09a641f60
--- /dev/null
+++ b/'
@@ -0,0 +1,127 @@
+import { shallowMount } from '@vue/test-utils';
+import Popover from '~/blob/suggest_gitlab_ci_yml/components/popover.vue';
+import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper';
+import * as utils from '~/lib/utils/common_utils';
+import { GlButton } from '@gitlab/ui';
+
+jest.mock('~/lib/utils/common_utils', () => ({
+  ...jest.requireActual('~/lib/utils/common_utils'),
+  scrollToElement: jest.fn(),
+}));
+
+const target = 'gitlab-ci-yml-selector';
+const dismissKey = '99';
+const defaultTrackLabel = 'suggest_gitlab_ci_yml';
+const commitTrackLabel = 'suggest_commit_first_project_gitlab_ci_yml';
+
+const dismissCookie = 'suggest_gitlab_ci_yml_99';
+const humanAccess = 'owner';
+
+describe('Suggest gitlab-ci.yml Popover', () => {
+  let wrapper;
+
+  function createWrapper(trackLabel) {
+    wrapper = shallowMount(Popover, {
+      propsData: {
+        target,
+        trackLabel,
+        dismissKey,
+        humanAccess,
+      },
+      stubs: {
+        GlButton,
+        GlIcon
+      }
+      slots: {
+        title: '<gl-button><gl-icon /> </gl-button>',
+      }
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when no dismiss cookie is set', () => {
+    beforeEach(() => {
+      createWrapper(defaultTrackLabel);
+    });
+
+    it('sets popoverDismissed to false', () => {
+      expect(wrapper.vm.popoverDismissed).toEqual(false);
+    });
+  });
+
+  describe('when the dismiss cookie is set', () => {
+    beforeEach(() => {
+      utils.setCookie(dismissCookie, true);
+
+      createWrapper(defaultTrackLabel);
+    });
+
+    it('sets popoverDismissed to true', () => {
+      expect(wrapper.vm.popoverDismissed).toEqual(true);
+    });
+
+    afterEach(() => {
+      utils.removeCookie(dismissCookie);
+    });
+  });
+
+  describe('tracking', () => {
+    let trackingSpy;
+
+    beforeEach(() => {
+      createWrapper(commitTrackLabel);
+      trackingSpy = mockTracking('_category_', wrapper.element, jest.spyOn);
+    });
+
+    afterEach(() => {
+      unmockTracking();
+    });
+
+    it('sends a tracking event with the expected properties for the popover being viewed', () => {
+      const expectedCategory = undefined;
+      const expectedAction = undefined;
+      const expectedLabel = 'suggest_commit_first_project_gitlab_ci_yml';
+      const expectedProperty = 'owner';
+
+      document.body.dataset.page = 'projects:blob:new';
+
+      wrapper.vm.trackOnShow();
+
+      expect(trackingSpy).toHaveBeenCalledWith(expectedCategory, expectedAction, {
+        label: expectedLabel,
+        property: expectedProperty,
+      });
+    });
+
+    it('sends a tracking event when the popover is dismissed', () => {
+      const expectedLabel = commitTrackLabel;
+      const expectedProperty = 'owner';
+      const expectedValue = '10';
+      const dismissButton = wrapper.find(GlButton);
+
+console.log(wrapper.html());
+
+      triggerEvent(dismissButton.element);
+
+      expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_button', {
+        label: expectedLabel,
+        property: expectedProperty,
+        value: expectedValue,
+      });
+    });
+  });
+
+  describe('when the popover is mounted with the trackLabel of the Confirm button popover at the bottom of the page', () => {
+    it('calls scrollToElement so that the Confirm button and popover will be in sight', () => {
+      const scrollToElementSpy = jest.spyOn(utils, 'scrollToElement');
+
+      createWrapper(commitTrackLabel);
+
+      expect(scrollToElementSpy).toHaveBeenCalled();
+    });
+  });
+});