Merge pull request #584 from Safelite/feature/CSR-343

Feature/csr 343
This commit is contained in:
katieoh-safelite 2022-06-30 09:22:27 -04:00 committed by GitHub
commit bf99739e98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 108 additions and 11 deletions

View file

@ -0,0 +1,10 @@
<script>
export default {
name: "quote",
methods: {
arePagePrerequisitesValid() {
return true;
}
}
}
</script>

View file

@ -108,9 +108,87 @@ describe("glass-part-question.vue", () => {
expect(wrapper.vm.selectedPartNumber).toEqual(null);
});
test("default is selected if only one option", async () => {
// Arrange
store.getters.pageData.mockReset();
store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: [{ partNumber: "DB12209GTYN", color: "Green Tint"}]}] });
const { wrapper } = setupMocks(featureListData);
// Act
await wrapper.vm.$nextTick();
await wrapper.setData({ selectedTint: "Green Tint" });
// take emitted value, pass down as modelValue
// yes, yes, it's not ideal
await wrapper.setProps({ modelValue: wrapper.emitted()["update:modelValue"][0][0] })
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.selectedPartNumber).toBe("DB12209GTYN");
});
test("default is not selected if more than one option", async () => {
// Arrange
store.getters.pageData.mockReset();
store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: [{ partNumber: "DB12209GTYN", color: "Green Tint"}, { partNumber: "DB12209GTYNXXX", color: "Green Tint"}]}] });
const { wrapper } = setupMocks(featureListData);
// Act
await wrapper.vm.$nextTick();
await wrapper.setData({ selectedTint: "Green Tint" });
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.emitted()["update:modelValue"]).toBeFalsy();
expect(wrapper.vm.selectedPartNumber).toBeFalsy();
})
const partsForSelectedTintTestCases = [
["Rear", "Stationary", "Green Tint", [{ partNumber: "Glass1", color: "Green Tint"}, { partNumber: "Glass3", color: "Green Tint"}, { partNumber: "Glass4", color: "Green Tint"}, { partNumber: "Glass6", color: "Green Tint"} ]],
["Rear", "Stationary", "Blue Tint", [{ partNumber: "Glass2", color: "Blue Tint"}, { partNumber: "Glass5", color: "Blue Tint"}]],
["Rear", "Stationary", "Red Tint", [{ partNumber: "Glass7", color: "Red Tint"}]],
["Windshield", "Single", "Green Tint", [{ partNumber: "Windshield1", color: "Green Tint"}, { partNumber: "Windshield2", color: "Green Tint"}]],
["Windshield", "Single", "Blue Tint", []],
["Driver", "Quarter", "Green Tint", []]
];
test.each(partsForSelectedTintTestCases)("partsForSelectedTint returns correct parts", async (glassLocation, glassName, selectedTint, expectedResults) => {
// Arrange
store.getters.pageData.mockReset();
store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [
{
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{ partNumber: "Glass1", color: "Green Tint"},
{ partNumber: "Glass2", color: "Blue Tint"},
{ partNumber: "Glass3", color: "Green Tint"},
{ partNumber: "Glass4", color: "Green Tint"},
{ partNumber: "Glass5", color: "Blue Tint"},
{ partNumber: "Glass6", color: "Green Tint"},
{ partNumber: "Glass7", color: "Red Tint"}
]
},
{
glassName: "Single",
glassLocation: "Windshield",
parts: [{ partNumber: "Windshield1", color: "Green Tint"}, { partNumber: "Windshield2", color: "Green Tint"}]
}
]});
const { wrapper } = setupMocks({
glassLocationProp: glassLocation,
glassNameProp: glassName,
colorAnswersProp: [],
});
// Act
await wrapper.setData({ selectedTint: selectedTint });
// Assert
expect(expectedResults).toEqual(wrapper.vm.partsForSelectedTint);
});
});
function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp }) {
//Mock store
store.getters.pageData.mockReturnValueOnce({ partsOrQuestions: [{glassName: "Stationary", glassLocation: "Rear", parts: []}] });

View file

@ -116,10 +116,11 @@ export default {
},
partsForSelectedTint() {
return this.PartDataFromApi.partsOrQuestions?.filter(dataForGlassLocationAndName =>
const matchingGlass = this.PartDataFromApi.partsOrQuestions?.filter(dataForGlassLocationAndName =>
dataForGlassLocationAndName.glassName == this.glassName &&
dataForGlassLocationAndName.glassLocation == this.glassLocation)[0]
.parts?.filter(part => part.color == this.selectedTint) ?? [];
dataForGlassLocationAndName.glassLocation == this.glassLocation);
const matchingGlassParts = matchingGlass?.length == 1 ? matchingGlass[0].parts : [];
return matchingGlassParts.filter(part => part.color == this.selectedTint) ?? [];
},
// Creates a map of the feature list data in the correct Name/Value

View file

@ -223,18 +223,26 @@ export default {
span {
font-size: .875rem;
}
}
}
}
.col {
&:first-of-type {
label {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
z-index: 2;
.list-button-horizontal {
label {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
z-index: 2;
}
}
}
&:last-of-type {
label {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
.list-button-horizontal {
label {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
}
}
}