diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 82f402e0..95e80ce2 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -1,76 +1,79 @@ - diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 9845e089..8d961830 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -3,7 +3,7 @@
- -
-

-

+ +
+

+

+

+ \ No newline at end of file diff --git a/src/digital-components/text-block/text-block.vue b/src/digital-components/text-block/text-block.vue index a12d3f39..33854e14 100644 --- a/src/digital-components/text-block/text-block.vue +++ b/src/digital-components/text-block/text-block.vue @@ -1,6 +1,6 @@ diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue index d6b8e5bb..da463a9e 100644 --- a/src/digital-components/textbox-question/textbox-question.vue +++ b/src/digital-components/textbox-question/textbox-question.vue @@ -44,8 +44,8 @@
-
- {{ errorMessage }} +
+ {{ errorMessage }}
diff --git a/src/iss-components/address-questions/address-questions.spec.js b/src/iss-components/address-questions/address-questions.spec.js index 74fd7ad8..e62c0ea1 100644 --- a/src/iss-components/address-questions/address-questions.spec.js +++ b/src/iss-components/address-questions/address-questions.spec.js @@ -15,7 +15,7 @@ describe("address-questions.vue", () => { }); describe("initial state", () => { - test("Should render addressQuestions sub-components (textbox-questions and dropdown-questions)", async () => { + test("Should hide addressQuestions sub-components (textbox-questions and dropdown-questions)", async () => { // Arrange const { wrapper } = setupMocks({}); @@ -24,17 +24,16 @@ describe("address-questions.vue", () => { const city = wrapper.findComponent({ ref: "city" }); const state = wrapper.findComponent({ ref: "state" }); const zipCode = wrapper.findComponent({ ref: "zipCode" }); + const streetAddress2 = wrapper.findComponent({ ref: "streetAddress2"}); // Assert expect(streetAddress.exists()).toBe(true); - expect(city.exists()).toBe(true); - expect(state.exists()).toBe(true); - expect(zipCode.exists()).toBe(true); + expect(city.exists()).toBe(false); + expect(state.exists()).toBe(false); + expect(zipCode.exists()).toBe(false); + expect(streetAddress2.exists()).toBe(false); }); - }); - - describe("happy paths", () => { test("full street address is passed in => address fields are displayed", async () => { // Arrange/Act const { wrapper } = setupMocks({ @@ -45,6 +44,7 @@ describe("address-questions.vue", () => { state: "OH", zipCode: "12312", }, + includeStreetAddress2: true, }, }); @@ -54,14 +54,40 @@ describe("address-questions.vue", () => { const cityField = wrapper.findComponent({ ref: "city" }); const stateField = wrapper.findComponent({ ref: "state" }); const zipField = wrapper.findComponent({ ref: "zipCode" }); + const streetAddress2 = wrapper.findComponent({ ref: "streetAddress2"}); + expect(cityField.exists()).toBeTruthy(); expect(cityField.isVisible()).toBeTruthy(); expect(stateField.exists()).toBeTruthy(); expect(cityField.isVisible()).toBeTruthy(); expect(zipField.exists()).toBeTruthy(); expect(cityField.isVisible()).toBeTruthy(); + expect(streetAddress2.isVisible()).toBeTruthy(); }); + test("address2 is hidden if includeStreetAddress2 is false", async () => { + // Arrange/Act + const { wrapper } = setupMocks({ + props: { + modelValue: { + streetAddress: "12345 Test Road", + city: "Tests", + state: "OH", + zipCode: "12312", + }, + includeStreetAddress2: false, + }, + }); + + await wrapper.vm.$nextTick(); + + // Assert + const streetAddress2 = wrapper.findComponent({ ref: "streetAddress2"}); + expect(streetAddress2.exists()).toBe(false); + }); + }); + + describe("happy paths", () => { test("street address is entered, user chooses good result from autocomplete results => other fields are filled in", async () => { // Arrange const { wrapper } = setupMocks({}); diff --git a/src/iss-components/address-questions/address-questions.vue b/src/iss-components/address-questions/address-questions.vue index b05d1c94..327a9fb8 100644 --- a/src/iss-components/address-questions/address-questions.vue +++ b/src/iss-components/address-questions/address-questions.vue @@ -14,7 +14,6 @@ cmsWidgetName="AlertNoMatchWarningWidget" alertClass="alert-warning" v-bind:isDismissible="false" /> -
-
-
- -
-
-
-
- +
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
- -
-
- -
-
- -
-
- -
@@ -130,6 +129,7 @@ export default { matchFound: null, // null = no attempted match, true = match was found, false = match was not found enterPressed: false, isAddressWatchActive: false, // Only deep watch the address model when a match was not found + showAllFields: false, }; }, computed: { @@ -210,6 +210,8 @@ export default { // If a match has been previously found then do nothing // OR // If the user pressed "Enter" then do nothing + this.showAllFields = true; + if (self.matchFound || self.enterPressed) { return; } @@ -307,6 +309,7 @@ export default { }, mounted() { this.setupAddressLookup(); + this.showAllFields = !!this.addressModel.streetAddress; }, watch: { matchFound: { diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index 703096a2..9c9dd04a 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -31,6 +31,7 @@ v-model="licensePlate" isRequired disableAutoFill + id="license-plate-question-wrapper" inputId="license-plate-question" validationRules="license-plate-required" /> + + diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.spec.js b/src/layouts/vehicle-lookup/vehicle-lookup.spec.js index a84b712e..12a84a88 100644 --- a/src/layouts/vehicle-lookup/vehicle-lookup.spec.js +++ b/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(), }, }, ], diff --git a/src/layouts/vin-lookup/vin-location-information/vin-location-information.spec.js b/src/layouts/vin-lookup/vin-location-information/vin-location-information.spec.js index b6a5ed5d..c493fde7 100644 --- a/src/layouts/vin-lookup/vin-location-information/vin-location-information.spec.js +++ b/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, + }, }, }; diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js index bdd7fbd7..894ac297 100644 --- a/src/layouts/vin-lookup/vin-lookup.spec.js +++ b/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; + }, }, }, ], diff --git a/src/styles/shared-input-button-styles.scss b/src/styles/shared-input-button-styles.scss index dbffa5b0..9af066bb 100644 --- a/src/styles/shared-input-button-styles.scss +++ b/src/styles/shared-input-button-styles.scss @@ -7,7 +7,7 @@ &.list-card { &:not(.selected) { position: relative; - z-index: 4; + z-index: 5; @include box-shadow-hover($blue-300); } } diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue index 1e22e2b0..49d08ffb 100644 --- a/src/ux-components/text-link/text-link.vue +++ b/src/ux-components/text-link/text-link.vue @@ -11,10 +11,6 @@ {{text}} - - {{text}} - - {{text}} @@ -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 @@ \ No newline at end of file