Merge pull request #635 from Safelite/defect/CSR-705

CSR-705 value logging masking type

src/common-components/button-question/button-question.vue

@@ -36,6 +36,7 @@
               data-test="button"
               :validationRules="validationRules"
               :class="[suppressError ? 'alertError' : '']"
+              :valueToLogType="valueToLogType"
             />
             <!-- For nested questions --> 
             <transition name="fade" mode="out-in">
@@ -91,6 +92,7 @@ export default {
     validationRules: String,
     suppressError: Boolean,
     useTextForValue: Boolean,
+    valueToLogType: String,
   },
   computed: {
     formattedGroupName() {

src/constants/analytics.js

@@ -29,5 +29,8 @@ const GaLabels = {
   ADDRESS_LOOKUP: 'Address_Look_up', 
 };
 
+const ValueToLogTypes = {
+  LAST_5: "last_5",
+};
 
-export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents};
+export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes };

src/helpers/unit-test-helper.js

@@ -7,7 +7,7 @@ import { cookieNames } from "@/constants/cookie-names";
 import { Form } from "vee-validate";
 import baseMixin from "@/mixins/base-mixin";
 import { getCookieDomainValue } from "@/helpers/heritage-integration/cookie-helper";
-import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
+import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes } from "@/constants/analytics";
 import { queryStrings } from "@/constants/query-strings";
 import { routerParams } from "@/router/router-constants/router-params";
 
@@ -48,6 +48,7 @@ export function getMountOptions(mockData) {
   mocks.GaActions = GaActions;
   mocks.GaLabels = GaLabels;
   mocks.GaEvents = GaEvents;
+  mocks.ValueToLogTypes = ValueToLogTypes;
   mocks.queryStrings = queryStrings;
   mocks.routerParams = routerParams;
 

src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js

@@ -1,5 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
+import { ValueToLogTypes } from "@/constants/analytics";
+ 
 
 describe("addressVehiclesQuestion.vue", () => {
 
@@ -54,9 +56,15 @@ const mockMixin = {
             return 'FoundWindshieldTestReturn';
           }
           return null;
-        }),
-        vehicles: jest.fn(() => {
-            return [{ vehicle: "test" }];
-          })
-    }
+      }),
+      vehicles: jest.fn(() => {
+          return [{ vehicle: "test" }];
+      })
+    },
+    computed: {
+      ValueToLogTypes() {
+        return ValueToLogTypes;
+      }
+    },
+
   }

src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue

@@ -8,6 +8,7 @@
     v-model="selectedVehicleVinAsArray"
     isRequired
     :validation-rules="validationRules"
+    :valueToLogType="ValueToLogTypes.LAST_5"
   />
   <alert ref="differentVehicleAlert"
     v-if="isCarIdDifferent"

src/mixins/analytics-mixin.js

@@ -2,7 +2,7 @@ import { storeActions } from "@/constants/store-actions";
 import { setCookieProperties, getDeviceIdValue, getSessionIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
 import { queryStrings } from "@/constants/query-strings";
 import { experimentSettings } from "@/constants/experiments";
-import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
+import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes } from "@/constants/analytics";
 import { cookieNames } from "@/constants/cookie-names";
 
 import baseMixin from "@/mixins/base-mixin";
@@ -42,13 +42,14 @@ export default {
       baseMixin.methods.dispatchStoreAction(storeActions.LOG_CUSTOM_EVENT, payload, false);
     },
 
-    pushEventToGA(category, action, label, pushToLogApp = false) {
+    pushEventToGA(category, action, label, pushToLogApp = false, valueToLogType = null) {
       const currentPageName = getPageNameByQueryString();
+      const labelToLog = getValueToLog(label, valueToLogType);
       const eventToBePushed = {
         'event': GaEvents.GENERIC_EVENT,
         'category': category,
         'action': action,
-        'label': label,
+        'label': labelToLog,
         'value': undefined,
         'path': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`
       }
@@ -56,7 +57,7 @@ export default {
       pushToDataLayerIfDefined(eventToBePushed);
 
       if (pushToLogApp) {
-          this.logCustomEvent(category, action, label, undefined); 
+          this.logCustomEvent(category, action, labelToLog, undefined); 
       }
 
     },
@@ -97,7 +98,7 @@ export default {
         pushToDataLayerIfDefined(experimentWithDimension);
       });
     },
-    
+
     prependActionToMethod(object, method, actionToPrepend) {
       const baseMethodName = method.name.startsWith('bound ') ? method.name.substring(6) : method.name ; 
       const baseMethod = object[baseMethodName]; 
@@ -145,6 +146,9 @@ export default {
     },
     GaLabels() {
       return GaLabels;
+    },
+    ValueToLogTypes() {
+      return ValueToLogTypes;
     }
   },
 };
@@ -163,4 +167,11 @@ function getPageNameByQueryString() {
   } else {
     return '';
   }
+}
+
+function getValueToLog(value, valueToLogType) {
+  if (valueToLogType != null && valueToLogType === ValueToLogTypes.LAST_5 ) {
+    return value.slice(-5);
+  }
+  return value;
 }

src/mixins/analytics-mixin.spec.js

@@ -1,7 +1,7 @@
 import analyticsMixin from "@/mixins/analytics-mixin";
 import { setupMocksForJsFiles, setupCookies } from "@/helpers/unit-test-helper.js";
 import { storeActions } from "@/constants/store-actions";
-import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics";
+import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes } from "@/constants/analytics";
 
 describe("analyticsMixin.js", () => {
   test("logPageView: calls dispatch with type and payload", () => {
@@ -39,21 +39,71 @@ describe("analyticsMixin.js", () => {
     expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
   });
 
-  test("pushEventToGA, should call logEvent too", () => {
+  test("pushEventToGA, should call dataLayer push and logCustomEvent too", () => {
     // Arrange
+    window.dataLayer = [];
     const mockData = {
       actionList: [{
         actionName: storeActions.LOG_CUSTOM_EVENT
       }],
     }
     const mocks = setupMocksForJsFiles(mockData);
+    var mockDataLayer = [];
+    mockDataLayer.push({
+      event: 'event',
+      category: 'category',
+      action: 'action',
+      label: 'label',
+      value: undefined,
+      path: '/fmg/?fmgPage='
+   });
 
     // Act
     analyticsMixin.methods.pushEventToGA('category', 'action', 'label', true);
 
     // Assert
+    expect(mockDataLayer).toEqual(expect.arrayContaining(window.dataLayer));
     expect(mocks.baseMixin.methods.dispatchStoreAction).toBeCalled();
+  });
 
+  test("pushEventToGA, should call dataLayer push and ValueToLogTypes.LAST_5 only logs last 5 of label", () => {
+    // Arrange
+    window.dataLayer = [];
+    var expectedDataLayer = [];
+    expectedDataLayer.push({
+      event: 'event',
+      category: 'category',
+      action: 'action',
+      label: '33333',
+      value: undefined,
+      path: '/fmg/?fmgPage='
+   });
+
+    // Act
+    analyticsMixin.methods.pushEventToGA('category', 'action', '1111122222333333', false, ValueToLogTypes.LAST_5);
+
+    // Assert
+    expect(expectedDataLayer).toEqual(expect.arrayContaining(window.dataLayer));
+  });
+
+  test("pushEventToGA, should call dataLayer push and ValueToLogTypes.LAST_5 logs only the last 3 characters for a 3 character string", () => {
+    // Arrange
+    window.dataLayer = [];
+    var expectedDataLayer = [];
+    expectedDataLayer.push({
+      event: 'event',
+      category: 'category',
+      action: 'action',
+      label: '111',
+      value: undefined,
+      path: '/fmg/?fmgPage='
+   });
+
+    // Act
+    analyticsMixin.methods.pushEventToGA('category', 'action', '111', false, ValueToLogTypes.LAST_5);
+
+    // Assert
+    expect(expectedDataLayer).toEqual(expect.arrayContaining(window.dataLayer));
   });
 
   test("Experiments, should push to dataLayer with default Google Custom Dimension Index", () => {

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -78,6 +78,7 @@ export default {
     validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
+    valueToLogType: String,
   },
   data() {
     return {
@@ -116,7 +117,7 @@ export default {
           this.handleCheckChange();
       }
       
-      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
     },
     handleCheckChange() {
       const emitEvent = {

src/ux-components/list-button/list-button.vue

@@ -74,10 +74,12 @@ export default {
     // Field initial value
       type: [String, Number],
       default: "",
-    },
+      },
+    
     validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
+    valueToLogType: String,
   },
   data() {
     return {
@@ -111,7 +113,7 @@ export default {
         this.displayLoader();
         this.handleCheckChange();
       }
-      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
     },
     handleCheckChange() {
       const emitEvent = {

src/ux-components/list-card/list-card.vue

@@ -88,6 +88,7 @@ export default {
     validationRules: String,
     selectedValues: [Array, String],
     hasError: Boolean,
+    valueToLogType: String,
   },
   data() {
     return {
@@ -146,7 +147,7 @@ export default {
         this.handleCheckChange();
       }
       
-      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true);
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
     },
     handleCheckChange() {
       const emitEvent = {

src/ux-components/radio/radio.spec.js

@@ -1,6 +1,7 @@
 import { shallowMount } from "@vue/test-utils";
 import radio from "./radio";
 import { nextTick } from "vue";
+import { GaActions } from "@/constants/analytics";
 
 describe("radio.vue", () => {
   it("Should return group name", async () => {
@@ -64,6 +65,13 @@ describe("radio.vue", () => {
   it("Should emit button value on click", async () => {
     // Act
     const wrapper = shallowMount(radio, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         buttonLabel: "Windshield",
         value: "List Card Checkbox",
@@ -77,12 +85,20 @@ describe("radio.vue", () => {
     });
     wrapper.vm.handleCheckChange();
     // Assert
-    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: false}]);
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: false}]);;
+    expect(wrapper.vm.pushEventToGA).toHaveBeenCalled();
   });
 
   it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
     // Act
     const wrapper = shallowMount(radio, {
+      global: {
+        mocks: {
+          '$route': { query: { fmgPage: 'page-name' } },
+          GaActions: GaActions,
+          pushEventToGA: jest.fn(),
+        }
+      },
       propsData: {
         buttonLabel: "Windshield",
         buttonID: "List Card Checkbox",

src/ux-components/radio/radio.vue

@@ -25,6 +25,8 @@
 
 <script>
 import { useField } from "vee-validate";
+import { queryStrings } from "@/constants/query-strings";
+
 export default {
   name: "radio",
   props: {
@@ -39,7 +41,8 @@ export default {
     screenReaderOnlyText: String,
     selectedValues: String,
     hasError: Boolean,
-    validationRules: String
+    validationRules: String,
+    valueToLogType: String,
   },
   data() {
     return {
@@ -65,6 +68,8 @@ export default {
 
       this.$emit("isCheckedChanged", emitEvent);
       this.$emit("update:modelValue", emitEvent);
+
+      this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
     },
   },
   setup(props) {