From e06be65e341aceee5f9941ef012806ae6584edda Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Tue, 14 Mar 2023 18:30:45 -0400
Subject: [PATCH] Add tests for textbox-question

---
 .../textbox-question/textbox-question.spec.js | 139 ++++++++++++++++++
 .../textbox-question/textbox-question.vue     |   1 +
 2 files changed, 140 insertions(+)

diff --git a/src/common-components/textbox-question/textbox-question.spec.js b/src/common-components/textbox-question/textbox-question.spec.js
index d5d1de4e6..e2a5ab820 100644
--- a/src/common-components/textbox-question/textbox-question.spec.js
+++ b/src/common-components/textbox-question/textbox-question.spec.js
@@ -197,4 +197,143 @@ describe("textboxQuestion.vue", () => {
         // Assert
         expect(wrapper.vm.handleChange).toHaveBeenCalled;
     });
+
+    it("Should call this.handleChange when image is submitted with valid value.", async () => {
+        // Arrange
+        const inputId = 'test';
+        const responseValue = 'testResponse';
+
+        const storeMixin = {
+            methods: {
+                dispatchStoreAction: jest.fn().mockImplementation(() => {
+                    return new Promise(
+                        (resolve, reject) => resolve(
+                            {
+                                data: [ responseValue ]
+                            }
+                        )
+                    );
+                })
+            }
+        };
+
+        const wrapper = shallowMount(textboxQuestion, {
+            global: {
+                directives: {
+                    maska: maska,
+                },
+            },
+            propsData: {
+                modelValue: "",
+                includeCameraIcon: true,
+                inputId: inputId,
+            },
+            mixins: [mockMixin, storeMixin],
+            attachTo: document.body
+        });
+
+        wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
+
+        // Act
+        const imageUploadField = wrapper.find('[data-test="image-upload"]');
+
+        await imageUploadField.trigger('change');
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+
+        expect(wrapper.vm.handleChange).toHaveBeenCalled();
+        expect(wrapper.emitted()).toHaveProperty("update:modelValue");
+    });
+
+    it("Should emit image-lookup-error when image is submitted with invalid value", async () => {
+        // Arrange
+        const inputId = 'test';
+
+        const storeMixin = {
+            methods: {
+                dispatchStoreAction: jest.fn().mockImplementation(() => {
+                    return new Promise(
+                        (resolve, reject) => resolve(
+                            {
+                                data: []
+                            }
+                        )
+                    );
+                })
+            }
+        };
+
+        const wrapper = shallowMount(textboxQuestion, {
+            global: {
+                directives: {
+                    maska: maska,
+                },
+            },
+            propsData: {
+                modelValue: "",
+                includeCameraIcon: true,
+                inputId: inputId,
+            },
+            mixins: [mockMixin, storeMixin],
+            attachTo: document.body
+        });
+
+        wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
+
+        // Act
+        const imageUploadField = wrapper.find('[data-test="image-upload"]');
+
+        await imageUploadField.trigger('change');
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.handleChange).not.toHaveBeenCalled();
+        expect(wrapper.emitted()).toHaveProperty("imageLookupError");
+    });
+
+    it("Should emit image-lookup-error when image endpoint responds with an error", async () => {
+        // Arrange
+        const inputId = 'test';
+
+        const storeMixin = {
+            methods: {
+                dispatchStoreAction: jest.fn().mockImplementation(() => {
+                    return new Promise(
+                        (resolve, reject) => reject()
+                    );
+                })
+            }
+        };
+
+        const wrapper = shallowMount(textboxQuestion, {
+            global: {
+                directives: {
+                    maska: maska,
+                },
+            },
+            propsData: {
+                modelValue: "",
+                includeCameraIcon: true,
+                inputId: inputId,
+            },
+            mixins: [mockMixin, storeMixin],
+            attachTo: document.body
+        });
+
+        wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
+
+        // Act
+        const imageUploadField = wrapper.find('[data-test="image-upload"]');
+
+        await imageUploadField.trigger('change');
+
+        await wrapper.vm.$nextTick();
+
+        // Assert
+        expect(wrapper.vm.handleChange).not.toHaveBeenCalled();
+        expect(wrapper.emitted()).toHaveProperty("imageLookupError");
+    });
 });
diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 9c25a8bc7..27800a8e2 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -42,6 +42,7 @@
                     id="vin-input"
                     accept="image/"
                     aria-label="Camera icon/button"
+                    data-test="image-upload"
                     @change="submitImage" />
             </label>
             <loader