Add tests for modal

src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.spec.js

@@ -0,0 +1,148 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+import customerDetailsModalQuestion from "@/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question";
+
+const testConstants = {
+    previousCustomerValues: {
+        firstName: "First",
+        lastName: "Last",
+        emailAddress: "builddigitaltest@safelite.com",
+        phoneNumber: "111-111-1111",
+        isSmsOptIn: false,
+    },
+    newValues: {
+        firstName: "New First",
+        lastName: "New Last",
+        emailAddress: "builddigitaltest@safelite.com - new",
+        phoneNumber: "222-222-2222",
+        isSmsOptIn: true,
+    },
+};
+
+let cmsContent;
+
+describe("Customer Details Modal", () => {
+    beforeEach(() => {
+        cmsContent = {};
+    });
+
+    describe("Submit", () => {
+        test("Should push to store if a field has changed", async () => {
+            // Arrange
+            let props = generateDefaultProps();
+
+            const { wrapper } = setupMocks({
+                propsData: props,
+            });
+
+            // Act
+            wrapper.vm.onModalOpened();
+
+            wrapper.vm.firstName = testConstants.newValues.firstName;
+
+            await wrapper.vm.setContactDetails();
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalled();
+        });
+
+        test("Should not push to store if no fields have changed", async () => {
+            // Arrange
+            let props = generateDefaultProps();
+
+            const { wrapper } = setupMocks({
+                propsData: props,
+            });
+
+            // Act
+            wrapper.vm.onModalOpened();
+
+            await wrapper.vm.setContactDetails();
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.dispatchStoreAction).not.toHaveBeenCalled();
+        });
+    });
+
+    describe("Default values", () => {
+        test("Should populate on open", () => {
+            // Arrange
+            let props = generateDefaultProps();
+
+            const { wrapper } = setupMocks({
+                propsData: props,
+            });
+
+            // Act
+            wrapper.vm.onModalOpened();
+
+            // Assert
+            expect(wrapper.vm.firstName).toBe(testConstants.previousCustomerValues.firstName);
+            expect(wrapper.vm.lastName).toBe(testConstants.previousCustomerValues.lastName);
+            expect(wrapper.vm.emailAddress).toBe(testConstants.previousCustomerValues.emailAddress);
+            expect(wrapper.vm.phoneNumber).toBe(testConstants.previousCustomerValues.phoneNumber);
+            expect(wrapper.vm.isSmsOptIn).toBe(testConstants.previousCustomerValues.isSmsOptIn);
+        });
+
+        test("Should replace old values on open", async () => {
+            // Arrange
+            let props = generateDefaultProps();
+
+            const { wrapper } = setupMocks({
+                propsData: props,
+            });
+
+            // Act
+            wrapper.vm.firstName = testConstants.newValues.firstName;
+            wrapper.vm.lastName = testConstants.newValues.lastName;
+            wrapper.vm.emailAddress = testConstants.newValues.emailAddress;
+            wrapper.vm.phoneNumber = testConstants.newValues.phoneNumber;
+            wrapper.vm.isSmsOptIn = testConstants.newValues.isSmsOptIn;
+
+            wrapper.vm.onModalOpened();
+
+            // Assert
+            expect(wrapper.vm.firstName).toBe(testConstants.previousCustomerValues.firstName);
+            expect(wrapper.vm.lastName).toBe(testConstants.previousCustomerValues.lastName);
+            expect(wrapper.vm.emailAddress).toBe(testConstants.previousCustomerValues.emailAddress);
+            expect(wrapper.vm.phoneNumber).toBe(testConstants.previousCustomerValues.phoneNumber);
+            expect(wrapper.vm.isSmsOptIn).toBe(testConstants.previousCustomerValues.isSmsOptIn);
+        });
+    });
+});
+
+function generateDefaultProps() {
+    return {
+        previousCustomerValues: {
+            firstName: testConstants.previousCustomerValues.firstName,
+            lastName: testConstants.previousCustomerValues.lastName,
+            emailAddress: testConstants.previousCustomerValues.emailAddress,
+            phoneNumber: testConstants.previousCustomerValues.phoneNumber,
+            isSmsOptIn: testConstants.previousCustomerValues.isSmsOptIn,
+        },
+    };
+}
+
+function setupMocks(customMountOptions) {
+    const mountOptions = getMountOptions(customMountOptions);
+
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+                return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
+            }),
+        },
+    };
+
+    mountOptions.global.mixins = [mockMixin];
+
+    const wrapper = shallowMount(customerDetailsModalQuestion, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.openModal = jest.fn();
+    wrapper.vm.closeModal = jest.fn();
+    wrapper.vm.dispatchStoreAction = jest.fn();
+    return { wrapper };
+}