From cba95f7e60181aae7e1f9784665b1ade4a00a5bb Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Tue, 15 Aug 2023 15:57:41 -0400 Subject: [PATCH] Add tests for modal --- .../customer-details-modal-question.spec.js | 148 ++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.spec.js diff --git a/src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.spec.js b/src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.spec.js new file mode 100644 index 000000000..b87653c73 --- /dev/null +++ b/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 }; +}