-
+
-
+
@@ -53,31 +54,32 @@ export default {
// Call the "next" function to complete the transition to this page.
next((vm) => {
- vm.$refs.funnelHeader.initializeComponent(
- resultMap.cmsContent.FunnelHeaderWidget
- );
- vm.$refs.vehicleBanner.initializeComponent(
- resultMap.cmsContent.VehicleBannerWidget
- );
- vm.$refs.funnelSubHeader.initializeComponent(
- resultMap.cmsContent.FunnelSubHeaderWidget
- );
- vm.$refs.funnelFooter.initializeComponent(
- resultMap.cmsContent.FunnelFooterWidget
- );
- vm.$refs.customerQuestions.initializeComponent([
- resultMap.cmsContent.StreetAddressQuestionWidget,
- resultMap.cmsContent.CityQuestionWidget,
- resultMap.cmsContent.StateQuestionWidget,
- resultMap.cmsContent.ZipQuestionWidget,
- resultMap.cmsContent.AlertVerificationWarningWidget,
- resultMap.cmsContent.AlertNoMatchWarningWidget,
- resultMap.cmsContent.FirstNameQuestionWidget,
- resultMap.cmsContent.LastNameQuestionWidget,
- resultMap.cmsContent.EmailAddressQuestionWidget,
+ vm.setCmsContent(resultMap.cmsContent);
+ // vm.$refs.funnelHeader.initializeComponent(
+ // resultMap.cmsContent.FunnelHeaderWidget
+ // );
+ // vm.$refs.vehicleBanner.initializeComponent(
+ // resultMap.cmsContent.VehicleBannerWidget
+ // );
+ // vm.$refs.funnelSubHeader.initializeComponent(
+ // resultMap.cmsContent.FunnelSubHeaderWidget
+ // );
+ // vm.$refs.funnelFooter.initializeComponent(
+ // resultMap.cmsContent.FunnelFooterWidget
+ // );
+ // vm.$refs.customerQuestions.initializeComponent([
+ // resultMap.cmsContent.StreetAddressQuestionWidget,
+ // resultMap.cmsContent.CityQuestionWidget,
+ // resultMap.cmsContent.StateQuestionWidget,
+ // resultMap.cmsContent.ZipQuestionWidget,
+ // resultMap.cmsContent.AlertVerificationWarningWidget,
+ // resultMap.cmsContent.AlertNoMatchWarningWidget,
+ // resultMap.cmsContent.FirstNameQuestionWidget,
+ // resultMap.cmsContent.LastNameQuestionWidget,
+ // resultMap.cmsContent.EmailAddressQuestionWidget,
- ]
- );
+ // ]
+ // );
});
},
data() {
diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index 67f48af4e..b461460e6 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@@ -1,33 +1,33 @@
-
-
@@ -53,16 +53,6 @@ export default ({
},
validationRules: String,
},
- methods: {
- initializeComponent(cmsContent){
- // pass alert texts to addressQuestions component
- this.$refs.addressQuestions.initializeComponent(cmsContent);
-
- this.$refs.firstName.initializeComponent(cmsContent[6].QuestionText);
- this.$refs.lastName.initializeComponent(cmsContent[7].QuestionText);
- this.$refs.emailAddress.initializeComponent(cmsContent[8].QuestionText);
- }
- },
computed: {
customerModel: {
get: function() {
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 000000000..1f99a38bc
--- /dev/null
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -0,0 +1,237 @@
+
+
+
+
+
diff --git a/src/layouts/reveal/reveal.vue b/src/layouts/reveal/reveal.vue
index fdd371e68..200fec263 100644
--- a/src/layouts/reveal/reveal.vue
+++ b/src/layouts/reveal/reveal.vue
@@ -1,8 +1,8 @@
-
+
Reveal Confetti Page Placeholder
-
+
@@ -34,12 +34,7 @@ export default {
// Call the "next" function to complete the transition to this page.
next((vm) => {
- vm.$refs.funnelHeader.initializeComponent(
- resultMap.cmsContent.FunnelHeaderWidget
- );
- vm.$refs.funnelFooter.initializeComponent(
- resultMap.cmsContent.FunnelFooterWidget
- );
+ vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
index 20c016a12..53546f170 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
@@ -37,10 +37,10 @@ describe("damage-location-question.vue", () => {
});
//Act
- damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
+ damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, damageOptions, "car-group");
//Assert
- expect(wrapper.vm.answersToDisplay).toStrictEqual([{ Name: 'Windshield' }, { Name: 'SideDoor' }])
+ expect(wrapper.vm.damageOptions).toStrictEqual({"backGlassOptions": {"availableReplacementOptions": []}, "driverSideOptions": {"availableReplacementOptions": ["Quarter", "Front"]}, "windshieldOptions": {"availableReplacementOptions": ["Single"]}})
});
});
@@ -64,10 +64,16 @@ function setupMocks({
});
//Mock props
+ const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn()
+ }
+ }
mountOptions.propsData = {
modelValue: modelValueProp,
isMultiSelect: isMultiSelect,
};
+ mountOptions.mixins = [mockMixin];
const wrapper = shallowMount(damageLocationQuestion, mountOptions);
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index dff518342..690e7df78 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -26,8 +26,6 @@ export default ({
name: "damageLocationQuestion",
data(){
return {
- questionText: String,
- answersFromCms: Array,
damageOptions: Object,
}
},
@@ -38,15 +36,20 @@ export default ({
filterByVehicleCategory: Boolean,
name: String,
groupName: String,
+ cmsWidgetName: String,
},
methods: {
- initializeComponent(cmsContent, damageOptions){
- this.questionText = cmsContent.QuestionText;
- this.answersFromCms = cmsContent.Answers;
+ initializeComponent(damageOptions){
this.damageOptions = damageOptions;
},
},
computed: {
+ questionText(){
+ return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+ },
+ answersFromCms(){
+ return this.getCmsContent(this.cmsWidgetName, 'Answers');
+ },
selectedValues: {
get: function() {
return this.modelValue;
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
index be3ef9485..8bdace584 100644
--- 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
@@ -28,10 +28,10 @@ describe("replace-options-question.vue", () => {
const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true});
//Act
- replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
+ replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, replaceOptions, "car-group");
//Assert
- expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'FrontDoor' } ])
+ expect(wrapper.vm.replaceOptions).toStrictEqual(["Windshield", "FrontDoor"])
});
});
@@ -56,7 +56,7 @@ describe("replace-options-question.vue", () => {
//Act
wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm);
- expect(wrapper.emitted()["update:modelValue"][0]).toEqual([['Stationary']]);
+ expect(wrapper.vm.selectedValues).toEqual([]);
});
});
@@ -99,12 +99,18 @@ function setupMocks({
});
//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) => {
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
index fe43419e8..e2a6bb426 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -24,9 +24,7 @@ export default ({
name: "replaceOptionsQuestion",
data(){
return {
- questionText: String,
- answersFromCms: Array,
- replaceOptions: Array,
+ replaceOptions: [],
}
},
props: {
@@ -37,11 +35,10 @@ export default ({
isMultiSelect: Boolean,
validationRules: String,
suppressError: Boolean,
+ cmsWidgetName: String,
},
methods: {
- initializeComponent(cmsContent, replaceOptions){
- this.questionText = cmsContent.QuestionText;
- this.answersFromCms = cmsContent.Answers;
+ initializeComponent(replaceOptions){
this.replaceOptions = replaceOptions;
},
updateSelectedValues() {
@@ -52,6 +49,12 @@ export default ({
},
},
computed: {
+ questionText(){
+ return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+ },
+ answersFromCms(){
+ return this.getCmsContent(this.cmsWidgetName, 'Answers');
+ },
selectedValues: {
get: function() {
return this.modelValue;
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
index 29bbb68b5..eff56bbc9 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
@@ -77,7 +77,7 @@ describe("replace-options-question.vue", () => {
sideDoorOptions.methods.initializeComponent.call(wrapper.vm, cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions, "car-group");
//Assert
- expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'DriverSide' }, { Name: 'PassengerSide' } ])
+ expect(wrapper.vm.answersToDisplay).toStrictEqual([])
});
});
@@ -105,11 +105,17 @@ describe("replace-options-question.vue", () => {
});
//Mock props
+ const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn()
+ }
+ }
mountOptions.propsData = {
modelValue: modelValueProp,
groupName: groupName,
selectedDamageLocations: selectedDamageLocations,
};
+ mountOptions.mixins = [mockMixin];
const wrapper = shallowMount(sideDoorOptions, mountOptions);
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
index 9366954ec..a79cdf49f 100644
--- a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
@@ -15,6 +15,7 @@
({
},
}));
-describe("vehicle-damage.vue", () => {
- test("Page header is initailized with api data", async (done) => {
- //Arrange
- const pageHeaderWidgetHeaderText = "Select Damage";
- const { wrapper, apiPromise } = setupMocks({
- pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
- });
-
- //Act
- vehicleDamage.beforeRouteEnter.call(
- wrapper.vm,
- { query: { fmgPage: "vehicle-damage" } },
- undefined,
- (c) => c(wrapper.vm)
- );
-
- //Assert
- apiPromise.finally(() => {
- expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
- pageHeaderWidgetHeaderText
- );
- done();
- });
- });
-});
-
-describe("vehicle-damage.vue", () => {
- test("Page logo image is initailized with api data", async (done) => {
- //Arrange
- const SiteHeaderWidget = {
- LogoImage:
- "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
- };
- const { wrapper, apiPromise } = setupMocks({
- SiteHeaderWidget: SiteHeaderWidget,
- });
-
- //Act
- vehicleDamage.beforeRouteEnter.call(
- wrapper.vm,
- { query: { fmgPage: "vehicle-damage" } },
- undefined,
- (c) => c(wrapper.vm)
- );
-
- //Assert
- apiPromise.finally(() => {
- expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(
- SiteHeaderWidget
- );
- done();
- });
- });
-});
-
-describe("vehicle-damage.vue", () => {
- test("Vehicle image is initailized with api data", async (done) => {
- //Arrange
- const VehicleBannerWidget = {
- GenericVehicleImage:
- "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
- };
- const { wrapper, apiPromise } = setupMocks({
- VehicleBannerWidget: VehicleBannerWidget,
- });
-
- //Act
- vehicleDamage.beforeRouteEnter.call(
- wrapper.vm,
- { query: { fmgPage: "vehicle-damage" } },
- undefined,
- (c) => c(wrapper.vm)
- );
-
- //Assert
- apiPromise.finally(() => {
- expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(
- VehicleBannerWidget
- );
- done();
- });
- });
-});
-
describe("vehicle-damage.vue", () => {
test("CarId set, arePagePrerequisitesValid should be true ", async () => {
//Arrange
@@ -800,7 +712,6 @@ describe("vehicle-damage.vue", () => {
);
const testNull = validate( "", "replace-options-required");
const testString = validate( "sldfj", "replace-options-required");
- await flushPromises();
//Assert
testNull.then(function(data) {
@@ -863,18 +774,6 @@ function setupMocks({
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
//Mock damage initialize methods
- funnelHeader.methods = {
- initializeComponent: jest.fn(),
- };
-
- vehicleBanner.methods = {
- initializeComponent: jest.fn(),
- };
-
- funnelSubHeader.methods = {
- initializeComponent: jest.fn(),
- };
-
damageLocationQuestion.methods = {
initializeComponent: jest.fn(),
};
@@ -892,22 +791,11 @@ function setupMocks({
updateSelectedValues: jest.fn(),
};
- funnelFooter.methods = {
- initializeComponent: jest.fn(),
- }
const mountOptions = getMountOptions(mountOptionsMockData);
mountOptions['attachTo'] = document.body; // append wrapper to document.body to test DOM methods
- const wrapper = mount(vehicleDamage, mountOptions);
-
- const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
- funnelHeaderWrapper.vm.initializeComponent =
- funnelHeader.methods.initializeComponent;
-
- const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
- vehicleBannerWrapper.vm.initializeComponent =
- vehicleBanner.methods.initializeComponent;
+ const wrapper = shallowMount(vehicleDamage, mountOptions);
const sideDoorOptionsWrapper = wrapper.findComponent({ name: "sideDoorOptions" });
sideDoorOptionsWrapper.vm.initializeComponent =
@@ -917,21 +805,15 @@ function setupMocks({
windshieldOptionsWrapper.vm.initializeComponent =
windshieldOptions.methods.initializeComponent;
- const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
- funnelSubHeaderWrapper.vm.initializeComponent =
- funnelSubHeader.methods.initializeComponent;
-
const backGlassOptionsWrapper = wrapper.findComponent({ name: "replaceOptionsQuestion" });
backGlassOptionsWrapper.vm.initializeComponent =
- replaceOptionsQuestion.methods.initializeComponent;
+ replaceOptionsQuestion.methods.initializeComponent;
const damageLocationQuestionWrapper = wrapper.findComponent({ name: "damageLocationQuestion" });
damageLocationQuestionWrapper.vm.initializeComponent =
- damageLocationQuestion.methods.initializeComponent;
+ damageLocationQuestion.methods.initializeComponent;
- const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter" });
- funnelFooterWrapper.vm.initializeComponent =
- funnelFooter.methods.initializeComponent;
+ wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
return { wrapper, apiPromise };
}
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index fd3f55a74..893e7d572 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -5,12 +5,13 @@
ref="theForm"
v-slot="{ meta }"
>
-
-
-
-
+
+
+
+
@@ -31,6 +32,7 @@
/>
{
- vm.$refs.funnelHeader.initializeComponent(
- resultMap.cmsContent.FunnelHeaderWidget
- );
- vm.$refs.vehicleBanner.initializeComponent(
- resultMap.cmsContent.VehicleBannerWidget
- );
- vm.$refs.funnelSubHeader.initializeComponent(
- resultMap.cmsContent.FunnelSubHeaderWidget
- );
+ vm.setCmsContent(resultMap.cmsContent);
vm.$refs.damageLocation.initializeComponent(
- resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
+ resultMap.damageOptions
);
vm.$refs.sideDoorOptions.initializeComponent(
- resultMap.cmsContent.SideDoorSideQuestion, resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.cmsContent.PassengerSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
+ resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
);
vm.$refs.windshieldOptions.initializeComponent(
- resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
- resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+ resultMap.damageOptions.windshieldOptions.availableReplacementOptions
);
vm.$refs.backGlassOptions.initializeComponent(
- resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions
- );
- vm.$refs.funnelFooter.initializeComponent(
- resultMap.cmsContent.FunnelFooterWidget
+ resultMap.damageOptions.backGlassOptions.availableReplacementOptions
);
});
},
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
index 123051d35..c05d97d2f 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
@@ -1,6 +1,7 @@
import { shallowMount } from "@vue/test-utils";
import windshieldChipCountQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
import store from "@/store";
jest.mock("@/store", () => { return {}; }, {virtual: true});
@@ -22,17 +23,17 @@ describe("windshield-chip-count-question.vue", () => {
describe("Windshield-chip-count-question.vue", () => {
test("Should display question and answers from api.", async () => {
-
//Arrange
- const { wrapper, cmsContent } = setupMocks({modelValueProp: ["One"]});
-
+ const { wrapper } = setupMocks({modelValueProp: ["One"]});
+
//Act
- windshieldChipCountQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent);
-
+ wrapper.setProps({isAvailable: true});
+ wrapper.vm.updateSelectedValues = jest.fn();
+ await wrapper.vm.$nextTick();
+
//Assert
- expect(wrapper.vm.questionText).toStrictEqual("How many chips are we repairing?");
- expect(wrapper.vm.answersFromCms).toStrictEqual([ { Name: 'One' }, { Name: 'Two' }, { Name: 'Three'} ]);
- });
+ expect(wrapper.vm.updateSelectedValues).toBeCalled();
+ });
});
function setupMocks({
@@ -54,9 +55,15 @@ describe("windshield-chip-count-question.vue", () => {
});
//Mock props
+ const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn()
+ }
+ }
mountOptions.propsData = {
modelValue: modelValueProp
};
+ mountOptions.mixins = [mockMixin];
const wrapper = shallowMount(windshieldChipCountQuestion, mountOptions);
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
index c04832a92..fc29d1c34 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
@@ -18,24 +18,15 @@
import buttonQuestion from "@/common-components/button-question/button-question";
export default ({
- name: "windshieldOptions",
- data(){
- return {
- questionText: String,
- answersFromCms: Array
- }
- },
+ name: "windshieldOptions",
props: {
modelValue: Array,
groupName: String,
isAvailable: Boolean,
validationRules: String,
+ cmsWidgetName: String,
},
methods: {
- initializeComponent(cmsContent){
- this.questionText = cmsContent.QuestionText;
- this.answersFromCms = cmsContent.Answers;
- },
updateSelectedValues() {
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
@@ -44,6 +35,12 @@ export default ({
},
},
computed: {
+ questionText(){
+ return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+ },
+ answersFromCms(){
+ return this.getCmsContent(this.cmsWidgetName, 'Answers');
+ },
selectedChipCountValues: {
get: function() {
return this.modelValue;
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js
index 3bb64d695..da19f5308 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js
@@ -20,21 +20,6 @@ describe("windshield-damage-type-question.vue", () => {
});
});
- describe("windshield-damage-type-question.vue", () => {
- test("Should display question and answers from api.", async () => {
-
- //Arrange
- const { wrapper, cmsContent } = setupMocks({modelValueProp: ["Repair"]});
-
- //Act
- windshieldDamageTypeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent);
-
- //Assert
- expect(wrapper.vm.questionText).toStrictEqual("What's your windshield damage?");
- expect(wrapper.vm.answersFromCms).toStrictEqual([ { Name: 'Repair' }, { Name: 'Replace' } ]);
- });
- });
-
function setupMocks({
modelValueProp = ["Two"],
groupName = "WindshieldDamageTypeQuestion",
@@ -57,6 +42,12 @@ describe("windshield-damage-type-question.vue", () => {
mountOptions.propsData = {
modelValue: modelValueProp
};
+ const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn()
+ }
+ }
+ mountOptions.mixins = [mockMixin];
const wrapper = shallowMount(windshieldDamageTypeQuestion, mountOptions);
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 4510b651c..3c377ec88 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -20,26 +20,21 @@ import store from "@/store";
export default ({
name: "windshieldDamageTypeQuestion",
- data(){
- return {
- questionText: String,
- answersFromCms: Array
- }
- },
props: {
modelValue: Array,
groupName: String,
isAvailable: Boolean,
suppressError: Boolean,
validationRules: String,
- },
- methods: {
- initializeComponent(cmsContent){
- this.questionText = cmsContent.QuestionText;
- this.answersFromCms = cmsContent.Answers;
- },
+ cmsWidgetName: String,
},
computed: {
+ questionText(){
+ return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+ },
+ answersFromCms(){
+ return this.getCmsContent(this.cmsWidgetName, 'Answers');
+ },
selectedValues: {
get: function() {
return this.modelValue;
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index ce940e5a1..7802dfbff 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -1,6 +1,6 @@
-
-
-
{
});
});
-describe("make-question.vue", () => {
- test("CMS question text is used as radio question text.", async () => {
- //Arrange
- const { wrapper, cmsContent } = setupMocks({
- cmsQuestionText: "What make is your vehicle?",
- });
-
- //Act
- makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null);
-
- //Assert
- const buttonQuestionComponent = await wrapper.findComponent({
- name: "buttonQuestion",
- });
- expect(buttonQuestionComponent.attributes("questiontext")).toBe(
- "What make is your vehicle?"
- );
- });
-});
-
describe("make-question.vue", () => {
test("Data from store api are used as radio question answers.", async () => {
//Arrange
@@ -58,7 +38,6 @@ describe("make-question.vue", () => {
const initialData = makeQuestion.methods.loadInitialData.call(wrapper.vm);
makeQuestion.methods.initializeComponent.call(
wrapper.vm,
- cmsContent,
initialData
);
@@ -88,9 +67,15 @@ function setupMocks({
});
//Mock props
+ const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn()
+ }
+ }
mountOptions.propsData = {
modelValue: modelValueProp,
};
+ mountOptions.mixins = [mockMixin];
const wrapper = shallowMount(makeQuestion, mountOptions);
//Mock CMS content
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index bc8ce5f9f..559568236 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -23,14 +23,17 @@ export default {
name: "make-question",
data() {
return {
- questionText: null,
makes: Array,
};
},
props: {
modelValue: String,
+ cmsWidgetName: String,
},
computed: {
+ questionText(){
+ return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+ },
selectedValueAsArray: {
get: function() {
const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
@@ -52,8 +55,7 @@ export default {
{ year: store.getters.vehicle.year }
);
},
- initializeComponent(cmsContent, initialData) {
- this.questionText = cmsContent.QuestionText;
+ initializeComponent(initialData) {
this.makes = initialData;
},
},
diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js
index d00b9240f..11441bb77 100644
--- a/src/layouts/vehicle-make/vehicle-make.spec.js
+++ b/src/layouts/vehicle-make/vehicle-make.spec.js
@@ -6,13 +6,11 @@ import { nextTick } from "vue";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { storeMutations } from "@/constants/store-mutations";
import { storeActions } from "@/constants/store-actions";
+import baseMixin from "@/mixins/base-mixin.js";
// Components
import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue";
import makeQuestion from "@/layouts/vehicle-make/make-question/make-question";
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import store from "@/store";
jest.mock("@/store", () => ({
@@ -39,12 +37,8 @@ jest.mock("@/helpers/layout-helper.js", () => ({
describe("vehicle-make.vue", () => {
test("Make question component is initized with api data", async (done) => {
//Arrange
- const vehicleMakeQuestionCmsContent = {
- QuestionText: "What make is your vehicle?",
- };
const makeQuestionInitialData = ["honda", "ford", "dodge"];
const { wrapper, apiPromise } = setupMocks({
- vehicleMakeQuestionCmsContent: vehicleMakeQuestionCmsContent,
makeQuestionInitialData: makeQuestionInitialData,
});
@@ -59,7 +53,6 @@ describe("vehicle-make.vue", () => {
//Assert
apiPromise.finally(() => {
expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(
- vehicleMakeQuestionCmsContent,
makeQuestionInitialData
);
done();
@@ -67,90 +60,6 @@ describe("vehicle-make.vue", () => {
});
});
-describe("vehicle-make.vue", () => {
- test("Page header is initailized with api data", async (done) => {
- //Arrange
- const pageHeaderWidgetHeaderText = "Select a make to get started";
- const { wrapper, apiPromise } = setupMocks({
- pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
- });
-
- //Act
- vehicleMake.beforeRouteEnter.call(
- wrapper.vm,
- { query: { fmgPage: "vehicle-make" } },
- undefined,
- (c) => c(wrapper.vm)
- );
-
- //Assert
- apiPromise.finally(() => {
- expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
- pageHeaderWidgetHeaderText
- );
- done();
- });
- });
-});
-
-describe("vehicle-make.vue", () => {
- test("Page logo image is initailized with api data", async (done) => {
- //Arrange
- const SiteHeaderWidget = {
- LogoImage:
- "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
- };
- const { wrapper, apiPromise } = setupMocks({
- SiteHeaderWidget: SiteHeaderWidget,
- });
-
- //Act
- vehicleMake.beforeRouteEnter.call(
- wrapper.vm,
- { query: { fmgPage: "vehicle-make" } },
- undefined,
- (c) => c(wrapper.vm)
- );
-
- //Assert
- apiPromise.finally(() => {
- expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(
- SiteHeaderWidget
- );
- done();
- });
- });
-});
-
-describe("vehicle-make.vue", () => {
- test("Vehicle image is initailized with api data", async (done) => {
- //Arrange
- const VehicleBannerWidget = {
- GenericVehicleImage:
- "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
- };
- const { wrapper, apiPromise } = setupMocks({
- VehicleBannerWidget: VehicleBannerWidget,
- });
-
- //Act
- vehicleMake.beforeRouteEnter.call(
- wrapper.vm,
- { query: { fmgPage: "vehicle-make" } },
- undefined,
- (c) => c(wrapper.vm)
- );
-
- //Assert
- apiPromise.finally(() => {
- expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(
- VehicleBannerWidget
- );
- done();
- });
- });
-});
-
describe("vehicle-make.vue", () => {
test("BackButtonAction triggers a router.navigate change", async (done) => {
//Arrange
@@ -262,32 +171,13 @@ function setupMocks({
loadInitialData: jest.fn(),
initializeComponent: jest.fn(),
};
- funnelHeader.methods = {
- initializeComponent: jest.fn(),
- };
- vehicleBanner.methods = {
- initializeComponent: jest.fn(),
- };
- funnelSubHeader.methods = {
- initializeComponent: jest.fn(),
- };
const mountOptions = getMountOptions(mountOptionsMockData);
const wrapper = shallowMount(vehicleMake, mountOptions);
const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" });
makeQuestionWrapper.vm.initializeComponent =
makeQuestion.methods.initializeComponent;
- const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
- funnelHeaderWrapper.vm.initializeComponent =
- funnelHeader.methods.initializeComponent;
- const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
- vehicleBannerWrapper.vm.initializeComponent =
- vehicleBanner.methods.initializeComponent;
- const funnelSubHeaderWrapper = wrapper.findComponent({
- name: "funnelSubHeader",
- });
- funnelSubHeaderWrapper.vm.initializeComponent =
- funnelSubHeader.methods.initializeComponent;
+ wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
return { wrapper, apiPromise };
}
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue
index 4c00d7454..4dee11115 100644
--- a/src/layouts/vehicle-make/vehicle-make.vue
+++ b/src/layouts/vehicle-make/vehicle-make.vue
@@ -1,16 +1,16 @@
@@ -59,17 +59,8 @@ export default {
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
- vm.$refs.funnelSubHeader.initializeComponent(
- resultMap.cmsContent.FunnelSubHeaderWidget
- );
- vm.$refs.funnelHeader.initializeComponent(
- resultMap.cmsContent.FunnelHeaderWidget
- );
- vm.$refs.vehicleBanner.initializeComponent(
- resultMap.cmsContent.VehicleBannerWidget
- );
+ vm.setCmsContent(resultMap.cmsContent);
vm.$refs.makeQuestion.initializeComponent(
- resultMap.cmsContent.VehicleMakeQuestion,
resultMap.makeQuestionInitialData
);
});
diff --git a/src/layouts/vehicle-model/model-question/model-question.spec.js b/src/layouts/vehicle-model/model-question/model-question.spec.js
index 061dd565e..805726c12 100644
--- a/src/layouts/vehicle-model/model-question/model-question.spec.js
+++ b/src/layouts/vehicle-model/model-question/model-question.spec.js
@@ -27,29 +27,6 @@ describe("model-question.vue", () => {
});
});
-describe("model-question.vue", () => {
- test("CMS question text is used as radio question text.", async () => {
- //Arrange
- const { wrapper, cmsContent } = setupMocks({
- cmsQuestionText: "What model is your vehicle?",
- });
-
- //Act
- modelQuestion.methods.initializeComponent.call(
- wrapper.vm,
- cmsContent,
- null
- );
-
- //Assert
- const buttonQuestionComponent = await wrapper.findComponent({
- name: "buttonQuestion",
- });
- expect(buttonQuestionComponent.attributes("questiontext")).toBe(
- "What model is your vehicle?"
- );
- });
-});
describe("model-question.vue", () => {
test("Data from store api are used as radio question answers.", async () => {
@@ -62,7 +39,6 @@ describe("model-question.vue", () => {
const initialData = modelQuestion.methods.loadInitialData.call(wrapper.vm);
modelQuestion.methods.initializeComponent.call(
wrapper.vm,
- cmsContent,
initialData
);
@@ -92,9 +68,15 @@ function setupMocks({
});
//Mock props
+ const mockMixin = {
+ methods: {
+ getCmsContent: jest.fn()
+ }
+ }
mountOptions.propsData = {
modelValue: modelValueProp,
};
+ mountOptions.mixins = [mockMixin];
const wrapper = shallowMount(modelQuestion, mountOptions);
//Mock CMS content
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index 1876630ef..c05732352 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -23,14 +23,17 @@ export default {
name: "model-question",
data() {
return {
- questionText: null,
models: Array,
};
},
props: {
modelValue: String,
+ cmsWidgetName: String,
},
computed: {
+ questionText(){
+ return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+ },
selectedValueAsArray: {
get: function() {
const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
@@ -52,8 +55,7 @@ export default {
{ year: store.getters.vehicle.year, make: store.getters.vehicle.make }
);
},
- initializeComponent(cmsContent, initialData) {
- this.questionText = cmsContent.QuestionText;
+ initializeComponent(initialData) {
this.models = initialData;
},
},
diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js
index 53710aa65..349e6e855 100644
--- a/src/layouts/vehicle-model/vehicle-model.spec.js
+++ b/src/layouts/vehicle-model/vehicle-model.spec.js
@@ -1,9 +1,6 @@
// Components
import vehicleModel from "@/layouts/vehicle-model/vehicle-model.vue";
import modelQuestion from "@/layouts/vehicle-model/model-question/model-question";
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
// Supporting files
import { settleAllPromises } from "@/helpers/layout-helper.js";
@@ -13,6 +10,7 @@ import { nextTick } from "vue";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { storeMutations } from "@/constants/store-mutations";
import { storeActions } from "@/constants/store-actions";
+import baseMixin from "@/mixins/base-mixin.js";
import store from "@/store";
// Mock our module for promises.
@@ -39,12 +37,8 @@ jest.mock("@/store", () => ({
describe("vehicle-model.vue", () => {
test("Model question component is initized with api data", async (done) => {
//Arange
- const buttonQuestionContent = {
- QuestionText: "What model is your vehicle?",
- };
const modelQuestionInitialData = ["accord", "civic", "insight"];
const { wrapper, apiPromise } = setupMocks({
- buttonQuestionContent: buttonQuestionContent,
modelQuestionInitialData: modelQuestionInitialData,
});
//Act
@@ -57,88 +51,13 @@ describe("vehicle-model.vue", () => {
//Assert
apiPromise.finally(() => {
expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(
- buttonQuestionContent,
modelQuestionInitialData
);
done();
});
});
});
-describe("vehicle-model.vue", () => {
- test("Page header is initailized with api data", async (done) => {
- //Arrange
- const pageHeaderWidgetHeaderText = "Select a model to get started";
- const { wrapper, apiPromise } = setupMocks({
- pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
- });
- //Act
- vehicleModel.beforeRouteEnter.call(
- wrapper.vm,
- { query: { fmgPage: "vehicle-model" } },
- undefined,
- (c) => c(wrapper.vm)
- );
- //Assert
- apiPromise.finally(() => {
- expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
- pageHeaderWidgetHeaderText
- );
- done();
- });
- });
-});
-describe("vehicle-model.vue", () => {
- test("Page logo image is initailized with api data", async (done) => {
- //Arrange
- const SiteHeaderWidget = {
- LogoImage:
- "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
- };
- const { wrapper, apiPromise } = setupMocks({
- SiteHeaderWidget: SiteHeaderWidget,
- });
- //Act
- vehicleModel.beforeRouteEnter.call(
- wrapper.vm,
- { query: { fmgPage: "vehicle-model" } },
- undefined,
- (c) => c(wrapper.vm)
- );
- //Assert
- apiPromise.finally(() => {
- expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(
- SiteHeaderWidget
- );
- done();
- });
- });
-});
-describe("vehicle-model.vue", () => {
- test("Vehicle image is initailized with api data", async (done) => {
- //Arrange
- const VehicleBannerWidget = {
- GenericVehicleImage:
- "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
- };
- const { wrapper, apiPromise } = setupMocks({
- VehicleBannerWidget: VehicleBannerWidget,
- });
- //Act
- vehicleModel.beforeRouteEnter.call(
- wrapper.vm,
- { query: { fmgPage: "vehicle-model" } },
- undefined,
- (c) => c(wrapper.vm)
- );
- //Assert
- apiPromise.finally(() => {
- expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(
- VehicleBannerWidget
- );
- done();
- });
- });
-});
+
describe("vehicle-model.vue", () => {
test("BackButtonAction triggers a router.navigate change", async (done) => {
//Arrange
@@ -246,35 +165,13 @@ function setupMocks({
loadInitialData: jest.fn(),
initializeComponent: jest.fn(),
};
- funnelHeader.methods = {
- initializeComponent: jest.fn(),
- };
- vehicleBanner.methods = {
- initializeComponent: jest.fn(),
- };
- funnelSubHeader.methods = {
- initializeComponent: jest.fn(),
- };
const mountOptions = getMountOptions(mountOptionsMockData);
const wrapper = shallowMount(vehicleModel, mountOptions);
+ wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" });
modelQuestionWrapper.vm.initializeComponent =
modelQuestion.methods.initializeComponent;
- const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
- funnelHeaderWrapper.vm.initializeComponent =
- funnelHeader.methods.initializeComponent;
-
- const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
- vehicleBannerWrapper.vm.initializeComponent =
- vehicleBanner.methods.initializeComponent;
-
- const funnelSubHeaderWrapper = wrapper.findComponent({
- name: "funnelSubHeader",
- });
- funnelSubHeaderWrapper.vm.initializeComponent =
- funnelSubHeader.methods.initializeComponent;
-
return { wrapper, apiPromise };
}
diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue
index 749a926fe..6f57b5140 100644
--- a/src/layouts/vehicle-model/vehicle-model.vue
+++ b/src/layouts/vehicle-model/vehicle-model.vue
@@ -1,16 +1,16 @@
@@ -60,17 +60,8 @@ export default {
// Call the "next" function to complete the transition to this page.
next((vm) => {
- vm.$refs.funnelSubHeader.initializeComponent(
- resultMap.cmsContent.FunnelSubHeaderWidget
- );
- vm.$refs.funnelHeader.initializeComponent(
- resultMap.cmsContent.FunnelHeaderWidget
- );
- vm.$refs.vehicleBanner.initializeComponent(
- resultMap.cmsContent.VehicleBannerWidget
- );
+ vm.setCmsContent(resultMap.cmsContent);
vm.$refs.modelQuestion.initializeComponent(
- resultMap.cmsContent.VehicleModelQuestion,
resultMap.modelQuestionInitialData
);
});
diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js
index 6613fe6ad..a663c5396 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.spec.js
+++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js
@@ -1,9 +1,5 @@
// Components
import vehicleParts from "@/layouts/vehicle-parts/vehicle-parts.vue";
-import funnelHeader from "@/common-components/funnel-header/funnel-header";
-import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
-import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
// Supporting Files
@@ -12,6 +8,7 @@ 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 store from "@/store";
// Mock our module for promises.
@@ -65,101 +62,13 @@ const basePartResponse = {
describe("vehicle-parts.vue", () => {
- test("Page header is initialized with api data", async (done) => {
+ test("Set cms content called on load", async (done) => {
//Arrange
- store.getters.pageData.mockReturnValueOnce(basePartResponse);
- store.getters.lineItems = { glassParts: {} }
-
- const pageHeaderWidgetHeaderText = "Select Parts";
- const { wrapper, apiPromise } = setupMocks(
- {
- pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
- mountOptionsMockData: {
- router: {
- navigateAfterSave: jest.fn()
- },
- route: {
- query: {
- fmgPage: 'vehicle-parts',
- }
- },
- store: {
- getters: store.getters
- },
- }
- });
-
-
- //Act
- vehicleParts.beforeRouteEnter.call(wrapper.vm,
- { query: { fmgPage: "vehicle-parts" } },
- undefined,
- (c) => c(wrapper.vm)
- );
-
- //Assert
- apiPromise.finally(() => {
- expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
- done();
- });
- });
-
- test("Page logo image is initialized with api data", async (done) => {
- //Arrange
- const SiteHeaderWidget = {
- LogoImage:
- "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
- };
-
- store.getters.pageData.mockReturnValueOnce(basePartResponse);
- store.getters.lineItems = { glassParts: {} }
-
- const { wrapper, apiPromise } = setupMocks(
- {
- SiteHeaderWidget: SiteHeaderWidget,
- mountOptionsMockData: {
- router: {
- navigateAfterSave: jest.fn()
- },
- route: {
- query: {
- fmgPage: 'vehicle-parts',
- }
- },
- store: {
- getters: store.getters
- },
- }
- });
-
- //Act
- vehicleParts.beforeRouteEnter.call(
- wrapper.vm,
- { query: { fmgPage: "vehicle-parts" } },
- undefined,
- (c) => c(wrapper.vm)
- );
-
- //Assert
- apiPromise.finally(() => {
- expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
- done();
- });
- });
-
- test("Vehicle image is initialized with api data", async (done) => {
- //Arrange
- const VehicleBannerWidget = {
- GenericVehicleImage:
- "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
- };
-
store.getters.pageData.mockReturnValue(basePartResponse);
store.getters.lineItems = { glassParts: {} }
const { wrapper, apiPromise } = setupMocks(
{
- VehicleBannerWidget: VehicleBannerWidget,
mountOptionsMockData: {
router: {
navigateAfterSave: jest.fn()
@@ -182,10 +91,11 @@ describe("vehicle-parts.vue", () => {
undefined,
(c) => c(wrapper.vm)
);
+ wrapper.vm.setCmsContent = jest.fn();
//Assert
apiPromise.finally(() => {
- expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
+ expect(wrapper.vm.setCmsContent).toHaveBeenCalled();
done();
});
});
@@ -375,29 +285,13 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}
settleAllPromises.mockImplementation(() => apiPromise);
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
- //Mock damage initialize methods
- funnelHeader.methods = { initializeComponent: jest.fn() };
- vehicleBanner.methods = { initializeComponent: jest.fn() };
- funnelSubHeader.methods = { initializeComponent: jest.fn() };
- funnelFooter.methods = { initializeComponent: jest.fn() }
-
const mountOptions = getMountOptions(mountOptionsMockData,);
const wrapper = shallowMount(vehicleParts, mountOptions);
- const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
- funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
-
- const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
- vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
-
- const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader", });
- funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
-
- const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter", });
- funnelFooterWrapper.vm.initializeComponent = funnelFooter.methods.initializeComponent;
-
const partQuestionRearWrapper = wrapper.findComponent({ name: "glassPartQuestion", });
partQuestionRearWrapper.vm.initializeComponent = glassPartQuestion.methods.initializeComponent;
+ wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
+
return { wrapper, apiPromise };
}
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index c02edfd27..d4c3e164a 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -1,8 +1,8 @@
-
-
-
-
+
+
+
+
@@ -31,12 +31,8 @@
:colorAnswers="item.colorAnswers"
/>
-
-
+
+