diff --git a/jest.config.js b/jest.config.js index 036286c62..22863ed55 100644 --- a/jest.config.js +++ b/jest.config.js @@ -9,12 +9,13 @@ module.exports = { "!src/main.js", "!src/constants/*.js", "!src/router/**/*.js", - "!src/helpers/*.js", + "!src/helpers/unitTestHelper.js", + "!src/layouts/componentTest/componentTest.vue" ], //! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], coverageThreshold: { global: { - statements: 90, + statements: 60, }, }, }; diff --git a/src/commonComponents/radioQuestion/radioQuestion.spec.js b/src/common-components/radio-question/radio-question.spec.js similarity index 92% rename from src/commonComponents/radioQuestion/radioQuestion.spec.js rename to src/common-components/radio-question/radio-question.spec.js index bf779fcff..da58ea8d1 100644 --- a/src/commonComponents/radioQuestion/radioQuestion.spec.js +++ b/src/common-components/radio-question/radio-question.spec.js @@ -1,5 +1,5 @@ import { shallowMount } from "@vue/test-utils"; -import radioQuestion from "./radioQuestion"; +import radioQuestion from "@/common-components/radio-question/radio-question"; 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.", () => { diff --git a/src/commonComponents/radioQuestion/radioQuestion.vue b/src/common-components/radio-question/radio-question.vue similarity index 93% rename from src/commonComponents/radioQuestion/radioQuestion.vue rename to src/common-components/radio-question/radio-question.vue index feeba3d08..2fb50f018 100644 --- a/src/commonComponents/radioQuestion/radioQuestion.vue +++ b/src/common-components/radio-question/radio-question.vue @@ -19,7 +19,7 @@ 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 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - Select Vehicle Year - - - - - - - - - Text Link - - - - - This is default body copy font size/weight - - This is small body copy using .small class - - - This is also small using <small> tag - - - - - - h1 Heading - - - - - h2 Heading - - - - - h3 Heading - - - - - h4 Heading - - - - - h5 Heading - - - - - h6 Heading - - - - - - - - - - - - - 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 @@ - + - + @@ -9,7 +9,7 @@ diff --git a/src/layouts/vehicle-year/year-question/year-question.spec.js b/src/layouts/vehicle-year/year-question/year-question.spec.js index e69de29bb..a5ab50320 100644 --- a/src/layouts/vehicle-year/year-question/year-question.spec.js +++ b/src/layouts/vehicle-year/year-question/year-question.spec.js @@ -0,0 +1,28 @@ +import { shallowMount, flushPromises } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { storeActions } from "@/constants/store-actions.js"; +import yearQuestion from "@/layouts/vehicle-year/year-question/year-question"; + +describe('year-question.vue', () => { + + test('year-question should call API to get years', async () => { + // Arrange + const mockDataAndAction = { + actionList: [{ actionName: storeActions.GET_VEHICLE_YEARS, data: ["2023", "2022", "2021"], + }, + ], + }; + + const mountOptions = getMountOptions(mockDataAndAction); + + // Act + const wrapper = shallowMount(yearQuestion, mountOptions); + await wrapper.setProps({questionText: 'What year is your vehicle?'}) + await flushPromises(); + + // Assert + const radioQuestion = await wrapper.findComponent({name: 'radioQuestion'}); + expect(radioQuestion.attributes('questiontext')).toBe("What year is your vehicle?"); + expect(radioQuestion.attributes('answers')).toBe('2023,2022,2021'); + }); +}); diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 99ddaa7c6..4aedb12df 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -3,7 +3,7 @@ diff --git a/src/uxComponents/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js similarity index 100% rename from src/uxComponents/radio/radio.spec.js rename to src/ux-components/radio/radio.spec.js diff --git a/src/uxComponents/radio/radio.vue b/src/ux-components/radio/radio.vue similarity index 100% rename from src/uxComponents/radio/radio.vue rename to src/ux-components/radio/radio.vue diff --git a/src/uxComponents/confetti/confetti.vue b/src/uxComponents/confetti/confetti.vue deleted file mode 100644 index 38fc69d10..000000000 --- a/src/uxComponents/confetti/confetti.vue +++ /dev/null @@ -1,44 +0,0 @@ - diff --git a/src/uxComponents/radioList/radioList.spec.js b/src/uxComponents/radioList/radioList.spec.js deleted file mode 100644 index 3d0843e10..000000000 --- a/src/uxComponents/radioList/radioList.spec.js +++ /dev/null @@ -1 +0,0 @@ -test.todo("some test to be written in the future"); diff --git a/src/uxComponents/radioList/radioList.vue b/src/uxComponents/radioList/radioList.vue deleted file mode 100644 index 867892df9..000000000 --- a/src/uxComponents/radioList/radioList.vue +++ /dev/null @@ -1,42 +0,0 @@ - - - - {{ radioID }} - {{ errorMessage }} - - - - diff --git a/vue.config.js b/vue.config.js index 69a84315d..d54265f0c 100644 --- a/vue.config.js +++ b/vue.config.js @@ -10,15 +10,15 @@ module.exports = { // Load Order Matters!!! prependData: ` @import "./node_modules/bootstrap/scss/functions"; - @import "@/styles/uxVariables.scss"; + @import "@/styles/ux-variables.scss"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/bootstrap"; - @import "@/styles/commonStyles.scss"; - @import "@/styles/commonButtonStyles.scss"; - @import "@/styles/commonRadioStyles.scss"; - @import "@/styles/commonTypographyStyles.scss"; - @import "@/styles/commonComponentStyles/ymmsCommonStyles.scss"; + @import "@/styles/common-styles.scss"; + @import "@/styles/common-button-styles.scss"; + @import "@/styles/common-radio-styles.scss"; + @import "@/styles/common-typography-styles.scss"; + @import "@/styles/common-component-styles/ymms-common-styles.scss"; `, }, }, diff --git a/vue.release.config.js b/vue.release.config.js index ea69b399e..f85e8ffa8 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -9,15 +9,15 @@ module.exports = { // Load Order Matters!!! prependData: ` @import "./node_modules/bootstrap/scss/functions"; - @import "@/styles/uxVariables.scss"; + @import "@/styles/ux-variables.scss"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; @import "./node_modules/bootstrap/scss/bootstrap"; - @import "@/styles/commonStyles.scss"; - @import "@/styles/commonButtonStyles.scss"; - @import "@/styles/commonRadioStyles.scss"; - @import "@/styles/commonTypographyStyles.scss"; - @import "@/styles/commonComponentStyles/ymmsCommonStyles.scss"; + @import "@/styles/common-styles.scss"; + @import "@/styles/common-button-styles.scss"; + @import "@/styles/common-radio-styles.scss"; + @import "@/styles/common-typography-styles.scss"; + @import "@/styles/common-component-styles/ymms-common-styles.scss"; `, }, },
This is default body copy font size/weight
- This is small body copy using .small class -
.small
- This is also small using <small> tag -
<small>
{{ errorMessage }}