CSR-743 experiment integration testing

src/helpers/heritage-integration/cookie-helper.js

@@ -74,7 +74,7 @@ export function getDeviceIdValue(){
         return cookieValueMatch[0].split('=')[1];
     }
 
-    return '00000000-0000-0000-0000-000000000000';
+    return 'cf1ec454-36a8-4137-8842-5207e86ca0be';
 }
 
 /*

src/layouts/test-one.vue

@@ -0,0 +1,15 @@
+<template>
+    Test1
+</template>
+
+
+<script>
+export default {
+    name: "test1",
+    methods: {
+        arePagePrerequisitesValid() {
+            return true;
+        }
+    }
+}
+</script>

src/layouts/test-two.vue

@@ -0,0 +1,15 @@
+<template>
+    Test2
+</template>
+
+
+<script>
+export default {
+    name: "test2",
+    methods: {
+        arePagePrerequisitesValid() {
+            return true;
+        }
+    }
+}
+</script>

src/layouts/vehicle-make/vehicle-make.vue

@@ -1,20 +1,23 @@
 <template>
-  <div class="page-container-grouped-styles">
+    <div class="page-container-grouped-styles">
-    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-    <div class="select-car">
+        <div class="select-car">
-      <div class="select-car-form rounded text-center">
+            <div class="select-car-form rounded text-center">
-        <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
+                <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
-        <funnelSubHeader
+                <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" :hasBackButton="true"
-            cmsWidgetName="FunnelSubHeaderWidget"
+                    @click-event="backButtonAction" />
-            :hasBackButton="true"
+                <div v-if="shouldShowText">
-            @click-event="backButtonAction"
+                    {{ textToShow }}
-        />
+                </div>
-        <div class="fade-on-route-transition">
+                <button @click="logCustomExposureTest">
-          <makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
+                    Click me to log exposure!
+                </button>
+                <div class="fade-on-route-transition">
+                    <makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -26,78 +29,103 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
-import { storeMutations } from "@/constants/store-mutations";
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
+import { getDeviceIdValue, getSessionKeyValue } from "@/helpers/heritage-integration/cookie-helper";
+
 
 export default {
-  name: "vehicle-make",
+    name: "vehicle-make",
-  data() {
+    data() {
-    return {
+        return {
-      selectedMake: null,
+            selectedMake: null,
-    };
+        };
-  },
-  computed: {},
-
-  async beforeRouteEnter(to, from, next) {
-    // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-    const makeQuestionInitialDataPromise =
-      makeQuestion.methods.loadInitialData();
-
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "cmsContent",
-        promise: cmsContentPromise,
-      },
-      {
-        resultKey: "makeQuestionInitialData",
-        promise: makeQuestionInitialDataPromise,
-      },
-    ];
-
-    const resultMap = await settleAllPromises(promiseResultMap);
-    // Call the "next" function to complete the transition to this page.
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-      vm.$refs.makeQuestion.initializeComponent(
-        resultMap.makeQuestionInitialData
-      );
-    });
-  },
-
-  methods: {
-    backButtonAction() {
-      // route to move backwards
-      this.$router.navigateWithoutSaving(
-        this.navigationScenarios.CLICKED_BACK,
-        this.$route
-      );
     },
-    arePagePrerequisitesValid() {
+    computed: {
-      if (store.getters.vehicle.year){
+        shouldShowText() {
-        return true;
+            return this.hasSettingEqualTo("someKey", "true");
-      }
+        },
-      return false;
+        textToShow() {
+            return store.getters.experimentSettings.sampleSetting
+        }
     },
-  },
 
-  watch: {
+    async beforeRouteEnter(to, from, next) {
-    selectedMake(make) {
+        // Call APIs
-      this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MAKE, make, false); 
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
-      this.$router.navigateWithSaving(
+        const makeQuestionInitialDataPromise =
-        this.navigationScenarios.SELECTED_MAKE,
+            makeQuestion.methods.loadInitialData();
-        this.$route
+
-      );
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "makeQuestionInitialData",
+                promise: makeQuestionInitialDataPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.makeQuestion.initializeComponent(
+                resultMap.makeQuestionInitialData
+            );
+        });
     },
-  },
 
-  components: {
+    methods: {
-    makeQuestion,
+        async logCustomExposureTest() {
-    funnelHeader,
+            console.log("HITHERE")
-    vehicleBanner,
+            await this.dispatchStoreAction(storeActions.RUN_EXPERIMENTS_FOR_TRIGGER, {
-    funnelSubHeader,
+                userId: getDeviceIdValue(),
-  },
+                triggerEvent: "PageEntry",
+                triggerValue: "vehicle-make"
+            })
+            const testExperiment = store.getters.applicationUser.experiments.find(e => e.universeName === "Concept Test Site Entry")
+            console.log(testExperiment)
+            await this.dispatchStoreAction(storeActions.LOG_EXPERIMENT_EXPOSURE,
+                {
+                    userId: getDeviceIdValue(),
+                    sessionKey: getSessionKeyValue(),
+                    pageName: "vehicle-make",
+                    experiment: testExperiment
+                }, false);
+        },
+        backButtonAction() {
+            // route to move backwards
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
+            );
+        },
+        arePagePrerequisitesValid() {
+            if (store.getters.vehicle.year) {
+                return true;
+            }
+            return false;
+        },
+    },
+
+    watch: {
+        selectedMake(make) {
+            this.dispatchStoreAction(storeActions.SAVE_VEHICLE_MAKE, make, false);
+            this.$router.navigateWithSaving(
+                this.navigationScenarios.SELECTED_MAKE,
+                this.$route
+            );
+        },
+    },
+
+    components: {
+        makeQuestion,
+        funnelHeader,
+        vehicleBanner,
+        funnelSubHeader,
+    },
 };
 </script>

src/mixins/experiment-mixin.js

@@ -3,7 +3,10 @@ import store from "@/store";
 export default {
     methods: {
         hasSettingEqualTo(settingName, settingValue) {
-            return store.getters.experimentSettings[settingName] === settingValue;
+            console.log(store.getters.experimentSettings)
+            console.log(store.getters.experimentSettings[settingName])
+            console.log(settingValue)
+            return store.getters.experimentSettings[settingName] == settingValue;
         },
         hasSetting(settingName) {
             return Object.hasOwn(store.getters.experimentSettings, settingName);

src/router/index.js

@@ -20,8 +20,23 @@ import store from "@/store";
 import analyticsMixin from "@/mixins/analytics-mixin";
 import { experimentTriggers } from "../constants/experiments";
 import { applicationConfig } from "../constants/application-config";
-
+import TestOne from "@/layouts/test-one";
+import TestTwo from "@/layouts/test-two";
 const routes = [
+  {
+    path: "/test1",
+    name: "test1",
+    components: {
+      default: TestOne
+    } 
+  },
+  {
+    path: "/test2",
+    name: "test2",
+    components: {
+      default: TestTwo
+    } 
+  },
   {
     path: "/",
     name: "root",
@@ -225,6 +240,8 @@ function navigateToUrl(url, optionalQuery = {}) {
     externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
   }
   
+  externalUrl.searchParams.append("experiments", "ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true");
+  
   window.location.assign(externalUrl);
 }
 

src/router/router-constants/routing-table.js

@@ -7,6 +7,16 @@ const routingTable = function(store) {
     {
       fmgPageValue: fmgPageValues.VEHICLE_YEAR,
       maps: [
+        {
+          scenario: navigationScenarios.SELECTED_YEAR,
+          destinationFmgPageValue: "test1",
+          filter: store.getters.vehicle.year === 2010
+        },
+        {
+          scenario: navigationScenarios.SELECTED_YEAR,
+          destinationFmgPageValue: "test2",
+          filter: store.getters.vehicle.year < 1954
+        },
         {
           scenario: navigationScenarios.SELECTED_YEAR,
           destinationFmgPageValue: fmgPageValues.VEHICLE_MAKE,