diff --git a/test/exclude_times_test.test.js b/test/exclude_times_test.test.js index be69a8443..e07cbc22f 100644 --- a/test/exclude_times_test.test.js +++ b/test/exclude_times_test.test.js @@ -4,26 +4,37 @@ import { setTime, newDate } from "../src/date_utils"; import DatePicker from "../src/index.jsx"; describe("DatePicker", () => { + let now, excludeTimes; + + beforeEach(() => { + now = newDate(); + excludeTimes = [ + setTime(now, { hour: 17, minute: 0 }), + setTime(now, { hour: 18, minute: 30 }), + setTime(now, { hour: 19, minute: 30 }), + setTime(now, { hour: 17, minute: 30 }), + ]; + }); + it("should disable times specified in excludeTimes props", () => { - const now = newDate(); + const { container: datePicker } = render( + , + ); + + const disabledTimeItems = datePicker.querySelectorAll( + ".react-datepicker__time-list-item--disabled", + ); + expect(disabledTimeItems.length).toBe(excludeTimes.length); + }); + it("should add aria-disabled to all the excluded times", () => { const { container: datePicker } = render( - , + , ); const disabledTimeItems = datePicker.querySelectorAll( ".react-datepicker__time-list-item--disabled", ); - expect(disabledTimeItems.length).toBe(4); const allDisabledTimeItemsHaveAriaDisabled = Array.from( disabledTimeItems, diff --git a/test/filter_times_test.test.js b/test/filter_times_test.test.js index 51ff1a447..887c20d5b 100644 --- a/test/filter_times_test.test.js +++ b/test/filter_times_test.test.js @@ -4,15 +4,43 @@ import { getHours } from "../src/date_utils"; import TimeComponent from "../src/time"; describe("TimeComponent", () => { + const HOUR_TO_DISABLE_IN_12_HR = 5; + const HOUR_TO_DISABLE_IN_24_HR = 17; + it("should disable times matched by filterTime prop", () => { const { container: timeComponent } = render( - getHours(time) !== 17} />, + getHours(time) !== HOUR_TO_DISABLE_IN_24_HR} + />, + ); + + const disabledTimeItems = timeComponent.querySelectorAll( + ".react-datepicker__time-list-item--disabled", + ); + + const disabledAllFilterTimes = Array.from(disabledTimeItems).every( + (disabledTimeItem) => { + const disabledTimeItemValue = disabledTimeItem.textContent.trim(); + return ( + disabledTimeItemValue.startsWith(`${HOUR_TO_DISABLE_IN_12_HR}:`) || + disabledTimeItemValue.startsWith(`${HOUR_TO_DISABLE_IN_24_HR}:`) + ); + }, + ); + + expect(disabledAllFilterTimes).toBe(true); + }); + + it("should add aria-disabled to the disabled times matched by filterTime prop", () => { + const { container: timeComponent } = render( + getHours(time) !== HOUR_TO_DISABLE_IN_24_HR} + />, ); const disabledTimeItems = timeComponent.querySelectorAll( ".react-datepicker__time-list-item--disabled", ); - expect(disabledTimeItems.length).toBe(2); const allDisabledTimeItemsHaveAriaDisabled = Array.from( disabledTimeItems, diff --git a/test/include_times_test.test.js b/test/include_times_test.test.js index 31e60812c..758c0236b 100644 --- a/test/include_times_test.test.js +++ b/test/include_times_test.test.js @@ -4,26 +4,54 @@ import * as utils from "../src/date_utils"; import TimeComponent from "../src/time"; describe("TimeComponent", () => { + let today, includeTimes; + + beforeEach(() => { + today = utils.getStartOfDay(utils.newDate()); + includeTimes = [ + utils.addMinutes(today, 60), + utils.addMinutes(today, 120), + utils.addMinutes(today, 150), + ]; + }); + it("should only enable times specified in includeTimes props", () => { - const today = utils.getStartOfDay(utils.newDate()); const { container: timeComponent } = render( - , + , ); + const allTimeItems = timeComponent.querySelectorAll( + ".react-datepicker__time-list-item", + ); const disabledTimeItems = timeComponent.querySelectorAll( ".react-datepicker__time-list-item--disabled", ); - expect(disabledTimeItems.length).toBe(45); - const allDisabledTimeItemsHaveAriaDisabled = Array.from( - disabledTimeItems, - ).every((time) => time.getAttribute("aria-disabled") === "true"); - expect(allDisabledTimeItemsHaveAriaDisabled).toBe(true); + const expectedDisabledTimeItems = allTimeItems.length - includeTimes.length; + expect(disabledTimeItems.length).toBe(expectedDisabledTimeItems); + }); + + it("should not add aria-disabled attribute on all the enabled times", () => { + const { container: timeComponent } = render( + , + ); + + const allTimeItems = timeComponent.querySelectorAll( + ".react-datepicker__time-list-item", + ); + const enabledTimeItems = Array.from(allTimeItems).filter( + (timeItem) => + !timeItem.classList.contains( + "react-datepicker__time-list-item--disabled", + ), + ); + + const enabledTimeItemsHasNoAriaDisabled = Array.from( + enabledTimeItems, + ).every((timeItem) => { + const ariaDisabledValue = timeItem.getAttribute("aria-disabled"); + return !ariaDisabledValue || ariaDisabledValue.toLowerCase() === "false"; + }); + expect(enabledTimeItemsHasNoAriaDisabled).toBe(true); }); });