diff --git a/src/assets/img/tints/Glass-BlueShade-BlueTint.svg b/src/assets/img/tints/Glass-BlueShade-BlueTint.svg new file mode 100644 index 00000000..007c490f --- /dev/null +++ b/src/assets/img/tints/Glass-BlueShade-BlueTint.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Glass-BlueShade-BrownTint.svg b/src/assets/img/tints/Glass-BlueShade-BrownTint.svg new file mode 100644 index 00000000..d1ffeb8e --- /dev/null +++ b/src/assets/img/tints/Glass-BlueShade-BrownTint.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Glass-BlueShade-GrayTint.svg b/src/assets/img/tints/Glass-BlueShade-GrayTint.svg new file mode 100644 index 00000000..417ce474 --- /dev/null +++ b/src/assets/img/tints/Glass-BlueShade-GrayTint.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Glass-BlueShade-GreenTint.svg b/src/assets/img/tints/Glass-BlueShade-GreenTint.svg new file mode 100644 index 00000000..4cf1c383 --- /dev/null +++ b/src/assets/img/tints/Glass-BlueShade-GreenTint.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Glass-BlueShade-NoTint.svg b/src/assets/img/tints/Glass-BlueShade-NoTint.svg new file mode 100644 index 00000000..220b1ab0 --- /dev/null +++ b/src/assets/img/tints/Glass-BlueShade-NoTint.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Glass-BrownShade-BrownTint.svg b/src/assets/img/tints/Glass-BrownShade-BrownTint.svg new file mode 100644 index 00000000..dbd05962 --- /dev/null +++ b/src/assets/img/tints/Glass-BrownShade-BrownTint.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Glass-GrayShade-BlueTint.svg b/src/assets/img/tints/Glass-GrayShade-BlueTint.svg new file mode 100644 index 00000000..2ec4a053 --- /dev/null +++ b/src/assets/img/tints/Glass-GrayShade-BlueTint.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Glass-GrayShade-BrownTint.svg b/src/assets/img/tints/Glass-GrayShade-BrownTint.svg new file mode 100644 index 00000000..f9cc80c1 --- /dev/null +++ b/src/assets/img/tints/Glass-GrayShade-BrownTint.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Glass-GrayShade-GrayTint.svg b/src/assets/img/tints/Glass-GrayShade-GrayTint.svg new file mode 100644 index 00000000..fcfe78cf --- /dev/null +++ b/src/assets/img/tints/Glass-GrayShade-GrayTint.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Glass-GrayShade-GreenTint.svg b/src/assets/img/tints/Glass-GrayShade-GreenTint.svg new file mode 100644 index 00000000..b420ec6f --- /dev/null +++ b/src/assets/img/tints/Glass-GrayShade-GreenTint.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Glass-GreenShade-BlueTint.svg b/src/assets/img/tints/Glass-GreenShade-BlueTint.svg new file mode 100644 index 00000000..e1f2e968 --- /dev/null +++ b/src/assets/img/tints/Glass-GreenShade-BlueTint.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Glass-GreenShade-BrownTint.svg b/src/assets/img/tints/Glass-GreenShade-BrownTint.svg new file mode 100644 index 00000000..b8f49b56 --- /dev/null +++ b/src/assets/img/tints/Glass-GreenShade-BrownTint.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Glass-GreenShade-GreenTint.svg b/src/assets/img/tints/Glass-GreenShade-GreenTint.svg new file mode 100644 index 00000000..b07e8dbc --- /dev/null +++ b/src/assets/img/tints/Glass-GreenShade-GreenTint.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Glass-NoShade-BlueTint.svg b/src/assets/img/tints/Glass-NoShade-BlueTint.svg new file mode 100644 index 00000000..1e4fd4eb --- /dev/null +++ b/src/assets/img/tints/Glass-NoShade-BlueTint.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Glass-NoShade-BrownTint.svg b/src/assets/img/tints/Glass-NoShade-BrownTint.svg new file mode 100644 index 00000000..65877467 --- /dev/null +++ b/src/assets/img/tints/Glass-NoShade-BrownTint.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Glass-NoShade-DarkBrownTint.svg b/src/assets/img/tints/Glass-NoShade-DarkBrownTint.svg new file mode 100644 index 00000000..f36ebd87 --- /dev/null +++ b/src/assets/img/tints/Glass-NoShade-DarkBrownTint.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Glass-NoShade-DaryGrayTint.svg b/src/assets/img/tints/Glass-NoShade-DaryGrayTint.svg new file mode 100644 index 00000000..5aab7ea0 --- /dev/null +++ b/src/assets/img/tints/Glass-NoShade-DaryGrayTint.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Glass-NoShade-GrayTint.svg b/src/assets/img/tints/Glass-NoShade-GrayTint.svg new file mode 100644 index 00000000..ee14d3c4 --- /dev/null +++ b/src/assets/img/tints/Glass-NoShade-GrayTint.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Glass-NoShade-GreenTint.svg b/src/assets/img/tints/Glass-NoShade-GreenTint.svg new file mode 100644 index 00000000..5f5b99de --- /dev/null +++ b/src/assets/img/tints/Glass-NoShade-GreenTint.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Glass-NoShade-NoTint.svg b/src/assets/img/tints/Glass-NoShade-NoTint.svg new file mode 100644 index 00000000..ec1ced50 --- /dev/null +++ b/src/assets/img/tints/Glass-NoShade-NoTint.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Glass-NoShade-Privacy.svg b/src/assets/img/tints/Glass-NoShade-Privacy.svg new file mode 100644 index 00000000..caa726f4 --- /dev/null +++ b/src/assets/img/tints/Glass-NoShade-Privacy.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Windshield-BlueShade-BlueTint.svg b/src/assets/img/tints/Windshield-BlueShade-BlueTint.svg new file mode 100644 index 00000000..b4cf30c9 --- /dev/null +++ b/src/assets/img/tints/Windshield-BlueShade-BlueTint.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Windshield-BlueShade-BrownTint.svg b/src/assets/img/tints/Windshield-BlueShade-BrownTint.svg new file mode 100644 index 00000000..dbca11b8 --- /dev/null +++ b/src/assets/img/tints/Windshield-BlueShade-BrownTint.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Windshield-BlueShade-GrayTint.svg b/src/assets/img/tints/Windshield-BlueShade-GrayTint.svg new file mode 100644 index 00000000..7ef27756 --- /dev/null +++ b/src/assets/img/tints/Windshield-BlueShade-GrayTint.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Windshield-BlueShade-GreenTint.svg b/src/assets/img/tints/Windshield-BlueShade-GreenTint.svg new file mode 100644 index 00000000..18bc35fb --- /dev/null +++ b/src/assets/img/tints/Windshield-BlueShade-GreenTint.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Windshield-BlueShade-NoTint.svg b/src/assets/img/tints/Windshield-BlueShade-NoTint.svg new file mode 100644 index 00000000..2217911a --- /dev/null +++ b/src/assets/img/tints/Windshield-BlueShade-NoTint.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Windshield-BrownShade-BrownTint.svg b/src/assets/img/tints/Windshield-BrownShade-BrownTint.svg new file mode 100644 index 00000000..8c8b1da6 --- /dev/null +++ b/src/assets/img/tints/Windshield-BrownShade-BrownTint.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Windshield-GrayShade-BlueTint.svg b/src/assets/img/tints/Windshield-GrayShade-BlueTint.svg new file mode 100644 index 00000000..a924b666 --- /dev/null +++ b/src/assets/img/tints/Windshield-GrayShade-BlueTint.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Windshield-GrayShade-BrownTint.svg b/src/assets/img/tints/Windshield-GrayShade-BrownTint.svg new file mode 100644 index 00000000..b26eedee --- /dev/null +++ b/src/assets/img/tints/Windshield-GrayShade-BrownTint.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Windshield-GrayShade-GrayTint.svg b/src/assets/img/tints/Windshield-GrayShade-GrayTint.svg new file mode 100644 index 00000000..69373ca2 --- /dev/null +++ b/src/assets/img/tints/Windshield-GrayShade-GrayTint.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Windshield-GrayShade-GreenTint.svg b/src/assets/img/tints/Windshield-GrayShade-GreenTint.svg new file mode 100644 index 00000000..14824eb5 --- /dev/null +++ b/src/assets/img/tints/Windshield-GrayShade-GreenTint.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Windshield-GreenShade-BlueTint.svg b/src/assets/img/tints/Windshield-GreenShade-BlueTint.svg new file mode 100644 index 00000000..fcc3d63a --- /dev/null +++ b/src/assets/img/tints/Windshield-GreenShade-BlueTint.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Windshield-GreenShade-BrownTint.svg b/src/assets/img/tints/Windshield-GreenShade-BrownTint.svg new file mode 100644 index 00000000..2fdf4bcf --- /dev/null +++ b/src/assets/img/tints/Windshield-GreenShade-BrownTint.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Windshield-GreenShade-GreenTint.svg b/src/assets/img/tints/Windshield-GreenShade-GreenTint.svg new file mode 100644 index 00000000..65a73528 --- /dev/null +++ b/src/assets/img/tints/Windshield-GreenShade-GreenTint.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/img/tints/Windshield-NoShade-BlueTint.svg b/src/assets/img/tints/Windshield-NoShade-BlueTint.svg new file mode 100644 index 00000000..cbeb84ab --- /dev/null +++ b/src/assets/img/tints/Windshield-NoShade-BlueTint.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Windshield-NoShade-BrownTint.svg b/src/assets/img/tints/Windshield-NoShade-BrownTint.svg new file mode 100644 index 00000000..f70fef99 --- /dev/null +++ b/src/assets/img/tints/Windshield-NoShade-BrownTint.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Windshield-NoShade-DarkBrownTint.svg b/src/assets/img/tints/Windshield-NoShade-DarkBrownTint.svg new file mode 100644 index 00000000..feedfa3f --- /dev/null +++ b/src/assets/img/tints/Windshield-NoShade-DarkBrownTint.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Windshield-NoShade-DarkGrayTint.svg b/src/assets/img/tints/Windshield-NoShade-DarkGrayTint.svg new file mode 100644 index 00000000..9f55ee8a --- /dev/null +++ b/src/assets/img/tints/Windshield-NoShade-DarkGrayTint.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Windshield-NoShade-GrayTint.svg b/src/assets/img/tints/Windshield-NoShade-GrayTint.svg new file mode 100644 index 00000000..249a9866 --- /dev/null +++ b/src/assets/img/tints/Windshield-NoShade-GrayTint.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Windshield-NoShade-GreenTint.svg b/src/assets/img/tints/Windshield-NoShade-GreenTint.svg new file mode 100644 index 00000000..ce17261a --- /dev/null +++ b/src/assets/img/tints/Windshield-NoShade-GreenTint.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Windshield-NoShade-NoTint.svg b/src/assets/img/tints/Windshield-NoShade-NoTint.svg new file mode 100644 index 00000000..5a9bc647 --- /dev/null +++ b/src/assets/img/tints/Windshield-NoShade-NoTint.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tints/Windshield-NoShade-Privacy.svg b/src/assets/img/tints/Windshield-NoShade-Privacy.svg new file mode 100644 index 00000000..ca1f024a --- /dev/null +++ b/src/assets/img/tints/Windshield-NoShade-Privacy.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/constants/dynamictext-mapper.js b/src/constants/dynamictext-mapper.js new file mode 100644 index 00000000..9191c878 --- /dev/null +++ b/src/constants/dynamictext-mapper.js @@ -0,0 +1,56 @@ +// Used to support custom (non-state) related dynamic text. +// Example: {custom:glassName}, each key in the array is the value after custom:, like 'glassname' +// Please use lowercase only so that we don't have to worry about case sensitivity. + +const customMappings = { + formattedglassname: [ + { key: "Windshield Single", transformedValue: "windshield" }, + { key: "Windshield Driver", transformedValue: "driver side split windshield" }, + { key: "Windshield Passenger", transformedValue: "passenger side split windshield" }, + { key: "Rear Stationary", transformedValue: "rear window" }, + { key: "Rear Slider", transformedValue: "rear window" }, + { key: "Driver Front", transformedValue: "driver side front door" }, + { key: "Driver Back", transformedValue: "driver side back door" }, + { key: "Driver Vent", transformedValue: "driver side vent glass" }, + { key: "Driver Quarter", transformedValue: "driver side quarter panel" }, + { key: "Driver SideDoor", transformedValue: "driver side sliding door" }, + { key: "Passenger Front", transformedValue: "passenger side front door" }, + { key: "Passenger Back", transformedValue: "passenger side back door" }, + { key: "Passenger Vent", transformedValue: "passenger side vent glass" }, + { key: "Passenger Quarter", transformedValue: "passenger side quarter panel" }, + { key: "Passenger SlideDoor", transformedValue: "passenger side sliding door" }, + ], +}; + +// Gets an instance of a string where the dynamic portion of the text {custom:KeyName} +// is replaced by a value from the above map. +// If the value isn't found, return the original dynamic string without replacement +export function getCustomTransformValue(dynamicString, key) { + // Get array key from the dynamic string + const regexExp = new RegExp("{(.*?):(.*?)}", "g"); + const matches = [...dynamicString.matchAll(regexExp)]; + + if (matches.length === 0) { + return dynamicString; + } + + const arrayKey = matches[0][2]; + + // Get the array of possible values based on the key name. + const transformArray = customMappings[arrayKey.toLowerCase()]; + + if (transformArray === undefined) { + return dynamicString; + } + + // Get the value where the name matches the key name, there should only be one so find() is used. + const mapObject = transformArray.find((map) => map.key.toLowerCase() === key.toLowerCase()); + + if (mapObject === undefined) { + return dynamicString; + } + + const finalString = dynamicString.replace(`{custom:${arrayKey}}`, mapObject.transformedValue); + + return finalString; +} diff --git a/src/constants/tint-mapper.js b/src/constants/tint-mapper.js new file mode 100644 index 00000000..308b9a92 --- /dev/null +++ b/src/constants/tint-mapper.js @@ -0,0 +1,94 @@ +// TintMap with array keys by location, lowercase to avoid as much string mismatching as possible. +// Src assumes you have a @/assets/img/tints/, making the final value @/assets/img/tints/{Src} in the markup. +// See vehicle-parts for implementation example. +const tintMap = { + other: [ + // Blue Shade + { name: "blue tint, blue shade", src: "Glass-BlueShade-BlueTint.svg" }, + { name: "brown tint, blue shade", src: "Glass-BlueShade-BrownTint.svg" }, + { name: "gray tint, blue shade", src: "Glass-BlueShade-GrayTint.svg" }, + { name: "green tint, blue shade", src: "Glass-BlueShade-GreenTint.svg" }, + { name: "clear, blue shade", src: "Glass-BlueShade-NoTint.svg" }, + + // Brown Shade + { name: "brown tint, brown shade", src: "Glass-BrownShade-BrownTint.svg" }, + + // Gray Shade + { name: "blue tint, gray shade", src: "Glass-GrayShade-BlueTint.svg" }, + { name: "brown tint, gray shade", src: "Glass-GrayShade-BrownTint.svg" }, + { name: "gray tint, gray shade", src: "Glass-GrayShade-GrayTint.svg" }, + { name: "green tint, gray shade", src: "Glass-GrayShade-GreenTint.svg" }, + + // Green Shade + { name: "blue tint, green shade", src: "Glass-GreenShade-BlueTint.svg" }, + { name: "brown tint, green shade", src: "Glass-GreenShade-BrownTint.svg" }, + { name: "green tint, green shade", src: "Glass-GreenShade-GreenTint.svg" }, + + // Tints Only + { name: "blue tint privacy", src: "Glass-NoShade-BlueTint.svg" }, + { name: "bronze tint", src: "Glass-NoShade-BrownTint.svg" }, + { name: "dark brown tint", src: "Glass-NoShade-DarkBrownTint.svg" }, + { name: "privacy, black frame", src: "Glass-NoShade-Privacy.svg" }, + { name: "gray tint", src: "Glass-NoShade-GrayTint.svg" }, + { name: "green tint", src: "Glass-NoShade-GreenTint.svg" }, + { name: "gray tint privacy", src: "Glass-NoShade-GrayTint.svg" }, + + // No shade or tint + { name: "clear", src: "Glass-NoShade-NoTint.svg" }, + ], + + windshield: [ + // Blue Shade + { name: "blue tint, blue shade", src: "Windshield-BlueShade-BlueTint.svg" }, + { name: "bronze tint, blue shade", src: "Windshield-BlueShade-BrownTint.svg" }, + { name: "gray tint, blue shade", src: "Windshield-BlueShade-GrayTint.svg" }, + { name: "green tint, blue shade", src: "Windshield-BlueShade-GreenTint.svg" }, + { name: "clear, blue shade", src: "Windshield-BlueShade-NoTint.svg" }, + + // Brown Shade + { name: "bronze tint, bronze shade", src: "Windshield-BrownShade-BrownTint.svg" }, + + // Gray Shade + { name: "blue tint, gray shade", src: "Windshield-GrayShade-BlueTint.svg" }, + { name: "brown tint, gray shade", src: "Windshield-GrayShade-BrownTint.svg" }, + { name: "gray tint, gray shade", src: "Windshield-GrayShade-GrayTint.svg" }, + { name: "green tint, gray shade", src: "Windshield-GrayShade-GreenTint.svg" }, + + // Green Shade + { name: "blue tint, green shade", src: "Windshield-GreenShade-BlueTint.svg" }, + { name: "brown tint, green shade", src: "Windshield-GreenShade-BrownTint.svg" }, + { name: "green tint, green shade", src: "Windshield-GreenShade-GreenTint.svg" }, + + // Tints Only + { name: "blue tint", src: "Windshield-NoShade-BlueTint.svg" }, + { name: "bronze tint", src: "Windshield-NoShade-BrownTint.svg" }, + { name: "dark brown tint", src: "Windshield-NoShade-DarkBrownTint.svg" }, + { name: "privacy, black frame", src: "Windshield-NoShade-Privacy.svg" }, + { name: "gray tint", src: "Windshield-NoShade-GrayTint.svg" }, + { name: "green tint", src: "Windshield-NoShade-GreenTint.svg" }, + { name: "gray tint privacy", src: "Windshield-NoShade-GrayTint.svg" }, + + // No shade or tint + { name: "clear", src: "Windshield-NoShade-NoTint.svg" }, + ], +}; + +// Gets the tint image source string given the glass location, and the tint description (like 'Green Tint') +// Use lowered strings here to try to avoid mismatch. Returns an empty string if array key doesn't exist. +// Returns undefined if no items are found. +export function getTintImage(glassLocation, colorString) { + // Windshield glass has special images, all other glass uses the same though. + if (glassLocation.toLowerCase() !== "windshield") { + glassLocation = "other"; + } + + if (tintMap[glassLocation.toLowerCase()] === undefined) { + return ""; + } + + const tintImageSource = tintMap[glassLocation.toLowerCase()].find( + (item) => item.name.toLowerCase() == colorString.toLowerCase() + ); + + return tintImageSource; +} diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index ed273eb5..e9ffeceb 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -46,6 +46,7 @@ export function getMountOptions(mockData) { mocks.issPageValues = issPageValues; mocks.queryStrings = queryStrings; mocks.$router = mockData?.router; + mocks.$route = mockData?.route; const global = { mocks: mocks, 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 new file mode 100644 index 00000000..be741f90 --- /dev/null +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js @@ -0,0 +1,282 @@ +import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question.vue"; +import { useMainStore } from "@/store"; + +const featureListData = { + colorAnswersProp: [ + { + ColorAnswerText: "Green Tint", + FeatureAnswers: [ + { FeatureAnswerText: "heated glass, solar, 1 hole", PartNumber: "DB12209GTYN" }, + ], + }, + { + ColorAnswerText: "Gray Tint Privacy", + FeatureAnswers: [ + { FeatureAnswerText: "heated glass, solar, 1 hole", PartNumber: "DB12209YPYN" }, + ], + }, + ], + glassLocationProp: "Rear", + glassNameProp: "Stationary", + modelValueProp: {}, +}; + +describe("glass-part-question.vue", () => { + test("Part data passed in, should map data for ButtonQuestion (radio type)", async () => { + //Arrange + const { wrapper } = setupMocks(featureListData); + + //Act + await wrapper.vm.$nextTick(); + + //Assert + expect(Object.keys(wrapper.vm.featureListData).length).toBe(2); + expect(wrapper.vm.featureListData["Green Tint"][0].Text).toBe( + "heated glass, solar, 1 hole" + ); + expect(wrapper.vm.featureListData["Green Tint"][0].Name).toBe("DB12209GTYN"); + expect(wrapper.vm.featureListData["Gray Tint Privacy"][0].Text).toBe( + "heated glass, solar, 1 hole" + ); + expect(wrapper.vm.featureListData["Gray Tint Privacy"][0].Name).toBe("DB12209YPYN"); + }); + + + test("Tint mapper, should get tint image by glassLocation and tintColor", async () => { + //Arrange + + const { wrapper } = setupMocks(featureListData); + + //Act + await wrapper.vm.$nextTick(); + const tintSourceImage = wrapper.vm.getTintSourceImage("Rear", "Green Tint"); + + //Assert + expect(tintSourceImage).toBe("Glass-NoShade-GreenTint.svg"); + }); + + test("Tint mapper, should return empty string if no tint map found", async () => { + //Arrange + + const { wrapper } = setupMocks(featureListData); + + //Act + await wrapper.vm.$nextTick(); + const tintSourceImage = wrapper.vm.getTintSourceImage("Rear", "Crazy Rainbow Tint"); + + //Assert + expect(tintSourceImage).toBe(""); + }); + + test("Should emit updateModelValue, and have correct attributes", async () => { + //Arrange + + featureListData.pageData = { + partsOrQuestions: [ + { + glassName: "Stationary", + glassLocation: "Rear", + parts: [{ partNumber: "DB12209GTYN", color: "Green Tint" }], + }, + ], + }; + + const { wrapper } = setupMocks(featureListData); + + //Act + await wrapper.vm.$nextTick(); + const listCard = await wrapper.findComponent({ + name: "buttonQuestion", + }); + console.log(listCard) + await wrapper.setData({ selectedTint: "Green Tint" }); + // to trigger the computed setter + wrapper.vm.selectedPartNumber = "DB12209GTYN"; + + //Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([ + { partNumber: "DB12209GTYN", color: "Green Tint" }, + ]); + expect(listCard.attributes("groupname")).toBe("Rear-Stationary"); + expect(listCard.attributes("validationrules")).toBe("Rear-Stationary-tint-required"); + }); +/* + test("ResetTintAndPartSelections, should reset data elements ", async () => { + //Arrange + const { wrapper } = setupMocks(featureListData); + + //Act + await wrapper.vm.$nextTick(); + 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).toEqual("Green Tint"); + 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 + + useMainStore().applicationUser.pageData = { + 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, pageData }) { + //Mock store + const store = useMainStore(); + store.applicationUser.pageData = pageData ?? { + partsOrQuestions: [{ glassName: "Stationary", glassLocation: "Rear", parts: [] }], + }; + + const mountOptions = getMountOptions({ + route: { + query: { + iisPage: "vehicle-parts", + }, + }, + }); + + mountOptions.propsData = { + glassName: glassNameProp, + glassLocation: glassLocationProp, + colorAnswers: colorAnswersProp, + modelValue: modelValueProp, + }; + + const wrapper = shallowMount(glassPartQuestion, mountOptions); + + return { wrapper }; +} 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 new file mode 100644 index 00000000..67040080 --- /dev/null +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -0,0 +1,231 @@ + + + + +