Merge pull request #1012 from Safelite/feature/CSR-1214-release

Disable image uploading when input is disabled.

src/common-components/textbox-question/textbox-question.spec.js

@@ -330,4 +330,33 @@ describe("textboxQuestion.vue", () => {
         expect(wrapper.vm.handleChange).not.toHaveBeenCalled();
         expect(wrapper.emitted()).toHaveProperty("imageLookupError");
     });
+
+    it("Should not display camera or spinner icon when disabled", () => {
+        // Arrange
+        const inputId = "test";
+
+        const wrapper = shallowMount(textboxQuestion, {
+            global: {
+                directives: {
+                    maska: maska,
+                },
+            },
+            propsData: {
+                modelValue: "",
+                includeCameraIcon: true,
+                inputId: inputId,
+                isDisabled: true,
+            },
+            mixins: [mockMixin],
+            attachTo: document.body,
+        });
+
+        // Act
+        const cameraIcon = wrapper.find('[data-test="image-upload"]');
+        const loadingIcon = wrapper.findComponent("loader");
+
+        // Assert
+        expect(cameraIcon.exists()).toBe(false);
+        expect(loadingIcon.exists()).toBe(false);
+    });
 });

src/common-components/textbox-question/textbox-question.vue

@@ -36,19 +36,21 @@
                 :maxlength="maxLength ? maxLength : '999'"
                 @focus="$emit('focus', $event.target.value)" />
             <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
-            <label class="camera-icon-input" v-show="includeCameraIcon && !isLoading">
-                <input
-                    type="file"
-                    id="vin-input"
-                    accept="image/jpeg,image/png"
-                    aria-label="Camera icon/button"
-                    data-test="image-upload"
-                    @change="submitImage" />
-            </label>
-            <loader
-                v-show="includeCameraIcon && isLoading"
-                loaderColor="blue"
-                class="loading-icon"></loader>
+            <template v-if="!isDisabled">
+                <label class="camera-icon-input" v-show="includeCameraIcon && !isLoading">
+                    <input
+                        type="file"
+                        id="vin-input"
+                        accept="image/jpeg,image/png"
+                        aria-label="Camera icon/button"
+                        data-test="image-upload"
+                        @change="submitImage" />
+                </label>
+                <loader
+                    v-show="includeCameraIcon && isLoading"
+                    loaderColor="blue"
+                    class="loading-icon"></loader>
+            </template>
         </div>
         <div v-show="errorMessage" class="row my-2 form-test-error">
             <span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>