From f24214fbca86610841d492f533e13a27d4b52747 Mon Sep 17 00:00:00 2001 From: Chloe Herd Date: Tue, 28 Mar 2023 14:01:17 -0400 Subject: [PATCH] Updated tests to match new functionality --- .../textbox-question/textbox-question.spec.js | 342 +++++++++++------- src/layouts/vin-lookup/vin-lookup.spec.js | 84 +++++ src/layouts/vin-lookup/vin-lookup.vue | 4 +- 3 files changed, 294 insertions(+), 136 deletions(-) diff --git a/src/common-components/textbox-question/textbox-question.spec.js b/src/common-components/textbox-question/textbox-question.spec.js index 1f15246f7..d9a3053a6 100644 --- a/src/common-components/textbox-question/textbox-question.spec.js +++ b/src/common-components/textbox-question/textbox-question.spec.js @@ -198,139 +198,6 @@ describe("textboxQuestion.vue", () => { 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"); - }); - it("Should not display camera or spinner icon when disabled", () => { // Arrange const inputId = "test"; @@ -343,7 +210,7 @@ describe("textboxQuestion.vue", () => { }, propsData: { modelValue: "", - includeCameraIcon: true, + includeImageQuestion: true, inputId: inputId, isDisabled: true, }, @@ -359,4 +226,211 @@ describe("textboxQuestion.vue", () => { expect(cameraIcon.exists()).toBe(false); expect(loadingIcon.exists()).toBe(false); }); + + describe("Image Uploading", () => { + it("Should call this.handleChange & emit update when fully valid image is submitted.", async () => { + // Arrange + const inputId = "test"; + const responseValue = "testResponse"; + + const imageHandler = jest.fn().mockImplementation(() => new Promise((resolve, reject) => { + resolve({ + data: [responseValue], + }); + })); + + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + }, + }, + propsData: { + modelValue: "", + 'onUpdate:modelValue': (v) => wrapper.setProps({modelValue: v}), + includeImageQuestion: true, + inputId: inputId, + imageQuestionSubmitHandler: imageHandler + }, + mixins: [mockMixin], + attachTo: document.body, + }); + + wrapper.vm.handleChange = jest.fn().mockImplementation(() => {}); + wrapper.vm.isImageValid = jest.fn().mockImplementation(() => true); + + // Act + const imageUploadField = wrapper.find('[data-test="image-upload"]'); + + await imageUploadField.trigger("change"); + + await wrapper.vm.$nextTick(); + + // Assert + + expect(wrapper.vm.imageQuestionSubmitHandler).toHaveBeenCalled(); + expect(wrapper.vm.handleChange).toHaveBeenCalled(); + expect(wrapper.emitted()).toHaveProperty("update:modelValue"); + }); + + it("Should not call handler and emit image-lookup-error when image is invalid.", async () => { + // Arrange + const inputId = "test"; + const responseValue = "testResponse"; + + const imageHandler = jest.fn().mockImplementation(() => new Promise((resolve, reject) => { + resolve({ + data: [responseValue], + }); + })); + + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + }, + }, + propsData: { + modelValue: "", + 'onUpdate:modelValue': (v) => wrapper.setProps({modelValue: v}), + includeImageQuestion: true, + inputId: inputId, + imageQuestionSubmitHandler: imageHandler + }, + mixins: [mockMixin], + attachTo: document.body, + }); + + wrapper.vm.handleChange = jest.fn().mockImplementation(() => {}); + wrapper.vm.isImageValid = jest.fn().mockImplementation(() => false); + + // Act + const imageUploadField = wrapper.find('[data-test="image-upload"]'); + + await imageUploadField.trigger("change"); + + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.imageQuestionSubmitHandler).not.toHaveBeenCalled(); + expect(wrapper.vm.handleChange).not.toHaveBeenCalled(); + expect(wrapper.emitted()).toHaveProperty("imageValidityError"); + }); + + it("Should emit image-lookup-error when image lookup responds with an error.", async () => { + // Arrange + const inputId = "test"; + + const imageHandler = jest.fn().mockImplementation(() => new Promise((resolve, reject) => { + reject({}); + })); + + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + }, + }, + propsData: { + modelValue: "", + 'onUpdate:modelValue': (v) => wrapper.setProps({modelValue: v}), + includeImageQuestion: true, + inputId: inputId, + imageQuestionSubmitHandler: imageHandler, + }, + mixins: [mockMixin], + attachTo: document.body, + }); + + wrapper.vm.handleChange = jest.fn().mockImplementation(() => {}); + wrapper.vm.isImageValid = jest.fn().mockImplementation(() => true); + + // Act + const imageUploadField = wrapper.find('[data-test="image-upload"]'); + + await imageUploadField.trigger("change"); + + await wrapper.vm.$nextTick(); + + // Assert + expect(wrapper.vm.imageQuestionSubmitHandler).toHaveBeenCalled(); + expect(wrapper.vm.handleChange).not.toHaveBeenCalled(); + expect(wrapper.emitted()).toHaveProperty("imageLookupError"); + }); + }); + + describe("Image Validation", () => { + it("Should return true if a valid image is tested.", () => { + // Arrange + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + }, + }, + propsData: { + inputId: "input ID", + }, + mixins: [mockMixin], + }); + + const image = { + size: 100 * 1028, + }; + + // Act + const result = wrapper.vm.isImageValid(image); + + // Assert + expect(result).toBeTruthy(); + }); + + it("Should return false if null image is tested.", () => { + // Arrange + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + }, + }, + propsData: { + inputId: "input ID", + }, + mixins: [mockMixin], + }); + + const image = null; + + // Act + const result = wrapper.vm.isImageValid(image); + + // Assert + expect(result).toBeFalsy(); + }); + + it("Should return false if oversized image is tested.", () => { + // Arrange + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + }, + }, + propsData: { + inputId: "input ID", + }, + mixins: [mockMixin], + }); + + const image = { + size: 10000000 * 1028, + }; + + // Act + const result = wrapper.vm.isImageValid(image); + + // Assert + expect(result).toBeFalsy(); + }); + }); }); diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js index 06174dafd..162319ef5 100644 --- a/src/layouts/vin-lookup/vin-lookup.spec.js +++ b/src/layouts/vin-lookup/vin-lookup.spec.js @@ -256,6 +256,90 @@ describe("vin-lookup.vue", () => { expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(1); }); }); + + describe("getVinFromImage", () => { + test("GetVinFromImage resolves with first valid VIN when any vins are returned.", async () => { + // Arrange + const responseValue = "testResponse"; + const lookup = jest.fn().mockImplementation(() => { + return new Promise( + (resolve, reject) => resolve([ responseValue ]) + ); + }); + + const image = {}; + + const storeMixin = { + methods: { + dispatchStoreAction: lookup, + }, + }; + + const { wrapper } = setupMocks({ + mixins: [storeMixin] + }); + + // Act + const response = await wrapper.vm.getVinFromImage(image); + + // Assert + expect(lookup).toHaveBeenCalled(); + expect(response).toEqual(responseValue) + }); + + test("GetVinFromImage rejects if no vins are returned.", async () => { + // Arrange + const lookup = jest.fn().mockImplementation(() => { + return new Promise( + (resolve, reject) => resolve([]) + ); + }); + + const image = {}; + + const storeMixin = { + methods: { + dispatchStoreAction: lookup, + }, + }; + + const { wrapper } = setupMocks({ + mixins: [storeMixin] + }); + + // Act + const promise = wrapper.vm.getVinFromImage(image); + + // Assert + await expect(promise).rejects.toEqual("No VINs detected."); + }); + + test("GetVinFromImage rejects if an error occurs.", async () => { + const lookup = jest.fn().mockImplementation(() => { + return new Promise( + (resolve, reject) => reject() + ); + }); + + const image = {}; + + const storeMixin = { + methods: { + dispatchStoreAction: lookup, + }, + }; + + const { wrapper } = setupMocks({ + mixins: [storeMixin] + }); + + // Act + const promise = wrapper.vm.getVinFromImage(image); + + // Assert + await expect(promise).rejects.toEqual("An error occurred during the lookup."); + }); + }); }); function setupMocks({ customMountOptions }) { diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 65fb202a8..3c5549333 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -405,11 +405,11 @@ export default { if (response.data.length > 0) { resolve(response.data[0]); } else { - reject(); + reject("No VINs detected."); } }) .catch(() => { - reject(); + reject("An error occurred during the lookup."); }); }); },