From dec7defb2a78b1a8f27a14886cdcf40a4cac490c Mon Sep 17 00:00:00 2001 From: Frank Date: Thu, 4 Nov 2021 10:41:31 -0400 Subject: [PATCH 01/12] Added Jest unit test coverage support --- jest.config.js | 19 ++++++--- package-lock.json | 104 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 3 +- 3 files changed, 120 insertions(+), 6 deletions(-) diff --git a/jest.config.js b/jest.config.js index e5ceb43e4..9355213be 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,9 +1,18 @@ module.exports = { + verbose: true, + coverageReporters: ['html', 'text', 'jest-junit'], preset: "@vue/cli-plugin-unit-jest", - transform: { - "^.+\\.vue$": "vue-jest", + transform: { "^.+\\.vue$": "vue-jest", }, + moduleFileExtensions: ['js', 'vue'], + collectCoverageFrom: ["src/**/*.{js,vue}",], + testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], + coverageThreshold: { + global: { + statements: 90, + } }, - testMatch : [ - "**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)" - ], }; + +// Exclude constants folder +// Exclude js config files +// Exclude main.js diff --git a/package-lock.json b/package-lock.json index e14dd267e..75d820345 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "canvas-confetti": "^1.4.0", "core-js": "^3.6.5", "http-status-codes": "^2.1.4", + "jest-junit": "^13.0.0", "vue": "^3.0.0", "vue-router": "^4.0.11", "vuex": "^4.0.2", @@ -10962,6 +10963,58 @@ "node": ">= 6" } }, + "node_modules/jest-junit": { + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-13.0.0.tgz", + "integrity": "sha512-JSHR+Dhb32FGJaiKkqsB7AR3OqWKtldLd6ZH2+FJ8D4tsweb8Id8zEVReU4+OlrRO1ZluqJLQEETm+Q6/KilBg==", + "dependencies": { + "mkdirp": "^1.0.4", + "strip-ansi": "^6.0.1", + "uuid": "^8.3.2", + "xml": "^1.0.1" + }, + "engines": { + "node": ">=10.12.0" + } + }, + "node_modules/jest-junit/node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/jest-junit/node_modules/mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==", + "bin": { + "mkdirp": "bin/cmd.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/jest-junit/node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/jest-junit/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/jest-leak-detector": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz", @@ -11695,6 +11748,9 @@ "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", "dev": true, + "dependencies": { + "graceful-fs": "^4.1.6" + }, "optionalDependencies": { "graceful-fs": "^4.1.6" } @@ -17952,6 +18008,7 @@ "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==", "dev": true, "dependencies": { + "chokidar": "^3.4.1", "graceful-fs": "^4.1.2", "neo-async": "^2.5.0", "watchpack-chokidar2": "^2.0.1" @@ -18016,6 +18073,7 @@ "anymatch": "^2.0.0", "async-each": "^1.0.1", "braces": "^2.3.2", + "fsevents": "^1.2.7", "glob-parent": "^3.1.0", "inherits": "^2.0.3", "is-binary-path": "^1.0.0", @@ -18928,6 +18986,11 @@ "async-limiter": "~1.0.0" } }, + "node_modules/xml": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz", + "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=" + }, "node_modules/xml-name-validator": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz", @@ -27812,6 +27875,42 @@ "throat": "^4.0.0" } }, + "jest-junit": { + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/jest-junit/-/jest-junit-13.0.0.tgz", + "integrity": "sha512-JSHR+Dhb32FGJaiKkqsB7AR3OqWKtldLd6ZH2+FJ8D4tsweb8Id8zEVReU4+OlrRO1ZluqJLQEETm+Q6/KilBg==", + "requires": { + "mkdirp": "^1.0.4", + "strip-ansi": "^6.0.1", + "uuid": "^8.3.2", + "xml": "^1.0.1" + }, + "dependencies": { + "ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" + }, + "mkdirp": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz", + "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==" + }, + "strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "requires": { + "ansi-regex": "^5.0.1" + } + }, + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + } + } + }, "jest-leak-detector": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz", @@ -34359,6 +34458,11 @@ "async-limiter": "~1.0.0" } }, + "xml": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz", + "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU=" + }, "xml-name-validator": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz", diff --git a/package.json b/package.json index 1a4a03c8c..2fe60a35b 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", - "test:unit": "vue-cli-service test:unit", + "test:unit": "vue-cli-service test:unit --coverage --ci", "lint": "vue-cli-service lint" }, "dependencies": { @@ -22,6 +22,7 @@ }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", + "jest-junit": "^13.0.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-unit-jest": "~4.5.0", "@vue/cli-service": "~4.5.0", From 18bd1d555525e6b543ea38b6b6767942aee1cc27 Mon Sep 17 00:00:00 2001 From: Frank Date: Fri, 5 Nov 2021 09:37:37 -0400 Subject: [PATCH 02/12] Exclude some files --- jest.config.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/jest.config.js b/jest.config.js index 9355213be..8afac2dcd 100644 --- a/jest.config.js +++ b/jest.config.js @@ -4,7 +4,7 @@ module.exports = { preset: "@vue/cli-plugin-unit-jest", transform: { "^.+\\.vue$": "vue-jest", }, moduleFileExtensions: ['js', 'vue'], - collectCoverageFrom: ["src/**/*.{js,vue}",], + collectCoverageFrom: ["src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js"], //! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], coverageThreshold: { global: { @@ -12,7 +12,3 @@ module.exports = { } }, }; - -// Exclude constants folder -// Exclude js config files -// Exclude main.js From e6e9ceb22ed8545fc33bf3ff791a27978703adbb Mon Sep 17 00:00:00 2001 From: FrankSafelite Date: Mon, 15 Nov 2021 09:35:23 -0500 Subject: [PATCH 03/12] Excluded router --- jest.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jest.config.js b/jest.config.js index 8afac2dcd..cfe877c25 100644 --- a/jest.config.js +++ b/jest.config.js @@ -4,7 +4,7 @@ module.exports = { preset: "@vue/cli-plugin-unit-jest", transform: { "^.+\\.vue$": "vue-jest", }, moduleFileExtensions: ['js', 'vue'], - collectCoverageFrom: ["src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js"], //! means exclude from coverage. + collectCoverageFrom: ["src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js", "!src/router/*.js"], //! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], coverageThreshold: { global: { From ee1cb28db6f0dcff697bfacadc60300a370ebd8a Mon Sep 17 00:00:00 2001 From: FrankSafelite Date: Mon, 15 Nov 2021 10:42:02 -0500 Subject: [PATCH 04/12] excluded helpers --- jest.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jest.config.js b/jest.config.js index cfe877c25..b01ebaadf 100644 --- a/jest.config.js +++ b/jest.config.js @@ -4,7 +4,7 @@ module.exports = { preset: "@vue/cli-plugin-unit-jest", transform: { "^.+\\.vue$": "vue-jest", }, moduleFileExtensions: ['js', 'vue'], - collectCoverageFrom: ["src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js", "!src/router/*.js"], //! means exclude from coverage. + collectCoverageFrom: ["src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js", "!src/router/*.js", "!src/helpers/*.js"], //! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], coverageThreshold: { global: { From 8e0f9bf81649a29f4d79c0afc6db6d0cc2fb5a8b Mon Sep 17 00:00:00 2001 From: Frank Date: Wed, 17 Nov 2021 14:54:00 -0500 Subject: [PATCH 05/12] Multiple refactor / improving changes --- jest.config.js | 2 +- src/constants/endpoints.js | 5 +- src/constants/storeActions.js | 3 +- src/constants/widgetNames.js | 3 +- src/global-methods.js | 1 - src/layouts/selectMake/selectMake.spec.js | 1 - src/layouts/selectMake/selectMake.vue | 48 ------- src/layouts/selectModel/selectModel.spec.js | 1 - src/layouts/selectModel/selectModel.vue | 46 ------- src/layouts/selectStyle/selectStyle.spec.js | 1 - src/layouts/selectStyle/selectStyle.vue | 47 ------- src/layouts/selectYear/selectYear.vue | 78 ------------ .../vehicle-year.spec.js} | 0 src/layouts/vehicle-year/vehicle-year.vue | 42 +++++++ .../year-question/year-question.spec.js | 0 .../year-question/year-question.vue | 44 +++++++ src/mixins/baseMixin.js | 41 +++++- src/router/index.js | 4 +- src/store/index.js | 118 ++++-------------- vue.config.js | 10 -- 20 files changed, 159 insertions(+), 336 deletions(-) delete mode 100644 src/layouts/selectMake/selectMake.spec.js delete mode 100644 src/layouts/selectMake/selectMake.vue delete mode 100644 src/layouts/selectModel/selectModel.spec.js delete mode 100644 src/layouts/selectModel/selectModel.vue delete mode 100644 src/layouts/selectStyle/selectStyle.spec.js delete mode 100644 src/layouts/selectStyle/selectStyle.vue delete mode 100644 src/layouts/selectYear/selectYear.vue rename src/layouts/{selectYear/selectYear.spec.js => vehicle-year/vehicle-year.spec.js} (100%) create mode 100644 src/layouts/vehicle-year/vehicle-year.vue create mode 100644 src/layouts/vehicle-year/year-question/year-question.spec.js create mode 100644 src/layouts/vehicle-year/year-question/year-question.vue diff --git a/jest.config.js b/jest.config.js index b01ebaadf..c12380928 100644 --- a/jest.config.js +++ b/jest.config.js @@ -4,7 +4,7 @@ module.exports = { preset: "@vue/cli-plugin-unit-jest", transform: { "^.+\\.vue$": "vue-jest", }, moduleFileExtensions: ['js', 'vue'], - collectCoverageFrom: ["src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js", "!src/router/*.js", "!src/helpers/*.js"], //! means exclude from coverage. + collectCoverageFrom: ["src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js", "!src/router/**/*.js", "!src/helpers/*.js"], //! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], coverageThreshold: { global: { diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index a390db3ec..468e4f3b0 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -11,15 +11,16 @@ const endpoints = { url: '/vehicle/api/v1/vehicle/Makes', method: 'POST' }, - GetModels: { + GetVehicleModels: { url: '/vehicle/api/v1/vehicle/Models', - method: 'POST' + method: 'GET' }, GetStyles: { url: '/vehicle/api/v1/vehicle/Styles', method: 'POST' }, GetPageData: { + url: '/content/api/v1/content/{pageName}', method: 'GET' } } diff --git a/src/constants/storeActions.js b/src/constants/storeActions.js index 5ef5a3157..e576e8ed2 100644 --- a/src/constants/storeActions.js +++ b/src/constants/storeActions.js @@ -1,7 +1,8 @@ const storeActions = { GET_ROUTE_INFO_ACTION: "getRouteInfo", GET_YEARS: 'getYears', - GET_PAGE_DATA: 'getMockPageData', + GET_VEHICLE_MODELS: 'getVehicleModels', + GET_PAGE_DATA: 'getPageData', } export { storeActions } \ No newline at end of file diff --git a/src/constants/widgetNames.js b/src/constants/widgetNames.js index 013083bcf..e15d2d7f8 100644 --- a/src/constants/widgetNames.js +++ b/src/constants/widgetNames.js @@ -1,6 +1,7 @@ const widgetNames = { - PAGE_HEADING_WIDGET: "PageHeadingWidget", + HEADER_TEXT_WIDGET: "HeaderTextWidget", RADIO_QUESTION_WIDGET: "RadioQuestionWidget" } + export { widgetNames } \ No newline at end of file diff --git a/src/global-methods.js b/src/global-methods.js index 0b33cf613..1b120b662 100644 --- a/src/global-methods.js +++ b/src/global-methods.js @@ -16,7 +16,6 @@ export default { crossDomain: true, responseType: {}, }).then((response) => { - if (response.status == httpStatusCodes.OK) { resolve(response); } else { diff --git a/src/layouts/selectMake/selectMake.spec.js b/src/layouts/selectMake/selectMake.spec.js deleted file mode 100644 index 882a68129..000000000 --- a/src/layouts/selectMake/selectMake.spec.js +++ /dev/null @@ -1 +0,0 @@ -test.todo('some test to be written in the future'); \ No newline at end of file diff --git a/src/layouts/selectMake/selectMake.vue b/src/layouts/selectMake/selectMake.vue deleted file mode 100644 index 8821286a3..000000000 --- a/src/layouts/selectMake/selectMake.vue +++ /dev/null @@ -1,48 +0,0 @@ - - - diff --git a/src/layouts/selectModel/selectModel.spec.js b/src/layouts/selectModel/selectModel.spec.js deleted file mode 100644 index 882a68129..000000000 --- a/src/layouts/selectModel/selectModel.spec.js +++ /dev/null @@ -1 +0,0 @@ -test.todo('some test to be written in the future'); \ No newline at end of file diff --git a/src/layouts/selectModel/selectModel.vue b/src/layouts/selectModel/selectModel.vue deleted file mode 100644 index 4c0bd9b0d..000000000 --- a/src/layouts/selectModel/selectModel.vue +++ /dev/null @@ -1,46 +0,0 @@ - - - diff --git a/src/layouts/selectStyle/selectStyle.spec.js b/src/layouts/selectStyle/selectStyle.spec.js deleted file mode 100644 index 882a68129..000000000 --- a/src/layouts/selectStyle/selectStyle.spec.js +++ /dev/null @@ -1 +0,0 @@ -test.todo('some test to be written in the future'); \ No newline at end of file diff --git a/src/layouts/selectStyle/selectStyle.vue b/src/layouts/selectStyle/selectStyle.vue deleted file mode 100644 index 731b0d8d9..000000000 --- a/src/layouts/selectStyle/selectStyle.vue +++ /dev/null @@ -1,47 +0,0 @@ - - - diff --git a/src/layouts/selectYear/selectYear.vue b/src/layouts/selectYear/selectYear.vue deleted file mode 100644 index 3b633b005..000000000 --- a/src/layouts/selectYear/selectYear.vue +++ /dev/null @@ -1,78 +0,0 @@ - - - diff --git a/src/layouts/selectYear/selectYear.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js similarity index 100% rename from src/layouts/selectYear/selectYear.spec.js rename to src/layouts/vehicle-year/vehicle-year.spec.js diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue new file mode 100644 index 000000000..24df9fe74 --- /dev/null +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -0,0 +1,42 @@ + + + diff --git a/src/layouts/vehicle-year/year-question/year-question.spec.js b/src/layouts/vehicle-year/year-question/year-question.spec.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue new file mode 100644 index 000000000..4dbad4e38 --- /dev/null +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -0,0 +1,44 @@ + + + diff --git a/src/mixins/baseMixin.js b/src/mixins/baseMixin.js index 414d8bb47..600e489d1 100644 --- a/src/mixins/baseMixin.js +++ b/src/mixins/baseMixin.js @@ -11,16 +11,53 @@ export default { // globalMethods.showWaitingModal(false); });; }, - dispatchNonBlockingStoreAction(type, payload) { + dispatchNonBlockingStoreAction(type, payload, encodePayload = false) { + + // Encode the payload if required + if (encodePayload) { + encodeUriData(payload); + } + return this.$store.dispatch(type, payload); }, + + GetContentFromCms() { + return this.dispatchNonBlockingStoreAction(this.storeActions.GET_PAGE_DATA, { pageName: this.$route.query.fmgPage }) + .then((response) => { + + const pageDataFromCms = {}; + + response.data.Result.forEach((widget) => { + if (Object.values(this.widgetNames).includes(widget.Type)) { + // If we already have this widget, push it on the collection + if (widget.Type in pageDataFromCms) { + pageDataFromCms[widget.Type].push(widget.Model); + return; + } + + pageDataFromCms[widget.Type] = [widget.Model]; + } + }); + + return pageDataFromCms; + }); + } }, computed: { storeActions() { return storeActions; }, - widgetNames(){ + widgetNames() { return widgetNames; } }, +} + +function encodeUriData(payload) { + if (payload && Object.keys(payload).length > 0) { + // Loop through the payload and encode the values + Object.keys(payload).forEach(key => { + payload[key] = encodeURIComponent(payload[key]); + }); + } } \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 836a6256e..415fb0292 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -38,7 +38,7 @@ const routes = [ // Add our dynamic route. router.addRoute({ - path: '/', // Always the same path, because we control it with query strings. + path: routeData[0].path, // Always the same path, because we control it with query strings. name: routeData[0].name, component: routeData[0].component, }); @@ -81,7 +81,7 @@ function GetRouteInfoFromPageName(pageName) { Object.keys(jsonFromResponse).forEach((key) => { routeData.push({ - path: `${jsonFromResponse[key].RelativeUrl}`, + path: '/', name: `${key}`, component: lazyLoadComponent(jsonFromResponse[key].LayoutName), }); diff --git a/src/store/index.js b/src/store/index.js index e861a5ff0..1e7ab1024 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -10,103 +10,33 @@ export default createStore({ }), ], state: { - makes: [], - models: [], - styles: [], - year: "", - make: "", - model: "", - style: "", - slideTransition: "none", - carImg: - "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg", - blurImg: true, }, mutations: { - updateYear(state, data) { - state.year = data.year; - state.makes = data.makes.data; - state.slideTransition = "slide"; - }, - updateMake(state, data) { - state.make = data.make; - state.models = data.models.data; - state.slideTransition = "slide"; - }, - updateModel(state, data) { - state.model = data.model; - state.styles = data.styles.data; - state.slideTransition = "slide"; - }, - updateStyle(state, data) { - state.style = data.style; - state.carImg = - "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg"; - state.blurImg = false; - state.slideTransition = "slide"; - }, - removeStyle(state) { - state.style = ""; - state.blurImg = true; - state.carImg = - "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg"; - }, }, actions: { - getYears(){ - return globalMethods.callHttpClient({ - method: endpoints.GetYears.method, - endpoint: endpoints.GetYears.url, - payload:{} - }); - }, - selectYear(context, { year }) { - return globalMethods.callHttpClient({ - method: endpoints.GetMakes.method, - endpoint: endpoints.GetMakes.url, - payload:{ - "Year": year - } - }); - }, - selectMake({ commit, state }, { make }) { - return globalMethods.callHttpClient({ - method: endpoints.GetModels.method, - endpoint: endpoints.GetModels.url, - payload:{ - "Year": state.year, - "Make": make - } - }); - }, - selectModel({ commit, state }, { model }) { - return globalMethods.callHttpClient({ - method: endpoints.GetStyles.method, - endpoint: endpoints.GetStyles.url, - payload:{ - "Year": state.year, - "Make": state.make, - "Model": model - } - }); - }, - getRouteInfo(context, { relativeUrl }) { - return globalMethods.callHttpClient({ - method: endpoints.GetRouteInfoEndpoint.method, - endpoint: endpoints.GetRouteInfoEndpoint.url, - payload: { - relativeUrl: relativeUrl, - }, - }); - }, - // For mock data purposes only - getMockPageData(context, { relativeUrl }) { - return globalMethods.callMockHttpClient({ - method: endpoints.GetPageData.method, - endpoint: relativeUrl, - payload: { - }, - }); - }, + getVehicleModels({ commit, state }, { year, make }) { + console.log(arguments); + return globalMethods.callHttpClient({ + method: endpoints.GetVehicleModels.method, + endpoint: `${endpoints.GetVehicleModels.url}/${year}/${encodeURI(make)}`, + payload: {} + }); + }, + getRouteInfo(context, { pageName }) { + return globalMethods.callHttpClient({ + method: endpoints.GetRouteInfoEndpoint.method, + endpoint: endpoints.GetRouteInfoEndpoint.url, + payload: { + pageName: pageName, + }, + }); + }, + getPageData(context, { pageName }) { + return globalMethods.callHttpClient({ + method: endpoints.GetPageData.method, + endpoint: endpoints.GetPageData.url.replace("{pageName}", pageName), + payload: {}, + }); + }, }, }); diff --git a/vue.config.js b/vue.config.js index bda41b2dd..02f606a6c 100644 --- a/vue.config.js +++ b/vue.config.js @@ -3,16 +3,6 @@ process.env.VUE_APP_CONSUMER_API_GATEWAY = "https://consumerapidev.safelite.com" module.exports = { outputDir: "dist/fmg", publicPath: "/fmg", - devServer: { - port: 8080, - proxy: { - "api/v1/content*": { - target: "https://localhost:44360/", - ws: false, - changeOrigin: true, - }, - }, - }, css: { loaderOptions: { sass: { // Load Order Matters!!! From a500ad19e962fa5a9e386e741d83018a77cfe233 Mon Sep 17 00:00:00 2001 From: Frank Date: Wed, 17 Nov 2021 15:56:06 -0500 Subject: [PATCH 06/12] lint + correcting some actions --- jest.config.js | 16 ++- src/App.vue | 1 - .../radioQuestion/radioQuestion.spec.js | 44 ++++--- .../radioQuestion/radioQuestion.vue | 23 ++-- src/constants/applicationConfig.js | 6 +- src/constants/endpoints.js | 52 ++++---- src/constants/storeActions.js | 14 ++- src/constants/widgetNames.js | 9 +- src/global-methods.js | 20 +-- src/global-methods.spec.js | 117 +++++++++--------- src/helpers/unitTestHelper.js | 40 +++--- src/layouts/componentTest/componentTest.vue | 37 +++--- src/layouts/notFound/notFound.vue | 4 +- src/layouts/vehicle-year/vehicle-year.spec.js | 95 +++++++------- src/layouts/vehicle-year/vehicle-year.vue | 32 ++--- .../year-question/year-question.vue | 36 ++---- src/main.js | 4 +- src/mixins/baseMixin.js | 99 ++++++++------- src/router/index.js | 47 ++++--- src/store/index.js | 45 +++++-- .../buttonPrimary/buttonPrimary.spec.js | 2 +- .../buttonPrimary/buttonPrimary.vue | 6 +- .../buttonSecondary/buttonSecondary.spec.js | 2 +- .../buttonSecondary/buttonSecondary.vue | 4 +- src/uxComponents/confetti/confetti.spec.js | 2 +- src/uxComponents/header/header.spec.js | 28 ++--- src/uxComponents/header/header.vue | 14 +-- .../listButton/listButton.spec.js | 2 +- src/uxComponents/listButton/listButton.vue | 11 +- src/uxComponents/radio/radio.spec.js | 42 +++---- src/uxComponents/radio/radio.vue | 28 ++--- src/uxComponents/radioCard/radioCard.spec.js | 2 +- src/uxComponents/radioCard/radioCard.vue | 5 +- src/uxComponents/radioList/radioList.spec.js | 2 +- src/uxComponents/radioList/radioList.vue | 36 +++--- vue.config.js | 14 ++- vue.release.config.js | 11 +- 37 files changed, 488 insertions(+), 464 deletions(-) diff --git a/jest.config.js b/jest.config.js index c12380928..036286c62 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,14 +1,20 @@ module.exports = { verbose: true, - coverageReporters: ['html', 'text', 'jest-junit'], + coverageReporters: ["html", "text", "jest-junit"], preset: "@vue/cli-plugin-unit-jest", - transform: { "^.+\\.vue$": "vue-jest", }, - moduleFileExtensions: ['js', 'vue'], - collectCoverageFrom: ["src/**/*.{js,vue}", "!src/main.js", "!src/constants/*.js", "!src/router/**/*.js", "!src/helpers/*.js"], //! means exclude from coverage. + transform: { "^.+\\.vue$": "vue-jest" }, + moduleFileExtensions: ["js", "vue"], + collectCoverageFrom: [ + "src/**/*.{js,vue}", + "!src/main.js", + "!src/constants/*.js", + "!src/router/**/*.js", + "!src/helpers/*.js", + ], //! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], coverageThreshold: { global: { statements: 90, - } + }, }, }; diff --git a/src/App.vue b/src/App.vue index 57b5ffe58..a44ab87b7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,4 +1,3 @@ - diff --git a/src/commonComponents/radioQuestion/radioQuestion.spec.js b/src/commonComponents/radioQuestion/radioQuestion.spec.js index a9ba7476e..bf779fcff 100644 --- a/src/commonComponents/radioQuestion/radioQuestion.spec.js +++ b/src/commonComponents/radioQuestion/radioQuestion.spec.js @@ -1,22 +1,26 @@ -import { shallowMount } from '@vue/test-utils'; -import radioQuestion from './radioQuestion'; +import { shallowMount } from "@vue/test-utils"; +import radioQuestion from "./radioQuestion"; -describe('radioQuestion.vue', () => { - it("Should render the 'questionText' prop value as a span value for the radio question and the 'answer' values should render as text values for radio components.", () => { - // Act - const wrapper = shallowMount(radioQuestion, { - propsData: { - questionText: 'Question Text', - answers: ['2023', '2022', '2021'], - chooseAnswer: function(test){ console.log(test) } - } - }); +describe("radioQuestion.vue", () => { + it("Should render the 'questionText' prop value as a span value for the radio question and the 'answer' values should render as text values for radio components.", () => { + // Act + const wrapper = shallowMount(radioQuestion, { + propsData: { + questionText: "Question Text", + answers: ["2023", "2022", "2021"], + chooseAnswer: function (test) { + console.log(test); + }, + }, + }); - // Assert - expect(wrapper.find('.needed_car_info-text').text()).toEqual('Question Text'); - const radioButtons = wrapper.findAllComponents('[data-test="radio"]'); - expect(radioButtons[0].attributes('text')).toEqual('2023'); - expect(radioButtons[2].attributes('text')).toEqual('2021'); - expect(typeof wrapper.props().chooseAnswer).toBe('function'); - }) -}) \ No newline at end of file + // Assert + expect(wrapper.find(".needed_car_info-text").text()).toEqual( + "Question Text" + ); + const radioButtons = wrapper.findAllComponents('[data-test="radio"]'); + expect(radioButtons[0].attributes("text")).toEqual("2023"); + expect(radioButtons[2].attributes("text")).toEqual("2021"); + expect(typeof wrapper.props().chooseAnswer).toBe("function"); + }); +}); diff --git a/src/commonComponents/radioQuestion/radioQuestion.vue b/src/commonComponents/radioQuestion/radioQuestion.vue index 7e8b16c55..feeba3d08 100644 --- a/src/commonComponents/radioQuestion/radioQuestion.vue +++ b/src/commonComponents/radioQuestion/radioQuestion.vue @@ -1,13 +1,20 @@ @@ -18,10 +25,10 @@ export default { props: { questionText: String, answers: Array, - chooseAnswer: Function + chooseAnswer: Function, }, components: { - radio - } + radio, + }, }; diff --git a/src/constants/applicationConfig.js b/src/constants/applicationConfig.js index 78c0387c5..4b80d25d1 100644 --- a/src/constants/applicationConfig.js +++ b/src/constants/applicationConfig.js @@ -1,5 +1,5 @@ const applicationConfig = { -CONSUMER_APIGATEWAY_URL: process.env.VUE_APP_CONSUMER_API_GATEWAY -} + CONSUMER_APIGATEWAY_URL: process.env.VUE_APP_CONSUMER_API_GATEWAY, +}; -export { applicationConfig } \ No newline at end of file +export { applicationConfig }; diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 468e4f3b0..9ba245c34 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -1,28 +1,28 @@ const endpoints = { - GetRouteInfoEndpoint: { - url: '/content/api/v1/content/RouteInfo', - method: 'POST' - }, - GetYears: { - url: '/vehicle/api/v1/vehicle/years', - method: 'GET' - }, - GetMakes: { - url: '/vehicle/api/v1/vehicle/Makes', - method: 'POST' - }, - GetVehicleModels: { - url: '/vehicle/api/v1/vehicle/Models', - method: 'GET' - }, - GetStyles: { - url: '/vehicle/api/v1/vehicle/Styles', - method: 'POST' - }, - GetPageData: { - url: '/content/api/v1/content/{pageName}', - method: 'GET' - } -} + GetRouteInfo: { + url: "/content/api/v1/content/RouteInfo", + method: "POST", + }, + GetVehicleYears: { + url: "/vehicle/api/v1/vehicle/years", + method: "GET", + }, + GetVehicleMakes: { + url: "/vehicle/api/v1/vehicle/Makes", + method: "GET", + }, + GetVehicleModels: { + url: "/vehicle/api/v1/vehicle/Models", + method: "GET", + }, + GetVehicleStyles: { + url: "/vehicle/api/v1/vehicle/Styles", + method: "GET", + }, + GetPageData: { + url: "/content/api/v1/content", + method: "GET", + }, +}; -export { endpoints } \ No newline at end of file +export { endpoints }; diff --git a/src/constants/storeActions.js b/src/constants/storeActions.js index e576e8ed2..75478ba7e 100644 --- a/src/constants/storeActions.js +++ b/src/constants/storeActions.js @@ -1,8 +1,10 @@ const storeActions = { - GET_ROUTE_INFO_ACTION: "getRouteInfo", - GET_YEARS: 'getYears', - GET_VEHICLE_MODELS: 'getVehicleModels', - GET_PAGE_DATA: 'getPageData', -} + GET_ROUTE_INFO_ACTION: "getRouteInfo", + GET_PAGE_DATA: "getPageData", + GET_VEHICLE_YEARS: "getVehicleYears", + GET_VEHICLE_MAKES: "getVehicleMakes", + GET_VEHICLE_MODELS: "getVehicleModels", + GET_VEHICLE_STYLES: "getVehicleStyles", +}; -export { storeActions } \ No newline at end of file +export { storeActions }; diff --git a/src/constants/widgetNames.js b/src/constants/widgetNames.js index e15d2d7f8..6fd0a1196 100644 --- a/src/constants/widgetNames.js +++ b/src/constants/widgetNames.js @@ -1,7 +1,6 @@ const widgetNames = { - HEADER_TEXT_WIDGET: "HeaderTextWidget", - RADIO_QUESTION_WIDGET: "RadioQuestionWidget" -} + HEADER_TEXT_WIDGET: "HeaderTextWidget", + RADIO_QUESTION_WIDGET: "RadioQuestionWidget", +}; - -export { widgetNames } \ No newline at end of file +export { widgetNames }; diff --git a/src/global-methods.js b/src/global-methods.js index 1b120b662..72d079b42 100644 --- a/src/global-methods.js +++ b/src/global-methods.js @@ -3,11 +3,12 @@ import { applicationConfig } from "@/constants/applicationConfig.js"; import httpStatusCodes from "http-status-codes"; export default { - callHttpClient({ method, endpoint, payload}) { + callHttpClient({ method, endpoint, payload }) { return new Promise((resolve, reject) => { - const apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL; - const payloadAndAnalyticsData = Object.assign({}, payload, {AppName: "FixMyGlass"}); + const payloadAndAnalyticsData = Object.assign({}, payload, { + AppName: "FixMyGlass", + }); axios({ method: method, @@ -15,7 +16,8 @@ export default { data: payloadAndAnalyticsData, crossDomain: true, responseType: {}, - }).then((response) => { + }).then( + (response) => { if (response.status == httpStatusCodes.OK) { resolve(response); } else { @@ -29,19 +31,17 @@ export default { }); }, - /* istanbul ignore next */ - callMockHttpClient({ method, endpoint}) { + callMockHttpClient({ method, endpoint }) { // For Mock use only! return new Promise((resolve, reject) => { - axios({ method: method, url: endpoint, crossDomain: true, responseType: {}, - }).then((response) => { - + }).then( + (response) => { if (response.status == httpStatusCodes.OK) { resolve(response); } else { @@ -53,5 +53,5 @@ export default { } ); }); - } + }, }; diff --git a/src/global-methods.spec.js b/src/global-methods.spec.js index 6885a23e0..59fa15b77 100644 --- a/src/global-methods.spec.js +++ b/src/global-methods.spec.js @@ -1,73 +1,76 @@ import globalMethods from "@/global-methods"; -import axios from 'axios'; +import axios from "axios"; //Mock external dependencies -jest.mock('axios'); +jest.mock("axios"); it("Global Methods - Call Http Client - Should Resolve Promise", () => { - //Arrange - const endpoint = 'https://mock.safelite.com'; - const httpArgs = setupMocksForHttpClient({ endpoint: endpoint }); + //Arrange + const endpoint = "https://mock.safelite.com"; + const httpArgs = setupMocksForHttpClient({ endpoint: endpoint }); - //Act - globalMethods.callHttpClient(httpArgs) - .then((response) => { - - //Assert - expect(axios.mock.calls[0][0].url).toContain(endpoint); - expect(response.data.message).toContain('Success'); - expect(response.status).toEqual(200); - }); + //Act + globalMethods.callHttpClient(httpArgs).then((response) => { + //Assert + expect(axios.mock.calls[0][0].url).toContain(endpoint); + expect(response.data.message).toContain("Success"); + expect(response.status).toEqual(200); + }); }); it("Global Methods - Call Http Client - Should Reject Promise", () => { - //Arrange - const endpoint = 'https://mock.safelite.com'; - const httpArgs = setupMocksForHttpClient({ endpoint: endpoint, isError: true }); + //Arrange + const endpoint = "https://mock.safelite.com"; + const httpArgs = setupMocksForHttpClient({ + endpoint: endpoint, + isError: true, + }); - //Act - globalMethods.callHttpClient(httpArgs) - .catch((err) => { - //Assert - expect(axios.mock.calls[0][0].url).toContain(endpoint); - expect(err.data.message).toContain('Error'); - expect(err.status).toEqual(500); - }); + //Act + globalMethods.callHttpClient(httpArgs).catch((err) => { + //Assert + expect(axios.mock.calls[0][0].url).toContain(endpoint); + expect(err.data.message).toContain("Error"); + expect(err.status).toEqual(500); + }); }); -function setupMocksForHttpClient({ endpoint = null, isError = false, additionalData = null }) { +function setupMocksForHttpClient({ + endpoint = null, + isError = false, + additionalData = null, +}) { + //Clear node module + axios.mockClear(); - //Clear node module - axios.mockClear(); + // Success Response + const response = { + status: 200, + data: { + message: "Success", + additionalData: additionalData, + }, + }; - // Success Response - const response = { - status: 200, - data: { - message: 'Success', - additionalData: additionalData - } - }; + // Error Response + const error = { + response: { + status: 500, + data: { + message: "Error", + additionalData: additionalData, + }, + }, + }; - // Error Response - const error = { - response: { - status: 500, - data: { - message: 'Error', - additionalData: additionalData - } - } - } + // Error interceptor on Axios returns a different object, so we need to mimic that. + if (isError) { + axios.mockRejectedValue(error); + } else { + axios.mockResolvedValue(response); + } - // Error interceptor on Axios returns a different object, so we need to mimic that. - if (isError) { - axios.mockRejectedValue(error); - } else { - axios.mockResolvedValue(response); - } - - return { - endpoint: endpoint - } -} \ No newline at end of file + return { + endpoint: endpoint, + }; +} diff --git a/src/helpers/unitTestHelper.js b/src/helpers/unitTestHelper.js index 417b47e43..e24e141d5 100644 --- a/src/helpers/unitTestHelper.js +++ b/src/helpers/unitTestHelper.js @@ -1,26 +1,26 @@ import { storeActions } from "@/constants/storeActions"; export function getMountOptions(mockData) { - // Define our mocks to attached to the 'global' object for Vue/Jest. - const mocks = {}; + // Define our mocks to attached to the 'global' object for Vue/Jest. + const mocks = {}; - mocks.dispatchNonBlockingStoreAction = jest.fn(); - mocks.dispatchNonBlockingStoreAction.mockImplementation((actionName) => { - - let actionFilterResult = mockData.actionList.filter(x => x.actionName == actionName); - - if (actionFilterResult.length > 0 && actionFilterResult.length === 1) { + mocks.dispatchNonBlockingStoreAction = jest.fn(); + mocks.dispatchNonBlockingStoreAction.mockImplementation((actionName) => { + let actionFilterResult = mockData.actionList.filter( + (x) => x.actionName == actionName + ); - return Promise.resolve({ - data: actionFilterResult[0].data - }); - } - }); - // Mock store actions from js file - mocks.storeActions = storeActions; - const global = { - mocks: mocks - }; + if (actionFilterResult.length > 0 && actionFilterResult.length === 1) { + return Promise.resolve({ + data: actionFilterResult[0].data, + }); + } + }); + // Mock store actions from js file + mocks.storeActions = storeActions; + const global = { + mocks: mocks, + }; - return { global } -} \ No newline at end of file + return { global }; +} diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue index 90d281d67..11cd42970 100644 --- a/src/layouts/componentTest/componentTest.vue +++ b/src/layouts/componentTest/componentTest.vue @@ -1,4 +1,4 @@ - @@ -15,11 +15,11 @@ export default { name: "buttonPrimary", props: { buttonText: String, - isDisabled: Boolean + isDisabled: Boolean, }, data() { return { - isLoading: false + isLoading: false, }; }, methods: { diff --git a/src/uxComponents/buttonSecondary/buttonSecondary.spec.js b/src/uxComponents/buttonSecondary/buttonSecondary.spec.js index 882a68129..3d0843e10 100644 --- a/src/uxComponents/buttonSecondary/buttonSecondary.spec.js +++ b/src/uxComponents/buttonSecondary/buttonSecondary.spec.js @@ -1 +1 @@ -test.todo('some test to be written in the future'); \ No newline at end of file +test.todo("some test to be written in the future"); diff --git a/src/uxComponents/buttonSecondary/buttonSecondary.vue b/src/uxComponents/buttonSecondary/buttonSecondary.vue index 19961efa0..3840922d4 100644 --- a/src/uxComponents/buttonSecondary/buttonSecondary.vue +++ b/src/uxComponents/buttonSecondary/buttonSecondary.vue @@ -5,7 +5,7 @@ class="btn btn-secondary d-flex align-items-center" v-on:click="showLoader()" v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading']" - > + > {{ this.buttonText }} @@ -14,7 +14,7 @@ export default { name: "buttonSecondary", props: { - buttonText: String + buttonText: String, }, data() { return { diff --git a/src/uxComponents/confetti/confetti.spec.js b/src/uxComponents/confetti/confetti.spec.js index 882a68129..3d0843e10 100644 --- a/src/uxComponents/confetti/confetti.spec.js +++ b/src/uxComponents/confetti/confetti.spec.js @@ -1 +1 @@ -test.todo('some test to be written in the future'); \ No newline at end of file +test.todo("some test to be written in the future"); diff --git a/src/uxComponents/header/header.spec.js b/src/uxComponents/header/header.spec.js index d02c78d9f..f5a423803 100644 --- a/src/uxComponents/header/header.spec.js +++ b/src/uxComponents/header/header.spec.js @@ -1,16 +1,16 @@ -import { shallowMount } from '@vue/test-utils'; -import Header from './header'; +import { shallowMount } from "@vue/test-utils"; +import Header from "./header"; -describe('Header.vue', () => { - it("Should render the 'text' prop value as a span value for the header span text value.", () => { - // Act - const wrapper = shallowMount(Header, { - propsData: { - text: 'Header Content' - } - }); +describe("Header.vue", () => { + it("Should render the 'text' prop value as a span value for the header span text value.", () => { + // Act + const wrapper = shallowMount(Header, { + propsData: { + text: "Header Content", + }, + }); - // Assert - expect(wrapper.find('span').text()).toContain("Header Content"); - }) -}); \ No newline at end of file + // Assert + expect(wrapper.find("span").text()).toContain("Header Content"); + }); +}); diff --git a/src/uxComponents/header/header.vue b/src/uxComponents/header/header.vue index a2a68eeb7..621e4c917 100644 --- a/src/uxComponents/header/header.vue +++ b/src/uxComponents/header/header.vue @@ -1,16 +1,16 @@ \ No newline at end of file + diff --git a/src/uxComponents/listButton/listButton.spec.js b/src/uxComponents/listButton/listButton.spec.js index e360d0fc1..3d0843e10 100644 --- a/src/uxComponents/listButton/listButton.spec.js +++ b/src/uxComponents/listButton/listButton.spec.js @@ -1 +1 @@ -test.todo('some test to be written in the future'); +test.todo("some test to be written in the future"); diff --git a/src/uxComponents/listButton/listButton.vue b/src/uxComponents/listButton/listButton.vue index e6297fe60..2580b0f83 100644 --- a/src/uxComponents/listButton/listButton.vue +++ b/src/uxComponents/listButton/listButton.vue @@ -3,8 +3,11 @@ @@ -16,12 +19,12 @@ export default { name: "listButton", props: { buttonText: String, - errorText: String + errorText: String, }, data() { return { isLoading: false, - isError: false + isError: false, }; }, methods: { diff --git a/src/uxComponents/radio/radio.spec.js b/src/uxComponents/radio/radio.spec.js index ba59e2650..35ddfdab7 100644 --- a/src/uxComponents/radio/radio.spec.js +++ b/src/uxComponents/radio/radio.spec.js @@ -1,23 +1,23 @@ -import { shallowMount } from '@vue/test-utils'; -import radio from './radio'; +import { shallowMount } from "@vue/test-utils"; +import radio from "./radio"; -describe('radio.vue', () => { - it("Should render the 'text' prop value as a span value for the radio button label and add the 'value' prop value as the radio button value and id.", () => { - // Act - const wrapper = shallowMount(radio, { - propsData: { - value: '2023', - text: '12' - } - }); +describe("radio.vue", () => { + it("Should render the 'text' prop value as a span value for the radio button label and add the 'value' prop value as the radio button value and id.", () => { + // Act + const wrapper = shallowMount(radio, { + propsData: { + value: "2023", + text: "12", + }, + }); - // Assert - expect(wrapper.find('span').text()).toEqual('12'); - expect(wrapper.find('input').attributes()).toEqual({ - class: 'position-absolute opacity-0', - id: '2023', - type: 'radio', - value: '2023' - }); - }) -}) \ No newline at end of file + // Assert + expect(wrapper.find("span").text()).toEqual("12"); + expect(wrapper.find("input").attributes()).toEqual({ + class: "position-absolute opacity-0", + id: "2023", + type: "radio", + value: "2023", + }); + }); +}); diff --git a/src/uxComponents/radio/radio.vue b/src/uxComponents/radio/radio.vue index 1f4e63f39..ac005bca4 100644 --- a/src/uxComponents/radio/radio.vue +++ b/src/uxComponents/radio/radio.vue @@ -1,30 +1,26 @@ \ No newline at end of file + diff --git a/src/uxComponents/radioList/radioList.spec.js b/src/uxComponents/radioList/radioList.spec.js index 882a68129..3d0843e10 100644 --- a/src/uxComponents/radioList/radioList.spec.js +++ b/src/uxComponents/radioList/radioList.spec.js @@ -1 +1 @@ -test.todo('some test to be written in the future'); \ No newline at end of file +test.todo("some test to be written in the future"); diff --git a/src/uxComponents/radioList/radioList.vue b/src/uxComponents/radioList/radioList.vue index 6b59e6f57..867892df9 100644 --- a/src/uxComponents/radioList/radioList.vue +++ b/src/uxComponents/radioList/radioList.vue @@ -1,28 +1,36 @@ diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 3cbcd9696..2d9b08b1c 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -4,8 +4,6 @@ diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue deleted file mode 100644 index 11cd42970..000000000 --- a/src/layouts/componentTest/componentTest.vue +++ /dev/null @@ -1,152 +0,0 @@ - - - diff --git a/src/layouts/notFound/notFound.vue b/src/layouts/not-found/not-found.vue similarity index 100% rename from src/layouts/notFound/notFound.vue rename to src/layouts/not-found/not-found.vue diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js index f38e0a917..fbc3afedf 100644 --- a/src/layouts/vehicle-year/vehicle-year.spec.js +++ b/src/layouts/vehicle-year/vehicle-year.spec.js @@ -1,52 +1,27 @@ -import { shallowMount } from "@vue/test-utils"; -import { nextTick } from "vue"; -import { getMountOptions } from "@/helpers/unitTestHelper.js"; -import { storeActions } from "@/constants/storeActions.js"; -import selectYear from "./selectYear.vue"; +import { shallowMount, flushPromises } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue"; + +describe("vehicle-year.vue", () => { + test("vehicle-year.vue should render data from CMS", async () => { -describe("selectYear.vue", () => { - test("Should render the 'pageHeader.Text' data value 'text' prop value for the Header component, 'radioQuestion.Question' data value as 'questionText' prop value for the 'radioQuestion' component and 'years' values for 'answers' prop values for the 'radioQuestion' component.", async () => { // Arrange - const mockDataAndAction = { - actionList: [ - { - actionName: storeActions.GET_PAGE_DATA, - data: { - Result: [ - { - Type: "PageHeadingWidget", - Model: { - Text: "Mock Data", - }, - }, - { - Type: "RadioQuestionWidget", - Model: { - Question: "Mock Data", - }, - }, - ], - }, - }, - { - actionName: storeActions.GET_VEHICLE_YEARS, - data: ["2023", "2022", "2021"], - }, - ], - }; + const cmsMockData = { + PageHeaderWidget: [{ HeaderText: "Select a year to get started" }], + RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }], + } - const mountOptions = getMountOptions(mockDataAndAction); + const mountOptions = getMountOptions({}, cmsMockData); // Act - const wrapper = shallowMount(selectYear, mountOptions); - await nextTick(); + const wrapper = shallowMount(vehicleYear, mountOptions); + await flushPromises(); // Assert const header = await wrapper.find(".Header"); - expect(header.attributes("text")).toEqual("Mock Data"); + expect(header.attributes("text")).toEqual("Select a year to get started"); - const radioQuestion = await wrapper.findComponent(".radioQuestion"); - expect(radioQuestion.attributes("answers")).toEqual("2023,2022,2021"); - expect(radioQuestion.attributes("questiontext")).toEqual("Mock Data"); + const yearQuestion = await wrapper.findComponent({name: 'year-question'}); + expect(yearQuestion.attributes("questiontext")).toEqual("What year is your vehicle?"); }); }); diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 18f679232..0f40a57b6 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -1,7 +1,7 @@ -