jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-1418

Browse source
This commit is contained in:
Sneha 2023-08-09 15:36:19 +05:30
parent 618d9e2f67
commit 1f2560f0a9
6 changed files with 78 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/constants/store-actions.js
View file

@ -9,7 +9,7 @@ const storeActions = {
GET_VEHICLE_MAKES: "getVehicleMakes",
GET_VEHICLE_MODELS: "getVehicleModels",
GET_VEHICLE_STYLES: "getVehicleStyles",
SET_VEHICLE: "setVehicle",
GET_VEHICLE: "getVehicle",
GET_DAMAGE_OPTIONS: "getDamageOptions",
GET_EVOX_IMAGE: "getEvoxImage",
IS_VIN_OPTIONAL_VEHICLE: "isVinOptionalVehicle",

9
src/fmg-components/vehicle-banner/vehicle-banner.vue
View file

@ -13,13 +13,20 @@ export default {
required: true,
},
cmsWidgetName: String,
displayVehicleImage: {
type: String,
required: false,
default: null,
},
},
computed: {
vehicleImageToDisplay() {
if (this.displayGenericVehicleImage) {
return this.genericVehicleImage;
}
if (this.displayVehicleImage !== null) {
return this.displayVehicleImage;
}
if (
this.$store.getters.vehicle.imageUrl === null ||
this.$store.getters.vehicle.imageUrl === "NULL"

93
src/layouts/vehicle/vehicle.spec.js
View file

@ -1,19 +1,17 @@
// Components
import vehicle from "@/layouts/vehicle/vehicle.vue";
// Supporting files
// Supporting Files
import { shallowMount } from "@vue/test-utils";
import { nextTick } from "vue";
import { mount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
describe("vehicle.vue", () => {
test('"Continue" button is enabled after YMMS is selected.', async () => {
const { wrapper } = setupMocks();
const continueButton = wrapper.get('[data-test-id="funnel-footer-main-button"]');
expect(continueButton.attributes()["aria-disabled"]).toBe("false");
});
test("arePagePrerequisitesValid should be true ", async () => {
//Arrange
const { wrapper } = setupMocks();
@ -26,66 +24,33 @@ describe("vehicle.vue", () => {
expect(arePagePrerequisitesValid).toBe(true);
});
});
describe("vehicle.vue", () => {
describe("navigation", () => {
test("if the continue button is clicked, navigate forward", async () => {
// Arrange
const { wrapper } = setupMocks();
describe("navigation", () => {
test("forwardButtonAction should trigger navigateForward", async () => {
// Arrange
const { wrapper } = setupMocks();
wrapper.vm.navigateForward = jest.fn();
// Act
await wrapper.vm.forwardButtonAction();
// Act
await wrapper.vm.forwardButtonAction();
//Assert
expect(wrapper.vm.navigateForward).toHaveBeenCalled();
// Assert
expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
});
});
});
const FunnelFooterWidgetMockData = {
ForwardButtonText: "Continue",
};
function setupMocks() {
const mockRoute = {
query: {
fmgPage: "vehicle",
},
};
const mockRouter = {
navigate: jest.fn(),
};
const wrapper = mount(vehicle, {
global: {
mixins: [
{
methods: {
getCmsContent: jest.fn((cmsWidgetName, fieldName) => {
if (cmsWidgetName === "FunnelFooterWidget") {
if (fieldName === "ForwardButtonText") {
return FunnelFooterWidgetMockData.ForwardButtonText;
}
}
return "";
}),
getFooterInfoBoxHeight: jest.fn(() => 80),
},
},
],
mocks: {
$route: mockRoute,
$router: mockRouter,
const wrapper = shallowMount(
vehicle,
getMountOptions({
router: {
navigate: jest.fn(),
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
})
);
stubs: {
FunnelHeader: true,
FunnelSubHeader: true,
VehicleBanner: true,
},
},
});
return { mockRoute, mockRouter, wrapper };
return { wrapper };
}

42
src/layouts/vehicle/vehicle.vue
View file

@ -58,6 +58,7 @@
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="displayGeneric"
:displayVehicleImage="vehicle.imageUrl"
class="mt-5 mb-3"
ref="banner" />
@ -109,6 +110,13 @@ export default {
selectedMake: this.selectedMakefromStore(),
selectedModel: this.selectedModelfromStore(),
selectedStyle: this.selectedStylefromStore(),
vehicle: {
carId: null,
category: null,
imageUrl: null,
imageVifNumber: null,
imageVifColor: null,
},
yearOptions: [],
makeOptions: [],
modelOptions: [],
@ -116,11 +124,6 @@ export default {
};
},
props: {
cmsWidgetName: String,
validationRules: String,
},
async beforeRouteEnter(to, from, next) {
// Call APIs
@ -244,7 +247,8 @@ export default {
const result = await this.getModelOptions(this.selectedYear, make);
this.modelOptions = result?.data;
if (this.selectedMakefromStore() !== make) {
this.selectedModel = null;
if (this.modelOptions.length === 1) this.selectedModel = this.modelOptions[0];
else this.selectedModel = null;
this.selectedStyle = null;
}
} else {
@ -260,36 +264,40 @@ export default {
);
this.styleOptions = result?.data;
if (this.selectedModelfromStore() !== model) {
this.selectedStyle = null;
if (this.styleOptions.length === 1) this.selectedStyle = this.styleOptions[0];
else this.selectedStyle = null;
}
} else {
this.styleOptions = [];
}
},
selectedStyle(style) {
this.setVehicle(this.selectedYear, this.selectedMake, this.selectedModel, style);
async selectedStyle(style) {
if (style) {
const result = await this.getVehicle(
this.selectedYear,
this.selectedMake,
this.selectedModel,
style
);
this.vehicle = result?.data;
}
},
},
methods: {
setVehicle(year, make, model, style) {
return this.dispatchStoreAction(this.storeActions.SET_VEHICLE, {
getVehicle(year, make, model, style) {
return this.dispatchStoreAction(this.storeActions.GET_VEHICLE, {
year: year,
make: make,
model: model,
style: style,
});
},
arePagePrerequisitesValid() {
return true;
},
async forwardButtonAction() {
return this.navigateForward();
},
navigateForward() {
this.dispatchStoreAction(
storeActions.SAVE_VEHICLE,
{
@ -297,12 +305,12 @@ export default {
make: this.selectedMake,
model: this.selectedModel,
style: this.selectedStyle,
vehicle: this.vehicle,
},
false
);
this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
},
initializeYearComponent(initialData) {
this.yearOptions = initialData;
},

22
src/store/index.js
View file

@ -739,7 +739,7 @@ export const actions = {
});
},
setVehicle(context, { year, make, model, style }) {
getVehicle(context, { year, make, model, style }) {
return globalMethods
.callHttpClient({
methods: endpoints.GetVehicle.method,
@ -747,17 +747,6 @@ export const actions = {
payload: {},
})
.then((response) => {
context.commit(storeMutations.UPDATE_CAR_ID, response.data.carId);
context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, response.data.category);
context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, response.data.imageUrl);
context.commit(
storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER,
response.data.imageVifNumber
);
context.commit(
storeMutations.UPDATE_VEHICLE_IMAGE_COLOR,
response.data.imageVifColor
);
return response;
});
},
@ -1624,9 +1613,7 @@ export const actions = {
}
},
saveVehicle(context, { year, make, model, style }) {
context.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
saveVehicle(context, { year, make, model, style, vehicle }) {
context.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
if (context.state.order.vehicle.year !== year) {
@ -1641,6 +1628,11 @@ export const actions = {
if (context.state.order.vehicle.style !== style) {
context.commit(storeMutations.UPDATE_STYLE, style);
}
context.commit(storeMutations.UPDATE_CAR_ID, vehicle.carId);
context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicle.category);
context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicle.imageUrl);
context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicle.imageVifNumber);
context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicle.imageVifColor);
},
saveVehicleDamage(

23
src/store/store.spec.js
View file

@ -484,12 +484,9 @@ describe("Actions", () => {
expect(response.data).toEqual({ style: "4 DOOR SEDAN" });
});
it("setVehicle action, should get vehicle data and set carId and vehicle category", async () => {
it("getVehicle action, should get vehicle data ", async () => {
// Arrange
const context = state;
const commit = jest.fn();
context.commit = commit;
// Act
globalMethods.callHttpClient.mockImplementation(() => {
@ -497,10 +494,8 @@ describe("Actions", () => {
});
// Assert
const response = await actions.setVehicle(context, "C00000000");
const response = await actions.getVehicle(context, "C00000000");
expect(commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, "C00000000");
expect(commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, "CAR");
expect(response.data).toEqual({ carId: "C00000000", category: "CAR" });
});
@ -1729,18 +1724,14 @@ describe("Actions", () => {
make: "Honda",
model: "Civic",
style: "Sedan",
vehicle: {
carId: "C00000000",
category: "CAR",
},
};
actions.saveVehicle(context, payload);
//Assert
expect(dispatch).toHaveBeenNthCalledWith(
1,
storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES
);
expect(dispatch).toHaveBeenNthCalledWith(
2,
storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES
);
if (context.state.order.vehicle.year !== payload.year) {
expect(commit).toBeCalledWith(storeMutations.UPDATE_YEAR, payload.year);
}
@ -1753,6 +1744,8 @@ describe("Actions", () => {
if (context.state.order.vehicle.style !== payload.style) {
expect(commit).toBeCalledWith(storeMutations.UPDATE_STYLE, payload.style);
}
context.commit(storeMutations.UPDATE_CAR_ID, payload.vehicle.carId);
context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, payload.vehicle.category);
});
it("saveVehicleDamage, should wipe out damage if different", () => {