Merge pull request #139 from Safelite/feature/SSR-235

SSR-235: Update ux-component text-link

src/layouts/vehicle-lookup/vehicle-lookup.spec.js

@@ -1,6 +1,9 @@
 /* eslint-env jest */
 import { mount } from '@vue/test-utils';
 import { navigationScenarios } from '@/router/router-constants/navigation-scenarios';
+import { issPageValues } from '@/router/router-constants/issPage-values';
+import { queryStrings } from '@/constants/query-strings';
+import { GaActions } from "@/constants/analytics";
 import VehicleLookup from './vehicle-lookup.vue';
 
 const vinLookupMethodsMockData = {
@@ -55,6 +58,12 @@ function setupMocks() {
       mixins: [
         {
           computed: {
+            GaActions() {
+              return GaActions;
+            },
+            queryStrings() {
+              return queryStrings;
+            },
             navigationScenarios() {
               return navigationScenarios;
             },
@@ -80,6 +89,7 @@ function setupMocks() {
             }),
             getFooterInfoBoxHeight: jest.fn(() => 80),
             getPageNameByQueryString: jest.fn(() => "vehicle-lookup"),
+            pushEventToGA: jest.fn(),
           },
         },
       ],

src/layouts/vin-lookup/vin-location-information/vin-location-information.spec.js

@@ -2,12 +2,23 @@
 import { render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
+import { issPageValues } from '@/router/router-constants/issPage-values';
+import { queryStrings } from '@/constants/query-strings';
+import { GaActions } from "@/constants/analytics";
 import VinLocationInformationComponent from './vin-location-information.vue';
 
 const mockText = Object.freeze({
   HEADER: 'Mock Header',
   BODY: 'Mock Body',
 });
+const mockRoute = {
+  query: {    
+    issPage: issPageValues.VIN_LOOKUP,
+  },
+};
+const mockRouter = {
+  navigate: jest.fn(),
+};
 
 const mountOptions = {
   global: {
@@ -27,9 +38,22 @@ const mountOptions = {
 
             return '';
           }),
+          pushEventToGA: jest.fn()
         },
+        computed: {
+          GaActions() {
+            return GaActions;
+          },
+          queryStrings() {
+            return queryStrings;
+          },
+        }
       },
     ],
+    mocks: {
+      $route: mockRoute,
+      $router: mockRouter,
+    },
   },
 };
 

src/layouts/vin-lookup/vin-lookup.spec.js

@@ -6,6 +6,8 @@ import { createTestingPinia } from '@pinia/testing';
 import userEvent from '@testing-library/user-event';
 import { errorMessages } from '@/constants/error-messages';
 import { issPageValues } from '@/router/router-constants/issPage-values';
+import { queryStrings } from '@/constants/query-strings';
+import { GaActions } from "@/constants/analytics";
 import { navigationScenarios } from '@/router/router-constants/navigation-scenarios';
 import { routerParams } from '@/router/router-params';
 import { useMainStore } from '@/store';
@@ -134,11 +136,18 @@ const mountOptions = {
           getFooterInfoBoxHeight: jest.fn(() => 80),
           cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'),
           getPageNameByQueryString: jest.fn(() => ''),
+          pushEventToGA: jest.fn(),
         },
         computed: {
+          GaActions() {
+            return GaActions;
+          },
           navigationScenarios() {
             return navigationScenarios;
           },
+          queryStrings() {
+            return queryStrings;
+          },
         },
       },
     ],

src/ux-components/text-link/text-link.vue

@@ -11,10 +11,6 @@
       {{text}}
       <slot name="after-text"></slot>
     </a>
-    <a v-else-if="linkType === 'dashedUnderline'" @click="handleClick" class="dashed-underline" :href="href">
-      {{text}}
-      <slot name="after-text"></slot>
-    </a>
     <a v-else-if="linkType === 'text'" @click="handleClick" :href="href">
       {{text}}
       <slot name="after-text"></slot>
@@ -33,6 +29,12 @@
     },
     methods: {
       handleClick(event) {
+        this.pushEventToGA(
+            this.$route.query[this.queryStrings.ISS_PAGE],
+            this.GaActions.CLICKED,
+            this.text,
+            true
+        );
         this.$emit("click-event");
       },
     },
@@ -41,10 +43,9 @@
   
   <style lang="scss">
   a {
-    display: inline-flex !important;
     color: $blue;
-    text-underline-offset: 0.5em;
+    text-underline-offset: 5px;
-    line-height: 26px;
+    line-height: 2;
     padding: 0 0 4px 0;
     font-weight: 500;
     max-width: fit-content;
@@ -75,9 +76,6 @@
         text-decoration: underline;
       }
     }
-    &.dashed-underline {
-      text-decoration: underline dashed 1px;
-    }
   }
   </style>