diff --git a/.eslintrc.js b/.eslintrc.js index c9deb6a3..440245f9 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -18,8 +18,8 @@ module.exports = { 'vue/attribute-hyphenation': ['warn', 'never'], 'vue/v-on-event-hyphenation': ['warn', 'never'], 'object-curly-newline': ['error', { consistent: true }], - 'function-paren-newline': ['error', 'never'], - 'operator-linebreak': ['error', 'before', { overrides: { '=': 'after' }}], + 'function-paren-newline': ['error', 'multiline'], + 'operator-linebreak': ['error', 'before', { overrides: { '=': 'after' } }], 'implicit-arrow-linebreak': ['off'], 'comma-dangle': ['error', 'never'], indent: ['error', 4, { SwitchCase: 1 }], @@ -33,6 +33,7 @@ module.exports = { 'jsdoc/check-tag-names': ['error', { definedTags: ['store', 'endpoint', 'category', 'subcategory', 'remarks'] }], + 'jsdoc/require-jsdoc': 0, 'vue/html-self-closing': ['error', { html: { void: 'any', diff --git a/src/constants/coverage-statuses.js b/src/constants/coverage-statuses.js index 5f794cc9..4142121a 100644 --- a/src/constants/coverage-statuses.js +++ b/src/constants/coverage-statuses.js @@ -1,7 +1,7 @@ const coverageStatuses = Object.freeze({ - PENDING: 'Pending', - NO_COMP: 'No Comp', - VERIFIED: 'Verified' + PENDING: 0, + NO_COMP: 1, + VERIFIED: 2 }); export default coverageStatuses; diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 955ccb08..a213e2f4 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -129,6 +129,10 @@ const endpoints = Object.freeze({ RegisterClaim: { url: '/coverage/api/v1/coverage/register-claim', method: 'POST' + }, + SaveSession: { + url: '/order/api/v1/order/save-session/iss', + method: 'POST' } }); diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js index caad0dfb..b63d9cd0 100644 --- a/src/constants/error-messages.js +++ b/src/constants/error-messages.js @@ -27,6 +27,7 @@ const errorMessages = Object.freeze({ SERVICE_ZIP_FORMAT: 'Please enter a valid service ZIP', VIN_REQUIRED: 'Please enter your VIN', VIN_FORMAT: + // eslint-disable-next-line max-len 'Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q', OPTION_REQUIRED: 'Please select an option', VEHICLE_REQUIRED: 'Please select a vehicle', diff --git a/src/digital-components/base-input-button/base-input-button.vue b/src/digital-components/base-input-button/base-input-button.vue index fdcf4480..f619a16e 100644 --- a/src/digital-components/base-input-button/base-input-button.vue +++ b/src/digital-components/base-input-button/base-input-button.vue @@ -50,9 +50,11 @@ export default { }; const { handleChange, meta, errors } = - useField(toRef(props, 'groupName'), + useField( + toRef(props, 'groupName'), toRef(props, 'validationRules'), - fieldOptions); + fieldOptions + ); return { handleChange, @@ -72,7 +74,8 @@ export default { return this.modelValue.includes(this.value); } if (!this.isMultiSelect) { - return this.modelValue === this.value; + // eslint-disable-next-line eqeqeq + return this.modelValue == this.value; } return false; }, diff --git a/src/digital-components/button-question/button-question.spec.js b/src/digital-components/button-question/button-question.spec.js index 7e5720d3..6424abc4 100644 --- a/src/digital-components/button-question/button-question.spec.js +++ b/src/digital-components/button-question/button-question.spec.js @@ -62,8 +62,10 @@ describe('buttonQuestion.vue', () => { describe('selectedValues', () => { test('is radio => should emit captured value', async () => { // Arrange - const wrapper = shallowMount(buttonQuestion, - setupMocks({ propsData: { groupName: 'group-name' } })); + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ propsData: { groupName: 'group-name' } }) + ); await wrapper.setProps({ answers: ['2022', '2021', '2020'], isMultiSelect: false, @@ -78,8 +80,10 @@ describe('buttonQuestion.vue', () => { }); test('is checkbox => should emit captured value', async () => { - const wrapper = shallowMount(buttonQuestion, - setupMocks({ propsData: { groupName: 'group-name' } })); + const wrapper = shallowMount( + buttonQuestion, + setupMocks({ propsData: { groupName: 'group-name' } }) + ); await wrapper.setProps({ answers: ['2022', '2021', '2020'], isMultiSelect: false, @@ -104,7 +108,8 @@ describe('buttonQuestion.vue', () => { describe('buttonLabel', () => { test('answers have buttonLabel properties => buttonsInfo buttonsLabel properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -116,7 +121,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -128,7 +134,8 @@ describe('buttonQuestion.vue', () => { test('answers have Text properties, no buttonLabel properties => buttonsInfo buttonsLabel properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -140,7 +147,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -152,7 +160,8 @@ describe('buttonQuestion.vue', () => { test('answers have buttonLabel and Text properties => buttonsInfo buttonsLabel properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -166,7 +175,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -178,12 +188,14 @@ describe('buttonQuestion.vue', () => { test('answers is an array of strings => buttonLabel is answer values', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: ['answer 1', 'answer 2'] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -197,7 +209,8 @@ describe('buttonQuestion.vue', () => { describe('altText', () => { test('answers have altText properties => buttonsInfo altText properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -209,7 +222,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -221,7 +235,8 @@ describe('buttonQuestion.vue', () => { test('answers have Name properties, no buttonLabel properties => buttonsInfo altText properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -233,7 +248,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -245,7 +261,8 @@ describe('buttonQuestion.vue', () => { test('answers have altText and Name properties => buttonsInfo altText properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -259,7 +276,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -271,12 +289,14 @@ describe('buttonQuestion.vue', () => { test('answers is an array of strings => altText is answer values', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: ['answer 1', 'answer 2'] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -290,7 +310,8 @@ describe('buttonQuestion.vue', () => { describe('buttonLabelSubCopy', () => { test('answers have buttonLabelSubCopy properties => buttonsInfo buttonLabelSubCopy properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -302,7 +323,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -314,7 +336,8 @@ describe('buttonQuestion.vue', () => { test('answers have SubText properties, no buttonLabelSubCopy properties => buttonsInfo buttonLabelSubCopy properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -326,7 +349,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -338,7 +362,8 @@ describe('buttonQuestion.vue', () => { test('answers have buttonLabelSubCopy and SubText properties => buttonsInfo buttonLabelSubCopy properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -352,7 +377,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -364,12 +390,14 @@ describe('buttonQuestion.vue', () => { test('answers is an array of strings => there are no buttonLabelSubCopy properties', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: ['answer 1', 'answer 2'] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -383,7 +411,8 @@ describe('buttonQuestion.vue', () => { describe('buttonImage', () => { test('answers have buttonImage properties => buttonsInfo buttonImage properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -395,7 +424,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -407,7 +437,8 @@ describe('buttonQuestion.vue', () => { test('answers have AnswerImageUrl properties, no buttonImage properties => buttonsInfo buttonImage properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -419,7 +450,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -431,7 +463,8 @@ describe('buttonQuestion.vue', () => { test('answers have buttonImage and AnswerImageUrl properties => buttonsInfo buttonImage properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -445,7 +478,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -457,12 +491,14 @@ describe('buttonQuestion.vue', () => { test('answers is an array of strings => there are no buttonImage properties', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: ['answer 1', 'answer 2'] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -476,7 +512,8 @@ describe('buttonQuestion.vue', () => { describe('buttonImageId', () => { test('answers have buttonImageId properties => buttonsInfo buttonImageId properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -488,7 +525,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -500,7 +538,8 @@ describe('buttonQuestion.vue', () => { test('answers have ImageId properties, no buttonImageId properties => buttonsInfo buttonImage properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -512,7 +551,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -524,7 +564,8 @@ describe('buttonQuestion.vue', () => { test('answers have buttonImageId and ImageId properties => buttonsInfo buttonImageId properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: [ @@ -538,7 +579,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -550,12 +592,14 @@ describe('buttonQuestion.vue', () => { test('answers is an array of strings => there are no buttonImageId properties', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: ['answer 1', 'answer 2'] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -568,16 +612,19 @@ describe('buttonQuestion.vue', () => { describe('groupName', () => { const answers = [[['answer 1', 'answer 2']], [[{ value: 1 }, { value: 2 }]]]; - test.each(answers)('answers have groupName properties with spaces => buttonsInfo groupName properties are correct', + test.each(answers)( + 'answers have groupName properties with spaces => buttonsInfo groupName properties are correct', (answerGroup) => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: answerGroup, groupName: 'this is my group name' } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -585,18 +632,22 @@ describe('buttonQuestion.vue', () => { // Assert expect(buttonsInfo[0].groupName).toEqual('this-is-my-group-name'); expect(buttonsInfo[1].groupName).toEqual('this-is-my-group-name'); - }); + } + ); - test.each(answers)('answers have groupName properties with no spaces => buttonsInfo groupName properties are correct', + test.each(answers)( + 'answers have groupName properties with no spaces => buttonsInfo groupName properties are correct', (answerGroup) => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { answers: answerGroup, groupName: 'this-is-my-group-name' } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -604,14 +655,16 @@ describe('buttonQuestion.vue', () => { // Assert expect(buttonsInfo[0].groupName).toEqual('this-is-my-group-name'); expect(buttonsInfo[1].groupName).toEqual('this-is-my-group-name'); - }); + } + ); }); describe('value', () => { describe('useTextForValue is true', () => { test('answers have value properties => buttonsInfo value properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: true, @@ -624,7 +677,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -636,7 +690,8 @@ describe('buttonQuestion.vue', () => { test('answers have Text properties => buttonsInfo value properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: true, @@ -649,7 +704,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -661,7 +717,8 @@ describe('buttonQuestion.vue', () => { test('answers have Name properties => buttonsInfo value properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: true, @@ -674,7 +731,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -686,7 +744,8 @@ describe('buttonQuestion.vue', () => { test('answers have value and Text properties, no Name properties => buttonsInfo value properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: true, @@ -701,7 +760,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -713,7 +773,8 @@ describe('buttonQuestion.vue', () => { test('answers have value and Name properties, no Text properties => buttonsInfo value properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: true, @@ -728,7 +789,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -740,7 +802,8 @@ describe('buttonQuestion.vue', () => { test('answers have Text and Name properties, no value properties => buttonsInfo value properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: true, @@ -755,7 +818,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -767,7 +831,8 @@ describe('buttonQuestion.vue', () => { test('answers have value, Text, and Name properties => buttonsInfo value properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: true, @@ -784,7 +849,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -796,13 +862,15 @@ describe('buttonQuestion.vue', () => { test('answers is an array of strings => buttonInfo value property values are values from array', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: true, answers: ['answer 1', 'answer 2'] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -816,7 +884,8 @@ describe('buttonQuestion.vue', () => { describe('useTextForValue is false', () => { test('answers have value properties => buttonsInfo value properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: false, @@ -829,7 +898,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -841,7 +911,8 @@ describe('buttonQuestion.vue', () => { test('answers have Text properties => buttonsInfo value properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: false, @@ -854,7 +925,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -866,7 +938,8 @@ describe('buttonQuestion.vue', () => { test('answers have Name properties => buttonsInfo value properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: false, @@ -879,7 +952,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -891,7 +965,8 @@ describe('buttonQuestion.vue', () => { test('answers have value and Text properties, no Name properties => buttonsInfo value properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: false, @@ -906,7 +981,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -918,7 +994,8 @@ describe('buttonQuestion.vue', () => { test('answers have value and Name properties, no Text properties => buttonsInfo value properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: false, @@ -933,7 +1010,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -945,7 +1023,8 @@ describe('buttonQuestion.vue', () => { test('answers have Text and Name properties, no value properties => buttonsInfo value properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: false, @@ -960,7 +1039,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -972,7 +1052,8 @@ describe('buttonQuestion.vue', () => { test('answers have value, Text, and Name properties => buttonsInfo value properties are correct', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: false, @@ -989,7 +1070,8 @@ describe('buttonQuestion.vue', () => { } ] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; @@ -1001,13 +1083,15 @@ describe('buttonQuestion.vue', () => { test('answers is an array of strings => buttonInfo value property values are values from array', () => { // Arrange - const wrapper = shallowMount(buttonQuestion, + const wrapper = shallowMount( + buttonQuestion, setupMocks({ propsData: { useTextForValue: false, answers: ['answer 1', 'answer 2'] } - })); + }) + ); // Act const { buttonsInfo } = wrapper.vm; diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue index 25a850d2..05f8b9a4 100644 --- a/src/digital-components/dropdown-question/dropdown-question.vue +++ b/src/digital-components/dropdown-question/dropdown-question.vue @@ -79,14 +79,19 @@ export default { initialValue }; - const { errorMessage, handleBlur, handleChange, meta, errors } = useField(props.inputId, props.validationRules, fieldOptions); + const { errorMessage, + handleBlur, + handleChange, + meta, errors, + setErrors } = useField(props.inputId, props.validationRules, fieldOptions); return { errorMessage, handleBlur, handleChange, meta, - errors + errors, + setErrors }; }, computed: { @@ -123,6 +128,11 @@ export default { } }, watch: { + isDisabled(newValue, oldValue) { + if (newValue !== oldValue) { + this.setErrors([]); + } + }, selectedOption(newValue) { this.handleChange(newValue); } diff --git a/src/digital-components/textarea-question/textarea-question.vue b/src/digital-components/textarea-question/textarea-question.vue index 70d995f9..902cd2ca 100644 --- a/src/digital-components/textarea-question/textarea-question.vue +++ b/src/digital-components/textarea-question/textarea-question.vue @@ -84,15 +84,8 @@ export default { initialValue }; - const { errorMessage, - handleChange, - handleBlur, - validate, - errors, - resetField } = - useField(props.inputId, - props.validationRules, - fieldOptions); + const { errorMessage, handleChange, handleBlur, validate, errors, resetField } = + useField(props.inputId, props.validationRules, fieldOptions); return { errorMessage, diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue index a380f51c..b619460e 100644 --- a/src/digital-components/textbox-question/textbox-question.vue +++ b/src/digital-components/textbox-question/textbox-question.vue @@ -131,9 +131,8 @@ export default { }; // eslint-disable-next-line no-shadow - const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(props.inputId, - props.validationRules, - fieldOptions); + const { errorMessage, handleBlur, handleChange, meta, validate, errors } = + useField(props.inputId, props.validationRules, fieldOptions); return { errorMessage, diff --git a/src/global-methods.js b/src/global-methods.js index 4d333918..c32a6c9d 100644 --- a/src/global-methods.js +++ b/src/global-methods.js @@ -7,44 +7,45 @@ import { GaCategories, GaActions, GaLabels } from '@/constants/analytics'; import headerKeys from '@/constants/header-keys'; export default { - callHttpClient({ method, endpoint, payload, logApiCall = true}) { + callHttpClient({ method, endpoint, payload, logApiCall = true }) { return new Promise((resolve, reject) => { const store = useMainStore(); const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO; - const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: 'SelfService' }); + const payloadAndAnalyticsData = { ...payload, AppName: 'SelfService' }; const headers = { [headerKeys.EXPERIMENT]: JSON.stringify(store.experimentSettings) }; - axios({ - method: method, + axios({ + method, url: cfDistroUrl + endpoint, data: payloadAndAnalyticsData, crossDomain: true, responseType: 'json', - headers: headers, + headers }) - .then((response) => { - if (logApiCall) { - analyticsMixIn.methods.pushEventToGA( - GaCategories.API_RESPONSE, - GaActions.RESULT, - `${GaLabels.SUCCESS}_${endpoint}`, - true - ); - } - return resolve(response); - }, - error => { - console.error(error); + .then( + (response) => { + if (logApiCall) { + analyticsMixIn.methods.pushEventToGA( + GaCategories.API_RESPONSE, + GaActions.RESULT, + `${GaLabels.SUCCESS}_${endpoint}`, + true + ); + } + return resolve(response); + }, + (error) => { + window.console.error(error); - // implement if analytics service is down - if (endpoint.includes('analytics')) { - return resolve({data: ''}); - } + // implement if analytics service is down + if (endpoint.includes('analytics')) { + return resolve({ data: '' }); + } - return reject(error.response); - } + return reject(error.response); + } ); }); }, @@ -52,19 +53,18 @@ export default { // used for mocked services async mockCallHttpClient(method, endpoint) { return new Promise((resolve, reject) => { - axios({ - method: method, + axios({ + method, url: endpoint, crossDomain: true, responseType: {} }) - .then((response) => { - return resolve(response); - }, - error => { - console.error(error); - return reject(error.response); - } + .then( + (response) => resolve(response), + (error) => { + window.console.error(error); + return reject(error.response); + } ); }); } diff --git a/src/global-methods.spec.js b/src/global-methods.spec.js index f5622ce6..3f0d0493 100644 --- a/src/global-methods.spec.js +++ b/src/global-methods.spec.js @@ -7,10 +7,54 @@ import { getMountOptions } from '@/helpers/unit-test-helper.js'; jest.mock('axios'); jest.mock('@/mixins/analytics-mixin'); +/** @ignore */ +function setupMocksForHttpClient({ + endpoint = null, + isError = false, + additionalData = null +}) { + // Clear node module + axios.mockClear(); + + getMountOptions(); + + // Success Response + const response = { + status: 200, + data: { + message: 'Success', + additionalData + } + }; + + // Error Response + const error = { + response: { + status: 500, + data: { + message: 'Error', + additionalData + } + } + }; + + // Error interceptor on Axios returns a different object, so we need to mimic that. + if (isError) { + axios.mockRejectedValue(error); + } else { + axios.mockResolvedValue(response); + } + + return { + endpoint, + logApiCall: true + }; +} + it('Global Methods - Call Http Client - Should Resolve Promise', () => { // Arrange const endpoint = 'https://mock.safelite.com'; - const httpArgs = setupMocksForHttpClient({ endpoint: endpoint }); + const httpArgs = setupMocksForHttpClient({ endpoint }); // Act globalMethods.callHttpClient(httpArgs).then((response) => { @@ -25,7 +69,7 @@ it('Global Methods - Call Http Client - Should Reject Promise', () => { // Arrange const endpoint = 'https://mock.safelite.com'; const httpArgs = setupMocksForHttpClient({ - endpoint: endpoint, + endpoint, isError: true }); analyticsMixIn.methods.pushEventToGA = jest.fn(); @@ -38,46 +82,3 @@ it('Global Methods - Call Http Client - Should Reject Promise', () => { expect(err.status).toEqual(500); }); }); - -function setupMocksForHttpClient({ - endpoint = null, - isError = false, - additionalData = null -}) { - // Clear node module - axios.mockClear(); - - const mountOptions = getMountOptions(); - - // Success Response - const response = { - status: 200, - data: { - message: 'Success', - additionalData: additionalData - } - }; - - // Error Response - const error = { - response: { - status: 500, - data: { - message: 'Error', - additionalData: additionalData - } - } - }; - - // Error interceptor on Axios returns a different object, so we need to mimic that. - if (isError) { - axios.mockRejectedValue(error); - } else { - axios.mockResolvedValue(response); - } - - return { - endpoint: endpoint, - logApiCall: true - }; -} diff --git a/src/helpers/clientauth-helper.js b/src/helpers/clientauth-helper.js index 3d1a7f58..2bfd53bb 100644 --- a/src/helpers/clientauth-helper.js +++ b/src/helpers/clientauth-helper.js @@ -4,11 +4,10 @@ const validateISSClientTag = (clientTag) => { const store = useMainStore(); return store.validateClientTag(clientTag) - .then((response) => - // Success - response, - // Error - () => null); + .then( + (response) => response, + () => null + ); }; export default validateISSClientTag; diff --git a/src/helpers/cookie-helper.js b/src/helpers/cookie-helper.js index 2b93484b..18546702 100644 --- a/src/helpers/cookie-helper.js +++ b/src/helpers/cookie-helper.js @@ -55,8 +55,11 @@ export function getCookieDomainValue() { Used to create a cookie. `useDefaultISSCookieAttributes` will set the path and domain to our defaults */ -function createOrUpdateCookie(key, value = '', - { useDefaultISSCookieAttributes = true, maxAge, isSecure = true }) { +function createOrUpdateCookie( + key, + value = '', + { useDefaultISSCookieAttributes = true, maxAge, isSecure = true } +) { let cookieToAdd = `${key}=${value}; `; if (useDefaultISSCookieAttributes) { @@ -122,7 +125,8 @@ export function updateOrCreateISSCookie() { ReferralNumber: store.order.referralNumber, ReferralDate: store.order.referralDate, ReferralCorrelationId: store.order.referralCorrelationId, - ReferralParentAccountNumber: store.order.accountNumber + ReferralParentAccountNumber: store.order.accountNumber, + SavedSessionId: store.applicationUser.savedSessionId }); } @@ -188,8 +192,10 @@ export function updateSessionIdCookie() { createOrUpdateCookie(cookieNames.SESSION_ID, getSessionIdValue(), { maxAge: 60 * 30 }); } -export function setCookieProperties(properties, - { useDefaultISSCookieAttributes = true, maxAge, isSecure }) { +export function setCookieProperties( + properties, + { useDefaultISSCookieAttributes = true, maxAge, isSecure } +) { if (typeof properties === 'object') { Object.keys(properties).forEach((key) => { createOrUpdateCookie(key, properties[key], { diff --git a/src/helpers/event-bus/event-bus.spec.js b/src/helpers/event-bus/event-bus.spec.js index 16501c4f..dc1e36bd 100644 --- a/src/helpers/event-bus/event-bus.spec.js +++ b/src/helpers/event-bus/event-bus.spec.js @@ -26,8 +26,10 @@ describe('event-bus.js', () => { useMainStore().eventBusItem.mockReturnValueOnce(event); // TODO: Use or remove - const eventValue = eventBus.readAndPopEventFromBus(globalEvents.Categories.GLOBAL_ALERT, - globalEvents.SubCategories.PAGE_NOT_FOUND); + const eventValue = eventBus.readAndPopEventFromBus( + globalEvents.Categories.GLOBAL_ALERT, + globalEvents.SubCategories.PAGE_NOT_FOUND + ); expect(useMainStore().eventBusItem).toBeCalledTimes(1); expect(useMainStore().removeEventFromBus).toBeCalledTimes(1); @@ -37,8 +39,10 @@ describe('event-bus.js', () => { useMainStore().eventBusItem.mockReturnValueOnce(undefined); // TODO: Use or remove - const eventValue = eventBus.readAndPopEventFromBus(globalEvents.Categories.GLOBAL_ALERT, - globalEvents.SubCategories.PAGE_NOT_FOUND); + const eventValue = eventBus.readAndPopEventFromBus( + globalEvents.Categories.GLOBAL_ALERT, + globalEvents.SubCategories.PAGE_NOT_FOUND + ); expect(useMainStore().eventBusItem).toBeCalledTimes(1); expect(useMainStore().removeEventFromBus).toBeCalledTimes(0); @@ -47,17 +51,21 @@ describe('event-bus.js', () => { it('returns event from bus', () => { useMainStore().eventBusItem.mockReturnValueOnce(event); - const eventValue = eventBus.readEventFromBus(globalEvents.Categories.GLOBAL_ALERT, - globalEvents.SubCategories.PAGE_NOT_FOUND); + const eventValue = eventBus.readEventFromBus( + globalEvents.Categories.GLOBAL_ALERT, + globalEvents.SubCategories.PAGE_NOT_FOUND + ); expect(eventValue).toBe(event); }); it('Reads event from bus, should have event value.', () => { // Arrange / Act - eventBus.addEventToBus(globalEvents.Categories.GLOBAL_ALERT, + eventBus.addEventToBus( + globalEvents.Categories.GLOBAL_ALERT, globalEvents.SubCategories.PAGE_NOT_FOUND, - event); + event + ); expect(useMainStore().addEventToBus).toHaveBeenCalled(); }); diff --git a/src/helpers/global-rule-definer.js b/src/helpers/global-rule-definer.js index b06fe946..650fb97e 100644 --- a/src/helpers/global-rule-definer.js +++ b/src/helpers/global-rule-definer.js @@ -9,10 +9,14 @@ import { required, regex } from '@/helpers/validation-rules'; function defineGlobalNameRules() { defineRule(globalRules.FIRST_NAME_REQUIRED, required(errorMessages.FIRST_NAME_REQUIRED)); defineRule(globalRules.LAST_NAME_REQUIRED, required(errorMessages.LAST_NAME_REQUIRED)); - defineRule(globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED, - required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED)); - defineRule(globalRules.POLICYHOLDER_LAST_NAME_REQUIRED, - required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED)); + defineRule( + globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED, + required(errorMessages.POLICYHOLDER_FIRST_NAME_REQUIRED) + ); + defineRule( + globalRules.POLICYHOLDER_LAST_NAME_REQUIRED, + required(errorMessages.POLICYHOLDER_LAST_NAME_REQUIRED) + ); } /** @@ -20,9 +24,13 @@ function defineGlobalNameRules() { */ function defineGlobalEmailRules() { defineRule(globalRules.EMAIL_ADDRESS_REQUIRED, required(errorMessages.EMAIL_ADDRESS_REQUIRED)); - defineRule(globalRules.EMAIL_ADDRESS_FORMAT, - regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/, - errorMessages.EMAIL_ADDRESS_FORMAT)); + defineRule( + globalRules.EMAIL_ADDRESS_FORMAT, + regex( + /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+)\.([a-zA-Z]{2,})$/, + errorMessages.EMAIL_ADDRESS_FORMAT + ) + ); } /** @@ -30,9 +38,13 @@ function defineGlobalEmailRules() { */ function defineGlobalPhoneNumberRules() { defineRule(globalRules.PHONE_NUMBER_REQUIRED, required(errorMessages.PHONE_NUMBER_REQUIRED)); - defineRule(globalRules.PHONE_NUMBER_FORMAT, - regex(/^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/, - errorMessages.PHONE_NUMBER_FORMAT)); + defineRule( + globalRules.PHONE_NUMBER_FORMAT, + regex( + /^(\([0-9]{3}\)|[0-9]{3}) *[-.]? *[0-9]{3} *[-.]? *[0-9]{4}$/, + errorMessages.PHONE_NUMBER_FORMAT + ) + ); } /** diff --git a/src/helpers/layout-helper.js b/src/helpers/layout-helper.js index d13bbc2b..a4585342 100644 --- a/src/helpers/layout-helper.js +++ b/src/helpers/layout-helper.js @@ -1,4 +1,4 @@ -export function settleAllPromises(promiseResultMap) { +const settleAllPromises = (promiseResultMap) => { // Pull our keys out of the promise 'table' const promiseNames = Object.entries(promiseResultMap); @@ -22,4 +22,6 @@ export function settleAllPromises(promiseResultMap) { return resultMap; }); -} +}; + +export default settleAllPromises; diff --git a/src/helpers/layout-helper.spec.js b/src/helpers/layout-helper.spec.js index c8107580..758639c6 100644 --- a/src/helpers/layout-helper.spec.js +++ b/src/helpers/layout-helper.spec.js @@ -1,4 +1,4 @@ -import { settleAllPromises } from '@/helpers/layout-helper'; +import settleAllPromises from '@/helpers/layout-helper'; it('layout-helper: Should settle all promises and return mapped promise results', () => { // Arrange diff --git a/src/helpers/order-helper.js b/src/helpers/order-helper.js new file mode 100644 index 00000000..0b89d8e5 --- /dev/null +++ b/src/helpers/order-helper.js @@ -0,0 +1,29 @@ +import { useMainStore } from '@/store'; +import { updateOrCreateISSCookie } from '@/helpers/cookie-helper'; + +/* + Will call API to save existing order, or create new one depending where it's called from. + This will also set Referral information in the store after saving, and then + update the cookie. To force synchronous behavior pass in 'true' for shouldAwaitSaveSessionQueue +*/ +export async function saveSession({ shouldAwaitSaveSessionQueue = false }) { + const store = useMainStore(); + var saveSessionPromise = store.applicationUser.saveSessionPromise + ? store.applicationUser.saveSessionPromise.then(() => { return saveSessionHelper(store); }) + : saveSessionHelper(store); + + store.setSaveSessionPromise(saveSessionPromise); + + if (!store.applicationUser.savedSessionId || shouldAwaitSaveSessionQueue) { + await saveSessionPromise; + } +} + +/* + Encapsulates asynchronous Save Session logic inside a promise to allow for Save Session queuing +*/ +async function saveSessionHelper(store) { + const savedSessionInfo = await store.saveSession(); + store.setSaveSessionInfo(savedSessionInfo.data); + updateOrCreateISSCookie(); +} \ No newline at end of file diff --git a/src/helpers/service-location-helper.js b/src/helpers/service-location-helper.js index 362f3d22..242752d3 100644 --- a/src/helpers/service-location-helper.js +++ b/src/helpers/service-location-helper.js @@ -1,11 +1,13 @@ import { useMainStore } from '@/store'; export async function getServiceabilityDetails(serviceZipCode, lineItems) { - const serviceabilityDetails = await useMainStore().getServiceabilityDetails({ - serviceZipCode, - lineItems - }, - false); + const serviceabilityDetails = await useMainStore().getServiceabilityDetails( + { + serviceZipCode, + lineItems + }, + false + ); return Promise.resolve(serviceabilityDetails); } diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index 76029faa..9ccfd29b 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -1,6 +1,7 @@ +/* eslint-disable import/no-extraneous-dependencies */ import { RouterLinkStub } from '@vue/test-utils'; import { createTestingPinia } from '@pinia/testing'; -import { navigationScenarios } from '@/router/router-constants/navigation-scenarios.js'; +import navigationScenarios from '@/router/router-constants/navigation-scenarios.js'; import vehicleCategories from '@/constants/vehicle-categories.js'; import issPageValues from '@/router/router-constants/issPage-values'; import cookieNames from '@/constants/cookie-names'; @@ -59,7 +60,9 @@ export function getMountOptions(mockData) { // Heritage integration common methods export const cookies = { - [cookieNames.ISS_SESSION_INFO]: '{"ReferralNumber":"1566818","ReferralDate":"2022-03-15T10:56:24.597","ReferralCorrelationId":"404d2b04-f86e-45c3-b373-127b6217b060","ShouldResetState":false}', + [cookieNames.ISS_SESSION_INFO]: + // eslint-disable-next-line max-len + '{"ReferralNumber":"1566818","ReferralDate":"2022-03-15T10:56:24.597","ReferralCorrelationId":"404d2b04-f86e-45c3-b373-127b6217b060","ShouldResetState":false}', UNIQUE_SESSION_ID: '33756020-b58e-4ec7-b8b8-3f1576719c40', anotherCookie: '{}', someOtherCookie: '{}', diff --git a/src/iss-components/address-questions/address-questions.spec.js b/src/iss-components/address-questions/address-questions.spec.js index 60f8d692..6d225c65 100644 --- a/src/iss-components/address-questions/address-questions.spec.js +++ b/src/iss-components/address-questions/address-questions.spec.js @@ -311,7 +311,8 @@ describe('address-questions.vue', () => { describe('alerts', () => { const places = [null, { address_components: null }, undefined, {}]; - test.each(places)('selected place/place properties is null => display verification alert', + test.each(places)( + 'selected place/place properties is null => display verification alert', async (place) => { // Arrange const { wrapper } = setupMocks({}); @@ -336,7 +337,8 @@ describe('address-questions.vue', () => { const noMatchAlert = wrapper.findComponent({ ref: 'alertNoMatchWarning' }); expect(noMatchAlert.exists()).toBe(false); - }); + } + ); test('user enters address that yields no autocomplete results => show noMatch alert', async () => { // Arrange diff --git a/src/iss-components/address-questions/address-questions.vue b/src/iss-components/address-questions/address-questions.vue index 6e90deac..7ff88886 100644 --- a/src/iss-components/address-questions/address-questions.vue +++ b/src/iss-components/address-questions/address-questions.vue @@ -208,9 +208,11 @@ export default { }); // Standard place_changed event handling - const autocompleteListener = window.google.maps.event.addListener(autocomplete, + const autocompleteListener = window.google.maps.event.addListener( + autocomplete, 'place_changed', - fillInAddress); + fillInAddress + ); addressField1.addEventListener('focus', () => { // Wrapping the addressField1 element in the Google Address Autocomplete object @@ -265,14 +267,16 @@ export default { const firstResult = item.textContent; const geocoder = new window.google.maps.Geocoder(); - geocoder.geocode({ - address: firstResult - }, - (results, status) => { - if (status === window.google.maps.GeocoderStatus.OK) { - fillInAddress(results[0]); + geocoder.geocode( + { + address: firstResult + }, + (results, status) => { + if (status === window.google.maps.GeocoderStatus.OK) { + fillInAddress(results[0]); + } } - }); + ); } else { // No addresses found for the input self.matchFound = false; diff --git a/src/iss-components/loading-modal/loading-modal.vue b/src/iss-components/loading-modal/loading-modal.vue index fb7c270a..02deed69 100644 --- a/src/iss-components/loading-modal/loading-modal.vue +++ b/src/iss-components/loading-modal/loading-modal.vue @@ -48,7 +48,8 @@ export default { // Display modal this.isModalVisible = true; // Force page reload on back button - window.addEventListener('pageshow', + window.addEventListener( + 'pageshow', (evt) => { if (evt.persisted) { setTimeout(() => { @@ -56,7 +57,8 @@ export default { }, 10); } }, - false); + false + ); }, hideModal() { this.isModalVisible = false; diff --git a/src/iss-components/site-header/site-header.vue b/src/iss-components/site-header/site-header.vue index 5cf77eca..1666582c 100644 --- a/src/iss-components/site-header/site-header.vue +++ b/src/iss-components/site-header/site-header.vue @@ -65,8 +65,10 @@ export default ({ this.$nextTick(this.setupHeader); // Check if alert event is on the bus - const alertEvent = eventBus.readAndPopEventFromBus(globalEvents.Categories.GLOBAL_ALERT, - globalEvents.SubCategories.PAGE_NOT_FOUND); + const alertEvent = eventBus.readAndPopEventFromBus( + globalEvents.Categories.GLOBAL_ALERT, + globalEvents.SubCategories.PAGE_NOT_FOUND + ); // If alert event is on the bus, then display the alert if (alertEvent !== undefined) { this.displayGlobalAlert = true; diff --git a/src/iss-components/site-sub-header/site-sub-header.vue b/src/iss-components/site-sub-header/site-sub-header.vue index 7e607804..4cd0af1d 100644 --- a/src/iss-components/site-sub-header/site-sub-header.vue +++ b/src/iss-components/site-sub-header/site-sub-header.vue @@ -57,8 +57,10 @@ export default { return this.getCmsContent(this.cmsWidgetName, this.contentProperty ?? 'SubHeaderText'); }, subText() { - let subTextFromCms = this.getCmsContent(this.cmsWidgetName, - this.subContentProperty ?? 'SecondaryText'); + let subTextFromCms = this.getCmsContent( + this.cmsWidgetName, + this.subContentProperty ?? 'SecondaryText' + ); if (this.stripRteStyle) { subTextFromCms = stripRteStyle(subTextFromCms); diff --git a/src/layouts/access-denied/access-denied.vue b/src/layouts/access-denied/access-denied.vue new file mode 100644 index 00000000..d11870bb --- /dev/null +++ b/src/layouts/access-denied/access-denied.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/layouts/address-lookup/address-lookup.spec.js b/src/layouts/address-lookup/address-lookup.spec.js index 0aef1ab5..ddc65015 100644 --- a/src/layouts/address-lookup/address-lookup.spec.js +++ b/src/layouts/address-lookup/address-lookup.spec.js @@ -2,11 +2,11 @@ import addressLookup from '@/layouts/address-lookup/address-lookup.vue'; // Supporting Files -import { settleAllPromises } from '@/helpers/layout-helper.js'; +import settleAllPromises from '@/helpers/layout-helper.js'; import { shallowMount } from '@vue/test-utils'; import { getMountOptions } from '@/helpers/unit-test-helper.js'; import { useMainStore } from '@/store'; -import { navigationScenarios } from '@/router/router-constants/navigation-scenarios'; +import navigationScenarios from '@/router/router-constants/navigation-scenarios'; jest.mock('@/helpers/damage-helper', () => ({ isGlassAvailableForCarId: jest.fn().mockImplementation(() => true), @@ -14,9 +14,7 @@ jest.mock('@/helpers/damage-helper', () => ({ })); // Mock our module for promises. -jest.mock('@/helpers/layout-helper.js', () => ({ - settleAllPromises: jest.fn() -})); +jest.mock('@/helpers/layout-helper.js', () => jest.fn()); /** @ignore */ function setupMocks({ @@ -47,7 +45,8 @@ function setupMocks({ } })); - const wrapper = shallowMount(addressLookup, + const wrapper = shallowMount( + addressLookup, getMountOptions({ route: route || undefined, router: { @@ -71,7 +70,8 @@ function setupMocks({ } } - })); + }) + ); const apiResponses = { vinLookupResponse: { @@ -348,11 +348,13 @@ describe('address-lookup.vue', () => { await wrapper.vm.forwardButtonAction(); // Assert - expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES, + expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith( + navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES, undefined, {}, {}, - carsFound); + carsFound + ); }); // eslint-disable-next-line max-len @@ -393,11 +395,14 @@ describe('address-lookup.vue', () => { await wrapper.vm.navigateForward(carsFound); // Assert - expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, + expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith( + navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, undefined, {}, - { displayVehicleChangeAlert: true }); - }); + { displayVehicleChangeAlert: true } + ); + } + ); test('single car was found and matches entered vehicle => navigateForwardWithSingleCarMatch', async () => { // Arrange diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue index b7d9d73e..9f86be4e 100644 --- a/src/layouts/address-lookup/address-lookup.vue +++ b/src/layouts/address-lookup/address-lookup.vue @@ -87,12 +87,12 @@ import { Form } from 'vee-validate'; // Supporting files import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; -import { settleAllPromises } from '@/helpers/layout-helper'; +import settleAllPromises from '@/helpers/layout-helper'; import routerParams from '@/router/router-constants/router-params'; import { getDamageString, isGlassAvailableForCarId } from '@/helpers/damage-helper'; import vinPagesMixin from '@/mixins/vin-pages-mixin'; -import { useMainStore } from '@/store'; +import { useMainStore } from '@/store/index.js'; export default { name: 'address-lookup', @@ -142,15 +142,17 @@ export default { }, computed: { AlertMatchedDifferentVehicleHeader() { - return this.getCmsContent('AlertMatchedDifferentVehicleWidget', - 'HeadlineText').replaceAll('{custom:damage}', getDamageString()); + return this.getCmsContent( + 'AlertMatchedDifferentVehicleWidget', + 'HeadlineText' + ).replaceAll('{custom:damage}', getDamageString()); }, AlertMatchedDifferentVehicleBody() { const vinYmmFound = // eslint-disable-next-line max-len `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`; const vinYmmExpected = - `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`; + `${useMainStore().order.vehicle.year} ${useMainStore().order.vehicle.make} ${useMainStore().order.vehicle.model}`; return this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText') .replaceAll('{custom:damage}', getDamageString()) @@ -158,8 +160,10 @@ export default { .replaceAll('{custom:vinYmmExpected}', vinYmmExpected); }, AlertMatchedTwoIdenticalYMMVehicleHeader() { - return this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', - 'HeadlineText').replaceAll('{custom:damage}', getDamageString()); + return this.getCmsContent( + 'AlertMatchedTwoIdenticalYMMVehicleWidget', + 'HeadlineText' + ).replaceAll('{custom:damage}', getDamageString()); }, AlertMatchedTwoIdenticalYMMVehicleBody() { const vinYmmsFound = @@ -167,7 +171,7 @@ export default { `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`; const vinYmmsExpected = // eslint-disable-next-line max-len - `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`; + `${useMainStore().order.vehicle.year} ${useMainStore().order.vehicle.make} ${useMainStore().order.vehicle.model} ${useMainStore().order.vehicle.style}`; return this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', 'BodyText') .replaceAll('{custom:damage}', getDamageString()) @@ -179,7 +183,7 @@ export default { // eslint-disable-next-line max-len `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`; const vinYmmExpected = - `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`; + `${useMainStore().order.vehicle.year} ${useMainStore().order.vehicle.make} ${useMainStore().order.vehicle.model}`; return (vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase()); } }, @@ -199,7 +203,7 @@ export default { }, methods: { arePagePrerequisitesValid() { - return this.mainStore.order.vehicle.carId !== null; + return useMainStore().order.vehicle.carId !== null; }, backButtonAction() { @@ -208,10 +212,12 @@ export default { }, attachCustomEvents() { this.prependActionToMethod(this, this.forwardButtonAction, () => { - this.pushEventToGA(this.$route.query[this.queryStrings.ISS_PAGE], + this.pushEventToGA( + this.$route.query[this.queryStrings.ISS_PAGE], this.GaActions.SUBMITTED, this.GaLabels.ADDRESS_LOOKUP, - true); + true + ); }); }, @@ -277,7 +283,7 @@ export default { vehicleInfoToCommit = Object.assign(carFound, { vin: carsFound[0].vin }); } else if (carsFound.length > 1) { // If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info - const matchingCars = carsFound.filter((vin) => vin.vehicle.carId === this.mainStore.order.vehicle.carId); + const matchingCars = carsFound.filter((vin) => vin.vehicle.carId === useMainStore().order.vehicle.carId); if (matchingCars.length === 1) { vehicleInfoToCommit = Object.assign(matchingCars[0].vehicle, { @@ -292,22 +298,24 @@ export default { } // Save vehicle, customer, service and registration information - await useMainStore().saveRegistrationAddressLookup({ - isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle, - vehicleInfo: - Object.keys(vehicleInfoToCommit).length === 0 - ? null - : vehicleInfoToCommit, - registrationInfo: { - firstName: this.customerQuestions.firstName, - lastName: this.customerQuestions.lastName, - address: this.customerQuestions.addressQuestions.streetAddress, - city: this.customerQuestions.addressQuestions.city, - state: this.customerQuestions.addressQuestions.state, - zipCode: this.customerQuestions.addressQuestions.zipCode - } - }, - false); + await useMainStore().saveRegistrationAddressLookup( + { + isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle, + vehicleInfo: + Object.keys(vehicleInfoToCommit).length === 0 + ? null + : vehicleInfoToCommit, + registrationInfo: { + firstName: this.customerQuestions.firstName, + lastName: this.customerQuestions.lastName, + address: this.customerQuestions.addressQuestions.streetAddress, + city: this.customerQuestions.addressQuestions.city, + state: this.customerQuestions.addressQuestions.state, + zipCode: this.customerQuestions.addressQuestions.zipCode + } + }, + false + ); return this.navigateForward(carsFound); }, @@ -322,18 +330,22 @@ export default { this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle ) { - this.$router.navigate(this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, + this.$router.navigate( + this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, this.$route, {}, - { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }); + { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true } + ); } else if (matchingCars.length === 1) { await this.navigateForwardWithSingleCarMatch(); } else { - this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES, + this.$router.navigate( + this.navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, - carsFound); + carsFound + ); } }, resetWarningsAndErrors() { diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue index 17e429cc..ba04cf22 100644 --- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue +++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue @@ -58,8 +58,10 @@ export default { emits: ['update: modelValue'], computed: { differentVehicleAlertHeader() { - return this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText').replaceAll('{custom:damage}', - getDamageString()); + return this.getCmsContent( + 'AlertMatchedDifferentVehicleWidget', + 'HeadlineText' + ).replaceAll('{custom:damage}', getDamageString()); }, differentVehicleAlertBody() { const vinYmmFound = @@ -73,11 +75,14 @@ export default { .replaceAll('{custom:vinYmmExpected}', vinYmmExpected); }, AlertMatchedTwoIdenticalYMMVehicleHeader() { - return this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', - 'HeadlineText').replaceAll('{custom:damage}', getDamageString()); + return this.getCmsContent( + 'AlertMatchedTwoIdenticalYMMVehicleWidget', + 'HeadlineText' + ).replaceAll('{custom:damage}', getDamageString()); }, AlertMatchedTwoIdenticalYMMVehicleBody() { const vinYmmsFound = + // eslint-disable-next-line max-len `${this.selectedVehicle?.vehicle.year} ${this.selectedVehicle?.vehicle.make} ${this.selectedVehicle?.vehicle.model} ${this.selectedVehicle?.vehicle.style}`; const vinYmmsExpected = `${this.vehicleSelected?.year} ${this.vehicleSelected?.make} ${this.vehicleSelected?.model} ${this.vehicleSelected?.style}`; diff --git a/src/layouts/address-vehicles/address-vehicles.spec.js b/src/layouts/address-vehicles/address-vehicles.spec.js index 862e6569..caab2ae3 100644 --- a/src/layouts/address-vehicles/address-vehicles.spec.js +++ b/src/layouts/address-vehicles/address-vehicles.spec.js @@ -1,5 +1,5 @@ import addressVehicles from '@/layouts/address-vehicles/address-vehicles.vue'; -import { settleAllPromises } from '@/helpers/layout-helper.js'; +import settleAllPromises from '@/helpers/layout-helper.js'; import { shallowMount } from '@vue/test-utils'; import { getMountOptions } from '@/helpers/unit-test-helper.js'; import { useMainStore } from '@/store'; @@ -21,9 +21,7 @@ jest.mock('@/helpers/cms-content-helper', () => ({ })); // Mock our module for promises. -jest.mock('@/helpers/layout-helper.js', () => ({ - settleAllPromises: jest.fn() -})); +jest.mock('@/helpers/layout-helper.js', () => jest.fn()); function setupMocks({ route = null, @@ -209,7 +207,8 @@ describe('address-vehicles.vue', () => { // Assert expect(wrapper.vm.$router.navigate).toBeCalledTimes(1); - }); + } + ); test('carId is not different on navigateForward (car was found) => Should handle navigating forward with car match', async () => { // Arrange @@ -233,10 +232,12 @@ describe('address-vehicles.vue', () => { useMainStore().order.vehicle.carId = 'CR00000395'; // Act - addressVehicles.beforeRouteEnter.call(wrapper.vm, + addressVehicles.beforeRouteEnter.call( + wrapper.vm, { query: { issPage: 'address-vehicles' } }, undefined, - (c) => c(wrapper.vm)); + (c) => c(wrapper.vm) + ); const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue index a7c12388..4494d938 100644 --- a/src/layouts/address-vehicles/address-vehicles.vue +++ b/src/layouts/address-vehicles/address-vehicles.vue @@ -65,7 +65,7 @@