From f98b7f3f4817d5a59e5e22053fab54464cece76b Mon Sep 17 00:00:00 2001 From: Mark Harris Date: Tue, 14 Dec 2021 17:19:45 -0500 Subject: [PATCH] Refactored unit tests --- src/layouts/vehicle-year/vehicle-year.spec.js | 139 ++++++++++-------- .../year-question/year-question.spec.js | 91 +++++++++--- 2 files changed, 149 insertions(+), 81 deletions(-) diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js index 06cc0339b..19028baaf 100644 --- a/src/layouts/vehicle-year/vehicle-year.spec.js +++ b/src/layouts/vehicle-year/vehicle-year.spec.js @@ -1,6 +1,7 @@ import { shallowMount, flushPromises } from "@vue/test-utils"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue"; +import yearQuestion from "@/layouts/vehicle-year/year-question/year-question"; import { settleAllPromises } from "@/helpers/layout-helper.js"; import { nextTick } from "vue"; @@ -10,72 +11,84 @@ jest.mock("@/helpers/layout-helper.js", () => ({ })); describe("vehicle-year.vue", () => { - test("vehicle-year.vue should render data from CMS", async () => { - // Arrange + test("Year question component is initized with api data", async (done) => { - // Our mock data for our call to settleAllPromises - const mockData = { - getPageContent: { - PageHeaderWidget: [{ HeaderText: "Select a year to get started" }], - RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }], - VehicleBannerWidget: [ - { - GenericVehicleImage: - "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", - }, - ], - SiteHeaderWidget: [ - { - LogoImage: - "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", - }, - ], - isCmsContentReady: true, - }, - getVehicleYear: [2023, 2022, 2021], - store: { - commit: jest.fn(), - year: null, - }, - router: { - push: jest.fn(), - }, - }; + //Arange + const radioQuestionCmsContent = { QuestionText: "What year is your vehicle?" }; + const yearQuestionInitialData = ["2023", "2022", "2021"]; + const { wrapper, apiPromise } = setupMocks( { + radioQuestionCmsContent: radioQuestionCmsContent, + yearQuestionInitialData: yearQuestionInitialData, + } ); - // our router information needed. - const to = { - query: { - fmgPage: "vehicle-year", - }, - }; + //Act + vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm)); - const mountOptions = getMountOptions(mockData); - - // our mock implementation of settleAllPromises - settleAllPromises.mockImplementation(() => { - return Promise.resolve(mockData); + //Assert + apiPromise.finally(() => { + expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, yearQuestionInitialData); + done(); }); - - // Act - const wrapper = shallowMount(vehicleYear, mountOptions); - wrapper.vm.$options.watch.selectedYear.call(wrapper.vm); - - // Call our beforeRouteEnter on the component. - // This passes (c) => c(wrapper.vm) so that next can be called and our - // data can be set. - vehicleYear.beforeRouteEnter.call(wrapper.vm, to, undefined, (c) => - c(wrapper.vm) - ); - - await nextTick(); // Wait for the DOM to update. - - // Assert - const header = await wrapper.find(".Header"); - expect(header.attributes("text")).toEqual("Select a year to get started"); - - const yearQuestion = wrapper.findComponent({ name: "year-question" }); - expect(yearQuestion.attributes("questiontext")).toEqual( - "What year is your vehicle?" - ); }); }); + +describe("vehicle-year.vue", () => { + test("Page header is passed data from CMS", async (done) => { + + //Arange + const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a year to get started" }); + + //Act + vehicleYear.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-year" } }, undefined, (c) => c(wrapper.vm)); + + //Assert + const header = await wrapper.find(".Header"); + apiPromise.finally(() => { + expect(header.attributes("text")).toEqual("Select a year to get started"); + done(); + }); + }); +}); + +function setupMocks({ + radioQuestionCmsContent = {}, + yearQuestionInitialData = {}, + pageHeaderWidgetHeaderText = {}, +}) { + + //Mock api responses + const apiResponses = { + cmsContent: { + PageHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }], + RadioQuestionWidget: [radioQuestionCmsContent], + VehicleBannerWidget: [ + { + GenericVehicleImage: + "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", + }, + ], + SiteHeaderWidget: [ + { + LogoImage: + "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", + }, + ], + isCmsContentReady: true, + }, + yearQuestionInitialData: yearQuestionInitialData, + }; + const apiPromise = Promise.resolve(apiResponses); + settleAllPromises.mockImplementation(() => apiPromise); + + //Mock year question methods + yearQuestion.methods = { + loadInitialData: jest.fn(), + initializeComponent: jest.fn(), + }; + const mountOptions = getMountOptions({ }); + const wrapper = shallowMount(vehicleYear, mountOptions); + const yearQuestionWrapper = wrapper.findComponent({ name: "yearQuestion" }); + yearQuestionWrapper.vm.initializeComponent = yearQuestion.methods.initializeComponent; + + return { wrapper, apiPromise }; +} \ No newline at end of file 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 a51d25810..744769b6b 100644 --- a/src/layouts/vehicle-year/year-question/year-question.spec.js +++ b/src/layouts/vehicle-year/year-question/year-question.spec.js @@ -1,25 +1,80 @@ import yearQuestion from "@/layouts/vehicle-year/year-question/year-question"; import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import store from "@/store"; +jest.mock("@/store", () => { return {}; }, {virtual: true}); describe("year-question.vue", () => { - test("year-question should take a prop for years and questionText, and trigger a selectYear function when an option is clicked.", async () => { - // Act - const wrapper = shallowMount(yearQuestion); - await wrapper.setProps({ - questionText: "What year is your vehicle?", - years: ["2023", "2022", "2021"], - modelValue: "2020", - }); - wrapper.vm.$options.watch.selectedYear.call(wrapper.vm); + test("Selected year is emitted upon selection.", async () => { - // 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"); - expect(wrapper.componentVM.modelValue).toBe("2020"); + //Arrange + const { wrapper } = setupMocks({ modelValueProp: "2020" }); + const yearToSelect = "2021"; + + //Act + wrapper.setData({ selectedYear: yearToSelect }); + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["2021"]); }); }); + +describe("year-question.vue", () => { + test("CMS question text is used as radio question text.", async () => { + + //Arrange + const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What year is your vehicle?" }); + + //Act + yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null); + + //Assert + const radioQuestionComponent = await wrapper.findComponent({ name: "radioQuestion" }); + expect(radioQuestionComponent.attributes("questiontext")).toBe("What year is your vehicle?"); + }); +}); + +describe("year-question.vue", () => { + test("Data from store api are used as radio question answers.", async () => { + + //Arrange + const { wrapper, cmsContent } = setupMocks({ dataFromStoreApi: ["2023", "2022", "2021"] }); + + //Act + const initialData = yearQuestion.methods.loadInitialData.call(wrapper.vm); + yearQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData); + + //Assert + const radioQuestionComponent = await wrapper.findComponent({ name: "radioQuestion" }); + expect(radioQuestionComponent.attributes("answers")).toBe("2023,2022,2021"); + }); +}); + + +function setupMocks({ + modelValueProp = "1900", + cmsQuestionText = "CMS text goes here", + dataFromStoreApi = [], +}) { + + //Mock store + store.dispatch = jest.fn(() => dataFromStoreApi); + const mountOptions = getMountOptions({ + store: { + dispatch: store.dispatch, + }, + }); + + //Mock props + mountOptions.propsData = { + modelValue: modelValueProp, + }; + const wrapper = shallowMount(yearQuestion, mountOptions); + + //Mock CMS content + const cmsContent = { + QuestionText: cmsQuestionText + }; + return { wrapper, cmsContent }; +} \ No newline at end of file