...
+// This function returns an array of each paragraph, works with or without html +// attributes present +export function splitCMSCopyOnParagraphTag(copy) { + // filter removes empty strings that are a result of string.split with regex + return copy.split(/(?:
+
+
+
+
+
+
+
+
diff --git a/src/iss-components/button-question-modal/button-question-modal.spec.js b/src/iss-components/button-question-modal/button-question-modal.spec.js
new file mode 100644
index 00000000..dc7ac5b4
--- /dev/null
+++ b/src/iss-components/button-question-modal/button-question-modal.spec.js
@@ -0,0 +1,52 @@
+import { shallowMount } from "@vue/test-utils";
+import ButtonQuestionModal from "./button-question-modal";
+
+describe("button-question-modal.vue", () => {
+ it("Should display header text when QuestionText is defined in the CMS", async () => {
+ // Act
+ const wrapper = shallowMount(ButtonQuestionModal, {
+ mixins: [mockMixin],
+ props: {
+ cmsWidgetName: "test",
+ },
+ attachTo: document.body,
+ });
+ expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["QuestionText"]));
+ });
+
+ it("Should display subheader text when ButtonText is defined in the CMS", async () => {
+ // Act
+ const wrapper = shallowMount(ButtonQuestionModal, {
+ mixins: [mockMixin],
+ props: {
+ cmsWidgetName: "test",
+ },
+ attachTo: document.body,
+ });
+ expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["ButtonText"]));
+ });
+
+});
+
+const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+ return mockCmsContent[cmsFieldName];
+ }),
+ },
+};
+
+const mockCmsContent = {
+ QuestionText: "What caused damage.",
+ ButtonText: "Select an option.",
+ Answers: [
+ {
+ Name: "Rock from road",
+ Text: "Rock from road"
+ },
+ {
+ Name: "Vandalism",
+ Text: "Vandalism"
+ },
+ ],
+};
diff --git a/src/iss-components/button-question-modal/button-question-modal.vue b/src/iss-components/button-question-modal/button-question-modal.vue
new file mode 100644
index 00000000..a0754ab2
--- /dev/null
+++ b/src/iss-components/button-question-modal/button-question-modal.vue
@@ -0,0 +1,146 @@
+
+
+
+
+
+
+
+
diff --git a/src/iss-components/content-group-modal/content-group-modal.spec.js b/src/iss-components/content-group-modal/content-group-modal.spec.js
new file mode 100644
index 00000000..cbdf6e18
--- /dev/null
+++ b/src/iss-components/content-group-modal/content-group-modal.spec.js
@@ -0,0 +1,67 @@
+import { mount } from "@vue/test-utils";
+import contentGroupModal from "./content-group-modal";
+import crypto from "crypto";
+
+global.crypto = crypto;
+
+describe("content-group-modal.vue", () => {
+ it("Should display header text when HeaderText is defined in the CMS", async () => {
+ const wrapper = mount(contentGroupModal, {
+ mixins: [mockMixin],
+ props: {
+ cmsWidgetName: "test",
+ },
+ attachTo: document.body,
+ });
+ expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"]));
+ });
+
+ it("Should display subheader text when SubheaderText is defined in the CMS", async () => {
+ const wrapper = mount(contentGroupModal, {
+ mixins: [mockMixin],
+ props: {
+ cmsWidgetName: "test",
+ },
+ attachTo: document.body,
+ });
+ expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"]));
+ });
+
+ it("Should insert image url when Image is defined in the CMS", async () => {
+ const wrapper = mount(contentGroupModal, {
+ mixins: [mockMixin],
+ props: {
+ cmsWidgetName: "test",
+ },
+ attachTo: document.body,
+ });
+ expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"]));
+ });
+
+ it("Should display body text when BodyText is defined in the CMS", async () => {
+ const wrapper = mount(contentGroupModal, {
+ mixins: [mockMixin],
+ props: {
+ cmsWidgetName: "test",
+ },
+ attachTo: document.body,
+ });
+ expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
+ });
+});
+
+const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+ return mockCmsContent[cmsFieldName];
+ }),
+ },
+};
+
+const mockCmsContent = {
+ HeaderText: "Sample header text here.",
+ SubheaderText: "Sample subheader text here.",
+ Image: "https://www.sampleImage.sample",
+ BodyText: "Sample body text here.",
+ FooterText: "Sample footer text here.",
+};
diff --git a/src/iss-components/content-group-modal/content-group-modal.vue b/src/iss-components/content-group-modal/content-group-modal.vue
new file mode 100644
index 00000000..d9d9da93
--- /dev/null
+++ b/src/iss-components/content-group-modal/content-group-modal.vue
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/iss-components/nav-button/nav-button.spec.js b/src/iss-components/nav-button/nav-button.spec.js
new file mode 100644
index 00000000..a17850f3
--- /dev/null
+++ b/src/iss-components/nav-button/nav-button.spec.js
@@ -0,0 +1,35 @@
+import navButton from "./nav-button"
+
+import { shallowMount } from "@vue/test-utils";
+
+describe('NavButton', () => {
+
+ it('should display input when type is button', () => {
+ const wrapper = shallowMount(navButton, {
+ propsData: {
+ text: "Hello",
+ scenario: "test",
+ type: "button"
+ }
+ });
+
+ expect(wrapper.find('input').exists()).toBe(true);
+ expect(wrapper.find('p').exists()).toBe(false);
+ });
+
+ it('should display p element when type is text', () => {
+ const wrapper = shallowMount(navButton, {
+ propsData: {
+ text: "Hello",
+ scenario: "test",
+ type: "text"
+ }
+ });
+
+ expect(wrapper.find('input').exists()).toBe(false);
+ expect(wrapper.find('p').exists()).toBe(true);
+ });
+
+
+
+ });
\ No newline at end of file
diff --git a/src/iss-components/nav-button/nav-button.vue b/src/iss-components/nav-button/nav-button.vue
new file mode 100644
index 00000000..fec7e441
--- /dev/null
+++ b/src/iss-components/nav-button/nav-button.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/iss-components/questions-page-layout/questions-page-layout.spec.js b/src/iss-components/questions-page-layout/questions-page-layout.spec.js
new file mode 100644
index 00000000..9d5c1587
--- /dev/null
+++ b/src/iss-components/questions-page-layout/questions-page-layout.spec.js
@@ -0,0 +1,250 @@
+// Components
+import questionsPageLayout from "@/iss-components/questions-page-layout/questions-page-layout";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import baseMixin from "../../mixins/base-mixin";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+
+// 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(),
+}));
+
+
+describe("questionsPageLayout.vue", () => {
+ describe("method showThisQuestionChain...", () => {
+ test("Should return true if index prop and passed index match", async () => {
+ // Arrange
+ const { wrapper } = setupMocks({});
+ await wrapper.setProps({ index: 0 });
+
+ const testGlassPiece = {
+ questions: [
+ {
+ questionSequence: 1,
+ questionText:
+ "Is your vehicle equipped with the optional Lane-Keeping System which tugs on the steering wheel and/or beeps to alert you if you drift too close to the edge of the lane?",
+ answers: [],
+ },
+ ],
+ };
+ const testIndex = 0;
+
+ // Act
+ const result = wrapper.vm.showThisQuestionChain(testGlassPiece, testIndex);
+
+ //Assert
+ expect(result).toBe(true);
+
+ wrapper.unmount();
+ });
+
+ test("Should return true if answerResult exists", async () => {
+ // Arrange
+ const { wrapper } = setupMocks({});
+ await wrapper.setProps({ index: 0 });
+
+ const testGlassPiece = {
+ questions: [
+ {
+ questionSequence: 1,
+ questionText:
+ "Is your vehicle equipped with the optional Lane-Keeping System which tugs on the steering wheel and/or beeps to alert you if you drift too close to the edge of the lane?",
+ answers: [],
+ },
+ ],
+ answerData: {
+ answerResult: "test",
+ },
+ };
+ const testIndex = 1;
+
+ // Act
+ const result = wrapper.vm.showThisQuestionChain(testGlassPiece, testIndex);
+
+ //Assert
+ expect(result).toBe(true);
+
+ wrapper.unmount();
+ });
+
+ test("Should return false if indexes don't match and answerResult is missing", async () => {
+ // Arrange
+ const { wrapper } = setupMocks({});
+ await wrapper.setProps({ index: 0 });
+
+ const testGlassPiece = {
+ questions: [
+ {
+ questionSequence: 1,
+ questionText:
+ "Is your vehicle equipped with the optional Lane-Keeping System which tugs on the steering wheel and/or beeps to alert you if you drift too close to the edge of the lane?",
+ answers: [],
+ },
+ ],
+ };
+ const testIndex = 1;
+
+ // Act
+ const result = wrapper.vm.showThisQuestionChain(testGlassPiece, testIndex);
+
+ //Assert
+ expect(result).toBe(false);
+
+ wrapper.unmount();
+ });
+
+ test("Should return false if no questions", async () => {
+ // Arrange
+ const { wrapper } = setupMocks({});
+ await wrapper.setProps({ index: 0 });
+
+ const testGlassPiece = {};
+ const testIndex = 0;
+
+ // Act
+ const result = wrapper.vm.showThisQuestionChain(testGlassPiece, testIndex);
+
+ //Assert
+ expect(result).toBe(false);
+
+ wrapper.unmount();
+ });
+
+ test("Should return false if suppressed", async () => {
+ // Arrange
+ const { wrapper } = setupMocks({});
+ await wrapper.setProps({ index: 0 });
+
+ const testGlassPiece = {
+ isSuppressedPart: true,
+ questions: [
+ {
+ questionSequence: 1,
+ questionText:
+ "Is your vehicle equipped with the optional Lane-Keeping System which tugs on the steering wheel and/or beeps to alert you if you drift too close to the edge of the lane?",
+ answers: [],
+ },
+ ],
+ answerData: {
+ answerResult: "test",
+ },
+ };
+ const testIndex = 0;
+
+ // Act
+ const result = wrapper.vm.showThisQuestionChain(testGlassPiece, testIndex);
+
+ //Assert
+ expect(result).toBe(false);
+
+ wrapper.unmount();
+ });
+ });
+
+ describe("method handleForwardButtonAction...", () => {
+ test("Should emit forwardButtonAction", async () => {
+ // Arrange
+ const { wrapper } = setupMocks({});
+ await wrapper.setProps({});
+
+ // Act
+ wrapper.vm.handleForwardButtonAction();
+
+ //Assert
+ expect(wrapper.emitted()).toHaveProperty("forwardButtonAction");
+
+ wrapper.unmount();
+ });
+ });
+
+ describe("method handleBackButtonAction...", () => {
+ test("Should emit backButtonAction", async () => {
+ // Arrange
+ const { wrapper } = setupMocks({});
+ await wrapper.setProps({});
+
+ // Act
+ wrapper.vm.handleBackButtonAction();
+
+ //Assert
+ expect(wrapper.emitted()).toHaveProperty("back-click");
+
+ wrapper.unmount();
+ });
+ });
+});
+
+function setupMocks() {
+ const baseStoreGettersPageData = () => {
+ return {
+ partsOrQuestions: [
+ {
+ parts: null,
+ partQuestions: [
+ {
+ questionSequence: 1,
+ questionText:
+ "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?",
+ answers: [
+ {
+ answerResult: "",
+ answerText: "Yes",
+ nextQuestionSequence: 2,
+ },
+ {
+ answerResult: "",
+ answerText: "No",
+ nextQuestionSequence: 3,
+ },
+ ],
+ },
+ ],
+ glassLocation: "Windshield",
+ glassName: "Single",
+ answerKey: "Windshield-Single",
+ answerData: null,
+ },
+ ],
+ };
+ };
+ const baseStoreGettersDamage = () => {
+ return {
+ partsQuestionAnswers: [
+ {
+ glassLocation: "Windshield",
+ glassName: "Single",
+ result: "FW04848",
+ answeredQuestions: [
+ {
+ questionText:
+ "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?",
+ selectedAnswerText: "Yes",
+ questionNum: 1,
+ },
+ {
+ questionText:
+ "Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?",
+ selectedAnswerText: "Yes",
+ questionNum: 2,
+ },
+ ],
+ },
+ ],
+ };
+ };
+ const mountOptions = getMountOptions({
+ mixins: [baseMixin, vehicleQuestionsMixin],
+ });
+ mountOptions["attachTo"] = document.body;
+ const wrapper = shallowMount(questionsPageLayout, mountOptions);
+
+ return { wrapper };
+}
diff --git a/src/iss-components/questions-page-layout/questions-page-layout.vue b/src/iss-components/questions-page-layout/questions-page-layout.vue
new file mode 100644
index 00000000..effd7433
--- /dev/null
+++ b/src/iss-components/questions-page-layout/questions-page-layout.vue
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/iss-components/site-footer/site-footer.spec.js b/src/iss-components/site-footer/site-footer.spec.js
new file mode 100644
index 00000000..a76248b5
--- /dev/null
+++ b/src/iss-components/site-footer/site-footer.spec.js
@@ -0,0 +1,43 @@
+import { mount } from "@vue/test-utils";
+import siteFooter from "./site-footer";
+
+describe("site-footer.vue", () => {
+ it("Should emit ForwardClicked on button click", async () => {
+ // Act
+ const wrapper = mount(siteFooter, {
+ mixins: [mockMixin],
+ });
+ wrapper.vm.buttonClick();
+ // Assert
+ expect(wrapper.emitted()["forwardClicked"][0]).toHaveBeenCalled;
+ });
+
+ it("Should emit BackClicked on link click", async () => {
+ // Act
+ const wrapper = mount(siteFooter, {
+ mixins: [mockMixin],
+ });
+ wrapper.vm.linkClick();
+ // Assert
+ expect(wrapper.emitted()["backClicked"][0]).toHaveBeenCalled;
+ });
+
+ it("Should change button text when update button text is called", async () => {
+ // Act
+ const wrapper = mount(siteFooter, {
+ mixins: [mockMixin],
+ });
+ wrapper.vm.updateButtonText("newText");
+
+ // Assert
+ expect(wrapper.componentVM.customButtontext).toBe("newText");
+ });
+});
+
+const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn(),
+ getPageNameByQueryString: jest.fn(() => "welcome-page"),
+ getFooterInfoBoxHeight: jest.fn(() => 80),
+ },
+};
diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue
new file mode 100644
index 00000000..691192ac
--- /dev/null
+++ b/src/iss-components/site-footer/site-footer.vue
@@ -0,0 +1,177 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/iss-components/site-header/menu-modal/menu-modal.spec.js b/src/iss-components/site-header/menu-modal/menu-modal.spec.js
new file mode 100644
index 00000000..1b1f9aa5
--- /dev/null
+++ b/src/iss-components/site-header/menu-modal/menu-modal.spec.js
@@ -0,0 +1,67 @@
+import { mount, shallowMount } from "@vue/test-utils";
+import menuModal from "./menu-modal";
+
+describe("menu-modal.vue", () => {
+ it("Should return text Footer Navigation", async () => {
+ // Act
+ const wrapper = shallowMount(menuModal);
+
+ // Assert
+ const footerModalLabel = wrapper.find("h5");
+
+ // Expect
+ expect(footerModalLabel.text()).toContain("Footer Navigation");
+ });
+
+ it("Should return footer text as Safelite Group", async () => {
+ // Act
+ const wrapper = shallowMount(menuModal);
+
+ // Assert
+ const modalFooter = wrapper.find("div.modal-footer");
+
+ // Expect
+ expect(modalFooter.text()).toContain("Safelite Group");
+ });
+
+ it("Should return Terms of service text link text", async () => {
+ // Act
+ const wrapper = shallowMount(menuModal);
+
+ // Expect
+ expect(wrapper.html()).toContain("Terms of service");
+ });
+
+ it('Should return "Your privacy choices" text link text', async () => {
+ // Act
+ const wrapper = mount(menuModal);
+
+ // Expect
+ expect(wrapper.html()).toContain("Your privacy choices");
+ });
+
+ test('Icon for link to "Privacy Policies" page is displayed with the correct alternate text', () => {
+ // NOTE: We need a way to target a specific
+ ![]()
+
+ 
+
+
+
+
+
+
+
+
diff --git a/src/iss-components/site-sub-header/button-back/button-back.spec.js b/src/iss-components/site-sub-header/button-back/button-back.spec.js
new file mode 100644
index 00000000..c7bff87f
--- /dev/null
+++ b/src/iss-components/site-sub-header/button-back/button-back.spec.js
@@ -0,0 +1,21 @@
+import { shallowMount } from "@vue/test-utils";
+import buttonBack from "./button-back";
+
+describe("back button", () => {
+ test("renders a button", () => {
+ // Arrange
+ const myFunction = () => {};
+
+ // Act
+ const wrapper = shallowMount(buttonBack, {
+ propsData: {
+ backButtonAction: myFunction,
+ backButtonAccessibleText: "something",
+ },
+ });
+
+ // Assert
+ expect(wrapper.find("button").exists()).toBe(true);
+ wrapper.unmount();
+ });
+});
diff --git a/src/iss-components/site-sub-header/button-back/button-back.vue b/src/iss-components/site-sub-header/button-back/button-back.vue
new file mode 100644
index 00000000..cf3a630b
--- /dev/null
+++ b/src/iss-components/site-sub-header/button-back/button-back.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
diff --git a/src/iss-components/site-sub-header/site-sub-header.spec.js b/src/iss-components/site-sub-header/site-sub-header.spec.js
new file mode 100644
index 00000000..b4716060
--- /dev/null
+++ b/src/iss-components/site-sub-header/site-sub-header.spec.js
@@ -0,0 +1,29 @@
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header';
+import { shallowMount } from "@vue/test-utils";
+
+describe("site sub header", () => {
+
+ const subHeaderText = "let's fix your glass";
+ const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn().mockImplementation(()=> {
+ return subHeaderText;
+ })
+ }
+ };
+
+ it("should contain the cms content", () => {
+ const wrapper = shallowMount(siteSubHeader, {
+ propsData: {
+ justification: '',
+ issContainingPage: ''
+ },
+ mixins: [mockMixin]
+ });
+
+ const actual = wrapper.find("span");
+ expect(actual.html()).toContain(subHeaderText);
+ });
+
+});
+
diff --git a/src/iss-components/site-sub-header/site-sub-header.vue b/src/iss-components/site-sub-header/site-sub-header.vue
new file mode 100644
index 00000000..8d910ac2
--- /dev/null
+++ b/src/iss-components/site-sub-header/site-sub-header.vue
@@ -0,0 +1,121 @@
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/iss-components/steering-text/steering-text.spec.js b/src/iss-components/steering-text/steering-text.spec.js
new file mode 100644
index 00000000..bcce201f
--- /dev/null
+++ b/src/iss-components/steering-text/steering-text.spec.js
@@ -0,0 +1,45 @@
+import { shallowMount } from "@vue/test-utils";
+import steeringTextModal from "./steering-text";
+import { createApp } from 'vue';
+import { createPinia } from "pinia";
+import App from '@/App.vue';
+
+describe("steering-text.vue", () => {
+ test("Should display steering text from CMS for state MA", async () => {
+ // Act
+
+ const wrapper = shallowMount(steeringTextModal, {
+ mixins: [mockMixin],
+ props: {
+ cmsWidgetName: "MASteeringTextWidget",
+ },
+ attachTo: document.body,
+ });
+ expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
+ });
+
+
+});
+
+const vueApp = createApp(App);
+const pinia = createPinia();
+vueApp.use(pinia);
+///////////////
+// Constants //
+///////////////
+
+const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+ return mockCmsContent[cmsFieldName];
+ }),
+ },
+};
+
+
+const mockCmsContent = {
+ BodyText: "MASteeringText",
+
+};
+
+
diff --git a/src/iss-components/steering-text/steering-text.vue b/src/iss-components/steering-text/steering-text.vue
new file mode 100644
index 00000000..1906c3f1
--- /dev/null
+++ b/src/iss-components/steering-text/steering-text.vue
@@ -0,0 +1,37 @@
+
+
+
+
+ {{ content }}
+
+
+
+
+
+ {{ content }}
+
+
+
+
+ + + +
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/iss-components/vehicle-banner/vehicle-banner.spec.js b/src/iss-components/vehicle-banner/vehicle-banner.spec.js
new file mode 100644
index 00000000..f36dd257
--- /dev/null
+++ b/src/iss-components/vehicle-banner/vehicle-banner.spec.js
@@ -0,0 +1,127 @@
+import { shallowMount } from "@vue/test-utils";
+import { vehicleCategories } from "@/constants/vehicle-categories.js";
+import vehicleBanner from "./vehicle-banner";
+import { useMainStore } from "@/store";
+import { createApp } from 'vue';
+import { createPinia } from "pinia";
+import { mapStores } from "pinia";
+import App from '@/App.vue';
+
+
+const cmsData = { VehicleBannerWidget:
+ {
+ "GenericVehicleImage": "blurred-image.jpg",
+ "GenericVehicleImageFilePath": "images/default-source/default-album/blurred-image.jpg",
+ "CarUnmatchedVehicleIcon": "car-placeholder.jpg",
+ "TruckUnmatchedVehicleIcon": "truck-placeholder.jpg",
+ "VanUnmatchedVehicleIcon": "van-placeholder.jpg",
+ "CommercialVanUnmatchedVehicleIcon": "commercial-placeholder.jpg",
+ "SuvUnmatchedVehicleIcon": "suv-placeholder.jpg"
+ }
+}
+
+const vueApp = createApp(App);
+const pinia = createPinia();
+vueApp.use(pinia);
+const store = useMainStore();
+
+const mockMixin = {
+
+ methods: {
+ getCmsContent(widgetName, fieldName) {
+ return cmsData[widgetName][fieldName];
+ },
+ },
+ computed: {
+ ...mapStores(useMainStore),
+ vehicleCategories() {
+ return vehicleCategories;
+ },
+ }
+}
+
+describe("vehicleBanner", () => {
+
+ test("renders the blurrycar image when displayGenericVehicleImage is true", async () => {
+
+ const wrapper = shallowMount(vehicleBanner, {
+ propsData: {
+ displayGenericVehicleImage: true,
+ cmsWidgetName: "VehicleBannerWidget",
+ },
+ mixins: [mockMixin]
+ });
+
+ expect(wrapper.vm.vehicleImageToDisplay).toEqual(wrapper.vm.genericVehicleImage);
+ expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
+ wrapper.unmount();
+ });
+
+ test("renders expected vehicle image", async () => {
+
+ store.order.vehicle.imageUrl = "url_to_vehicle_image";
+
+ const wrapper = shallowMount(vehicleBanner, {
+ propsData: {
+ displayGenericVehicleImage: false,
+ cmsWidgetName: "VehicleBannerWidget",
+ },
+ mixins: [mockMixin]
+ });
+
+ expect(wrapper.vm.vehicleImageToDisplay).toEqual( "url_to_vehicle_image");
+ expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
+ wrapper.unmount();
+
+ });
+
+ test("should render default car icon when imageUrl is null and category is default", async () => {
+
+ store.order.vehicle.imageUrl = null;
+
+ const wrapper = shallowMount(vehicleBanner, {
+ propsData: {
+ displayGenericVehicleImage: false,
+ cmsWidgetName: "VehicleBannerWidget",
+ },
+ mixins: [mockMixin]
+ });
+
+ var iconUrl = wrapper.vm.vehicleImageToDisplay;
+
+ expect(iconUrl).toEqual("car-placeholder.jpg");
+ wrapper.unmount();
+ });
+
+
+ const params = [["CAR", "car-placeholder.jpg"],
+ ["TRUCK", "truck-placeholder.jpg"],
+ ["VAN", "van-placeholder.jpg"],
+ ["COMMERCIAL VAN", "commercial-placeholder.jpg"],
+ ["SUV", "suv-placeholder.jpg"],
+ ["OTHER", "car-placeholder.jpg"]];
+
+ test.each(params)("renders correct icon when imageUrl is not populated for %s and %s", async (category, expectedIcon) => {
+
+ store.order.vehicle.imageUrl = null;
+ store.order.vehicle.category = category;
+
+ const wrapper = shallowMount(vehicleBanner, {
+ propsData: {
+ displayGenericVehicleImage: false,
+ cmsWidgetName: "VehicleBannerWidget",
+ },
+ mixins: [mockMixin]
+ });
+
+ var vehicleIcon = wrapper.vm.getUnmatchedVehicleIcon();
+
+ expect(vehicleIcon).toEqual(expectedIcon);
+ expect(wrapper.find("img").attributes("class")).toContain("vehicle-image");
+ wrapper.unmount();
+ });
+
+});
+
+
+
diff --git a/src/iss-components/vehicle-banner/vehicle-banner.vue b/src/iss-components/vehicle-banner/vehicle-banner.vue
new file mode 100644
index 00000000..312d4868
--- /dev/null
+++ b/src/iss-components/vehicle-banner/vehicle-banner.vue
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
diff --git a/src/layouts/address-lookup/address-lookup.spec.js b/src/layouts/address-lookup/address-lookup.spec.js
new file mode 100644
index 00000000..3bc59b99
--- /dev/null
+++ b/src/layouts/address-lookup/address-lookup.spec.js
@@ -0,0 +1,477 @@
+// Components
+import addressLookup from "@/layouts/address-lookup/address-lookup.vue";
+
+// Supporting Files
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { useMainStore } from "@/store";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
+
+jest.mock("@/helpers/damage-helper", () => ({
+ isGlassAvailableForCarId: jest.fn().mockImplementation(() => true),
+ getDamageString: jest.fn(),
+}));
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+ settleAllPromises: jest.fn(),
+}));
+
+describe("address-lookup.vue", () => {
+ describe("page level alerts", () => {
+ test("if the address matches a different vehicle display the Matched Different VehicleAlert", async () => {
+ // Arrange
+ const mockRegistrationAddress = {
+ streetAddress: "1234 Main St",
+ city: "Columbus",
+ state: "OH",
+ zipCode: "43215",
+ };
+
+ const { wrapper } = setupMocks({
+ vinVehicles: [
+ {
+ vehicle: {
+ carId: "C00000",
+ },
+ },
+ ],
+ });
+
+ useMainStore().order.vehicle.carId = "CARID2";
+
+ await wrapper.setData({
+ customerQuestions: {
+ addressQuestions: mockRegistrationAddress,
+ },
+ });
+
+ // Act
+ await wrapper.vm.forwardButtonAction();
+
+ // Assert
+ expect(wrapper.findComponent({ ref: "alertMatchedDifferentVehicle" }).isVisible()).toBe(
+ true
+ );
+ });
+
+ test("if the address matches two identical YMM vehicles, then display Two Identical YMM Vehicle alert", async () => {
+ // Arrange
+ const mockRegistrationAddress = {
+ streetAddress: "1234 Main St",
+ city: "Columbus",
+ state: "OH",
+ zipCode: "43215",
+ };
+
+ const { wrapper } = setupMocks({
+ vinVehicles: [
+ {
+ vehicle: {
+ carId: "C00000",
+ },
+ },
+ ],
+ });
+
+ useMainStore().order.vehicle.carId = "CARID2";
+
+ await wrapper.setData({
+ customerQuestions: {
+ addressQuestions: mockRegistrationAddress,
+ },
+ isTwoIdenticalYMMVehicleFound:true,
+ });
+
+ // Act
+ await wrapper.vm.forwardButtonAction();
+
+ // Assert
+ expect(wrapper.findComponent({ ref: "alertMatchedTwoIdenticalYMMVehicle" }).isVisible()).toBe(
+ true
+ );
+ });
+
+ test("if the looking up VIN by address is not allowed in the state selected display the Vin Lookup By HomeAddress Not Allowed Alert", async () => {
+ // Arrange
+ const mockRegistrationAddress = {
+ streetAddress: "1234 Main St",
+ city: "Columbus",
+ state: "OH",
+ zipCode: "43215",
+ };
+
+ const { wrapper } = setupMocks({
+ isStatePermissible: false,
+ lookupVinbyAddressResponse: {
+ isStatePermissible: false,
+ vinVehicles: [
+ {
+ vin: "TEST_VIN",
+ vehicle: {
+ carId: "CARID",
+ },
+ },
+ {
+ vin: "TEST_VIN2",
+ vehicle: {
+ carId: "CARID2",
+ },
+ },
+ ],
+ },
+ });
+
+ useMainStore().order.vehicle.carId = "CARID";
+
+ await wrapper.setData({
+ customerQuestions: {
+ addressQuestions: mockRegistrationAddress,
+ },
+ });
+
+ // Act
+ await wrapper.vm.forwardButtonAction();
+
+ // Assert
+ expect(
+ wrapper.findComponent({ ref: "alertVinLookupsByHomeAddressNotAllowed" }).isVisible()
+ ).toBe(true);
+ });
+
+ test("if no vehicles found, display Vin Not Found alert", async () => {
+ // Arrange
+ const mockRegistrationAddress = {
+ streetAddress: "1234 Main St",
+ city: "Columbus",
+ state: "OH",
+ zipCode: "43215",
+ };
+
+ const { wrapper } = setupMocks({
+ lookupVinbyAddressResponse: {
+ isStatePermissible: true,
+ vinVehicles: [], // Return no vehicles
+ },
+ });
+
+ useMainStore().order.vehicle.carId = "CARID";
+
+ await wrapper.setData({
+ customerQuestions: {
+ addressQuestions: mockRegistrationAddress,
+ },
+ });
+
+ wrapper.vm.navigateForward = jest.fn();
+
+ // Act
+ await wrapper.vm.forwardButtonAction();
+
+ // Assert
+ expect(wrapper.findComponent({ ref: "alertVinNotFound" }).isVisible()).toBe(true);
+ });
+
+ });
+
+ describe("navigation", () => {
+ test("if the back button is clicked, navigate back", async () => {
+ // Arrange
+ const { wrapper } = setupMocks({
+ });
+
+ // Act
+ await wrapper.vm.backButtonAction();
+
+ // Assert
+ expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+ });
+
+ test("if the car entered matches one of the vehicles found navigate forward", async () => {
+ // Arrange
+ const mockRegistrationAddress = {
+ streetAddress: "1234 Main St",
+ city: "Columbus",
+ state: "OH",
+ zipCode: "43215",
+ };
+
+ const { wrapper } = setupMocks({
+ vinVehicles: [
+ {
+ vehicle: {
+ carId: "C11111",
+ },
+ },
+ ],
+ });
+
+ await wrapper.setData({
+ previouslyEnteredCarId: "C11111",
+ customerQuestions: {
+ addressQuestions: mockRegistrationAddress,
+ },
+ });
+
+ wrapper.vm.navigateForward = jest.fn();
+
+ // Act
+ await wrapper.vm.forwardButtonAction();
+
+ // Assert
+ expect(wrapper.vm.navigateForward).toHaveBeenCalled();
+ });
+
+ test("if the car entered does not match any of the multiple vehicles found, navigate to address-vehicles page", async () => {
+ // Arrange
+ const mockRegistrationAddress = {
+ streetAddress: "1234 Main St",
+ city: "Columbus",
+ state: "OH",
+ zipCode: "43215",
+ };
+
+ const { wrapper } = setupMocks({
+ isStatePermissible: true,
+ vinVehicles: [
+ {
+ vin: "TEST_VIN",
+ vehicle: {
+ carId: "CARID",
+ },
+ },
+ {
+ vin: "TEST_VIN2",
+ vehicle: {
+ carId: "CARID2",
+ },
+ },
+ ],
+ });
+
+ useMainStore().order.vehicle.carId = "CARID_A";
+
+ const carsFound = [
+ {
+ vin: "TEST_VIN",
+ vehicle: {
+ carId: "CARID",
+ },
+ },
+ {
+ vin: "TEST_VIN2",
+ vehicle: {
+ carId: "CARID2",
+ },
+ },
+ ];
+
+ await wrapper.setData({
+ customerQuestions: {
+ addressQuestions: mockRegistrationAddress,
+ },
+ });
+
+ wrapper.vm.updateVehicleInfo = jest.fn();
+
+ // Act
+ await wrapper.vm.forwardButtonAction();
+
+ // Assert
+ expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+ navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
+ undefined,
+ {},
+ {},
+ carsFound
+ );
+ });
+
+ test("if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page", async () => {
+ // Arrange
+ const mockRegistrationAddress = {
+ streetAddress: "1234 Main St",
+ city: "Columbus",
+ state: "OH",
+ zipCode: "43215",
+ };
+
+ const { wrapper } = setupMocks({
+ isStatePermissible: true,
+ });
+
+ await wrapper.setData({
+ customerQuestions: {
+ addressQuestions: mockRegistrationAddress,
+ },
+ isCarIdDifferent: true,
+ isSelectedGlassAvailableForVehicle: false,
+ });
+
+ useMainStore().order.vehicle.carId = "CARID";
+
+ let carsFound = [
+ {
+ vin: "TEST_VIN2",
+ vehicle: {
+ carId: "C0000",
+ },
+ },
+ ];
+
+ // Act
+ await wrapper.vm.navigateForward(carsFound);
+
+ // Assert
+ expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+ navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+ undefined,
+ {},
+ { displayVehicleChangeAlert: true }
+ );
+ });
+
+ test("single car was found and matches entered vehicle => navigateForwardWithSingleCarMatch", async () => {
+ // Arrange
+
+ const carsFound = [
+ {
+ vin: "TEST_VIN_2",
+ vehicle: {
+ carId: "C0000",
+ },
+ },
+ ];
+
+ const { wrapper } = setupMocks({}, {});
+ wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
+
+ useMainStore().order.vehicle.carId = "C0000";
+
+ // Act
+ wrapper.vm.navigateForward(carsFound);
+
+ // Assert
+ expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1);
+ });
+
+ test("multiple cars were found and one matches entered vehicle => navigateForwardWithSingleCarMatch", async () => {
+ // Arrange
+ const carsFound = [
+ {
+ vin: "TEST_VIN_1",
+ vehicle: {
+ carId: "C0000",
+ },
+ },
+ {
+ vin: "TEST_VIN_2",
+ vehicle: {
+ carId: "CARID2",
+ },
+ },
+ {
+ vin: "TEST_VIN_3",
+ vehicle: {
+ carId: "CARID3",
+ },
+ },
+ ];
+
+ const { wrapper } = setupMocks({});
+ wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn();
+
+ useMainStore().order.vehicle.carId = "CARID3";
+
+ // Act
+ wrapper.vm.navigateForward(carsFound);
+
+ // Assert
+ expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1);
+ });
+
+ });
+});
+
+function setupMocks({
+ lookupVinbyAddressResponse,
+ partsOrQuestions = [],
+ isStatePermissible = true,
+ vinVehicles = [],
+ carId = "C0000",
+ route = null,
+})
+{
+ useMainStore().lookupVinByAddress = jest.fn().mockImplementation(() => {
+ return Promise.resolve({
+ data: lookupVinbyAddressResponse
+ ? lookupVinbyAddressResponse
+ : {
+ isStatePermissible: true,
+ vinVehicles: [
+ {
+ vin: "TEST_VIN",
+ vehicle: {
+ carId: "CARID",
+ },
+ },
+ ],
+ },
+ })
+ })
+
+ useMainStore().getPartsOrQuestions = jest.fn().mockImplementation(() => {
+ return Promise.resolve({
+ data: {
+ partsOrQuestions: partsOrQuestions,
+ },
+ })
+ });
+
+ const wrapper = shallowMount(
+ addressLookup,
+ getMountOptions({
+ route: route ? route : undefined,
+ router: {
+ navigate: jest.fn(),
+ },
+ mainStore: {
+ order: {
+ vehicle: {
+ carId: carId,
+ registration: {
+ licensePlate: "TESTPLATE",
+ zipCode: "12345",
+ },
+ },
+ customer: {
+ emailAddress: "test@test.com",
+ },
+ serviceLocation: {
+ zipCode: "11111",
+ },
+ },
+ },
+
+ })
+ );
+
+ const apiResponses = {
+ vinLookupResponse: {
+ isStatePermissible: isStatePermissible,
+ vinVehicles: vinVehicles,
+ },
+ };
+
+ settleAllPromises.mockImplementation(() => apiResponses);
+
+ wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
+ wrapper.vm.setCmsContent = jest.fn();
+ wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
+ wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
+ wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
+ wrapper.vm.$refs.siteFooter.enableForwardAction = jest.fn();
+
+ return { wrapper };
+}
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
new file mode 100644
index 00000000..bb58ee99
--- /dev/null
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -0,0 +1,353 @@
+
+
+
+
+
diff --git a/src/layouts/address-lookup/customer-questions/customer-questions.spec.js b/src/layouts/address-lookup/customer-questions/customer-questions.spec.js
new file mode 100644
index 00000000..9cd7c566
--- /dev/null
+++ b/src/layouts/address-lookup/customer-questions/customer-questions.spec.js
@@ -0,0 +1,31 @@
+import { shallowMount } from "@vue/test-utils";
+import customerQuestions from "@/layouts/address-lookup/customer-questions/customer-questions";
+
+const customerModel = {
+ addressQuestions: {
+ streetAddress: "",
+ city: "",
+ state: "",
+ zipCode: "",
+ },
+ firstName: "",
+ lastName: "",
+ emailAddress: "",
+};
+
+describe("customerQuestions.vue", () => {
+ it("Should render customerQuestions sub-components (addressQuestions, first name, last name, and email textbox-questions)", async () => {
+ // Arrange
+ const wrapper = shallowMount(customerQuestions);
+
+ // Act
+ const addressQuestions = wrapper.findComponent({ ref: "addressQuestions" });
+ const firstName = wrapper.findComponent({ ref: "firstName" });
+ const lastName = wrapper.findComponent({ ref: "lastName" });
+
+ // Assert
+ expect(addressQuestions.exists()).toBe(true);
+ expect(firstName.exists()).toBe(true);
+ expect(lastName.exists()).toBe(true);
+ });
+});
diff --git a/src/layouts/address-lookup/customer-questions/customer-questions.vue b/src/layouts/address-lookup/customer-questions/customer-questions.vue
new file mode 100644
index 00000000..f4062fe6
--- /dev/null
+++ b/src/layouts/address-lookup/customer-questions/customer-questions.vue
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
new file mode 100644
index 00000000..905b5c9e
--- /dev/null
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.spec.js
@@ -0,0 +1,102 @@
+import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+describe("address-vehicles-question.vue", () => {
+ test("Selected vehicle is emitted upon selection", async () => {
+ //Arrange
+ const { wrapper } = setupMocks({ modelValueProp: "2020 Audi A6" });
+ const vehicleToSelect = "2016 Jaguar F-Type";
+
+ //Act
+ wrapper.setValue({ selectedVehicle: vehicleToSelect });
+ await wrapper.vm.$nextTick();
+
+ //Assert
+ expect(wrapper.emitted()["update:modelValue"][0]).toEqual([
+ { selectedVehicle: "2016 Jaguar F-Type" },
+ ]);
+ });
+ test("Should return content for differentVehicleAlertHeader", () => {
+ // Arrange
+ const wrapper = shallowMount(addressVehiclesQuestion, {
+ mixins: [mockMixin],
+ });
+
+ // Assert
+ expect(wrapper.vm.differentVehicleAlertHeader).toEqual("AlertMatchedDifferentVehicleWidgetTestReturn");
+ });
+ test("Should return content for differentVehicleAlertBody", () => {
+ // Arrange
+ const wrapper = shallowMount(addressVehiclesQuestion, {
+ mixins: [mockMixin],
+ propsData: {
+ vehicles: ["1", "2"],
+ modelValue: ["1", "2"],
+ },
+ });
+
+ // Assert
+ expect(wrapper.vm.differentVehicleAlertBody).toEqual("AlertMatchedDifferentVehicleWidgetTestReturn");
+ });
+ test("Should return content for AlertMatchedTwoIdenticalYMMVehicleHeader", () => {
+ // Arrange
+ const wrapper = shallowMount(addressVehiclesQuestion, {
+ mixins: [mockMixin],
+ });
+
+ // Assert
+ expect(wrapper.vm.AlertMatchedTwoIdenticalYMMVehicleHeader).toEqual("AlertMatchedTwoIdenticalYMMVehicleWidgetTestReturn");
+ });
+ test("Should return content for AlertMatchedTwoIdenticalYMMVehicleBody", () => {
+ // Arrange
+ const wrapper = shallowMount(addressVehiclesQuestion, {
+ mixins: [mockMixin],
+ propsData: {
+ vehicles: ["1", "2"],
+ modelValue: ["1", "2"],
+ },
+ });
+
+ // Assert
+ expect(wrapper.vm.AlertMatchedTwoIdenticalYMMVehicleBody).toEqual("AlertMatchedTwoIdenticalYMMVehicleWidgetTestReturn");
+ });
+});
+
+const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn((contentName) => {
+ if (contentName === "AlertMatchedDifferentVehicleWidget") {
+ return "AlertMatchedDifferentVehicleWidgetTestReturn";
+ }
+ if (contentName === "AlertMatchedTwoIdenticalYMMVehicleWidget") {
+ return "AlertMatchedTwoIdenticalYMMVehicleWidgetTestReturn";
+ }
+ return null;
+ }),
+ vehicles: jest.fn(() => {
+ return [{ vehicle: "test" }];
+ }),
+ },
+};
+
+function setupMocks({
+ modelValueProp = "TESTCAR",
+ cmsQuestionText = "CMS text goes here",
+}) {
+
+ const mountOptions = getMountOptions();
+
+ //Mock props
+ mountOptions.propsData = {
+ modelValue: modelValueProp,
+ };
+
+ const wrapper = shallowMount(addressVehiclesQuestion, mountOptions);
+
+ //Mock CMS content
+ const cmsContent = {
+ QuestionText: cmsQuestionText,
+ };
+ return { wrapper, cmsContent };
+}
\ No newline at end of file
diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
new file mode 100644
index 00000000..3e9a3ecb
--- /dev/null
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
@@ -0,0 +1,124 @@
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+ +
+Unauthorized Access.
+ + + + + diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js new file mode 100644 index 00000000..085322e5 --- /dev/null +++ b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js @@ -0,0 +1,286 @@ +// Components +import licensePlateLookup from "@/layouts/license-plate-lookup/license-plate-lookup.vue"; + +// Supporting Files +import { settleAllPromises } from "@/helpers/layout-helper.js"; +import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { useMainStore } from "@/store"; +import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; + +jest.mock("@/helpers/damage-helper", () => ({ + isGlassAvailableForCarId: jest.fn().mockImplementation(() => true), + getDamageString: jest.fn(), +})); + +// 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(), +})); + +describe("license-plate-lookup.vue", () => { + describe("page level alerts", () => { + test("If license plate matches a different vehicle, display MatchedDifferentVehicleAlert", async () => { + // Arrange + const mockRegistrationLicensePlate = { + licensePlate: "UTN990", + }; + + const { wrapper } = setupMocks({}); + + useMainStore().order.vehicle.carId = "TESTCARID"; + + await wrapper.setData({ + licensePlate: mockRegistrationLicensePlate + }); + + // Act + await wrapper.vm.forwardButtonAction(); + + // Assert + expect(wrapper.findComponent({ ref: "alertMatchedDifferentVehicle" }).isVisible()).toBe( + true + ); + }); + + test("If license plate matches two identical YMM vehicles, display alertMatchedTwoIdenticalYMMVehicle", async () => { + // Arrange + const mockRegistrationLicensePlate = { + licensePlate: "UTN990", + }; + + const { wrapper } = setupMocks({}); + + useMainStore().order.vehicle.carId = "TESTCARID"; + + await wrapper.setData({ + licensePlate: mockRegistrationLicensePlate, + isTwoIdenticalYMMVehicleFound:true, + }); + + // Act + await wrapper.vm.forwardButtonAction(); + + // Assert + expect(wrapper.findComponent({ ref: "alertMatchedTwoIdenticalYMMVehicle" }).isVisible()).toBe( + true + ); + }); + + test("If no vehicles found, display VinNotFound alert", async () => { + // Arrange + const mockRegistrationLicensePlate = { + licensePlate: "TEST1234", + }; + + const { wrapper } = setupMocks({ + vinLookupResponseError: "vin not found error" + }); + + useMainStore().order.vehicle.carId = "TESTCARID"; + + await wrapper.setData({ + licensePlate: mockRegistrationLicensePlate + }); + + wrapper.vm.navigateForward = jest.fn(); + + // Act + await wrapper.vm.forwardButtonAction(); + + // Assert + expect(wrapper.findComponent({ ref: "alertVinNotFound" }).isVisible()).toBe(true); + }); + }); + + describe("navigation", () => { + test("Clicking back button navigates back", async () => { + //Arrange + const { wrapper, apiPromise } = setupMocks({ + mountOptionsMockData: { + router: { + navigate: jest.fn(), + }, + }, + }); + //Act + licensePlateLookup.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "license-plate-lookup" } }, + undefined, + (c) => c(wrapper.vm) + ); + await wrapper.vm.backButtonAction(); + + //Assert + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + }); + + test("License plate found and matches entered vehicle => navigateForwardWithSingleCarMatch", async () => { + // Arrange + const vehicleFound = { + carId: "C0000", + }; + + const { wrapper } = setupMocks({}); + wrapper.vm.navigateForwardWithSingleCarMatch = jest.fn(); + + useMainStore().order.vehicle.carId = "C0000"; + + // Act + wrapper.vm.navigateForward(vehicleFound); + + // Assert + expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1); + }); + + test("if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page", async () => { + // Arrange + const mockRegistrationLicensePlate = { + licensePlate: "TEST1234", + }; + + const { wrapper } = setupMocks({}); + + await wrapper.setData({ + licensePlate: mockRegistrationLicensePlate, + isCarIdDifferent: true, + isSelectedGlassAvailableForVehicle: false, + }); + + useMainStore().order.vehicle.carId = "CARID"; + + let carsFound = [ + { + vin: "TEST_VIN2", + vehicle: { + carId: "C0000", + }, + }, + ]; + + // Act + await wrapper.vm.navigateForward(carsFound); + + // Assert + expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith( + navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, + undefined, + {}, + { displayVehicleChangeAlert: true } + ); + }); + }); + + describe("miscellaneous", () => { + test("Vehicle make set, arePagePrerequisitesValid should be true", () => { + // Arrange + const { wrapper } = setupMocks({}); + useMainStore().order.vehicle.carId = "CR00000395"; + + // Act + licensePlateLookup.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "license-plate-lookup" } }, + undefined, + (c) => c(wrapper.vm) + ); + + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + + // Assert + expect(arePagePrerequisitesValid).toBe(true); + }); + }); +}); + +function setupMocks({ + isZipValid = true, + isZipServiceable = true, + lookupVinByPlateResponse, + partsOrQuestions = [], + vehicle = {}, + vin = null, + carId = "C0000", + vinLookupResponseError = null, + route = null, +}) { + useMainStore().validateZip = jest.fn().mockImplementation(() => { + return Promise.resolve({ + data: { + isValid: isZipValid, + isServiceable: isZipServiceable, + }, + }) + }); + + useMainStore().lookupVinByPlate = jest.fn().mockImplementation(() => { + return Promise.resolve({ + data: lookupVinByPlateResponse + ? lookupVinByPlateResponse : { + vin: "TEST_VIN", + vehicle: { + carId: "CARID" + }, + }, + }) + }); + + useMainStore().getPartsOrQuestions = jest.fn().mockImplementation(() => { + return Promise.resolve({ + data: { + partsOrQuestions: partsOrQuestions, + }, + }) + }); + + const wrapper = shallowMount( + licensePlateLookup, + getMountOptions({ + route: route ? route : undefined, + router: { + navigate: jest.fn(), + }, + mainStore: { + order: { + vehicle: { + carId: carId, + registration: { + licensePlate: "TESTPLATE", + zipCode: "12345", + }, + }, + }, + }, + + }) + ); + + const apiResponses = { + serviceZipValidationResponse: { + isValid: isZipValid, + isServiceable: isZipServiceable, + }, + vinLookupResponse: { + vin: vin, + vehicle: vehicle, + error: vinLookupResponseError, + }, + }; + + settleAllPromises.mockImplementation(() => apiResponses); + + wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => ""); + wrapper.vm.setCmsContent = jest.fn(); + wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn(); + wrapper.vm.$refs.siteFooter.removeLoader = jest.fn(); + wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn(); + wrapper.vm.$refs.siteFooter.enableForwardButton = jest.fn(); + + return { wrapper }; +} \ No newline at end of file diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue new file mode 100644 index 00000000..ef0cdb39 --- /dev/null +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -0,0 +1,327 @@ + + + + + + diff --git a/src/layouts/molding-questions/molding-questions.spec.js b/src/layouts/molding-questions/molding-questions.spec.js new file mode 100644 index 00000000..ee5a11b1 --- /dev/null +++ b/src/layouts/molding-questions/molding-questions.spec.js @@ -0,0 +1,388 @@ +// Components +import moldingQuestions from "@/layouts/molding-questions/molding-questions"; + +// Supporting Files +import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { useMainStore } from "@/store"; +import baseMixin from "../../mixins/base-mixin"; +import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin"; +import { nextTick } from "vue"; + +// 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(), +})); + +const baseStoreGettersPageData = () => { + return { + partsOrQuestions: [ + { + parts: [ + { + childPartQuestions: [ + { + questionSequence: 1, + questionText: + "Does the rubber seal around your windshield have a chrome strip running through it?", + answers: [ + { + answerResult: "WKT D1106 C", + answerText: "Yes", + nextQuestionSequence: null, + }, + { + answerResult: "WKT D1106 B", + answerText: "No", + nextQuestionSequence: null, + }, + ], + }, + ], + basePartNumber: "DW01105", + color: "Green Tint, Blue Shade", + requiresRecalibration: false, + recalibrationType: "", + canSafeliteRecalibrate: false, + requiresCapabilityQuestions: false, + childParts: null, + partNumber: "DW01105GBNN", + description: "solar", + partType: "WINDSHIELD", + }, + ], + partQuestions: [], + glassLocation: "Windshield", + glassName: "Single", + answerKey: "Windshield-Single", + answerData: null, + }, + ], + }; +}; +const baseStoreGettersDamage = () => { + return { + partsQuestionAnswers: [ + { + glassLocation: "Windshield", + glassName: "Single", + result: "FW04848", + answeredQuestions: [ + { + questionText: + "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?", + selectedAnswer: "1|nextQuestion|3|Yes", + selectedAnswerText: "Yes", + questionNum: 1, + }, + { + questionText: + "Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?", + selectedAnswer: "2|nextQuestion|3|Yes", + selectedAnswerText: "Yes", + questionNum: 2, + }, + ], + }, + ], + }; +}; + +useMainStore().pageData = baseStoreGettersPageData; +useMainStore().damage = baseStoreGettersDamage; + +describe("moldingQuestions.vue", () => { + describe("method arePagePrerequisitesValid...", () => { + test("Should return true for valid page requisites if pageData exists", () => { + // Arrange + const { wrapper } = setupMocks({}); + + // Act + const result = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(result).toBe(true); + + wrapper.unmount(); + }); + + test("Should return false for valid page requisites if partsOrQuestions in pageData is missing", () => { + // Arrange + const { wrapper } = setupMocks({}); + useMainStore().pageData = jest.fn(() => { + return undefined; + }); + + // Act + const result = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(result).toBeFalsy(); + + wrapper.unmount(); + }); + + test("Should be at least one item in partsOrQuestions", () => { + // Arrange + useMainStore().pageData = jest.fn(() => { + return { + partsOrQuestions: [], + }; + }); + useMainStore().damage = baseStoreGettersDamage; + + const { wrapper } = setupMocks({}); + + // Act + const result = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(result).toBeFalsy(); + + wrapper.unmount(); + }); + }); + + describe("watch on selectedAnswers should be set up...", () => { + test("Should trigger handleAnswerUpdates if watched data changes", async () => { + // Arrange + useMainStore().pageData = baseStoreGettersPageData; + useMainStore().damage = baseStoreGettersDamage; + + const { wrapper } = setupMocks({}); + const spy = jest.spyOn(wrapper.vm, "handleAnswerUpdates"); + + // Act + wrapper.setData({ + selectedAnswers: { + "Windshield-Single": { + answerResult: "FW04848", + answeredQuestions: [ + { + questionText: + "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?", + selectedAnswer: "1|nextQuestion|3|Yes", + selectedAnswerText: "Yes", + questionNum: 1, + }, + { + questionText: + "Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?", + selectedAnswer: "2|nextQuestion|3|Yes", + selectedAnswerText: "Yes", + questionNum: 2, + }, + ], + index: 0, + }, + }, + }); + + await nextTick(); + + //Assert + expect(spy).toHaveBeenCalled(); + + wrapper.unmount(); + }); + }); + + describe("forwardButtonAction", () => { + test("Should clear out answerData", () => { + // Arrange + const { wrapper } = setupMocks({}); + + wrapper.vm.questionsData = [ + { + glassLocation: "Windshield", + glassName: "Single", + answerData: { + answerResult: "FW04848", + answeredQuestions: [], + }, + }, + ]; + wrapper.vm.dispatchStoreAction = jest.fn(() => { + return { + data: { + partsOrQuestions: [], + }, + }; + }); + + // Act + wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.questionsData[0].answerData).toEqual({}); + + wrapper.unmount(); + }); + + test("Should save to pinia store", async () => { + // Arrange + const { wrapper } = setupMocks({}); + + wrapper.vm.questionsData = [ + { + glassLocation: "Windshield", + glassName: "Single", + answerData: { + answerResult: "FW04848", + answeredQuestions: [], + }, + }, + ]; + useMainStore().getPartsOrQuestions = jest.fn(() => { + return { + data: { + partsOrQuestions: [], + }, + }; + }); + + // Act + wrapper.vm.forwardButtonAction(); + + await nextTick(); + + //Assert + expect(wrapper.vm.saveMoldingQuestionAnswers).toHaveBeenCalled; + wrapper.unmount(); + }); + + test("Should call GET_PARTS_OR_QUESTIONS API", async () => { + // Arrange + const { wrapper } = setupMocks({}); + + wrapper.vm.questionsData = [ + { + glassLocation: "Windshield", + glassName: "Single", + answerData: { + answerResult: "FW04848", + answeredQuestions: [], + }, + }, + ]; + useMainStore().getPartsOrQuestions = jest.fn(() => { + return { + data: { + partsOrQuestions: [], + }, + }; + }); + + // Act + wrapper.vm.forwardButtonAction(); + + await nextTick(); + + //Assert + expect(wrapper.vm.getPartsOrQuestions).toHaveBeenCalled; + + wrapper.unmount(); + }); + + test("Should trigger navigateForward", async () => { + // Arrange + const { wrapper } = setupMocks({}); + + wrapper.vm.questionsData = [ + { + glassLocation: "Windshield", + glassName: "Single", + answerData: { + answerResult: "FW04848", + answeredQuestions: [], + }, + }, + ]; + useMainStore().getPartsOrQuestions = jest.fn(() => { + return { + data: { + partsOrQuestions: [], + }, + }; + }); + wrapper.vm.navigateForward = jest.fn(); + + // Act + await wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.navigateForward).toHaveBeenCalled(); + + wrapper.unmount(); + }); + }); +}); + +function setupMocks({ + mountOptionsMockData = { + router: { + navigate: jest.fn(), + }, + actionList: [ + { + actionName: "saveMoldingQuestionAnswers", + data: {}, + }, + { + actionName: "getPartsOrQuestions", + data: {}, + }, + ], + route: { + query: { + issPage: "molding-questions", + }, + }, + data() { + return { + computedSwitcher: [ + { + glassLocation: "Windshield", + glassName: "Single", + answerData: { + answerResult: "FW04848", + answeredQuestions: [], + }, + }, + ], + }; + }, + questionsData: { + get() { + return this.computedSwitcher; + }, + set(val) { + this.computedSwitcher = val; + }, + }, + }, +}) { + + useMainStore().getPartsOrQuestions = jest.fn(() => { + return { + data: { + partsOrQuestions: [], + } + }; + }); + + const mountOptions = getMountOptions({ + ...mountOptionsMockData, + mixins: [baseMixin, vehicleQuestionsMixin], + }); + mountOptions["attachTo"] = document.body; + + const wrapper = shallowMount(moldingQuestions, mountOptions); + + return { wrapper }; +} \ No newline at end of file diff --git a/src/layouts/molding-questions/molding-questions.vue b/src/layouts/molding-questions/molding-questions.vue new file mode 100644 index 00000000..e06dfe58 --- /dev/null +++ b/src/layouts/molding-questions/molding-questions.vue @@ -0,0 +1,186 @@ + + + + + + \ No newline at end of file diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue new file mode 100644 index 00000000..2cdbc680 --- /dev/null +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -0,0 +1,69 @@ + + + + diff --git a/src/layouts/part-questions/part-questions.spec.js b/src/layouts/part-questions/part-questions.spec.js new file mode 100644 index 00000000..e2ab3bd7 --- /dev/null +++ b/src/layouts/part-questions/part-questions.spec.js @@ -0,0 +1,398 @@ +// Components +import partQuestions from "@/layouts/part-questions/part-questions"; + +// Supporting Files +import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { useMainStore } from "@/store"; +import baseMixin from "@/mixins/base-mixin"; +import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin"; +import { nextTick } from "vue"; + +// 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(), +})); + + +const baseStoreGettersPageData = () => { + return { + partsOrQuestions: [ + { + parts: null, + partQuestions: [ + { + questionSequence: 1, + questionText: + "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?", + answers: [ + { + answerResult: "", + answerText: "Yes", + nextQuestionSequence: 2, + }, + { + answerResult: "", + answerText: "No", + nextQuestionSequence: 3, + }, + ], + }, + ], + glassLocation: "Windshield", + glassName: "Single", + answerKey: "Windshield-Single", + answerData: null, + }, + ], + }; +}; +const baseStoreGettersDamage = () => { + return { + partsQuestionAnswers: [ + { + glassLocation: "Windshield", + glassName: "Single", + result: "FW04848", + answeredQuestions: [ + { + questionText: + "Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?", + selectedAnswerText: "Yes", + questionNum: 1, + }, + { + questionText: + "Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?", + selectedAnswerText: "Yes", + questionNum: 2, + }, + ], + }, + ], + }; +}; + +useMainStore().pageData = baseStoreGettersPageData; +useMainStore().damage = baseStoreGettersDamage; + +describe("partQuestions.vue...", () => { + describe("method arePagePrerequisitesValid...", () => { + test("Should return true for valid page requisites if pageData exists", () => { + // Arrange + const { wrapper } = setupMocks({}); + + // Act + const result = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(result).toBe(true); + + wrapper.unmount(); + }); + + test("Should return false for valid page requisites if partsOrQuestions in pageData is missing", () => { + // Arrange + const { wrapper } = setupMocks({}); + useMainStore().pageData = jest.fn(() => { + return undefined; + }); + + // Act + const result = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(result).toBeFalsy(); + + wrapper.unmount(); + }); + + test("Should be at least one item in partsOrQuestions", () => { + // Arrange + useMainStore().pageData = jest.fn(() => { + return { + partsOrQuestions: [], + }; + }); + useMainStore().damage = baseStoreGettersDamage; + + const { wrapper } = setupMocks({}); + + // Act + const result = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(result).toBeFalsy(); + + wrapper.unmount(); + }); + }); + + describe("watch on selectedAnswers should be set up...", () => { + test("Should trigger handleAnswerUpdates if watched data changes", async () => { + // Arrange + useMainStore().pageData = baseStoreGettersPageData; + useMainStore().damage = baseStoreGettersDamage; + + const { wrapper } = setupMocks({}); + const spy = jest.spyOn(wrapper.vm, "handleAnswerUpdates"); + + // Act + wrapper.setData({ + selectedAnswers: { + "Windshield-Single": { + answerResult: "FW04848", + answeredQuestions: [ + { + questionText: "One?", + selectedAnswerText: "Yes", + questionNum: 1, + }, + { + questionText: "Two?", + selectedAnswerText: "Yes", + questionNum: 2, + }, + ], + index: 0, + }, + }, + }); + + await nextTick(); + + wrapper.setData({ + selectedAnswers: { + "Windshield-Single": { + answerResult: "NEW-ANSWER", + answeredQuestions: [ + { + questionText: "One?", + selectedAnswerText: "Yes", + questionNum: 1, + }, + { + questionText: "Two?", + selectedAnswerText: "Yes", + questionNum: 2, + }, + ], + index: 0, + }, + }, + }); + + //Assert + expect(spy).toHaveBeenCalled(); + + wrapper.unmount(); + }); + }); + + describe("forwardButtonAction", () => { + test("Should clear out answerData", async () => { + // Arrange + const { wrapper } = setupMocks({}); + + await wrapper.setData({ + questionsData: [ + { + glassLocation: "fbfWindshield", + glassName: "fbfSingle", + answerData: { + answerResult: "FW04848", + answeredQuestions: [], + }, + }, + ], + }); + + wrapper.vm.getParts = jest.fn(() => { + return { + data: { + glassPieceParts: [], + }, + }; + }); + + // Act + wrapper.vm.forwardButtonAction(); + + await nextTick(); + + //Assert + expect(wrapper.vm.questionsData[0].answerData).toEqual({}); + + wrapper.unmount(); + }); + + test("Should save to pinia store", async () => { + // Arrange + const { wrapper } = setupMocks({}); + + wrapper.vm.questionsData = [ + { + glassLocation: "Windshield", + glassName: "Single", + answerData: { + answerResult: "FW04848", + answeredQuestions: [], + }, + }, + ]; + + useMainStore().getParts = jest.fn(() => { + return { + data: { + glassPieceParts: [], + }, + }; + }); + + // Act + wrapper.vm.forwardButtonAction(); + + await nextTick(); + + //Assert + expect(wrapper.vm.savePartQuestionAnswers).toHaveBeenCalled; + wrapper.unmount(); + }); + + test("Should call GET_PARTS API", async () => { + // Arrange + const { wrapper } = setupMocks({}); + + wrapper.vm.questionsData = [ + { + glassLocation: "Windshield", + glassName: "Single", + answerData: { + answerResult: "FW04848", + answeredQuestions: [], + }, + }, + ]; + useMainStore().getParts = jest.fn(() => { + return { + data: { + glassPieceParts: [], + }, + }; + }); + + // Act + wrapper.vm.forwardButtonAction(); + + await nextTick(); + + //Assert + expect(wrapper.vm.getParts).toHaveBeenCalled; + + wrapper.unmount(); + }); + + test("Should trigger navigateForward", async () => { + // Arrange + const { wrapper } = setupMocks({}); + + wrapper.vm.questionsData = [ + { + glassLocation: "Windshield", + glassName: "Single", + answerData: { + answerResult: "FW04848", + answeredQuestions: [], + }, + }, + ]; + useMainStore().getParts = jest.fn(() => { + return { + data: { + glassPieceParts: [], + }, + }; + }); + wrapper.vm.navigateForward = jest.fn(); + + // Act + await wrapper.vm.forwardButtonAction(); + + //Assert + expect(wrapper.vm.navigateForward).toHaveBeenCalled(); + + wrapper.unmount(); + }); + }); +}); + +function setupMocks({ + mountOptionsMockData = { + router: { + navigate: jest.fn(), + navigateWithSaving: jest.fn(), + navigateWithoutSaving: jest.fn(), + }, + actionList: [ + { + actionName: "savePartQuestionAnswers", + data: {}, + }, + { + actionName: "getParts", + data: {}, + }, + ], + route: { + query: { + issPage: "part-questions", + }, + }, + data() { + return { + computedSwitcher: [ + { + glassLocation: "Windshield", + glassName: "Single", + answerData: { + answerResult: "FW04848", + answeredQuestions: [], + }, + }, + ], + }; + }, + questionsData: { + get() { + return this.computedSwitcher; + }, + set(val) { + this.computedSwitcher = val; + }, + }, + }, +}) { + + useMainStore().getParts = jest.fn(() => { + return { + data: { + glassPieceParts: [], + }, + }; + }); + + const mountOptions = getMountOptions({ + ...mountOptionsMockData, + mixins: [baseMixin, vehicleQuestionsMixin], + }); + mountOptions["attachTo"] = document.body; + + const wrapper = shallowMount(partQuestions, mountOptions); + + return { wrapper }; +} diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue new file mode 100644 index 00000000..58a60621 --- /dev/null +++ b/src/layouts/part-questions/part-questions.vue @@ -0,0 +1,147 @@ + + + + + diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue new file mode 100644 index 00000000..3ea24265 --- /dev/null +++ b/src/layouts/payment-page/payment-page.vue @@ -0,0 +1,86 @@ + + + + + diff --git a/src/layouts/policy-holder-details/policy-holder-details.spec.js b/src/layouts/policy-holder-details/policy-holder-details.spec.js new file mode 100644 index 00000000..444d5c6f --- /dev/null +++ b/src/layouts/policy-holder-details/policy-holder-details.spec.js @@ -0,0 +1,189 @@ +import policyHolderDetails from "@/layouts/policy-holder-details/policy-holder-details.vue"; + +// Supporting files +// Supporting files +import { shallowMount } from '@vue/test-utils'; +import { settleAllPromises } from "@/helpers/layout-helper.js"; +import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { useMainStore } from "@/store"; +import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; + +// 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(), +})); + + +describe("policy-holder-details.vue", () => { + test("Should render policy-holder-details sub-components (policy holder first name, last name, street address etc.)", async () => { + // Arrange + const { wrapper } = setupMocks({}); + // Act + const policyHolderFirstName = wrapper.findComponent({ ref: "policyHolderFirstName" }); + const policyHolderLastName = wrapper.findComponent({ ref: "policyHolderLastName" }); + const addressQuestions = wrapper.findComponent({ ref: "addressQuestions" }); + + // Assert + expect(policyHolderFirstName.exists()).toBe(true); + expect(policyHolderLastName.exists()).toBe(true); + expect(addressQuestions.exists()).toBe(true); + }); +}); + +describe("navigation", () => { + test("if the back button is clicked, navigate back", async () => { + // Arrange + const { wrapper } = setupMocks({ + }); + + // Act + await wrapper.vm.backButtonAction(); + + // Assert + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + }); + + test("if the car entered matches one of the vehicles found navigate forward", async () => { + // Arrange + const mockRegistrationAddress = { + streetAddress: "1234 Main St", + city: "Columbus", + state: "OH", + zipCode: "43215", + }; + + const { wrapper } = setupMocks(); + + await wrapper.setData({ + firstName: "KK", + lastName:"KK", + customerQuestions: { + addressQuestions: mockRegistrationAddress, + }, + isCoverageEnabled:false + }); + + wrapper.vm.navigateForward = jest.fn(); + + // Act + await wrapper.vm.forwardButtonAction(); + + // Assert + expect(wrapper.vm.navigateForward).toHaveBeenCalled(); + + }); + + test("if the coverage policy verified navigate forward to policy-vehicle page", async () => { + // Arrange + const mockRegistrationAddress = { + streetAddress: "1234 Main St", + city: "Columbus", + state: "OH", + zipCode: "43215", + }; + const mockvehicles = [ + { + vin: "TEST_VIN", + }, + { + vin: "TEST_VIN2", + } + ]; + + const { wrapper } = setupMocks(); + + await wrapper.setData({ + firstName: "KK", + lastName:"KK", + customerQuestions: { + addressQuestions: mockRegistrationAddress, + }, + isCoverageEnabled : true, + vehiclesCount:2, + vehiclesFound:mockvehicles + }); + + + useMainStore().order.policy.policyNumber = "p_0001"; + useMainStore().order.policy.dateOfLoss = "2022-01-28"; + useMainStore().order.accountNumber = "00000"; + + // Act + + await wrapper.vm.forwardButtonAction(); + + // Assert + expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith( + navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED, + undefined, + {}, + {}, + mockvehicles + ); + + }); + +}); + +function setupMocks() +{ + const wrapper = shallowMount( + policyHolderDetails, + getMountOptions({ + router: { + navigate: jest.fn(), + }, + mainStore: { + order: { + customer: { + emailAddress: "test@test.com", + }, + }, + }, + + }) + ); + const policies = [{ + vehicles:[ + { + vin: "TEST_VIN", + }, + { + vin: "TEST_VIN2", + } + ] + }, +]; + useMainStore().getCoveragePolicyInfo = jest.fn().mockImplementation(() => { + return Promise.resolve({ + data: { + policies:policies, + }, + }) + }) + + const apiResponses = { + policyLookupResponse:{ + policies:policies + } + }; + + settleAllPromises.mockImplementation(() => apiResponses); + + wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => ""); + wrapper.vm.setCmsContent = jest.fn(); + wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn(); + wrapper.vm.$refs.siteFooter.removeLoader = jest.fn(); + wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn(); + wrapper.vm.$refs.siteFooter.enableForwardAction = jest.fn(); + + return { wrapper }; +} + + diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue new file mode 100644 index 00000000..42c266b2 --- /dev/null +++ b/src/layouts/policy-holder-details/policy-holder-details.vue @@ -0,0 +1,178 @@ + + + + + + diff --git a/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.spec.js b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.spec.js new file mode 100644 index 00000000..c9efabf3 --- /dev/null +++ b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.spec.js @@ -0,0 +1,33 @@ +import policyVehiclesQuestion from "@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue"; +import { shallowMount } from "@vue/test-utils"; + + +describe("policy-vehicles-question.vue", () => { + test("Selected vehicle is emitted upon selection", async () => { + //Arrange + const vehicleToSelect = "Test1"; + const wrapper = shallowMount(policyVehiclesQuestion, { + mixins: [mockMixin], + propsData: { + vehicles: ["Test1", "Test2"] + }, + }); + + //Act + wrapper.setValue({ modelValue: vehicleToSelect }); + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([ + { modelValue: "Test1" }, + ]); + }); +}); + +const mockMixin = { + methods: { + getCmsContent: jest.fn(()=>{ + return [ "vehicle not listed" ]; + }) + }, +}; \ No newline at end of file diff --git a/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue new file mode 100644 index 00000000..6d19b5da --- /dev/null +++ b/src/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue @@ -0,0 +1,53 @@ + +
+
+
+
+ + + +
+ +
+
+ -
+
- + + + +
{{ModalHeadline}}
+
+
+
+
+
+ {{ModalHeadline}}
+
+
+
+
+
+
+ {{ModalHeadline}}
+
+
+
+
+
+ {{ackError}}
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/layouts/review-page/review-page.vue b/src/layouts/review-page/review-page.vue
new file mode 100644
index 00000000..849f1c51
--- /dev/null
+++ b/src/layouts/review-page/review-page.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue
new file mode 100644
index 00000000..f1ce943c
--- /dev/null
+++ b/src/layouts/schedule-page/schedule-page.vue
@@ -0,0 +1,84 @@
+
+
+
+
+
diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js
new file mode 100644
index 00000000..1d424130
--- /dev/null
+++ b/src/layouts/service-location/service-location.spec.js
@@ -0,0 +1,157 @@
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import serviceLocation from "@/layouts/service-location/service-location.vue";
+import { getServiceabilityDetails, getZipCodeData } from "@/helpers/service-location-helper";
+
+// Define Mocks
+jest.mock("@/helpers/cms-content-helper", () => ({
+ fetchCmsContentForPage: jest.fn(() => {
+ return Promise.resolve("content");
+ }),
+}));
+
+const mockGetServiceabilityDetails = (mockServiceZipCode) => {
+ const serviceabilityDetails = {
+ isGlassServiceableInshop: true,
+ isRecalibrationServiceableInshop: true,
+ isGlassServiceableMobile: true,
+ isRecalibrationServiceableMobile: true,
+ };
+
+ return Promise.resolve(serviceabilityDetails);
+};
+
+jest.mock(
+ "@/helpers/service-location-helper",
+ () => ({
+ getServiceabilityDetails: jest.fn((mockServiceZipCode) => {
+ return mockGetServiceabilityDetails(mockServiceZipCode);
+ }),
+ })
+);
+
+const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+ if (widgetName === linkWidgetName) {
+ return mockLinkCmsContent[cmsFieldName];
+ }
+
+ if (widgetName === modalWidgetName) {
+ return mockModalCmsContent[cmsFieldName];
+ }
+
+ return null;
+ }),
+
+ getZipCodeData: jest.fn((zip) => {
+ if (zip === "43235" || zip === "55555") {
+ return Promise.resolve({
+ containsMilitaryBase: false,
+ isValid: true,
+ state: "OH",
+ zipCodeCtu: "01820",
+ });
+ }
+
+ if (zip === "45433") {
+ return Promise.resolve({
+ containsMilitaryBase: true,
+ isValid: true,
+ state: "OH",
+ });
+ }
+
+ return Promise.resolve({
+ containsMilitaryBase: false,
+ isValid: false,
+ state: null,
+ zipCodeCtu: null,
+ });
+ }),
+
+ onSubmit: jest.fn(),
+ onInvalidSubmit: jest.fn(),
+ },
+};
+
+describe("navigation", () => {
+ test("if the back button is clicked, navigate back", async () => {
+ // Arrange
+
+ const { wrapper } = setupMocks({
+ });
+
+ // Act
+ await wrapper.vm.backButtonAction();
+
+ // Assert
+ expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+ });
+});
+
+describe("updating service zip", () => {
+ test("updates the page model after changing the service zip code", () => {
+ // Arrange
+ const { wrapper } = setupMocks({
+ mixins: [mockMixin],
+ });
+
+ const newServiceZipCodeQuestion = {
+ zipCode: "61606",
+ state: "IL",
+ };
+
+ const serviceZipCodeComponent = wrapper.findComponent({
+ ref: "serviceZipCodeQuestion",
+ });
+
+ // Act
+ serviceZipCodeComponent.vm.$emit("update:modelValue", newServiceZipCodeQuestion);
+
+ // Assert
+ expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeQuestion);
+ });
+
+ test("displays military zip message when zip is updated", () => {
+ // Arrange
+ const { wrapper } = setupMocks({});
+
+ const mobileLocationQuestionsComponent = wrapper.findComponent({
+ ref: "mobileLocationQuestions",
+ });
+ mobileLocationQuestionsComponent.resetComponent = jest.fn();
+
+ const serviceZipCodeComponent = wrapper.findComponent({
+ ref: "serviceZipCodeQuestion",
+ });
+ serviceZipCodeComponent.resetMobileFeePart = jest.fn();
+
+ expect(wrapper.vm.zipContainsMilitaryBase).toBe(false);
+
+ const newServiceZipCodeQuestion = {
+ zipCode: "45433",
+ state: "OH",
+ };
+
+ // Act
+ serviceZipCodeComponent.vm.$emit("updated-contains-military-base", true);
+
+ // Assert
+ expect(wrapper.vm.zipContainsMilitaryBase).toBe(true);
+ });
+});
+
+function setupMocks()
+{
+ const wrapper = shallowMount(
+ serviceLocation,
+ getMountOptions({
+ router: {
+ navigate: jest.fn(),
+ },
+ })
+ );
+
+ return { wrapper };
+}
\ No newline at end of file
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
new file mode 100644
index 00000000..29a56f2c
--- /dev/null
+++ b/src/layouts/service-location/service-location.vue
@@ -0,0 +1,261 @@
+
+
+
+
+
+
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js
new file mode 100644
index 00000000..201b93c7
--- /dev/null
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js
@@ -0,0 +1,251 @@
+import { mount, shallowMount } from "@vue/test-utils";
+import serviceZipModalQuestion from "./service-zip-modal-question";
+import crypto from "crypto";
+global.crypto = crypto;
+
+jest.mock("@/digital-components/textbox-question/textbox-question", () => ({
+ getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+ return widgetName[cmsFieldName];
+ }),
+}));
+
+jest.mock("@/digital-components/modal/modal", () => ({
+ methods: {
+ closeModal: jest.fn(),
+ resetButtonStyle: jest.fn(),
+ },
+}));
+
+const mockGetServiceabilityDetails = (mockServiceZipCode) => {
+ const serviceabilityDetails = {
+ isGlassServiceableInshop: true,
+ isRecalibrationServiceableInshop: true,
+ isGlassServiceableMobile: true,
+ isRecalibrationServiceableMobile: true,
+ };
+
+ return Promise.resolve(serviceabilityDetails);
+};
+
+const mockGetZipCodeData = (mockServiceZipCode) => {
+ if (mockServiceZipCode === "43235") {
+ return {
+ containsMilitaryBase: false,
+ isValid: true,
+ state: "OH",
+ zipCodeCtu: "01820",
+ };
+ }
+
+ if (mockServiceZipCode === "61606") {
+ return {
+ containsMilitaryBase: false,
+ isValid: true,
+ state: "IL",
+ zipCodeCtu: "01526",
+ };
+ }
+
+ return {
+ containsMilitaryBase: false,
+ isValid: false,
+ state: null,
+ zipCodeCtu: null,
+ };
+}
+
+jest.mock(
+ "@/helpers/service-location-helper",
+ () => ({
+ getServiceabilityDetails: jest.fn((mockServiceZipCode) => {
+ return mockGetServiceabilityDetails(mockServiceZipCode);
+ }),
+ getZipCodeData: jest.fn((mockServiceZipCode) => {
+ return mockGetZipCodeData(mockServiceZipCode);
+ }),
+ })
+);
+
+const linkWidgetName = "linkWidgetName";
+const modalWidgetName = "modalWidgetName";
+
+const mockLinkCmsContent = {
+ BodyText: "Sample link body text here.",
+};
+
+const mockModalCmsContent = {
+ FooterText: "Sample modal footer text here.",
+};
+
+const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+ if (widgetName === linkWidgetName) {
+ return mockLinkCmsContent[cmsFieldName];
+ }
+
+ if (widgetName === modalWidgetName) {
+ return mockModalCmsContent[cmsFieldName];
+ }
+ return null;
+ }),
+ }
+}
+
+describe("service-zip-modal-question.vue", () => {
+ it("Initial state on load with existing location info", async () => {
+ // Arrange
+ let serviceZipCodeQuestion = {
+ state: "OH",
+ zipCode: "43235",
+ };
+
+ const wrapper = mount(serviceZipModalQuestion, {
+ mixins: [mockMixin],
+ props: {
+ modelValue: serviceZipCodeQuestion,
+ linkWidgetName: linkWidgetName,
+ modalWidgetName: modalWidgetName,
+ },
+ attachTo: document.body,
+ });
+
+ // Assert
+ expect(wrapper.html()).not.toEqual(expect.stringContaining(mockLinkCmsContent["BodyText"]));
+ });
+
+ it("Should emit update:modelValue on setZipCode for a valid, serviceable zip", async () => {
+ // Arrange
+ let serviceZipCodeQuestion = {
+ state: "IL",
+ zipCode: "61606",
+ };
+
+ const zip = "43235";
+
+ const wrapper = mount(serviceZipModalQuestion, {
+ mixins: [mockMixin],
+ props: {
+ modelValue: serviceZipCodeQuestion,
+ mobileFeePart: {},
+ modalWidgetName: modalWidgetName,
+ },
+ attachTo: document.body,
+ });
+
+ // Act
+ wrapper.vm.internalModel.zipCode = zip;
+
+ await wrapper.vm.setZipCode();
+
+ let expectedEmit = [[{ state: "OH", zipCode: "43235" }]];
+
+ // Assert
+ expect(wrapper.emitted("update:modelValue")).toEqual(expectedEmit);
+ });
+
+ it("Should not emit update:modelValue on setZipCode for an invalid zip", async () => {
+ // Arrange
+ let serviceZipCodeQuestion = {
+ state: "IL",
+ zipCode: "61606",
+ };
+
+ const zip = "";
+
+ const wrapper = mount(serviceZipModalQuestion, {
+ mixins: [mockMixin],
+ props: {
+ modelValue: serviceZipCodeQuestion,
+ modalWidgetName: modalWidgetName,
+ },
+ attachTo: document.body,
+ });
+
+ // Act
+ wrapper.vm.internalModel.zipCode = zip;
+ await wrapper.vm.setZipCode();
+
+ // Assert
+ expect(wrapper.emitted("update:modelValue")).not.toBeTruthy();
+ });
+
+ it("Should display invalid zip alerts for invalid ip inputs", async () => {
+ // Arrange
+ let serviceZipCodeQuestion = {
+ state: "IL",
+ zipCode: "61606",
+ };
+
+ const zip = "11111";
+
+ const wrapper = mount(serviceZipModalQuestion, {
+ mixins: [mockMixin],
+ props: {
+ modelValue: serviceZipCodeQuestion,
+ modalWidgetName: modalWidgetName,
+ },
+ attachTo: document.body,
+ });
+
+ // Act
+ wrapper.vm.internalModel.zipCode = zip;
+ await wrapper.vm.setZipCode();
+
+ // Assert
+ expect(wrapper.vm.displayInvalidZipAlert).toBe(true);
+ });
+
+ it("Should reset all alerts on onModalClosed", async () => {
+ // Arrange
+ let serviceZipCodeQuestion = {
+ state: "IL",
+ zipCode: "61606",
+ };
+
+ const zip = "";
+
+ const wrapper = mount(serviceZipModalQuestion, {
+ mixins: [mockMixin],
+ props: {
+ modelValue: serviceZipCodeQuestion,
+ modalWidgetName: modalWidgetName,
+ },
+ attachTo: document.body,
+ });
+
+ // Act
+ wrapper.vm.internalModel.zipCode = zip;
+ await wrapper.vm.setZipCode();
+ wrapper.vm.onModalClosed();
+
+ // Assert
+ expect(wrapper.vm.displayInvalidZipAlert).toBe(false);
+ });
+
+ it("Should prepopulate the zip on onModalOpened", async () => {
+ // Arrange
+ let serviceZipCodeQuestion = {
+ state: "IL",
+ zipCode: "61606",
+ };
+
+ const zip = "123";
+
+ const wrapper = mount(serviceZipModalQuestion, {
+ mixins: [mockMixin],
+ props: {
+ modelValue: serviceZipCodeQuestion,
+ modalWidgetName: modalWidgetName,
+ },
+ attachTo: document.body,
+ });
+
+ // Act
+ wrapper.vm.internalModel.zipCode = zip;
+ wrapper.vm.onModalOpened();
+
+ // Assert
+ expect(wrapper.vm.internalModel.zipCode).toEqual("61606");
+ });
+});
\ No newline at end of file
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
new file mode 100644
index 00000000..380645bb
--- /dev/null
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
@@ -0,0 +1,191 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+ +
+
+ -
+
-
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
new file mode 100644
index 00000000..067e764a
--- /dev/null
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
@@ -0,0 +1,131 @@
+import { shallowMount } from "@vue/test-utils";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+describe("replace-options-question.vue", () => {
+ test("Selected damage option is emitted upon selection.", async () => {
+ //Arrange
+ const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
+ const damageToSelect = ["Backseat"];
+
+ //Act
+ wrapper.setValue({ modelValue: damageToSelect });
+ await wrapper.vm.$nextTick();
+
+ //Assert
+ expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Backseat"] }]);
+ });
+});
+
+describe("replace-options-question.vue", () => {
+ test("Answers to display filtered by data from api.", async () => {
+ //Arrange
+ const { wrapper, cmsContent, replaceOptions } = setupMocks({
+ dataFromStoreApi: ["Windshield", "FrontDoor"],
+ filterByVehicleCategory: true,
+ });
+
+ //Act
+ replaceOptionsQuestion.methods.initializeComponent.call(
+ wrapper.vm,
+ replaceOptions,
+ "car-group"
+ );
+
+ //Assert
+ expect(wrapper.vm.replaceOptions).toStrictEqual(["Windshield", "FrontDoor"]);
+ });
+});
+
+describe("replace-options-question.vue", () => {
+ test("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedReplaceOptions", async () => {
+ //Arrange
+ const { wrapper, cmsContent, replaceOptions } = setupMocks({
+ modelValueProp: [],
+ });
+ wrapper.setData({
+ answersFromCms: [
+ {
+ Name: "Stationary",
+ },
+ {
+ Name: "Slider",
+ },
+ ],
+ });
+ wrapper.setData({ replaceOptions: ["Stationary"] });
+
+ //Act
+ wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm);
+
+ expect(wrapper.vm.selectedValues).toEqual([]);
+ });
+});
+
+describe("replace-options-question.vue", () => {
+ test("when isAvailable is true, will run updateSelectedValues method", async () => {
+ //Arrange
+ const { wrapper, cmsContent, replaceOptions } = setupMocks({
+ isAvailable: false,
+ methodsToMock: ["updateSelectedValues"],
+ });
+
+ //Act
+ wrapper.vm.$options.methods.initializeComponent.call(
+ wrapper.vm,
+ cmsContent,
+ replaceOptions,
+ "car-group"
+ );
+ wrapper.vm.$options.watch.isAvailable.call(wrapper.vm, true);
+
+ //Assert
+ expect(replaceOptionsQuestion.methods.updateSelectedValues).toHaveBeenCalled();
+ wrapper.unmount();
+ });
+});
+
+function setupMocks({
+ modelValueProp = ["Windshield"],
+ isAvailable = true,
+ isMultiSelect = false,
+ filterByVehicleCategory = false,
+ groupName = "damageQuestion",
+ cmsQuestionText = "CMS text goes here",
+ cmsAnswers = [{ Name: "car-Windshield" }, { Name: "car-BackDoor" }, { Name: "car-FrontDoor" }],
+ dataFromStoreApi = [],
+ methodsToMock = [],
+}) {
+
+ const mountOptions = getMountOptions({ });
+
+ //Mock props
+ const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn(),
+ },
+ };
+ mountOptions.propsData = {
+ modelValue: modelValueProp,
+ isAvailable: isAvailable,
+ isMultiSelect: isMultiSelect,
+ filterByVehicleCategory: filterByVehicleCategory,
+ };
+ mountOptions.mixins = [mockMixin];
+
+ //Mock methods
+ methodsToMock.forEach((methodName) => {
+ replaceOptionsQuestion.methods[methodName] = jest.fn();
+ });
+
+ const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);
+
+ //Mock CMS content
+ const cmsContent = {
+ groupName: groupName,
+ QuestionText: cmsQuestionText,
+ Answers: cmsAnswers,
+ };
+ const replaceOptions = dataFromStoreApi;
+ return { wrapper, cmsContent, replaceOptions };
+}
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
new file mode 100644
index 00000000..6e4dada2
--- /dev/null
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+ {{ colorQuestionText }}
+
+
+
+
+
+
+
diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js
new file mode 100644
index 00000000..5844a41a
--- /dev/null
+++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js
@@ -0,0 +1,427 @@
+// Components
+import vehicleParts from "@/layouts/vehicle-parts/vehicle-parts.vue";
+import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
+
+// Supporting Files
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
+import baseMixin from "@/mixins/base-mixin.js";
+import { useMainStore } from "@/store";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
+import { applicationConfig } from "@/constants/application-config";
+
+// 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(),
+}));
+
+useMainStore().getters = {
+ pageData: jest.fn(),
+ damage: {
+ isRepair: false,
+ },
+};
+
+
+
+const basePartResponse = {
+ partsOrQuestions: [
+ {
+ glassName: "Stationary",
+ glassLocation: "Rear",
+ parts: [
+ {
+ partNumber: "DB12209GTYN",
+ description: "heated glass, solar, 1 hole",
+ color: "Green Tint",
+ requiresRecalibration: false,
+ requiresCapabilityQuestions: false,
+ childParts: null,
+ },
+ {
+ partNumber: "DB12209YPYNOEM",
+ description: "heated glass, solar, 1 hole",
+ color: "Gray Tint Privacy",
+ requiresRecalibration: false,
+ requiresCapabilityQuestions: false,
+ childParts: null,
+ },
+ ],
+ partQuestions: null,
+ },
+ ],
+};
+
+describe("vehicle-parts.vue", () => {
+ test("Set cms content called on load", async () => {
+ //Arrange
+ useMainStore().pageData = jest.fn();
+ useMainStore().pageData.mockReturnValue(basePartResponse);
+ useMainStore().lineItems = { glassParts: null };
+
+ const { wrapper, apiPromise } = setupMocks({
+ mountOptionsMockData: {
+ router: {
+ navigate: jest.fn()
+ },
+ route: {
+ query: {
+ issPage: "vehicle-parts",
+ },
+ },
+ useMainStore: {
+ getters: useMainStore().getters,
+ },
+ },
+ });
+
+ //Act
+ vehicleParts.beforeRouteEnter.call(
+ wrapper.vm,
+ { query: { issPage: "vehicle-parts" } },
+ undefined,
+ (c) => c(wrapper.vm)
+ );
+ wrapper.vm.setCmsContent = jest.fn();
+
+ //Assert
+ apiPromise.finally(() => {
+ expect(wrapper.vm.setCmsContent).toHaveBeenCalled();
+ });
+ });
+
+ test("PageData / isRepair populated in Vuex. arePagePrerequisitesValid should be true ", async () => {
+ //Arrange
+ useMainStore().pageData = jest.fn();
+ useMainStore().pageData.mockReturnValue(basePartResponse);
+ useMainStore().lineItems = { glassParts: null };
+ useMainStore().damage.isRepair = false;
+
+ const { wrapper } = setupMocks({
+ mountOptionsMockData: {
+ router: {
+ navigate: jest.fn(),
+ },
+ route: {
+ query: {
+ issPage: "vehicle-parts",
+ },
+ },
+ },
+ });
+
+ //Act
+ vehicleParts.beforeRouteEnter.call(
+ wrapper.vm,
+ { query: { issPage: "vehicle-parts" } },
+ undefined,
+ (c) => c(wrapper.vm)
+ );
+
+ let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+ await nextTick();
+
+ //Assert
+ expect(arePagePrerequisitesValid).toBe(true);
+ });
+
+ test("Initial data, should populate this.selectedGlassParts", async () => {
+ //Arrange
+ useMainStore().pageData = jest.fn();
+ useMainStore().pageData.mockReturnValue(basePartResponse);
+ useMainStore().lineItems = { glassParts: [{ partNumber: "DB12209YPYNOEM" }] };
+
+ const { wrapper } = setupMocks({
+ mountOptionsMockData: {
+ router: {
+ navigate: jest.fn(),
+ },
+ route: {
+ query: {
+ issPage: "vehicle-parts",
+ },
+ },
+ },
+ });
+
+ //Act
+ vehicleParts.beforeRouteEnter.call(
+ wrapper.vm,
+ { query: { issPage: "vehicle-parts" } },
+ undefined,
+ (c) => c(wrapper.vm)
+ );
+
+ await nextTick();
+
+ //Assert
+ expect(wrapper.vm.selectedGlassParts).toEqual({
+ "Rear-Stationary": {
+ partNumber: "DB12209YPYNOEM",
+ description: "heated glass, solar, 1 hole",
+ color: "Gray Tint Privacy",
+ requiresRecalibration: false,
+ requiresCapabilityQuestions: false,
+ childParts: null,
+ },
+ });
+ });
+
+ test("User had part questions > navigateBack triggers a router.navigateWithoutSaving change with correct scenario", async () => {
+ //Arrange
+ const { wrapper } = setupMocks({
+ mountOptionsMockData: {
+ router: {
+ navigate: jest.fn(),
+ },
+ route: {
+ query: {
+ issPage: "vehicle-parts",
+ },
+ },
+ },
+ });
+
+ //Act
+ vehicleParts.beforeRouteEnter.call(
+ wrapper.vm,
+ { query: { issPage: "vehicle-parts" } },
+ undefined,
+ (c) => c(wrapper.vm)
+ );
+
+ wrapper.vm.navigateBack();
+
+ //Assert
+ expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+ navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
+ wrapper.vm.$route
+ );
+ });
+
+ test("User did not have part questions > navigateBack triggers a router.navigate change with correct scenario", async () => {
+ //Arrange
+ const { wrapper } = setupMocks({
+ mountOptionsMockData: {
+ router: {
+ navigate: jest.fn(),
+ },
+ route: {
+ query: {
+ issPage: "vehicle-parts",
+ },
+ },
+ },
+ });
+
+ //Act
+ vehicleParts.beforeRouteEnter.call(
+ wrapper.vm,
+ { query: { issPage: "vehicle-parts" } },
+ undefined,
+ (c) => c(wrapper.vm)
+ );
+
+ wrapper.vm.navigateBack();
+
+ //Assert
+ expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+ navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
+ wrapper.vm.$route
+ );
+ });
+
+ test("ForwardButtonAction triggers a router.navigate change if there are child part questions", async () => {
+ //Arrange
+ useMainStore().pageData = jest.fn();
+ useMainStore().pageData.mockReturnValue({
+ partsOrQuestions: [
+ {
+ glassName: "Single",
+ glassLocation: "Windshield",
+ parts: [
+ {
+ partNumber: "FW03861GTYN",
+ description:
+ "rain sensor, heated glass, auto dimming mirror, solar, 3rd visor band, condensation sensor",
+ color: "Green Tint",
+ requiresRecalibration: false,
+ requiresCapabilityQuestions: false,
+ recalibrationType: null,
+ childParts: null,
+ childPartQuestions: [
+ {
+ questionSequence: 1,
+ questionText:
+ "Does the rubber seal around your windshield have a chrome strip running through it?",
+ answers: [
+ {
+ answerResult: "WKT D1106 C",
+ answerText: "Yes",
+ nextQuestionSequence: null,
+ },
+ {
+ answerResult: "WKT D1106 B",
+ answerText: "No",
+ nextQuestionSequence: null,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ partQuestions: null,
+ },
+ ],
+ });
+ useMainStore().lineItems = { glassParts: {} };
+
+ const { wrapper } = setupMocks({
+ mountOptionsMockData: {
+ router: {
+ navigate: jest.fn(),
+ },
+ route: {
+ query: {
+ issPage: "vehicle-parts",
+ },
+ },
+ },
+ });
+
+ wrapper.setData({
+ selectedGlassParts: { "Rear-Stationary": { partNumber: "FW03861GTYN" } },
+ });
+
+ //Act
+ vehicleParts.beforeRouteEnter.call(
+ wrapper.vm,
+ { query: { issPage: "vehicle-parts" } },
+ undefined,
+ (c) => c(wrapper.vm)
+ );
+
+ await wrapper.vm.forwardButtonAction();
+
+ //Assert
+ expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+ expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith("CLICKED_FORWARD_WITH_MOLDING_QUESTIONS", {"query": {"issPage": "vehicle-parts"}}, {}, {}, expect.anything());
+ });
+
+ test("ForwardButtonAction triggers a router.navigate change if there are capability questions", async () => {
+ //Arrange
+ useMainStore().pageData = jest.fn();
+ useMainStore().pageData.mockReturnValue({
+ partsOrQuestions: [
+ {
+ glassName: "Single",
+ glassLocation: "Windshield",
+ parts: [
+ {
+ partNumber: "DB12209GTYN",
+ description: "heated glass, solar, 1 hole",
+ color: "Green Tint",
+ requiresRecalibration: false,
+ requiresCapabilityQuestions: true,
+ childParts: null,
+ },
+ ],
+ partQuestions: null,
+ },
+ ],
+ });
+ useMainStore().lineItems = { glassParts: {} };
+ useMainStore().vehicle = { carId: "TEST_CAR_ID" };
+
+ const { wrapper } = setupMocks({
+ mountOptionsMockData: {
+ router: {
+ navigate: jest.fn(),
+ },
+ route: {
+ query: {
+ issPage: "vehicle-parts",
+ },
+ },
+ actionList: [
+ {
+ actionName: "getCapabilityQuestions",
+ data: [],
+ },
+ ],
+ },
+ });
+
+ wrapper.setData({
+ selectedGlassParts: { "Rear-Stationary": { partNumber: "DB12209GTYN" } },
+ });
+
+ //Act
+ vehicleParts.beforeRouteEnter.call(
+ wrapper.vm,
+ { query: { issPage: "vehicle-parts" } },
+ undefined,
+ (c) => c(wrapper.vm)
+ );
+
+
+ await wrapper.vm.forwardButtonAction();
+
+ //Assert
+ expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+ expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith("CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS", {"query": {"issPage": "vehicle-parts"}}, {}, {}, expect.anything());
+ });
+
+});
+
+function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {} }) {
+ //Mock api responses
+ const apiResponses = {
+ cmsContent: {
+ SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
+ VehicleBannerWidget: {
+ GenericVehicleImage:
+ `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`,
+ },
+ FunnelHeaderWidget: {
+ LogoImage:
+ `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
+ },
+ ColorQuestionWidget: "Please choose your rear window tint color",
+ FeatureQuestionWidget: "Ok no choose features",
+ AlertWidget: {
+ BodyText: "Please choose your tint color",
+ HeadlineText: "Just a few more steps to go",
+ },
+ },
+ };
+
+ const store = useMainStore();
+ let actionResult = [];
+ store.getCapabilityQuestions.mockImplementation(() => Promise.resolve({data: actionResult,}));
+
+ const apiPromise = Promise.resolve(apiResponses);
+
+ settleAllPromises.mockImplementation(() => apiPromise);
+ fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+
+ const mountOptions = getMountOptions(mountOptionsMockData);
+ const wrapper = shallowMount(vehicleParts, mountOptions);
+
+ const partQuestionRearWrapper = wrapper.findComponent({ name: "glassPartQuestion" });
+ partQuestionRearWrapper.vm.initializeComponent = glassPartQuestion.methods.initializeComponent;
+
+ wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+ wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
+
+ return { wrapper, apiPromise };
+}
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
new file mode 100644
index 00000000..e88c5c6d
--- /dev/null
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -0,0 +1,238 @@
+
+
+
+
+
+
diff --git a/src/layouts/vehicle-selection/vehicle-question/vehicle-question.vue b/src/layouts/vehicle-selection/vehicle-question/vehicle-question.vue
new file mode 100644
index 00000000..8ac79071
--- /dev/null
+++ b/src/layouts/vehicle-selection/vehicle-question/vehicle-question.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/vin-lookup/vin-lookup-alerts/perfect-match-alert/perfect-match-alert.vue b/src/layouts/vin-lookup/vin-lookup-alerts/perfect-match-alert/perfect-match-alert.vue
new file mode 100644
index 00000000..f0bfadd6
--- /dev/null
+++ b/src/layouts/vin-lookup/vin-lookup-alerts/perfect-match-alert/perfect-match-alert.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+ ![VIN Locations]()
+
+
+
+
+
diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js
new file mode 100644
index 00000000..8c276eb7
--- /dev/null
+++ b/src/layouts/vin-lookup/vin-lookup.spec.js
@@ -0,0 +1,503 @@
+/* eslint-env jest */
+import '@testing-library/jest-dom';
+import { flushPromises } from '@vue/test-utils';
+import { render, waitFor } from '@testing-library/vue';
+import { createTestingPinia } from '@pinia/testing';
+import userEvent from '@testing-library/user-event';
+import { errorMessages } from '@/constants/error-messages';
+import { issPageValues } from '@/router/router-constants/issPage-values';
+import { queryStrings } from '@/constants/query-strings';
+import { GaActions } from "@/constants/analytics";
+import { navigationScenarios } from '@/router/router-constants/navigation-scenarios';
+import { routerParams } from '@/router/router-params';
+import { useMainStore } from '@/store';
+import VinLookupComponent from './vin-lookup.vue';
+
+const continueButtonQuerySelector = '[data-test-id="site-footer-main-button"]';
+const errorMessageWrapperElSelector = '#vin-question-wrapper .form-test-error';
+const vinInputSelector = '#vin-question';
+const mockValidVin = '12345678901234567';
+const mockCarId = 'Mock Car Id';
+const lookupVehicleByVin = {
+ methodName: 'lookupVehicleByVin',
+ mockResponse: {
+ data: {
+ carId: mockCarId,
+ },
+ },
+};
+const lookupVehicleByVinError = {
+ methodName: 'lookupVehicleByVin',
+ mockResponse: {
+ data: {
+ error: true,
+ },
+ },
+};
+const getPartsOrQuestions = {
+ methodName: 'getPartsOrQuestions',
+ mockResponse: null,
+};
+
+const vehicleWithPartQuestionsMockResponse = {
+ data: {
+ partsOrQuestions: [
+ {
+ partQuestions: [
+ {
+ id: 1,
+ },
+ ],
+ },
+ ],
+ },
+};
+
+const vehicleWithMultiplePartsMockResponse = {
+ data: {
+ partsOrQuestions: [
+ {
+ parts: [
+ {
+ id: 1,
+ },
+ {
+ id: 2,
+ },
+ ],
+ },
+ ],
+ },
+};
+
+const vehicleWithMoldingQuestionsMockResponse = {
+ data: {
+ partsOrQuestions: [
+ {
+ parts: [
+ {
+ childPartQuestions: [
+ {
+ id: 1,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+};
+
+const vehicleWithCapabilityQuestionsMockResponse = {
+ data: {
+ partsOrQuestions: [
+ {
+ parts: [
+ {
+ requiresCapabilityQuestions: true,
+ partNumber: 1,
+ },
+ ],
+ },
+ ],
+ },
+};
+
+const vehicleWithNoAdditionalPartsOrQuestionsMockResponse = {
+ data: {
+ partsOrQuestions: [
+ {
+ parts: [
+ {
+ childPartQuestions: [],
+ requiresCapabilityQuestions: false,
+ },
+ ],
+ },
+ ],
+ partQuestions: null,
+ },
+};
+
+jest.mock("bootstrap", () => ({
+ getInstance: jest.fn(),
+ getOrCreateInstance: jest.fn(),
+}));
+
+const mockRoute = {
+ query: {
+ // Needed inside vehicle-questions-mixin
+ issPage: issPageValues.VIN_LOOKUP,
+ },
+};
+const mockRouter = {
+ navigate: jest.fn(),
+};
+const maska = jest.fn();
+jest.mock('@/helpers/damage-helper', () => ({
+ isGlassAvailableForCarId: jest.fn().mockResolvedValue(false),
+}));
+const mountOptions = {
+ global: {
+ directives: {
+ maska,
+ },
+ mixins: [
+ {
+ methods: {
+ getCmsContent: jest.fn(() => ''),
+ getFooterInfoBoxHeight: jest.fn(() => 80),
+ cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'),
+ getPageNameByQueryString: jest.fn(() => ''),
+ pushEventToGA: jest.fn(),
+ },
+ computed: {
+ GaActions() {
+ return GaActions;
+ },
+ navigationScenarios() {
+ return navigationScenarios;
+ },
+ queryStrings() {
+ return queryStrings;
+ },
+ },
+ },
+ ],
+ mocks: {
+ $route: mockRoute,
+ $router: mockRouter,
+ },
+ plugins: [createTestingPinia({
+ initialState: {
+ main: {
+ order: {
+ vehicle: {
+ carId: mockCarId,
+ },
+ },
+ },
+ },
+ stubActions: false,
+ })],
+ stubs: {
+ siteHeader: true,
+ siteSubHeader: true,
+ vehicleBanner: true,
+ vinLocationInformation: true,
+ vinLookupAlerts: true,
+ vinQuestion: true,
+ },
+ },
+};
+
+beforeEach(() => {
+ jest.clearAllMocks();
+});
+
+describe('vin-lookup.vue', () => {
+ describe('Client-side validation', () => {
+ test.each([
+ { vin: null },
+ { vin: '' },
+ ])('VIN Required error messsage is displayed.', async ({ vin }) => {
+ const user = userEvent.setup();
+ mountOptions.data = () => ({
+ vin,
+ });
+ mountOptions.global.stubs.vinQuestion = false;
+ const { container } = render(VinLookupComponent, mountOptions);
+ const continueButton = container.querySelector(continueButtonQuerySelector);
+
+ user.click(continueButton);
+ await flushPromises();
+ await waitFor(() => {
+ const errorMessageWrapperEl = container.querySelector(errorMessageWrapperElSelector);
+ expect(errorMessageWrapperEl).toBeVisible();
+
+ const errorMessageEl = errorMessageWrapperEl.querySelector('span');
+ expect(errorMessageEl.textContent).toBe(errorMessages.VIN_REQUIRED);
+ });
+ });
+
+ test.each([
+ { vin: '11' },
+ { vin: 'I1234567890123456' },
+ { vin: 'O1234567890123456' },
+ { vin: 'Q1234567890123456' },
+ ])('VIN Invalid Format error messsage is displayed.', async ({ vin }) => {
+ const user = userEvent.setup();
+ mountOptions.data = () => ({
+ vin,
+ });
+ mountOptions.global.stubs.vinQuestion = false;
+ const { container } = render(VinLookupComponent, mountOptions);
+ const continueButton = container.querySelector(continueButtonQuerySelector);
+
+ user.click(continueButton);
+ await flushPromises();
+ await waitFor(() => {
+ const errorMessageWrapperEl = container.querySelector(errorMessageWrapperElSelector);
+ expect(errorMessageWrapperEl).toBeVisible();
+
+ const errorMessageEl = errorMessageWrapperEl.querySelector('span');
+ expect(errorMessageEl.textContent).toBe(errorMessages.VIN_FORMAT);
+ });
+ });
+
+ test('No error message is displayed when the vin is in the accepted format.', async () => {
+ const user = userEvent.setup();
+ mountOptions.data = () => ({
+ vin: '12345678901234567',
+ });
+ mountOptions.global.stubs.vinQuestion = false;
+ const { container } = render(VinLookupComponent, mountOptions);
+ const continueButton = container.querySelector(continueButtonQuerySelector);
+
+ user.click(continueButton);
+ await flushPromises();
+ await waitFor(() => {
+ const errorMessageWrapperEl = container.querySelector(errorMessageWrapperElSelector);
+ expect(errorMessageWrapperEl).not.toBeVisible();
+
+ const errorMessageEl = errorMessageWrapperEl.querySelector('span');
+ expect(errorMessageEl.textContent).toBeFalsy();
+ });
+ });
+ });
+
+ describe('Navigation', () => {
+ test('Click "Back", execute navigate with navigationScenario.CLICKED_BACK.', async () => {
+ const user = userEvent.setup();
+ const { container } = render(VinLookupComponent, mountOptions);
+ const backButton = container.querySelector('[data-test-id="site-footer-back-button"]');
+
+ await user.click(backButton);
+
+ expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+ expect(mockRouter.navigate).toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, mockRoute);
+ });
+
+ test('Different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page.', async () => {
+ const user = userEvent.setup();
+ mountOptions.global.stubs.vinQuestion = false;
+ getPartsOrQuestions.mockResponse = vehicleWithPartQuestionsMockResponse;
+ lookupVehicleByVin.mockResponse.data.carId = 'Different Car Id';
+
+ jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
+ .mockResolvedValue(lookupVehicleByVin.mockResponse);
+ jest.spyOn(VinLookupComponent.methods, getPartsOrQuestions.methodName)
+ .mockResolvedValue(getPartsOrQuestions.mockResponse);
+
+ mountOptions.data = () => ({
+ activeVehicleLookupAlertType: null,
+ needToLookupVehicle: false,
+ vehicleFromLookup: {
+ carId: 'Different Car Id',
+ },
+ vin: mockValidVin,
+ });
+ const { container } = render(VinLookupComponent, mountOptions);
+
+ const continueButton = container.querySelector(continueButtonQuerySelector);
+ await user.click(continueButton);
+
+ await flushPromises();
+ await waitFor(() => {
+ expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+ expect(mockRouter.navigate).toHaveBeenCalledWith(
+ navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+ mockRoute,
+ {},
+ { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true },
+ );
+ });
+ });
+
+ describe('Succesful navigateForward', () => {
+ test('Vehicle with Part Questions. Click "Continue", execute navigate with navigationScenario.CLICKED_FORWARD_WITH_PART_QUESTIONS', async () => {
+ const user = userEvent.setup();
+ mountOptions.global.stubs.vinQuestion = false;
+ getPartsOrQuestions.mockResponse = vehicleWithPartQuestionsMockResponse;
+ jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
+ .mockResolvedValue(lookupVehicleByVin.mockResponse);
+ jest.spyOn(VinLookupComponent.methods, getPartsOrQuestions.methodName)
+ .mockResolvedValue(getPartsOrQuestions.mockResponse);
+
+ const { container } = render(VinLookupComponent, mountOptions);
+
+ const vinInput = container.querySelector(vinInputSelector);
+ await user.type(vinInput, mockValidVin);
+
+ const continueButton = container.querySelector(continueButtonQuerySelector);
+ await user.click(continueButton);
+
+ await flushPromises();
+ await waitFor(() => {
+ expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+ expect(mockRouter.navigate)
+ .toHaveBeenCalledWith(
+ navigationScenarios.CLICKED_FORWARD_WITH_PART_QUESTIONS,
+ mockRoute,
+ {},
+ {},
+ { partsOrQuestions: getPartsOrQuestions.mockResponse.data.partsOrQuestions },
+ );
+ });
+ });
+
+ test('Vehicle with Multiple Parts. Click "Continue", execute navigate with navigationScenario.CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE', async () => {
+ const user = userEvent.setup();
+ mountOptions.global.stubs.vinQuestion = false;
+ getPartsOrQuestions.mockResponse = vehicleWithMultiplePartsMockResponse;
+ jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
+ .mockResolvedValue(lookupVehicleByVin.mockResponse);
+ jest.spyOn(VinLookupComponent.methods, getPartsOrQuestions.methodName)
+ .mockResolvedValue(getPartsOrQuestions.mockResponse);
+
+ const { container } = render(VinLookupComponent, mountOptions);
+
+ const vinInput = container.querySelector(vinInputSelector);
+ await user.type(vinInput, mockValidVin);
+
+ const continueButton = container.querySelector(continueButtonQuerySelector);
+ await user.click(continueButton);
+
+ await flushPromises();
+ await waitFor(() => {
+ expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+ expect(mockRouter.navigate)
+ .toHaveBeenCalledWith(
+ navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_PARTS_TO_CHOOSE,
+ mockRoute,
+ {},
+ {},
+ { partsOrQuestions: getPartsOrQuestions.mockResponse.data.partsOrQuestions },
+ );
+ });
+ });
+
+ test('Vehicle with Molding Questions. Click "Continue", execute navigate with navigationScenario.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS', async () => {
+ const user = userEvent.setup();
+ mountOptions.global.stubs.vinQuestion = false;
+ getPartsOrQuestions.mockResponse = vehicleWithMoldingQuestionsMockResponse;
+ jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
+ .mockResolvedValue(lookupVehicleByVin.mockResponse);
+ jest.spyOn(VinLookupComponent.methods, getPartsOrQuestions.methodName)
+ .mockResolvedValue(getPartsOrQuestions.mockResponse);
+
+ const { container } = render(VinLookupComponent, mountOptions);
+
+ const vinInput = container.querySelector(vinInputSelector);
+ await user.type(vinInput, mockValidVin);
+
+ const continueButton = container.querySelector(continueButtonQuerySelector);
+ await user.click(continueButton);
+
+ await flushPromises();
+ await waitFor(() => {
+ expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+ expect(mockRouter.navigate)
+ .toHaveBeenCalledWith(
+ navigationScenarios.CLICKED_FORWARD_WITH_MOLDING_QUESTIONS,
+ mockRoute,
+ {},
+ {},
+ { partsOrQuestions: getPartsOrQuestions.mockResponse.data.partsOrQuestions },
+ );
+ });
+ });
+
+ test('Vehicle with Capability Questions. Click "Continue", execute navigate with navigationScenario.CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS', async () => {
+ const user = userEvent.setup();
+ const store = useMainStore();
+ mountOptions.global.stubs.vinQuestion = false;
+ getPartsOrQuestions.mockResponse = vehicleWithCapabilityQuestionsMockResponse;
+
+ jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
+ .mockResolvedValue(lookupVehicleByVin.mockResponse);
+ jest.spyOn(VinLookupComponent.methods, getPartsOrQuestions.methodName)
+ .mockResolvedValue(getPartsOrQuestions.mockResponse);
+ store.getCapabilityQuestions.mockResolvedValueOnce({ data: [] });
+
+ const { container } = render(VinLookupComponent, mountOptions);
+
+ const vinInput = container.querySelector(vinInputSelector);
+ await user.type(vinInput, mockValidVin);
+
+ const continueButton = container.querySelector(continueButtonQuerySelector);
+ await user.click(continueButton);
+
+ await flushPromises();
+ await waitFor(() => {
+ expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+ expect(mockRouter.navigate)
+ .toHaveBeenCalledWith(
+ navigationScenarios.CLICKED_FORWARD_WITH_CAPABILITY_QUESTIONS,
+ mockRoute,
+ {},
+ {},
+ { partsOrQuestions: getPartsOrQuestions.mockResponse.data.partsOrQuestions },
+ );
+ });
+ });
+
+ test('Vehicle no additional Parts or Questions. Click "Continue", execute navigate with navigationScenario.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS', async () => {
+ const user = userEvent.setup();
+ mountOptions.global.stubs.vinQuestion = false;
+ getPartsOrQuestions.mockResponse = vehicleWithNoAdditionalPartsOrQuestionsMockResponse;
+
+ jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
+ .mockResolvedValue(lookupVehicleByVin.mockResponse);
+ jest.spyOn(VinLookupComponent.methods, getPartsOrQuestions.methodName)
+ .mockResolvedValue(getPartsOrQuestions.mockResponse);
+
+ const { container } = render(VinLookupComponent, mountOptions);
+
+ const vinInput = container.querySelector(vinInputSelector);
+ await user.type(vinInput, mockValidVin);
+
+ const continueButton = container.querySelector(continueButtonQuerySelector);
+ await user.click(continueButton);
+
+ await flushPromises();
+ await waitFor(() => {
+ expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+ expect(mockRouter.navigate)
+ .toHaveBeenCalledWith(
+ navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
+ mockRoute,
+ );
+ });
+ });
+
+ test("Selected vehicle VIN do not match vehicles (CarIDs) in our system then navigate forward to bailout page.", async () => {
+ //Arrange
+ const user = userEvent.setup();
+ lookupVehicleByVin.mockResponse.data.error = true;
+
+ jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName)
+ .mockResolvedValue(lookupVehicleByVinError.mockResponse);
+
+ mountOptions.data = () => ({
+ needToLookupVehicle: true,
+ bailout: true,
+ vin: mockValidVin,
+ });
+
+ const { container } = render(VinLookupComponent, mountOptions);
+ const continueButton = container.querySelector(continueButtonQuerySelector);
+ await user.click(continueButton);
+
+ await flushPromises();
+ await waitFor(() => {
+ expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+ expect(mockRouter.navigate).toHaveBeenCalledWith(
+ navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
+ mockRoute
+ );
+ });
+ });
+ });
+ });
+});
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
new file mode 100644
index 00000000..9342d2b8
--- /dev/null
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -0,0 +1,263 @@
+
+
+
+
diff --git a/src/layouts/vin-lookup/vin-question/vin-question.vue b/src/layouts/vin-lookup/vin-question/vin-question.vue
new file mode 100644
index 00000000..e0d6deda
--- /dev/null
+++ b/src/layouts/vin-lookup/vin-question/vin-question.vue
@@ -0,0 +1,53 @@
+
+ tags if the body copy has 'n'
tags", () => { + // Arrange & Act + const wrapper = shallowMount( + alert, + setupMocks({ + propsData: { + manualHeadline: "testHeader", + manualCopy: + "
testCopy with a {routerLink: testName, testLink} inside of it
and two paragraphs
", + cmsWidgetName: "alert", + }, + }) + ); + // Assert + expect(wrapper.findAll("p").length === 3).toBe(true); + }); + + it("Should call scrollIntoView() when the clientBoundingRect is not entirely in the viewport (out of view top)", () => { + // Arrange + var viewPortHeight = 200; + setUpViewPort(viewPortHeight); + + Element.prototype.getBoundingClientRect = jest.fn(() => { + return { top: -100, bottom: 200 }; + }); + + var mockScrollIntoView = jest.fn(); + Element.prototype.scrollIntoView = mockScrollIntoView; + + // Act + const wrapper = shallowMount(alert, setupMocks({})); + + // Assert + // This is an implementation detail - we just need to test that the final step of snapping + // the window to the alert is working. If using a different function to accomplish that + // just swap this out with the new function + expect(mockScrollIntoView).toHaveBeenCalled(); + }); + + it("Should call scrollIntoView() when the clientBoundingRect is not entirely in the viewport (bottom is hidden behind footer)", () => { + // Arrange + var viewPortHeight = 240; + setUpViewPort(viewPortHeight); + + Element.prototype.getBoundingClientRect = jest.fn(() => { + return { top: 100, bottom: 200 }; + }); + + var mockScrollIntoView = jest.fn(); + Element.prototype.scrollIntoView = mockScrollIntoView; + + // Act + const wrapper = shallowMount(alert, setupMocks({})); + + // Assert + // This is an implementation detail - we just need to test that the final step of snapping + // the window to the alert is working. If using a different function to accomplish that + // just swap this out with the new function + expect(mockScrollIntoView).toHaveBeenCalled(); + }); + + it("Should not call scrollIntoView() when the clientBoundingRect is not entirely in the viewport but 'shouldScrollToOnMount' is false", () => { + // Arrange + var viewPortHeight = 200; + setUpViewPort(viewPortHeight); + + Element.prototype.getBoundingClientRect = jest.fn(() => { + return { top: -100, bottom: 200 }; + }); + + var mockScrollIntoView = jest.fn(); + Element.prototype.scrollIntoView = mockScrollIntoView; + + // Act + const wrapper = shallowMount( + alert, + setupMocks({ + propsData: { + shouldScrollToOnMount: false, + manualHeadline: "testHeader", + manualCopy: "testCopy", + cmsWidgetName: "alert", + }, + }) + ); + + // Assert + // This is an implementation detail - we just need to test that the final step of snapping + // the window to the alert is working. If using a different function to accomplish that + // just swap this out with the new function + expect(mockScrollIntoView).not.toHaveBeenCalled(); + }); + + it("Should not call scrollIntoView() when the clientBoundingRect is entirely in the viewport", () => { + // Arrange + var viewPortHeight = 500; + setUpViewPort(viewPortHeight); + + Element.prototype.getBoundingClientRect = jest.fn(() => { + return { top: 100, bottom: 200 }; + }); + + var mockScrollIntoView = jest.fn(); + Element.prototype.scrollIntoView = mockScrollIntoView; + + // Act + const wrapper = shallowMount(alert, setupMocks({})); + + // Assert + // This is an implementation detail - we just need to test that the final step of snapping + // the window to the alert is working. If using a different function to accomplish that + // just swap this out with the new function + expect(mockScrollIntoView).not.toHaveBeenCalled(); + }); +}); + +const mockMixin = { + methods: { + getCmsContent: jest.fn(), + getFooterInfoBoxHeight: jest.fn(() => 50), + }, + computed: { + dynamicStrings: jest.fn(() => { + return { ROUTER_LINK: "routerLink:" }; + }), + cssClassNameForCmsWidget(){ + return "widget-name-"; + }, + }, +}; + +function setUpViewPort(height) { + Object.defineProperty(global.window, "innerHeight", { + writable: true, + configurable: true, + value: height, + }); + + Object.defineProperty(window.document.documentElement, "clientHeight", { + writable: true, + configurable: true, + value: height, + }); +} + +function setupMocks(mountOptionsMockData = {}) { + const defaultMountOptions = { + propsData: { + manualHeadline: "testHeader", + manualCopy: "testCopy", + cmsWidgetName: "alert", + }, + mixins: [mockMixin], + }; + const baseMountOptions = getMountOptions( + Object.assign(defaultMountOptions, mountOptionsMockData) + ); + const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions); + return allMountOptions; +} diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue new file mode 100644 index 00000000..12d8579a --- /dev/null +++ b/src/ux-components/alert/alert.vue @@ -0,0 +1,193 @@ + +
+
+
+
+
+
+
diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js
new file mode 100644
index 00000000..9fa8b10e
--- /dev/null
+++ b/src/ux-components/button-main/button-main.spec.js
@@ -0,0 +1,102 @@
+import { shallowMount } from "@vue/test-utils";
+import buttonMain from "./button-main";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
+
+describe("buttonMain.vue", () => {
+ it("Should return btn-primary class", async () => {
+ // Act
+ const wrapper = shallowMount(
+ buttonMain,
+ setupMocks({
+ propsData: {
+ isPrimary: true,
+ },
+ })
+ );
+
+ // Assert
+ const button = wrapper.find("button");
+
+ // Expect
+ expect(button.attributes("class")).toContain("btn-primary");
+ });
+
+ it("Should return aria-disabled state", async () => {
+ // Act
+ const wrapper = shallowMount(
+ buttonMain,
+ setupMocks({
+ propsData: {
+ isDisabled: true,
+ },
+ })
+ );
+
+ // Assert
+ const button = wrapper.find("button");
+
+ // Expect
+ expect(button.attributes()["aria-disabled"]).toEqual("true");
+ });
+
+ it("Should return loader color", async () => {
+ // Act
+ const wrapper = shallowMount(
+ buttonMain,
+ setupMocks({
+ propsData: {
+ loaderColor: "blue",
+ loaderEnabled: true,
+ },
+ })
+ );
+
+ // Assert
+
+ const label = wrapper.find("label");
+
+ wrapper.vm.clicked();
+
+ await nextTick();
+
+ const loader = wrapper.find("loader-stub");
+
+ expect(loader.attributes("class")).toContain("blue");
+ });
+
+ it("Should return loader position", async () => {
+ // Act
+ const wrapper = shallowMount(
+ buttonMain,
+ setupMocks({
+ propsData: {
+ loaderPosition: "right",
+ loaderEnabled: true,
+ },
+ })
+ );
+
+ // Assert
+
+ const label = wrapper.find("label");
+
+ wrapper.vm.clicked();
+
+ await nextTick();
+
+ const loader = wrapper.find("loader-stub");
+
+ expect(loader.attributes("class")).toContain("right");
+ });
+});
+
+function setupMocks(mountOptionsMockData = {}) {
+ const defaultMountOptions = { route: { query: { issPage: "page-name" } } };
+ const baseMountOptions = getMountOptions(
+ Object.assign(defaultMountOptions, mountOptionsMockData)
+ );
+ const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions);
+
+ return allMountOptions;
+}
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
new file mode 100644
index 00000000..3ff1648d
--- /dev/null
+++ b/src/ux-components/button-main/button-main.vue
@@ -0,0 +1,141 @@
+
+
+
+
+
+
+
diff --git a/src/ux-components/checkbox/checkbox.spec.js b/src/ux-components/checkbox/checkbox.spec.js
new file mode 100644
index 00000000..e231ecc7
--- /dev/null
+++ b/src/ux-components/checkbox/checkbox.spec.js
@@ -0,0 +1,78 @@
+import { shallowMount } from "@vue/test-utils";
+import checkbox from "./checkbox";
+import { nextTick } from "vue";
+
+describe("checkbox.vue", () => {
+ it("Should return checkbox name", async () => {
+ // Act
+ const wrapper = shallowMount(checkbox, {
+ propsData: {
+ checkboxName: "Checkbox",
+ },
+ });
+
+ // Assert
+ const input = wrapper.find("input");
+
+ // Expect
+ expect(input.attributes().name).toEqual("Checkbox");
+ });
+
+ it("Should return checkbox id", async () => {
+ // Act
+ const wrapper = shallowMount(checkbox, {
+ propsData: {
+ buttonID: "Checkbox ID",
+ },
+ });
+
+ // Assert
+ const input = wrapper.find("input");
+
+ // Expect
+ expect(input.attributes().id).toEqual("Checkbox ID");
+ });
+
+ it("Should return tabindex value", async () => {
+ // Act
+ const wrapper = shallowMount(checkbox, {
+ propsData: {
+ tabIndex: "1",
+ },
+ });
+
+ // Assert
+ const input = wrapper.find("input");
+
+ // Expect
+ expect(input.attributes().tabindex).toEqual("1");
+ });
+
+ it("Should return label text", async () => {
+ // Act
+ const wrapper = shallowMount(checkbox, {
+ propsData: {
+ checkboxLabel: "label text",
+ },
+ });
+
+ // Assert
+ const paragraph = wrapper.find("p");
+
+ expect(paragraph.text()).toEqual("label text");
+ });
+
+ it("Should return label text", async () => {
+ // Act
+ const wrapper = shallowMount(checkbox, {
+ propsData: {
+ screenReaderOnlyText: "screenreader text",
+ },
+ });
+
+ // Assert
+ const paragraph = wrapper.find("span");
+
+ expect(paragraph.text()).toEqual("screenreader text");
+ });
+});
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
new file mode 100644
index 00000000..7427730f
--- /dev/null
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -0,0 +1,73 @@
+
+
+ {{ alertHeadline }}
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
new file mode 100644
index 00000000..43271781
--- /dev/null
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -0,0 +1,139 @@
+import { mount } from "@vue/test-utils";
+import listButtonHorizontal from "./list-button-horizontal";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
+
+describe("list-button-horizontal.vue", () => {
+ describe("styling/UI", () => {
+ it("Should return screen reader text", async () => {
+ // Act
+ const { wrapper } = setupMocks({
+ mockData: {
+ propsData: {
+ screenReaderOnlyText: "Screen Reader Only Text",
+ },
+ },
+ });
+
+ // Assert
+ const paragraph = wrapper.find("span.sr-only");
+
+ expect(paragraph.text()).toEqual("Screen Reader Only Text");
+ });
+
+ it("Should return text alignment class", async () => {
+ // Act
+ const { wrapper } = setupMocks({
+ mockData: {
+ propsData: {
+ textPosition: "text-center",
+ },
+ },
+ });
+
+ // Assert
+ const paragraph = wrapper.find("span.m-0");
+
+ expect(paragraph.attributes("class")).toContain("text-center");
+ });
+
+ it("Should return aria-required state", async () => {
+ // Act
+ const { wrapper } = setupMocks({
+ mockData: {
+ propsData: {
+ isRequired: true,
+ },
+ },
+ });
+
+ // Assert
+ const input = wrapper.find("input");
+
+ expect(input.attributes()["aria-required"]).toEqual("true");
+ });
+
+ it("is cash or insurance button => has 'strong' class", () => {
+ // Arrange/Act
+ const { wrapper } = setupMocks({
+ mockData: {
+ propsData: {
+ additionalButtonStyling: "listButtonHorizontalStrong",
+ },
+ },
+ });
+
+ // Assert
+ const label = wrapper.find("label");
+
+ expect(label.classes()).toContain("strong");
+ });
+
+ test("has buttonLabel => displays buttonLabel", () => {
+ // Arrange/Act
+ const { wrapper } = setupMocks({
+ mockData: {
+ propsData: {
+ buttonLabel: "Surprise!",
+ },
+ },
+ });
+
+ // Assert
+ const content = wrapper.find(".list-button-horizontal-content");
+ expect(content.isVisible()).toBe(true);
+ expect(content.text()).toContain("Surprise!");
+ });
+
+ test("has buttonLabelSubCopy => displays buttonLabelSubCopy", () => {
+ // Arrange/Act
+ const { wrapper } = setupMocks({
+ mockData: {
+ propsData: {
+ buttonLabel: "Surprise!",
+ buttonLabelSubCopy: "Super duper surprise :)",
+ },
+ },
+ });
+
+ // Assert
+ const content = wrapper.find(".list-button-horizontal-content");
+ expect(content.isVisible()).toBe(true);
+ expect(content.text()).toContain("Super duper surprise :)");
+ });
+
+ test("has screenReaderOnlyText => displays screenReaderOnlyText", () => {
+ // Arrange/Act
+ const { wrapper } = setupMocks({
+ mockData: {
+ propsData: {
+ buttonLabel: "Surprise!",
+ buttonLabelSubCopy: "Super duper surprise :)",
+ screenReaderOnlyText: "Tests are fun!",
+ },
+ },
+ });
+
+ // Assert
+ const content = wrapper.find(".list-button-horizontal-content");
+ const screenReaderOnlyText = wrapper.find(".sr-only");
+ expect(content.isVisible()).toBe(true);
+ expect(screenReaderOnlyText.exists()).toBe(true);
+ expect(screenReaderOnlyText.text()).toContain("Tests are fun!");
+ });
+ });
+});
+
+function setupMocks({ mockData }) {
+ const wrapper = mount(listButtonHorizontal, {
+ ...mockData,
+ propsData: {
+ ...mockData.propsData,
+ groupName: "my-group",
+ modelValue: mockData.propsData?.isMultiSelect ? ["5"] : "5",
+ value: mockData.propsData?.isMultiSelect ? ["4"] : "4",
+ },
+ mixins: [inputButtonWrapperMixin],
+ });
+
+ return { wrapper };
+}
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
new file mode 100644
index 00000000..8373276c
--- /dev/null
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -0,0 +1,224 @@
+
+
+ ![]()
+
+ + {{ buttonLabel }} +
++ {{ buttonLabelSubCopy }} +
+
+
+ {{ buttonLabel }}
++ {{ buttonLabelSubCopy }} +
+
+
+
+
+
+
+
+
diff --git a/src/ux-components/text-link/text-link.spec.js b/src/ux-components/text-link/text-link.spec.js
new file mode 100644
index 00000000..ab1c21b5
--- /dev/null
+++ b/src/ux-components/text-link/text-link.spec.js
@@ -0,0 +1,49 @@
+import { shallowMount } from "@vue/test-utils";
+import textLink from "./text-link";
+
+describe("text-link.vue", () => {
+ it("Should return class navigation-link", async () => {
+ // Act
+ const wrapper = shallowMount(textLink, {
+ propsData: {
+ linkType: "navigation",
+ },
+ });
+
+ // Assert
+ const paragraph = wrapper.find("a");
+
+ // Expect
+ expect(paragraph.attributes("class")).toContain("navigation-link");
+ });
+
+ it("Should return class footer", async () => {
+ // Act
+ const wrapper = shallowMount(textLink, {
+ propsData: {
+ linkType: "footer",
+ },
+ });
+
+ // Assert
+ const paragraph = wrapper.find("a");
+
+ // Expect
+ expect(paragraph.attributes("class")).toContain("footer");
+ });
+
+ it("Should return class text-small", async () => {
+ // Act
+ const wrapper = shallowMount(textLink, {
+ propsData: {
+ linkType: "textSmall",
+ },
+ });
+
+ // Assert
+ const paragraph = wrapper.find("a");
+
+ // Expect
+ expect(paragraph.attributes("class")).toContain("small");
+ });
+});
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
new file mode 100644
index 00000000..49d08ffb
--- /dev/null
+++ b/src/ux-components/text-link/text-link.vue
@@ -0,0 +1,81 @@
+
+
+ {{text}}
+