Merge pull request #4881 from yuki0410-dev/feat/4700_ts-jest

[typescript-migration] some tests
Hacker0x01 · Jun 10, 2024 · 3ca1a7a · 3ca1a7a
2 parents 7231710 + 3054d56
commit 3ca1a7a
Show file tree

Hide file tree

Showing 10 changed files with 786 additions and 660 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -2,11 +2,6 @@ const babelTargetList = [
   "helper_components/custom_input\\.tsx",
   "calendar_test\\.test\\.tsx",
   "datepicker_test\\.test\\.tsx",
-  "min_time_test\\.test\\.tsx",
-  "month_test\\.test\\.tsx",
-  "multi_month_test\\.test\\.tsx",
-  "multiple_selected_dates\\.test\\.tsx",
-  "week_number_test\\.test\\.tsx",
 ];
 
 const tsTargetList = [
@@ -26,19 +21,19 @@ const tsTargetList = [
   "include_times_test\\.test\\.tsx",
   "index\\.ts",
   "inject_times_test\\.test\\.tsx",
-  // "min_time_test\\.test\\.tsx",
+  "min_time_test\\.test\\.tsx",
   "month_dropdown_test\\.test\\.tsx",
-  // "month_test\\.test\\.tsx",
+  "month_test\\.test\\.tsx",
   "month_year_dropdown_test\\.test\\.tsx",
-  // "multi_month_test\\.test\\.tsx",
-  // "multiple_selected_dates\\.test\\.tsx",
+  "multi_month_test\\.test\\.tsx",
+  "multiple_selected_dates\\.test\\.tsx",
   "run_axe\\.tsx",
   "show_time_test\\.test\\.tsx",
   "test_utils\\.ts",
   "time_format_test\\.test\\.tsx",
   "time_input_test\\.test\\.tsx",
   "timepicker_test\\.test\\.tsx",
-  // "week_number_test\\.test\\.tsx",
+  "week_number_test\\.test\\.tsx",
   "week_picker_test\\.test\\.tsx",
   "week_test\\.test\\.tsx",
   "year_dropdown_options_test\\.test\\.tsx",

diff --git a/src/calendar.tsx b/src/calendar.tsx
@@ -141,7 +141,7 @@ type CalendarProps = React.PropsWithChildren &
     showTimeInput?: boolean;
     showYearDropdown?: boolean;
     showMonthDropdown?: boolean;
-    yearItemNumber: number;
+    yearItemNumber?: number;
     useWeekdaysShort?: boolean;
     forceShowMonthNavigation?: boolean;
     showDisabledMonthNavigation?: boolean;
@@ -498,7 +498,9 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
       ({ date }) => ({
         date: subYears(
           date,
-          this.props.showYearPicker ? this.props.yearItemNumber : 1,
+          this.props.showYearPicker
+            ? this.props.yearItemNumber ?? Calendar.defaultProps.yearItemNumber
+            : 1,
         ),
       }),
       () => this.handleYearChange(this.state.date),
@@ -606,7 +608,9 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
       ({ date }) => ({
         date: addYears(
           date,
-          this.props.showYearPicker ? this.props.yearItemNumber : 1,
+          this.props.showYearPicker
+            ? this.props.yearItemNumber ?? Calendar.defaultProps.yearItemNumber
+            : 1,
         ),
       }),
       () => this.handleYearChange(this.state.date),

diff --git a/src/index.tsx b/src/index.tsx
@@ -122,6 +122,7 @@ export type DatePickerProps = Omit<
   | "setPreSelection"
   | "selectsRange"
   | "selectsMultiple"
+  | "dropdownMode"
 > &
   Pick<AdditionalProps, "excludeScrollbar"> &
   Pick<CalendarIconProps, "icon"> &
@@ -135,9 +136,10 @@ export type DatePickerProps = Omit<
     | "popperOnKeyDown"
     | "showArrow"
   > & {
-    dateFormatCalendar: CalendarProps["dateFormat"];
+    dateFormatCalendar?: CalendarProps["dateFormat"];
     calendarClassName?: CalendarProps["className"];
     calendarContainer?: CalendarProps["container"];
+    dropdownMode?: CalendarProps["dropdownMode"];
     onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
     popperClassName?: PopperComponentProps["className"];
     showPopperArrow?: PopperComponentProps["showArrow"];
@@ -260,7 +262,7 @@ export default class DatePicker extends Component<
       onChange() {},
       disabled: false,
       disabledKeyboardNavigation: false,
-      dropdownMode: "scroll",
+      dropdownMode: "scroll" as const,
       onFocus() {},
       onBlur() {},
       onKeyDown() {},
@@ -1199,7 +1201,10 @@ export default class DatePicker extends Component<
         {...this.props}
         {...this.state}
         setOpen={this.setOpen}
-        dateFormat={this.props.dateFormatCalendar}
+        dateFormat={
+          this.props.dateFormatCalendar ??
+          DatePicker.defaultProps.dateFormatCalendar
+        }
         onSelect={this.handleSelect}
         onClickOutside={this.handleCalendarClickOutside}
         holidays={getHolidaysMap(this.modifyHolidays())}
@@ -1211,6 +1216,9 @@ export default class DatePicker extends Component<
         handleOnKeyDown={this.props.onKeyDown}
         handleOnDayKeyDown={this.onDayKeyDown}
         setPreSelection={this.setPreSelection}
+        dropdownMode={
+          this.props.dropdownMode ?? DatePicker.defaultProps.dropdownMode
+        }
       >
         {this.props.children}
       </WrappedCalendar>

diff --git a/src/test/min_time_test.test.tsx b/src/test/min_time_test.test.tsx
@@ -3,17 +3,35 @@ import React, { useState } from "react";
 
 import DatePicker from "../index";
 
-const DatePickerWithState = (props) => {
+import type { DatePickerProps } from "../index";
+
+const DatePickerWithState = (
+  props: Partial<
+    Pick<DatePickerProps, "open" | "selected" | "showTimeSelect" | "dateFormat">
+  > &
+    Omit<
+      DatePickerProps,
+      | "open"
+      | "selected"
+      | "onChange"
+      | "showTimeSelect"
+      | "dateFormat"
+      | "selectsRange"
+      | "selectsMultiple"
+      | "onSelect"
+    >,
+) => {
   const [selected, setSelected] = useState<Date | null>(null);
   return (
     <DatePicker
       open
       selected={selected}
-      onChange={(date) => {
+      onChange={(date: Date | null) => {
         setSelected(date);
       }}
       showTimeSelect
       dateFormat="MM/dd/yyyy HH:mm"
+      onSelect={() => {}}
       {...props}
     />
   );
@@ -23,7 +41,7 @@ describe("Datepicker minTime", () => {
   it("should select time 12:00 AM when no minTime constraint is set.", () => {
     const { getByText, container } = render(<DatePickerWithState />);
 
-    const day = container.getElementsByClassName("react-datepicker__day")[0];
+    const day = container.getElementsByClassName("react-datepicker__day")[0]!;
 
     fireEvent.click(day);
 
@@ -40,7 +58,7 @@ describe("Datepicker minTime", () => {
       <DatePickerWithState minTime={minTime} maxTime={maxTime} />,
     );
 
-    const day = container.getElementsByClassName("react-datepicker__day")[0];
+    const day = container.getElementsByClassName("react-datepicker__day")[0]!;
 
     fireEvent.click(day);