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);
});
});