- {{ 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 mountOptions = getMountOptions();
+ mountOptions.global = {
+ plugins: [createTestingPinia({
+ initialState: {
+ main: mainInitialState
+ }
+ })]
+ };
+
+ const wrapper = shallowMount(contactDetails, mountOptions);
+
+ // 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 c2ff4ade..a7071ee3 100644
--- a/src/layouts/contact-details/contact-details.vue
+++ b/src/layouts/contact-details/contact-details.vue
@@ -33,12 +33,12 @@
:validationRules="rules.lastName" />
+ :validationRules="rules.emailAddress" />
+ maxLength="250"
+ :inputRows="4" />