Add basic setup for address-questions tests

src/layouts/address-lookup/customer-questions/address-questions/address-questions.spec.js

@@ -0,0 +1,154 @@
+// Components
+import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
+import alert from "@/ux-components/alert/alert";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+import router from "@/router";
+
+// Supporting Files
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import baseMixin from "@/mixins/base-mixin";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { mount, shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { storeActions } from "@/constants/store-actions";
+import { storeMutations } from "@/constants/store-mutations";
+import store from "@/store";
+
+let fillInAddressFunction;
+
+// Mock our module for promises.
+// jest.mock("@/helpers/layout-helper.js", () => ({
+//     settleAllPromises: jest.fn(),
+// }));
+
+// // Mock fetchCmsContentForPage
+// jest.mock("@/helpers/cms-content-helper", () => ({
+//     fetchCmsContentForPage: jest.fn(),
+// }));
+
+// jest.mock("@/mixins/base-mixin", () => {
+//   getCmsContent: jest.fn()
+// })
+
+// jest.mock("@/helpers/damage-helper", () => ({
+//   isGlassAvailableForCarId: jest.fn().mockImplementation(() => true),
+//   getDamageString: jest.fn()
+// }));
+
+// jest.mock("@/helpers/heritage-integration/navigation-helper", () => ({
+//   navigateAfterSaveToHeritageFunnel: jest.fn()
+// }));
+
+describe("address-questions.vue", () => {
+  describe("initial state", () => {
+    test("only street address field is shown", () => {
+      // Arrange
+      const { wrapper } = setupMocks();
+
+      // Assert
+      const streetAddressField = wrapper.findComponent({ ref: "autocomplete" });
+      const cityField = wrapper.findComponent({ ref: "city" });
+      const stateField = wrapper.findComponent({ ref: "state" });
+      const zipCodeField = wrapper.findComponent({ ref: "zipCode" });
+
+      expect(streetAddressField.exists()).toBe(true);
+      expect(streetAddressField.isVisible()).toBe(true);
+      expect(cityField.exists()).toBe(true);
+      expect(cityField.isVisible()).toBe(false);
+      expect(stateField.exists()).toBe(true);
+      expect(stateField.isVisible()).toBe(false);
+      expect(zipCodeField.exists()).toBe(true);
+      expect(zipCodeField.isVisible()).toBe(false);
+
+      const alerts = wrapper.findAllComponents(alert);
+      expect(alerts.length).toEqual(0);
+    })
+  });
+
+  describe("happy paths", () => {
+    test.only("street address is entered, user chooses from autocomplete results => other fields are filled in", async () => {
+      // Arrange
+      // Create the `addressField1` element (autocomplete's input)
+      let autocompleteElement = document.createElement("input")
+      autocompleteElement.getPlace = jest.fn();
+      document.getElementById = jest.fn().mockReturnValue(autocompleteElement);
+
+      const { wrapper } = setupMocks({ autocompleteElement: autocompleteElement });
+      await wrapper.setData({
+        addressModel: {
+          streetAddress: "123 Test Street"
+        }
+      })
+
+
+      // Act
+      autocompleteElement.dispatchEvent(new CustomEvent("place_changed", { bubbles: true }));
+    })
+  });
+});
+
+function setupMocks({ mountOptions, autocompleteElement, isShallowMount = true }) {
+  store.commit(storeMutations.RESET_STATE);
+
+  const resultingMountOptions = getMountOptions({
+    ...mountOptions,
+    router: {
+      navigate: jest.fn(),
+      navigateAfterSave: jest.fn()
+    },
+    loadScript: jest.fn().mockResolvedValue()
+  });
+
+  // document.getElementById = jest.fn().mockImplementation(id => {
+  //   if (id == "autocomplete") {
+  //     console.log("get it")
+  //     return autocompleteElement;
+  //   }
+  // })
+
+  fillInAddressFunction = null;
+
+  window.google = {
+    maps: {
+      event: {
+        addListener: jest.fn().mockImplementation((element, eventName, callbackFunction) => {
+          console.log("Here")
+          // console.log(element)
+          // console.log(eventName)
+          // console.log(callbackFunction)
+          // element.addEventListener(eventName, callbackFunction);
+          element.addEventListener(eventName, callbackFunction);
+          fillInAddressFunction = callbackFunction;
+          // console.log("Hmm")
+        }),
+        removeListener: jest.fn(),
+        clearInstanceListeners: jest.fn()
+      },
+      places: {
+        Autocomplete: jest.fn().mockImplementation((el) => el)
+      }
+    }
+  };
+
+
+  const wrapper = isShallowMount ? shallowMount(addressQuestions, resultingMountOptions) : mount(addressQuestions, resultingMountOptions);
+  // const wrapper = shallowMount(addressQuestions, resultingMountOptions);
+  // wrapper.findComponent({ ref: "autocomplete" }).element = autocompleteElement;
+  document.querySelector = jest.fn().mockReturnValue(document.createElement("div"));
+
+  // console.log(wrapper.$loadScript)
+  // console.log(wrapper.vm.$loadScript)
+  // wrapper.vm.$loadScript = jest.fn().mockImplementation(resolve => new Promise(resolve({})));
+
+  // wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
+  //   wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+  //   wrapper.vm.$refs.funnelFooter.updateButtonText = jest.fn();
+  //   wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
+  //   wrapper.vm.$refs.loadingModal.showModal = jest.fn();
+
+  return { wrapper };
+}