Add tests for customer-review

src/layouts/review/review-sections/customer-review/customer-review.spec.js

@@ -1,3 +1,159 @@
-describe("Customer review Block", () => {
+import { shallowMount } from "@vue/test-utils";
-    test.todo("Add more tests as specific functionality is added.");
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+import customerReview from "@/layouts/review/review-sections/customer-review/customer-review";
+
+const testConstants = {
+    cms: {
+        header: {
+            text: "Header",
+        },
+        sms: {
+            template: "Test {custom:smsOptInJoiner}",
+            expected: {
+                ifTrue: "Test in to",
+                ifFalse: "Test out of",
+            },
+        },
+    },
+    customer: {
+        firstName: "First",
+        lastName: "Last",
+        phoneNumber: "111-111-1111",
+        emailAddress: "builddigitaltest@safelite.com",
+        isSmsOptIn: false,
+    },
+    displayContent: {
+        fullName: "First Last",
+        phoneNumber: "111-111-1111",
+        emailAddress: "builddigitaltest@safelite.com",
+        smsOptIn: "Test out of",
+    },
+};
+
+let cmsContent;
+
+describe("Customer Review Block", () => {
+    beforeEach(() => {
+        cmsContent = {
+            CustomerWidget: {
+                HeaderText: testConstants.cms.header.text,
+                SubheaderText: testConstants.cms.sms.template,
+            },
+        };
+    });
+
+    test("Should display header text from cms", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.header).toEqual(testConstants.cms.header.text);
+    });
+
+    describe("SMS Opt In Text", () => {
+        test("Should render correctly when opt in is true:", async () => {
+            // Arrange
+            let props = generateDefaultProps();
+            props.customer.isSmsOptIn = true;
+
+            const { wrapper } = setupMocks({
+                propsData: props,
+            });
+
+            // Act
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.smsOptIn).toEqual(testConstants.cms.sms.expected.ifTrue);
+        });
+        test("Should render correctly when opt in is false:", async () => {
+            // Arrange
+            let props = generateDefaultProps();
+            props.customer.isSmsOptIn = false;
+
+            const { wrapper } = setupMocks({
+                propsData: props,
+            });
+
+            // Act
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.smsOptIn).toEqual(testConstants.cms.sms.expected.ifFalse);
+        });
+        test("Should render correctly when opt in is null:", async () => {
+            // Arrange
+            let props = generateDefaultProps();
+            props.customer.isSmsOptIn = null;
+
+            const { wrapper } = setupMocks({
+                propsData: props,
+            });
+
+            // Act
+            await wrapper.vm.$nextTick();
+
+            // Assert
+            expect(wrapper.vm.smsOptIn).toEqual(testConstants.cms.sms.expected.ifFalse);
+        });
+    });
+
+    test("Should render correct display content", async () => {
+        // Arrange
+        let props = generateDefaultProps();
+
+        const { wrapper } = setupMocks({
+            propsData: props,
+        });
+
+        // Act
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.displayContent).toEqual([
+            testConstants.displayContent.fullName,
+            testConstants.displayContent.emailAddress,
+            testConstants.displayContent.phoneNumber,
+            testConstants.displayContent.smsOptIn,
+        ]);
+    });
 });
+
+function generateDefaultProps() {
+    return {
+        cmsWidgetName: "CustomerWidget",
+        customer: {
+            firstName: testConstants.customer.firstName,
+            lastName: testConstants.customer.lastName,
+            phoneNumber: testConstants.customer.phoneNumber,
+            emailAddress: testConstants.customer.emailAddress,
+            isSmsOptIn: testConstants.customer.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(customerReview, mountOptions);
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}