Merge branch 'refactor-onboarding-popover-event' into 'master'

Refactor submission of tour feedback

See merge request gitlab-org/gitlab!16150

ee/app/assets/javascripts/onboarding/onboarding_helper/components/app.vue

@@ -144,7 +144,6 @@ export default {
         redirectPath,
         nextPart,
         dismissPopover,
-        feedbackResult,
         showFeedbackTourContent,
       } = button;
       const helpContentItems = this.stepContent
@@ -155,15 +154,6 @@ export default {
         helpContentItems.length > 1 &&
         this.helpContentIndex < helpContentItems.length - 1;
 
-      // track feedback
-      if (feedbackResult) {
-        Tracking.event(TRACKING_CATEGORY, 'click_link', {
-          label: 'feedback',
-          property: 'feedback_result',
-          value: feedbackResult,
-        });
-      }
-
       // display feedback content after user hits the exit button
       if (showFeedbackTourContent) {
         this.handleFeedbackTourContent(true);
@@ -213,6 +203,22 @@ export default {
 
       this.showActionPopover();
     },
+    handleFeedbackButton(button) {
+      const { feedbackResult } = button;
+
+      // track feedback
+      if (feedbackResult) this.trackFeedback(feedbackResult);
+
+      // display exit tour content
+      this.handleShowExitTourContent(true);
+    },
+    trackFeedback(feedbackResult) {
+      Tracking.event(TRACKING_CATEGORY, 'click_link', {
+        label: 'feedback',
+        property: 'feedback_result',
+        value: feedbackResult,
+      });
+    },
     handleShowExitTourContent(showExitTour) {
       Tracking.event(TRACKING_CATEGORY, 'click_link', {
         label: this.getTrackingLabel(),
@@ -262,6 +268,7 @@ export default {
       :dismiss-popover="dismissPopover"
       :golden-tanuki-svg-path="goldenTanukiSvgPath"
       @clickPopoverButton="handleClickPopoverButton"
+      @clickFeedbackButton="handleFeedbackButton"
       @restartStep="handleRestartStep"
       @skipStep="handleSkipStep"
       @showFeedbackContent="handleFeedbackTourContent"

ee/app/assets/javascripts/onboarding/onboarding_helper/components/help_content_popover.vue

@@ -38,6 +38,9 @@ export default {
     callButtonAction(button) {
       this.$emit('clickActionButton', button);
     },
+    submitFeedback(button) {
+      this.$emit('clickFeedbackButton', button);
+    },
   },
 };
 </script>
@@ -75,10 +78,8 @@ export default {
             v-for="feedbackValue in helpContent.feedbackSize"
             :key="feedbackValue"
             @click="
-              callButtonAction({
+              submitFeedback({
                 feedbackResult: feedbackValue,
-                showExitTourContent: true,
-                exitTour: true,
               })
             "
           >

ee/app/assets/javascripts/onboarding/onboarding_helper/components/onboarding_helper.vue

@@ -138,6 +138,9 @@ export default {
     callButtonAction(button) {
       this.$emit('clickPopoverButton', button);
     },
+    submitFeedback(button) {
+      this.$emit('clickFeedbackButton', button);
+    },
   },
 };
 </script>
@@ -158,6 +161,7 @@ export default {
       :show="showPopover"
       :disabled="popoverDismissed"
       @clickActionButton="callButtonAction"
+      @clickFeedbackButton="submitFeedback"
     />
     <div class="d-flex align-items-center cursor-pointer">
       <div class="avatar s48 mr-1 d-flex">

ee/spec/javascripts/onboarding/onboarding_helper/components/app_spec.js

@@ -4,6 +4,7 @@ import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper
 import eventHub from 'ee/onboarding/onboarding_helper/event_hub';
 import createStore from 'ee/onboarding/onboarding_helper/store';
 import actionPopoverUtils from 'ee/onboarding/onboarding_helper/action_popover_utils';
+import Tracking from '~/tracking';
 import { mockTourData } from '../mock_data';
 
 describe('User onboarding helper app', () => {
@@ -306,6 +307,32 @@ describe('User onboarding helper app', () => {
       });
     });
 
+    describe('handleFeedbackButton', () => {
+      beforeEach(() => {
+        spyOn(Tracking, 'event');
+        spyOn(vm.$store, 'dispatch');
+      });
+
+      it('tracks feedback and shows the exit tour content', () => {
+        vm.handleFeedbackButton({ feedbackResult: 1 });
+
+        expect(Tracking.event).toHaveBeenCalledWith('onboarding', 'click_link', {
+          label: 'feedback',
+          property: 'feedback_result',
+          value: 1,
+        });
+
+        expect(vm.$store.dispatch).toHaveBeenCalledWith('setExitTour', true);
+      });
+
+      it('shows the exit tour content but does not track feedback', () => {
+        vm.handleFeedbackButton({ feedbackResult: null });
+
+        expect(Tracking.event).not.toHaveBeenCalledWith();
+        expect(vm.$store.dispatch).toHaveBeenCalledWith('setExitTour', true);
+      });
+    });
+
     describe('showExitTourContent', () => {
       it('sets the "dismissPopover" prop to false', () => {
         vm.showExitTourContent(true);

ee/spec/javascripts/onboarding/onboarding_helper/components/help_content_popover_spec.js

 import component from 'ee/onboarding/onboarding_helper/components/help_content_popover.vue';
 import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 
 describe('User onboarding help content popover', () => {
   let wrapper;
@@ -18,6 +19,17 @@ describe('User onboarding help content popover', () => {
     disabled: false,
   };
 
+  const feedbackContent = {
+    text: 'some help content',
+    feedbackButtons: true,
+    feedbackSize: 5,
+  };
+
+  const feedbackProps = {
+    ...defaultProps,
+    helpContent: feedbackContent,
+  };
+
   function createComponent(propsData) {
     wrapper = shallowMount(component, { propsData });
   }
@@ -38,6 +50,18 @@ describe('User onboarding help content popover', () => {
         ]);
       });
     });
+
+    describe('submitFeedback', () => {
+      it('emits clickFeedbackButton when called', () => {
+        createComponent(feedbackProps);
+
+        wrapper.find(GlButton).vm.$emit('click');
+
+        expect(wrapper.emittedByOrder()).toEqual([
+          { name: 'clickFeedbackButton', args: [{ feedbackResult: 1 }] },
+        ]);
+      });
+    });
   });
 
   describe('template', () => {

ee/spec/javascripts/onboarding/onboarding_helper/components/onboarding_helper_spec.js

@@ -239,6 +239,16 @@ describe('User onboarding tour parts list', () => {
         expect(wrapper.emittedByOrder()).toEqual([{ name: 'clickPopoverButton', args: [button] }]);
       });
     });
+
+    describe('submitFeedback', () => {
+      it('emits the "clickFeedbackButton" event when feedback on tour is clicked', () => {
+        const button = defaultProps.helpContent.buttons[0];
+
+        wrapper.vm.submitFeedback(button);
+
+        expect(wrapper.emittedByOrder()).toEqual([{ name: 'clickFeedbackButton', args: [button] }]);
+      });
+    });
   });
 
   describe('template', () => {