Fix #4334: Improved Test Cases Readability and Maintainability

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(
+      <DatePicker open showTimeSelect excludeTimes={excludeTimes} />,
+    );
+
+    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(
-      <DatePicker
-        open
-        showTimeSelect
-        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 }),
-        ]}
-      />,
+      <DatePicker open showTimeSelect excludeTimes={excludeTimes} />,
     );
 
     const disabledTimeItems = datePicker.querySelectorAll(
       ".react-datepicker__time-list-item--disabled",
     );
-    expect(disabledTimeItems.length).toBe(4);
 
     const allDisabledTimeItemsHaveAriaDisabled = Array.from(
       disabledTimeItems,

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(
-      <TimeComponent filterTime={(time) => getHours(time) !== 17} />,
+      <TimeComponent
+        filterTime={(time) => 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(
+      <TimeComponent
+        filterTime={(time) => 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,

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(
-      <TimeComponent
-        includeTimes={[
-          utils.addMinutes(today, 60),
-          utils.addMinutes(today, 120),
-          utils.addMinutes(today, 150),
-        ]}
-      />,
+      <TimeComponent includeTimes={includeTimes} />,
     );
 
+    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(
+      <TimeComponent includeTimes={includeTimes} />,
+    );
+
+    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);
   });
 });