diff --git a/src/constants/vin-lookup-methods.js b/src/constants/vin-lookup-methods.js index 539bdb3d..fd12a0ee 100644 --- a/src/constants/vin-lookup-methods.js +++ b/src/constants/vin-lookup-methods.js @@ -1,7 +1,8 @@ const vinLookupMethodSelections = Object.freeze({ MANUALVIN: 'ManualVin', LICENSEPLATE: 'LicensePlate', - HOMEADDRESS: 'HomeAddress' + HOMEADDRESS: 'HomeAddress', + NOVIN: 'NoVin' }); export default vinLookupMethodSelections; diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.spec.js b/src/layouts/vehicle-lookup/vehicle-lookup.spec.js index 0aa12f8a..300b656d 100644 --- a/src/layouts/vehicle-lookup/vehicle-lookup.spec.js +++ b/src/layouts/vehicle-lookup/vehicle-lookup.spec.js @@ -13,6 +13,7 @@ import errorMessages from '@/constants/error-messages'; import globalRules from '@/constants/global-rules'; import { required } from '@/helpers/validation-rules'; import VehicleLookup from '@/layouts/vehicle-lookup/vehicle-lookup.vue'; +import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin'; const pinia = createTestingPinia(); useMainStore(pinia); @@ -40,6 +41,13 @@ const vinLookupMethodsMockData = { SubText: 'Most convenient VIN match', ImageId: '', SubWidgetName: '' + }, + { + Name: 'NoVin', + Text: 'I\'d prefer not to share my VIN', + SubText: '', + ImageId: '', + SubWidgetName: '' } ] }; @@ -118,7 +126,8 @@ function setupMocks() { }, stubs: { SiteHeader: true, - SiteSubHeader: true + SiteSubHeader: true, + TextBlock: true } } }); @@ -264,6 +273,29 @@ describe('vehicle-lookup.vue', () => { * Currently just trust that our custom navigate() method does its job properly. */ }); + + test('Select "I\'d prefer not to share my VIN" then click "Continue". Calls navigateForward from vehicleQuestionsMixin', async () => { + useMainStore().getPartsOrQuestions = () => ({ data: { partsOrQuestions: [] } }); + navigateSpy = jest.spyOn(vehicleQuestionsMixin.methods, 'navigateForward').mockImplementation(async () => {}); + const { wrapper } = setupMocks(); + + const vinLookupMethodsWrapper = wrapper.findComponent({ name: 'vin-lookup-methods' }); + // Not using initializeComponent() because it doesn't trigger reactivity in test. + await vinLookupMethodsWrapper.setData({ + questionTextFromCms: vinLookupMethodsMockData.QuestionText, + answersFromCms: vinLookupMethodsMockData.Answers + }); + + const noVinOptionLabel = wrapper + .find('[data-test-id="vin-lookup-methods-button-question"] label[for="VinLookupMethods-NoVin"]'); + await noVinOptionLabel.trigger('mousedown'); + + const continueButton = wrapper.get('[data-test-id="site-footer-main-button"]'); + await continueButton.trigger('click'); + + // Assert + expect(navigateSpy).toHaveBeenCalled(); + }); /** * To Do: Error message is not displayed when running test diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue index 27ef29db..ad251447 100644 --- a/src/layouts/vehicle-lookup/vehicle-lookup.vue +++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue @@ -10,8 +10,8 @@
+ class="subheader mt-4" + subHeaderMarginClasses="mt-4" /> +
@@ -35,6 +38,7 @@ import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import settleAllPromises from '@/helpers/layout-helper'; import { Form } from 'vee-validate'; import BaseFormMixin from '@/mixins/base-form-mixin'; +import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin'; import vinLookupMethodSelections from '@/constants/vin-lookup-methods'; // Import Component @@ -42,6 +46,7 @@ import SiteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteHeader from '@/iss-components/site-header/site-header.vue'; import SiteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'; import VinLookupMethods from '@/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue'; +import TextBlock from '@/digital-components/text-block/text-block.vue'; export default { name: 'vehicle-lookup', @@ -51,9 +56,10 @@ export default { SiteFooter, siteHeader, SiteSubHeader, - VinLookupMethods + VinLookupMethods, + TextBlock }, - mixins: [BaseFormMixin], + mixins: [BaseFormMixin, vehicleQuestionsMixin], async beforeRouteEnter(to, from, next) { const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); @@ -86,7 +92,7 @@ export default { arePagePrerequisiteValid() { return true; }, - forwardButtonAction() { + async forwardButtonAction() { switch (this.selectedVinLookupMethod) { case vinLookupMethodSelections.MANUALVIN: this.$router.navigate( @@ -106,6 +112,24 @@ export default { this.$route ); break; + case vinLookupMethodSelections.NOVIN: + const partsOrQuestionsResponse = await this.getPartsOrQuestions(); + if (partsOrQuestionsResponse.error) { + this.mainStore.setBailout(bailoutMessage.PartsServiceError(partsOrQuestionsResponse.error.data)); + window.console.error('Error on retrieving PartsOrQuestions'); + this.hasBailedOut = true; + this.$router.navigate( + this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT, + this.$route + ); + } + else { + await this.navigateForward( + partsOrQuestionsResponse.data.partsOrQuestions, + this + ); + } + break; default: break; } @@ -124,5 +148,23 @@ export default { padding-right: .9375rem; } } - +.subheader { + :deep(.all-caps) { + text-transform: uppercase; + } + :deep(.subheader-secondary>p) { + margin-bottom: 0; + } +} +.security-text { + text-align: center; + margin-bottom: 1.5rem; + :deep(a) { + font-weight: $font-weight-normal; + color: $heritage-blue-primary; + &:hover { + color: #125b7e; + } + } +} diff --git a/src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue b/src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue index 6c92856a..633dc865 100644 --- a/src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue +++ b/src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue @@ -1,11 +1,11 @@