adding unit tests for contact-details-drawer

src/layouts/tpa-submit/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`contact-details-drawer snapshot matches returns the initial data 1`] = `
+Object {
+  "emailAddress": "fred.tay@gmail.com",
+  "firstName": "Frederick",
+  "isModalOpened": false,
+  "lastName": "Taylor",
+  "phoneNumber": "606-009-2943",
+  "rules": Object {
+    "emailAddress": "email-required|email-address-format",
+    "firstName": "first-name-required",
+    "lastName": "last-name-required",
+    "phoneNumber": "phone-number-required|phone-number-format",
+  },
+  "widget": Object {
+    "drawerFooter": "ContactDetailsDrawerFooterWidget",
+    "emailQuestion": "EmailQuestionWidget",
+    "firstNameQuestion": "FirstNameQuestionWidget",
+    "lastNameQuestion": "LastNameQuestionWidget",
+    "phoneNumberQuestion": "PhoneNumberQuestionWidget",
+    "title": "ContactDetailsDrawerHeaderWidget",
+  },
+}
+`;

src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js

@@ -0,0 +1,134 @@
+// Components
+import { shallowMount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import contactDetailsDrawer from '@/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue';
+
+// Supporting Files
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
+import { useMainStore } from '@/store';
+
+function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRunAfterInitializingStore = () => {}) {
+    const mountOptions = getMountOptions({
+        router: {
+            navigate: jest.fn()
+        }
+    });
+
+    const testingPinia = createTestingPinia({
+        initialState: {
+            main: mainInitialState
+        }
+    });
+    useMainStore(testingPinia);
+    methodToRunAfterInitializingStore();
+
+    mountOptions.global.plugins = [testingPinia];
+    mountOptions.data = () => (initialData);
+
+    const wrapper = shallowMount(contactDetailsDrawer, mountOptions);
+    return { wrapper };
+}
+
+describe('contact-details-drawer', () => {
+    test('snapshot matches returns the initial data', () => {
+        // Arrange
+        const firstName = 'Frederick';
+        const lastName = 'Taylor';
+        const emailAddress = 'fred.tay@gmail.com';
+        const phoneNumber = '606-009-2943';
+        const mainInitialState = {
+            order: {
+                contactInfo: {
+                    firstName,
+                    lastName,
+                    emailAddress,
+                    phoneNumber
+                }
+            }
+        };
+        const { wrapper } = getMountedComponent(mainInitialState);
+
+        // Assert
+        expect(wrapper.vm.$data).toMatchSnapshot();
+    });
+    test('renders modal', () => {
+        // Arrange
+        const wrapper = shallowMount(contactDetailsDrawer, getMountOptions());
+
+        // Act
+        const modal = wrapper.findComponent({ ref: 'contact-details-modal' });
+
+        // Assert
+        expect(modal.exists()).toBeTruthy();
+        expect(modal.classes()).toContain('contact-details-drawer');
+    });
+    describe('method', () => {
+        describe('saveContactDetails', () => {
+            test.each([
+                ['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909'],
+                [null, 'Jones', 's.jones@gmail.com', '724-996-0909'],
+                ['Sarah', null, 's.jones@gmail.com', '724-996-0909'],
+                ['Sarah', 'Jones', null, '724-996-0909'],
+                ['Sarah', 'Jones', 's.jones@gmail.com', null]
+
+            ])(
+                'when first name data "%p", last name "%p", email "%p", and phone number "%p", updateContactInfo called with expected',
+                (firstName, lastName, emailAddress, phoneNumber) => {
+                    // Arrange
+                    const mainInitialState = {
+                        order: {
+                            contactInfo: {
+                                firstName: 'Frederick',
+                                lastName: 'Taylor',
+                                emailAddress: 'fred.tay@gmail.com',
+                                phoneNumber: '606-009-2943'
+                            }
+                        }
+                    };
+                    const initialData = {
+                        firstName, lastName, emailAddress, phoneNumber
+                    };
+                    const { wrapper } = getMountedComponent(mainInitialState, initialData);
+
+                    // Act
+                    wrapper.vm.saveContactDetails();
+
+                    // Assert
+                    expect(wrapper.emitted()['update-contact-details']).toBeTruthy();
+                    expect(useMainStore().updateContactInfo).toBeCalledTimes(1);
+                    expect(useMainStore().updateContactInfo).toBeCalledWith({ firstName, lastName, emailAddress, phoneNumber });
+                }
+            );
+        });
+        test('resetFormValues sets data to expected values', () => {
+            // Arrange
+            const firstName = 'John';
+            const lastName = 'Doe';
+            const emailAddress = 'test@example.com';
+            const phoneNumber = '123-456-1234';
+            const mainInitialState = {
+                order: {
+                    contactInfo: {
+                        firstName,
+                        lastName,
+                        emailAddress,
+                        phoneNumber
+                    }
+                }
+            };
+            const initialData = {
+                firstName: 'some name',
+                lastName: 'some end name',
+                emailAddress: 'email@what.com',
+                phoneNumber: '888'
+            };
+            const { wrapper } = getMountedComponent(mainInitialState, initialData);
+
+            // Act
+            wrapper.vm.resetFormValues();
+
+            // Assert
+            expect(wrapper.vm.firstName).toBe(firstName);
+        });
+    });
+});

src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue

@@ -6,12 +6,11 @@
         :onModalClosedCallback="resetFormValues"
         class="contact-details-drawer"
         @isModalOpened="setModalStatus"
-        @footerButtonEvent="saveContactDetails">
+        @footerButtonEvent="clickFooterButtonEvent">
         <template v-if="isModalOpened">
             <textboxQuestion
                 ref="firstNameQuestion"
                 v-model="firstName"
-                class=""
                 inputId="firstName"
                 :cmsWidgetName="widget.firstNameQuestion"
                 isRequired
@@ -106,6 +105,10 @@ export default {
         setModalStatus(isOpened) {
             this.isModalOpened = isOpened;
         },
+        clickFooterButtonEvent() {
+            this.saveContactDetails();
+            this.closeModal();
+        },
         saveContactDetails() {
             const contactInfo = {
                 firstName: this.firstName,
@@ -115,7 +118,6 @@ export default {
             };
             useMainStore().updateContactInfo(contactInfo);
             this.$emit('update-contact-details');
-            this.closeModal();
         },
         resetFormValues() {
             const { firstName,

src/layouts/tpa-submit/tpa-submit.spec.js

@@ -299,6 +299,16 @@ describe('tpa-submit', () => {
             expect(siteFooter.props().cmsWidgetName).toBe('SiteFooterWidget');
             expect(siteFooter.classes()).toContain('mt-5');
         });
+        test('contact details drawer', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+
+            // Act
+            const contactDetailsDrawer = wrapper.findComponent({ ref: 'contactDetailsDrawer' });
+
+            // Assert
+            expect(contactDetailsDrawer.exists()).toBeTruthy();
+        });
     });
     describe('before route enter', () => {
         test('produces 4 sections', async () => {