import datePicker from "./date-picker"; // Supporting Files import { shallowMount } from "@vue/test-utils"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; describe("date-picker.vue", () => { describe("initial setup", () => { test("Creates a date object from today", async () => { // Arrange const { wrapper } = await setupMocks({ propsData: { selectableDatesSetting: "custom" }, }); wrapper.vm.loadInitialData = jest.fn().mockImplementation( () => new Promise((resolve, reject) => { resolve({ data: [responseValue], }); }) ); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick(); expect(wrapper.vm.loadInitialData).toHaveBeenCalled(); // console.log("wrapper.vm.today: ", wrapper.vm.today) // // Act // const testResult = wrapper.vm.today instanceof Date; // console.log("testResult: ", testResult) // // Assert // expect(testResult).toEqual(true); wrapper.unmount(); }); }); // describe("formatNumberToSetDigits", () => { // const testScenarios = [ // [0, 3, "000"], // [8, 2, "08"], // [345, 2, "345"], // [4567, 0, "4567"], // ]; // test.each(testScenarios)( // "when num is %s and digits is %s, formatNumberToSetDigits should return %s", // async (num, digits, expectedReturn) => { // // Arrange // const { wrapper } = setupMocks({}); // // Act // const fnReturn = wrapper.vm.formatNumberToSetDigits(num, digits); // // Assert // expect(fnReturn).toEqual(expectedReturn); // } // ); // }); // describe("formatDate", () => { // test("Can format a date as MM/dd/yyyy", () => { // // Arrange // const { wrapper } = setupMocks({}); // const testDate = new Date("01-26-2023"); // // Act // const testResult = wrapper.vm.formatDate(testDate); // // Assert // expect(testResult).toEqual("01/26/2023"); // wrapper.unmount(); // }); // // test("Can get correct initialFirstDate from today", () => { // // // Arrange // // const { wrapper } = setupMocks({ // // propsData: { // // todayDate: "Thu Jan 26 2023", // // }, // // }); // // // Act // // const testResult = wrapper.vm.initialFirstDate; // // const testResultAsDateString = testResult.toDateString(); // // // Assert // // expect(testResultAsDateString).toEqual("Sun Jan 22 2023"); // // wrapper.unmount(); // // }); // }); // describe("calendarData", () => { // test("should return an array", async () => { // // Arrange // const { wrapper } = setupMocks({}); // // Act // const testResult = await wrapper.vm.calendarData; // // Assert // expect(Array.isArray(testResult)).toBe(true); // wrapper.unmount(); // }); // describe("each month should have keys monthLabel, yearNum, dates, firstDateDayIndex", () => { // const testScenarios = [ // ["monthLabel", true, "string"], // ["yearNum", true, "number"], // ["dates", true, "object"], // ["firstDateDayIndex", true, "number"], // ["monthClass", true, "string"], // ]; // test.each(testScenarios)( // "test for %s key should return %s and be type %s", // async (label, test, type) => { // // Arrange // const { wrapper } = setupMocks({}); // const containsMonthLabel = (obj) => Object.hasOwn(obj, label); // const isCorrectType = (obj) => typeof obj[label] === type; // const isTruthyOrZero = (obj) => (obj[label] || obj[label] === 0 ? true : false); // // Act // const calendarData = await wrapper.vm.calendarData; // // console.log("calendarData: ", calendarData); // // Assert // expect(calendarData.every(containsMonthLabel)).toBe(true); // expect(calendarData.every(isCorrectType)).toBe(true); // expect(calendarData.every(isTruthyOrZero)).toBe(true); // wrapper.unmount(); // } // ); // }); // describe("the current month's week which includes today", () => { // const testScenarios = [ // ["2022-02-05T03:00:00", 1, 2, true], // ["2024-02-05T03:00:00", 4, 0, true], // ["2020-01-15T03:00:00", 12, 0, true], // ]; // test.each(testScenarios)( // "the first date of the week including the date %s should be the date number %s and be day index %s", // async (todayDateString, startDate, dayOfWeekIndex) => { // // Arrange // const { wrapper } = setupMocks({ // propsData: { // todayOverrideDateString: todayDateString, // }, // }); // // Act // const calendarData = await wrapper.vm.calendarData; // const currentMonthIndex = calendarData.findIndex((month) => { // console.log("month: ", month); // return month.monthClass === "currentMonth"; // }); // console.log("calendarData ", calendarData); // console.log("currentMonthIndex ", currentMonthIndex); // // Assert // expect(calendarData[currentMonthIndex].dates[0].dateNum === startDate).toBe( // true // ); // expect( // calendarData[currentMonthIndex].dates[0].firstDateDayIndex === // dayOfWeekIndex // ).toBe(true); // wrapper.unmount(); // } // ); // }); // test("the current month's dates array should start with the first day of the week which includes today", async () => { // // Arrange // const { wrapper } = setupMocks({}); // const hasAFirstInDates = (obj) => obj?.dates[0].dateNum === 1; // // Act // const calendarData = await wrapper.vm.calendarData; // const currentMonthIndex = calendarData.findIndex((month) => { // return month.monthClass === "currentMonth"; // }); // // Assert // expect(calendarData[currentMonthIndex].dates[0].dateNum === 1).toBe(true); // wrapper.unmount(); // }); // test("for each month (other than current month), the dates array should have the 1st of the month", async () => { // // Arrange // const { wrapper } = setupMocks({}); // const hasAFirstInDates = (obj) => obj?.dates[0].dateNum === 1; // // Act // const calendarData = await wrapper.vm.calendarData; // // Assert // expect(calendarData.every(hasAFirstInDates)).toBe(true); // wrapper.unmount(); // }); // describe("for the current month in calendarData, the dates array should have correct days of month", () => { // const testScenarios = [ // ["2022-02-05T03:00:00", 28, true], // ["2024-02-05T03:00:00", 29, true], // ["2020-01-15T03:00:00", 31, true], // ]; // test.each(testScenarios)( // "the current month including the date %s should have %s days in its dates array", // async (dateString, noOfDays) => { // // Arrange // const { wrapper } = setupMocks({ // propsData: { // todayOverrideDateString: dateString, // }, // }); // // Act // const calendarData = await wrapper.vm.calendarData; // const currentMonthIndex = calendarData.findIndex((month) => { // return month.monthClass === "currentMonth"; // }); // // Assert // expect(calendarData[currentMonthIndex].dates.length === noOfDays).toBe(true); // wrapper.unmount(); // } // ); // // test.each(testScenarios)( // // "the date %s should have %s days in dates array", // // async (dateString, noOfDays) => { // // // Arrange // // const { wrapper } = setupMocks({ // // propsData: { // // todayOverrideDateString: dateString, // // }, // // }); // // const hasCorrectNumberOfDates = (obj) => obj?.dates.length === noOfDays; // // // Act // // const calendarData = await wrapper.vm.calendarData; // // // Assert // // expect(calendarData.every(hasCorrectNumberOfDates)).toBe(true); // // wrapper.unmount(); // // } // // ); // }); // // describe("for each object in array, the dates array should have correct days of month", () => { // // const testScenarios = [ // // ["2022-02-05T03:00:00", 28, true], // // ["2024-02-05T03:00:00", 29, true], // // ["2020-01-15T03:00:00", 31, true], // // ]; // // test.each(testScenarios)( // // "the date %s should have %s days in dates array", // // async (dateString, noOfDays) => { // // // Arrange // // const { wrapper } = setupMocks({ // // propsData: { // // todayOverrideDateString: dateString, // // }, // // }); // // const hasCorrectNumberOfDates = (obj) => obj?.dates.length === noOfDays; // // // Act // // const calendarData = await wrapper.vm.calendarData; // // // Assert // // expect(calendarData.every(hasCorrectNumberOfDates)).toBe(true); // // wrapper.unmount(); // // } // // ); // // }); // // test.only("each object in array should have a monthLabel", () => { // // // Arrange // // const { wrapper } = setupMocks({}); // // // const testTodayDate = new Date("01-26-2023"); // // // Act // // const testResult = wrapper.vm.calendarData; // // const containsMonthLabel = (month) => Object.hasOwn(month, 'monthLabel'); // // // Assert // // expect(testResult.every(containsMonthLabel)).toBe(true); // // }); // // test.only("array should have a month object with same month as today", () => { // // // Arrange // // const { wrapper } = setupMocks({}); // // // const testTodayDate = new Date("01-26-2023"); // // // Act // // // const testResult = wrapper.vm.calendarData; // // console.log("wrapper.vm.calendarData: ", wrapper.vm.calendarData) // // // Assert // // // expect(wrapper.vm.calendarData).toEqual("something"); // // // expect(wrapper.vm.calendarDataOld).toEqual("something"); // // expect(wrapper.vm.calendarData[1]).toMatchObject({ // // "dates": [ // // { // // "dateNum": 1 // // }, // // { // // "dateNum": 2 // // }, // // { // // "dateNum": 3 // // }, // // { // // "dateNum": 4 // // }, // // { // // "dateNum": 5 // // }, // // { // // "dateNum": 6 // // }, // // { // // "dateNum": 7 // // }, // // { // // "dateNum": 8 // // }, // // { // // "dateNum": 9 // // }, // // { // // "dateNum": 10 // // }, // // { // // "dateNum": 11 // // }, // // { // // "dateNum": 12 // // }, // // { // // "dateNum": 13 // // }, // // { // // "dateNum": 14 // // }, // // { // // "dateNum": 15 // // }, // // { // // "dateNum": 16 // // }, // // { // // "dateNum": 17 // // }, // // { // // "dateNum": 18 // // }, // // { // // "dateNum": 19 // // }, // // { // // "dateNum": 20 // // }, // // { // // "dateNum": 21 // // }, // // { // // "dateNum": 22 // // }, // // { // // "dateNum": 23 // // }, // // { // // "dateNum": 24 // // }, // // { // // "dateNum": 25 // // }, // // { // // "dateNum": 26 // // }, // // { // // "dateNum": 27 // // }, // // { // // "dateNum": 28 // // }, // // { // // "dateNum": 29 // // }, // // { // // "dateNum": 30 // // }, // // { // // "dateNum": 31 // // } // // ], // // "monthLabel": "January", // // "yearNum": 2023 // // }); // // wrapper.unmount(); // // }); // }); }); function setupMocks(mountOptionsMockData = {}) { const initialMountOptionsMockData = { // router: { // navigate: jest.fn(), // navigateWithSaving: jest.fn(), // navigateWithoutSaving: jest.fn(), // }, // actionList: [ // // { // // actionName: storeActions.SAVE_PART_QUESTION_ANSWERS, // // data: {}, // // }, // // { // // actionName: storeActions.GET_PARTS, // // data: {}, // // }, // ], // store: { // // getters: store.getters, // // commit: store.commit, // }, }; const mountOptions = getMountOptions( Object.assign(initialMountOptionsMockData, mountOptionsMockData) ); // console.log("mountOptions: ", mountOptions) const wrapper = shallowMount(datePicker, mountOptions); return { wrapper }; }