diff --git a/src/digital-components/textarea-question/textarea-question.vue b/src/digital-components/textarea-question/textarea-question.vue index 9336a1c0..a9f46273 100644 --- a/src/digital-components/textarea-question/textarea-question.vue +++ b/src/digital-components/textarea-question/textarea-question.vue @@ -30,7 +30,7 @@

- {{ characterCount }}/{{ maxLength }} characters remaining + {{ maxLength - characterCount }}/{{ maxLength }} characters remaining

{ describe('Rendering', () => { @@ -153,7 +154,7 @@ describe('contactDetails.vue', () => { // Assert expect(footer.exists()).toBe(true); }); - test('Mocked store yields expected data', () => { + test('Mocked store with no contact info yields expected data', () => { // Arrange const mountOptions = getMountOptions(); @@ -184,9 +185,50 @@ describe('contactDetails.vue', () => { // Assert expect(wrapper.vm.firstName).toBe(firstName); expect(wrapper.vm.lastName).toBe(lastName); - expect(wrapper.vm.email).toBe(emailAddress); + expect(wrapper.vm.emailAddress).toBe(emailAddress); expect(wrapper.vm.phoneNumber).toBe(phoneNumber); }); + test('Mock store with contact info yields expected data', () => { + // Arrange + const customer = { + firstName: getRandomString(4, 15), + lastName: getRandomString(4, 15), + emailAddress: getRandomString(10, 20), + phoneNumber: getRandomInt(1000000000, 9999999999) + }; + const contactInfo = { + firstName: getRandomString(4, 15), + lastName: getRandomString(4, 15), + emailAddress: getRandomString(10, 20), + phoneNumber: getRandomInt(1000000000, 9999999999), + requestTextUpdates: getRandomBoolean(), + notesForTechnician: getRandomString(50, 100) + }; + const mainInitialState = { + order: { + customer, + contactInfo + } + }; + + const wrapper = shallowMount(contactDetails, getMountOptions({ + global: { + plugins: [createTestingPinia({ + initialState: { + main: mainInitialState + } + })] + } + })); + + // Assert + expect(wrapper.vm.firstName).toBe(contactInfo.firstName); + expect(wrapper.vm.lastName).toBe(contactInfo.lastName); + expect(wrapper.vm.emailAddress).toBe(contactInfo.emailAddress); + expect(wrapper.vm.phoneNumber).toBe(contactInfo.phoneNumber); + expect(wrapper.vm.requestTextUpdates).toBe(contactInfo.requestTextUpdates); + expect(wrapper.vm.notesForTechnician).toBe(contactInfo.notesForTechnician); + }); }); describe('Navigation', () => { @@ -222,5 +264,44 @@ describe('contactDetails.vue', () => { expect(wrapper.vm.$router.navigate) .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined); }); + test('Forward button click updates contact info', () => { + // Arrange + const mountOptions = getMountOptions({ + router: { + navigate: jest.fn() + }, + global: { + plugins: [createTestingPinia()] + } + }); + const wrapper = shallowMount(contactDetails, mountOptions); + const firstName = getRandomString(4, 15); + const lastName = getRandomString(4, 15); + const emailAddress = getRandomString(10, 20); + const phoneNumber = getRandomInt(1000000000, 9999999999); + const requestTextUpdates = getRandomBoolean(); + const notesForTechnician = getRandomString(1, 100); + wrapper.setData({ + firstName, + lastName, + emailAddress, + phoneNumber, + requestTextUpdates, + notesForTechnician + }); + + // Act + wrapper.vm.forwardButtonAction(); + + // Assert + expect(useMainStore().updateContactInfo).toHaveBeenCalledWith({ + firstName, + lastName, + emailAddress, + phoneNumber, + requestTextUpdates, + notesForTechnician + }); + }); }); }); diff --git a/src/layouts/contact-details/contact-details.vue b/src/layouts/contact-details/contact-details.vue index 96fc0c4d..1aa6c18f 100644 --- a/src/layouts/contact-details/contact-details.vue +++ b/src/layouts/contact-details/contact-details.vue @@ -65,7 +65,7 @@ :isRequired="false" :cmsWidgetName="widget.notesQuestion" maxLength="250" - :inputRows="3" /> + :inputRows="4" />

. + href="//www.safelite.com/terms-of-use" />{{ "." }}

lastName: null, emailAddress: null, phoneNumber: null, - textUpdates: false, + requestTextUpdates: false, notesForTechnician: '' } }, @@ -201,7 +201,7 @@ export const useMainStore = defineStore({ lastName: s.order.contactInfo.lastName ?? s.order.customer.lastName, emailAddress: s.order.contactInfo.emailAddress ?? s.order.customer.emailAddress, phoneNumber: s.order.contactInfo.phoneNumber ?? s.order.customer.phoneNumber, - textUpdates: s.order.contactInfo.textUpdates ?? false, + requestTextUpdates: s.order.contactInfo.requestTextUpdates ?? false, notesForTechnician: s.order.contactInfo.notesForTechnician }), experimentOrder: (state) => @@ -1142,7 +1142,7 @@ export const useMainStore = defineStore({ this.order.contactInfo.lastName = contactInfo.lastName; this.order.contactInfo.emailAddress = contactInfo.emailAddress; this.order.contactInfo.phoneNumber = contactInfo.phoneNumber; - this.order.contactInfo.textUpdates = contactInfo.textUpdates; + this.order.contactInfo.requestTextUpdates = contactInfo.requestTextUpdates; this.order.contactInfo.notesForTechnician = contactInfo.notesForTechnician; }, diff --git a/src/store/store.spec.js b/src/store/store.spec.js index 03b06257..36d73944 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -422,5 +422,8 @@ describe("Store", () => { expect(store.payment.insuranceCoverage.isVerified).toBe(false); expect(store.payment.insuranceCoverage.coverageStatus).toBe(coverageStatuses.PENDING); }); - }) -}); \ No newline at end of file + }); + + // TODO add tests + describe('updateContactInfo method', () => {}); +}); diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue index 49d08ffb..9cb5d461 100644 --- a/src/ux-components/text-link/text-link.vue +++ b/src/ux-components/text-link/text-link.vue @@ -1,19 +1,15 @@