Commit 3d999ccd authored by Paul Slaughter's avatar Paul Slaughter

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

Refactor submission of tour feedback

See merge request gitlab-org/gitlab!16150
parents ab6993ca 9985bd8f
......@@ -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"
......
......@@ -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,
})
"
>
......
......@@ -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">
......
......@@ -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);
......
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', () => {
......
......@@ -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', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment