diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js index 9cf75368e..9cd9307db 100644 --- a/src/common-components/button-question/button-question.spec.js +++ b/src/common-components/button-question/button-question.spec.js @@ -10,6 +10,7 @@ describe("buttonQuestion.vue", () => { const wrapper = shallowMount(buttonQuestion, { propsData: { isOverflowScrollable: true, + groupName: "group-name" } }); @@ -25,6 +26,7 @@ describe("buttonQuestion.vue", () => { const wrapper = shallowMount(buttonQuestion, { propsData: { buttonType: "listCard", + groupName: "group-name" } }); // Assert @@ -39,6 +41,7 @@ describe("buttonQuestion.vue", () => { const wrapper = shallowMount(buttonQuestion, { propsData: { buttonType: "listButtonHorizontal", + groupName: "group-name" } }); // Assert @@ -53,6 +56,7 @@ describe("buttonQuestion.vue", () => { const wrapper = shallowMount(buttonQuestion, { propsData: { buttonType: "radio", + groupName: "group-name" } }); // Assert @@ -77,7 +81,8 @@ describe("buttonQuestion.vue", () => { // Act const localThis = { isWide: false, - answers: ['a', 'b'] + answers: ['a', 'b'], + groupName: "group-name" } expect(buttonQuestion.computed.getColLength.call(localThis)).toBe(""); @@ -109,7 +114,7 @@ describe("buttonQuestion.vue", () => { describe("buttonQuestion.vue", () => { it("Should trigger event modelValue change to new value on when radio button selected", async () => { // Act - const wrapper = shallowMount(buttonQuestion, setupMocks({})); + const wrapper = shallowMount(buttonQuestion, setupMocks({propsData: {groupName: "group-name"}})); await wrapper.setProps({ answers: ["2022", "2021", "2020"], isMultiSelect: false, @@ -129,6 +134,7 @@ describe("buttonQuestion.vue", () => { propsData: { modelValue: ["2022", "2021", "2020"], isMultiSelect: true, + groupName: "group-name" } })); const val = { checkValue: true, value: "2019", } @@ -144,7 +150,8 @@ describe("buttonQuestion.vue", () => { const wrapper = shallowMount(buttonQuestion, setupMocks({ propsData: { isMultiSelect: true, - modelValue: ['a', 'b'] + modelValue: ['a', 'b'], + groupName: "group-name" } })); const val = { checkValue: true, value: "2021", } @@ -161,7 +168,8 @@ describe("buttonQuestion.vue", () => { const wrapper = shallowMount(buttonQuestion, setupMocks({ propsData: { isMultiSelect: true, - modelValue: ['a', 'b'] + modelValue: ['a', 'b'], + groupName: "group-name" } })); @@ -173,24 +181,6 @@ describe("buttonQuestion.vue", () => { }); }); - -describe("buttonQuestion.vue", () => { - it("Should do nothing to this.selectedValues if this.selectedValues is not an array", () => { - // Act - const wrapper = shallowMount(buttonQuestion, setupMocks({ - propsData: { - isMultiSelect: true, - modelValue: 'a', - } - })); - const val = { checkValue: true, value: "c", } - wrapper.vm.handleCheckedChanged(val); - - // Assert - expect(wrapper.vm.selectedValues).toEqual("a"); - }); -}); - function setupMocks(mountOptionsMockData = {}) { const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } }; const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData)); diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js index a6ef4e586..26a16e78d 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js @@ -69,24 +69,25 @@ describe("glass-part-question.vue", () => { }); test("Should emit updateModelValue, and have correct attributes", async () => { - //Arrange - const { wrapper } = setupMocks(featureListData); + store.getters.pageData.mockReset(); + store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: [{ partNumber: "DB12209GTYN", color: "Green Tint"}]}] }); //Act await wrapper.vm.$nextTick(); const listCard = await wrapper.findComponent({ - name: "listCard", + name: "buttonQuestion", }); - wrapper.setValue({ selectedTint: 'Green Tint' }); + await wrapper.setData({ selectedTint: 'Green Tint' }); + // to trigger the computed setter + wrapper.vm.selectedPartNumber = "DB12209GTYN"; //Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ selectedTint: 'Green Tint' }]); - expect(listCard.attributes("buttonid")).toBe("Rear-Stationary-Green Tint"); + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ partNumber: "DB12209GTYN", color: "Green Tint"}]); expect(listCard.attributes("groupname")).toBe("Rear-Stationary"); - expect(listCard.attributes("isradio")).toBe("true"); + expect(listCard.attributes("validationrules")).toBe("Rear-Stationary-tint-required"); }); test("ResetTintAndPartSelections, should reset data elements ", async () => { @@ -96,21 +97,23 @@ describe("glass-part-question.vue", () => { //Act await wrapper.vm.$nextTick(); - wrapper.setData({ selectedTint: { "Rear-Stationary": 'Green Tint' } }); - - expect(wrapper.vm.selectedTint).toStrictEqual({ "Rear-Stationary": 'Green Tint' }); + await wrapper.setData({ selectedTint: 'Green Tint', selectedPartNumber: "test" }); + + expect(wrapper.vm.selectedTint).toEqual('Green Tint'); + expect(wrapper.vm.selectedPartNumber).toEqual('test'); await wrapper.vm.ResetTintAndPartSelections(); - expect(wrapper.vm.selectedTint).toStrictEqual({}); + + expect(wrapper.vm.selectedTint).toEqual("Green Tint"); + expect(wrapper.vm.selectedPartNumber).toEqual(null); }); }); function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp }) { - //Mock store - store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: {}}); + store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: []}] }); store.getters.lineItems = { glassParts: {} } const mountOptions = getMountOptions({ diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue index 3dad69450..1c5dd1ae7 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -64,7 +64,7 @@ export default { glassLocation: String, colorAnswers: Array, modelValue: Object, - alreadyPopulatedPartsData: Object + alreadyPopulatedPartsData: Array }, mounted() { this.LoadPreselectedValues(); @@ -151,7 +151,7 @@ export default { }, PartDataFromApi() { - return this.$store.getters.pageData(this.$route.query.fmgPage); + return this.$store.getters.pageData(this.$route.query.fmgPage) ?? {}; }, }, methods: { @@ -197,7 +197,7 @@ export default { this.$nextTick(() => { if (this.modelValue !== undefined) { // Populate button-question model-value if parts data already exists in VueX - this.selectedTint = this.alreadyPopulatedPartsData.filter(part => part.partNumber === this.selectedPartNumber)[0].color; + this.selectedTint = this.alreadyPopulatedPartsData?.filter(part => part.partNumber === this.selectedPartNumber)[0].color; } }); }, diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js index a663c5396..c43136079 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.spec.js +++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js @@ -65,7 +65,7 @@ describe("vehicle-parts.vue", () => { test("Set cms content called on load", async (done) => { //Arrange store.getters.pageData.mockReturnValue(basePartResponse); - store.getters.lineItems = { glassParts: {} } + store.getters.lineItems = { glassParts: null } const { wrapper, apiPromise } = setupMocks( { @@ -104,7 +104,7 @@ describe("vehicle-parts.vue", () => { //Arrange store.getters.pageData.mockReturnValue(basePartResponse); - store.getters.lineItems = { glassParts: {} } + store.getters.lineItems = { glassParts: null } const { wrapper } = setupMocks({ mountOptionsMockData: { @@ -141,7 +141,7 @@ describe("vehicle-parts.vue", () => { //Arrange store.getters.pageData.mockReturnValueOnce(basePartResponse); - store.getters.lineItems = { glassParts: { 0: { partNumber: 'DB12209YPYNOEM'} } } + store.getters.lineItems = { glassParts: [{ partNumber: 'DB12209YPYNOEM'} ] } const { wrapper } = setupMocks({ mountOptionsMockData: { @@ -170,14 +170,21 @@ describe("vehicle-parts.vue", () => { await nextTick(); //Assert - expect(wrapper.vm.glassParts).toEqual({ "Rear-Stationary": { "Rear": ['DB12209YPYNOEM'] } }); + expect(wrapper.vm.glassParts).toEqual({ "Rear-Stationary": { + partNumber: "DB12209YPYNOEM", + description: "heated glass, solar, 1 hole", + color: "Gray Tint Privacy", + requiresRecalibration: false, + requiresCapabilityQuestions: false, + childParts: null + }}); }); test("BackButtonAction triggers a router.navigate change", async () => { //Arrange store.getters.pageData.mockReturnValueOnce(basePartResponse); - store.getters.lineItems = { glassParts: {} } + store.getters.lineItems = { glassParts: null } const { wrapper } = setupMocks({ mountOptionsMockData: { @@ -215,7 +222,7 @@ describe("vehicle-parts.vue", () => { //Arrange store.getters.pageData.mockReturnValueOnce(basePartResponse); - store.getters.lineItems = { glassParts: {} } + store.getters.lineItems = { glassParts: null } store.commit = jest.fn(); @@ -238,7 +245,7 @@ describe("vehicle-parts.vue", () => { } }); - wrapper.setData({ glassParts: { "Rear-Stationary": { "Rear": ['DB12209YPYNOEM'] } } }); + wrapper.setData({ glassParts: {"Rear-Stationary": { partNumber: 'DB12209GTYN'}}}); //Act vehicleParts.beforeRouteEnter.call( @@ -285,13 +292,14 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {} settleAllPromises.mockImplementation(() => apiPromise); fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); - const mountOptions = getMountOptions(mountOptionsMockData,); + 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.funnelFooter.removeLoader = jest.fn(); return { wrapper, apiPromise }; } diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index b30a8c292..e21df516b 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -183,10 +183,10 @@ methods: { store.commit(storeMutations.UPDATE_GLASS_PARTS, this.matchedParts); // Navigate to the next page. - // this.$router.navigateAfterSave( - // this.navigationScenarios.SELECTED_PARTS, - // this.$route - // ); + this.$router.navigateAfterSave( + this.navigationScenarios.SELECTED_PARTS, + this.$route + ); }, resetDependentState() { @@ -195,7 +195,6 @@ methods: { LoadInitialPartsData() { this.alreadyPopulatedPartsData = this.$store.getters.lineItems.glassParts ?? []; - const savedPartNumbers = this.alreadyPopulatedPartsData.map(part => part.partNumber) this.PartsFromApi.partsOrQuestions.forEach(glass => { const savedPart = glass.parts.filter(part => savedPartNumbers.includes(part.partNumber))[0]; diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js index 2fbdaade4..7db735ced 100644 --- a/src/ux-components/list-card/list-card.spec.js +++ b/src/ux-components/list-card/list-card.spec.js @@ -205,7 +205,7 @@ describe("list-card.vue", () => { }); wrapper.vm.handleCheckChange(); // Assert - expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: [Boolean, String], buttonId: 'list-card-id'}]); + expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: "List Card Checkbox", buttonId: 'list-card-id'}]); }); it("Should set checkValue data if selectedButtonIDs has value(s)", async () => { diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 200b84d3f..84762fc91 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -95,7 +95,7 @@ export default { }, data() { return { - checkValue: [Boolean, String], + checkValue: null, } }, created() { @@ -104,6 +104,11 @@ export default { ? this.selectedValues.includes(this.value) : this.selectedValues[0]; } + else if (Array.isArray(this.modelValue)) { + this.checkValue = this.isMultiSelect + ? this.modelValue.includes(this.value) + : this.modelValue[0]; + } else { this.checkValue = this.selectedValues == this.value || this.modelValue == this.value; } diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js index c815b1ace..f97700b0e 100644 --- a/src/ux-components/radio/radio.spec.js +++ b/src/ux-components/radio/radio.spec.js @@ -92,7 +92,7 @@ describe("radio.vue", () => { isRequired: true, modelValue: ["List Card Checkbox"], value: "Car-Front", - selectedValues: ["Car-Front"] + selectedValues: "Car-Front" }, }); // Assert diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue index 8af669ba3..8b90bd83d 100644 --- a/src/ux-components/radio/radio.vue +++ b/src/ux-components/radio/radio.vue @@ -38,7 +38,7 @@ export default { default: "", }, screenReaderOnlyText: String, - selectedValues: [Array, String], + selectedValues: String, hasError: Boolean, validationRules: String },