From c2eb26c0ae711501db268b8424f3f238b6d1f10e Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Thu, 6 Jun 2024 23:28:06 +0900 Subject: [PATCH 01/17] move test and fix jest config --- .eslintrc.js | 2 +- jest.config.js | 4 +- package.json | 10 ++-- rollup.config.mjs | 12 ++--- {test => src/test}/calendar_icon.test.tsx | 2 +- {test => src/test}/calendar_test.test.tsx | 8 +-- {test => src/test}/date_utils_test.test.ts | 2 +- {test => src/test}/datepicker_test.test.tsx | 4 +- {test => src/test}/day_test.test.tsx | 4 +- {test => src/test}/exclude_dates.test.tsx | 2 +- .../test}/exclude_time_period_test.test.tsx | 10 ++-- .../test}/exclude_times_test.test.tsx | 4 +- {test => src/test}/filter_times_test.test.tsx | 4 +- .../test}/helper_components/calendar_icon.tsx | 0 .../test}/helper_components/custom_input.tsx | 0 .../helper_components/custom_time_input.tsx | 0 .../test}/helper_components/test_wrapper.tsx | 0 .../test}/include_times_test.test.tsx | 4 +- {test => src/test}/index.ts | 0 {test => src/test}/inject_times_test.test.tsx | 50 +++++++++++-------- {test => src/test}/min_time_test.test.tsx | 2 +- .../test}/month_dropdown_test.test.tsx | 6 +-- {test => src/test}/month_test.test.tsx | 6 +-- .../test}/month_year_dropdown_test.test.tsx | 6 +-- {test => src/test}/multi_month_test.test.tsx | 4 +- .../test}/multiple_selected_dates.test.tsx | 2 +- {test => src/test}/run_axe.tsx | 2 +- {test => src/test}/show_time_test.test.tsx | 4 +- {test => src/test}/test_utils.ts | 2 +- {test => src/test}/time_format_test.test.tsx | 4 +- {test => src/test}/time_input_test.test.tsx | 4 +- {test => src/test}/timepicker_test.test.tsx | 4 +- {test => src/test}/week_number_test.test.tsx | 4 +- {test => src/test}/week_picker_test.test.tsx | 2 +- {test => src/test}/week_test.test.tsx | 4 +- .../test}/year_dropdown_options_test.test.tsx | 4 +- .../test}/year_dropdown_test.test.tsx | 4 +- {test => src/test}/year_picker_test.test.tsx | 6 +-- tsconfig.build.json | 4 ++ tsconfig.dev.json | 4 -- tsconfig.json | 4 +- 41 files changed, 105 insertions(+), 99 deletions(-) rename {test => src/test}/calendar_icon.test.tsx (98%) rename {test => src/test}/calendar_test.test.tsx (99%) rename {test => src/test}/date_utils_test.test.ts (99%) rename {test => src/test}/datepicker_test.test.tsx (99%) rename {test => src/test}/day_test.test.tsx (99%) rename {test => src/test}/exclude_dates.test.tsx (97%) rename {test => src/test}/exclude_time_period_test.test.tsx (66%) rename {test => src/test}/exclude_times_test.test.tsx (93%) rename {test => src/test}/filter_times_test.test.tsx (94%) rename {test => src/test}/helper_components/calendar_icon.tsx (100%) rename {test => src/test}/helper_components/custom_input.tsx (100%) rename {test => src/test}/helper_components/custom_time_input.tsx (100%) rename {test => src/test}/helper_components/test_wrapper.tsx (100%) rename {test => src/test}/include_times_test.test.tsx (96%) rename {test => src/test}/index.ts (100%) rename {test => src/test}/inject_times_test.test.tsx (67%) rename {test => src/test}/min_time_test.test.tsx (98%) rename {test => src/test}/month_dropdown_test.test.tsx (97%) rename {test => src/test}/month_test.test.tsx (99%) rename {test => src/test}/month_year_dropdown_test.test.tsx (98%) rename {test => src/test}/multi_month_test.test.tsx (94%) rename {test => src/test}/multiple_selected_dates.test.tsx (98%) rename {test => src/test}/run_axe.tsx (84%) rename {test => src/test}/show_time_test.test.tsx (96%) rename {test => src/test}/test_utils.ts (96%) rename {test => src/test}/time_format_test.test.tsx (98%) rename {test => src/test}/time_input_test.test.tsx (98%) rename {test => src/test}/timepicker_test.test.tsx (98%) rename {test => src/test}/week_number_test.test.tsx (99%) rename {test => src/test}/week_picker_test.test.tsx (97%) rename {test => src/test}/week_test.test.tsx (99%) rename {test => src/test}/year_dropdown_options_test.test.tsx (99%) rename {test => src/test}/year_dropdown_test.test.tsx (98%) rename {test => src/test}/year_picker_test.test.tsx (99%) create mode 100644 tsconfig.build.json delete mode 100644 tsconfig.dev.json diff --git a/.eslintrc.js b/.eslintrc.js index 834254438..f18e35d81 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -14,7 +14,7 @@ const config = { parser: "@typescript-eslint/parser", plugins: ["@typescript-eslint", "import", "unused-imports"], parserOptions: { - project: ["./tsconfig.dev.json"], + project: ["./tsconfig.json"], }, rules: { "no-unused-vars": "off", // Duplicate with unused-import/no-unused-vars diff --git a/jest.config.js b/jest.config.js index cde954390..31a968649 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,6 +1,6 @@ module.exports = { - roots: ["./test"], - setupFilesAfterEnv: ["/test/index.ts"], + roots: ["./src/test"], + setupFilesAfterEnv: ["/src/test/index.ts"], testEnvironment: "jest-environment-jsdom", collectCoverage: true, coverageReporters: ["json", "lcov", "text", "clover"], diff --git a/package.json b/package.json index 0b8189c8d..8773af108 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "license": "MIT", "homepage": "https://github.com/Hacker0x01/react-datepicker", "main": "dist/index.js", + "types": "dist/index.d.ts", "browser": "dist/react-datepicker.min.js", "module": "dist/es/index.js", "unpkg": "dist/react-datepicker.min.js", @@ -86,7 +87,7 @@ "react-onclickoutside": "^6.13.0" }, "scripts": { - "eslint": "eslint --ext .js,.jsx,.ts,.tsx src test", + "eslint": "eslint --ext .js,.jsx,.ts,.tsx ./src", "precommit": "lint-staged --allow-empty", "sass-lint": "stylelint 'src/stylesheets/*.scss'", "lint": "yarn run eslint && yarn run sass-lint", @@ -96,15 +97,14 @@ "test": "NODE_ENV=test jest", "test:ci": "NODE_ENV=test jest --ci --coverage", "test:watch": "NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=test jest --watch", - "build": "NODE_ENV=production yarn run build:src && NODE_ENV=production yarn run css:prod && NODE_ENV=production yarn run css:modules:dev && NODE_ENV=production yarn run css:dev && NODE_ENV=production yarn run css:modules:dev && NODE_ENV=production yarn run build:types", - "build-dev": "NODE_ENV=development yarn run js:dev && NODE_ENV=development yarn run css:dev && NODE_ENV=development yarn run css:modules:dev && NODE_ENV=production yarn run build:types", + "build": "NODE_ENV=production yarn run build:src && NODE_ENV=production yarn run css:prod && NODE_ENV=production yarn run css:modules:dev && NODE_ENV=production yarn run css:dev && NODE_ENV=production yarn run css:modules:dev", + "build-dev": "NODE_ENV=development yarn run js:dev && NODE_ENV=development yarn run css:dev && NODE_ENV=development yarn run css:modules:dev", "css:prod": "sass --style compressed src/stylesheets/datepicker.scss > dist/react-datepicker.min.css", "css:modules:prod": "sass --style compressed src/stylesheets/datepicker-cssmodules.scss | tee dist/react-datepicker-cssmodules.min.css dist/react-datepicker-min.module.css", "css:dev": "sass --style expanded src/stylesheets/datepicker.scss > dist/react-datepicker.css", "css:modules:dev": "sass --style expanded src/stylesheets/datepicker-cssmodules.scss | tee dist/react-datepicker-cssmodules.css dist/react-datepicker.module.css", - "type-check": "tsc --noEmit", + "type-check": "tsc --project tsconfig.build.json --noEmit", "type-check:watch": "npm run type-check -- --watch", - "build:types": "tsc --emitDeclarationOnly", "build:src": "rollup -c", "js:dev": "rollup -cw", "prepare": "husky install" diff --git a/rollup.config.mjs b/rollup.config.mjs index 31b9e5c5d..872cb7888 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -13,9 +13,9 @@ import typescript from "@rollup/plugin-typescript"; const pkg = JSON.parse( fs .readFileSync( - path.join(path.dirname(fileURLToPath(import.meta.url)), "package.json") + path.join(path.dirname(fileURLToPath(import.meta.url)), "package.json"), ) - .toString() + .toString(), ); const banner = `/*! @@ -33,10 +33,10 @@ const dateFnsPackageJson = JSON.parse( .readFileSync( path.join( path.dirname(fileURLToPath(import.meta.url)), - "node_modules/date-fns/package.json" - ) + "node_modules/date-fns/package.json", + ), ) - .toString() + .toString(), ); const dateFnsSubpackages = Object.keys(dateFnsPackageJson.exports) .map((key) => key.replace("./", "")) @@ -101,7 +101,7 @@ const config = { babel(), commonjs(), typescript({ - tsconfig: "./tsconfig.json", + tsconfig: "./tsconfig.build.json", declaration: true, declarationDir: "dist", }), diff --git a/test/calendar_icon.test.tsx b/src/test/calendar_icon.test.tsx similarity index 98% rename from test/calendar_icon.test.tsx rename to src/test/calendar_icon.test.tsx index 3aadbc562..8b8928b56 100644 --- a/test/calendar_icon.test.tsx +++ b/src/test/calendar_icon.test.tsx @@ -1,7 +1,7 @@ import { render, fireEvent } from "@testing-library/react"; import React from "react"; -import CalendarIcon from "../src/calendar_icon"; +import CalendarIcon from "../calendar_icon"; import { IconParkSolidApplication } from "./helper_components/calendar_icon"; diff --git a/test/calendar_test.test.tsx b/src/test/calendar_test.test.tsx similarity index 99% rename from test/calendar_test.test.tsx rename to src/test/calendar_test.test.tsx index 6588890c0..b80d29af2 100644 --- a/test/calendar_test.test.tsx +++ b/src/test/calendar_test.test.tsx @@ -9,7 +9,7 @@ import { eo } from "date-fns/locale/eo"; import { fi } from "date-fns/locale/fi"; import React from "react"; -import Calendar from "../src/calendar"; +import Calendar from "../calendar"; import { KeyType, getMonthInLocale, @@ -28,12 +28,12 @@ import { isSameDay, subMonths, subYears, -} from "../src/date_utils"; -import DatePicker from "../src/index"; +} from "../date_utils"; +import DatePicker from "../index"; import { getKey } from "./test_utils"; -import type { Locale } from "../src/date_utils"; +import type { Locale } from "../date_utils"; import type { Day } from "date-fns"; // TODO Possibly rename diff --git a/test/date_utils_test.test.ts b/src/test/date_utils_test.test.ts similarity index 99% rename from test/date_utils_test.test.ts rename to src/test/date_utils_test.test.ts index 69bf837c4..8d7330075 100644 --- a/test/date_utils_test.test.ts +++ b/src/test/date_utils_test.test.ts @@ -51,7 +51,7 @@ import { getMidnightDate, registerLocale, isMonthYearDisabled, -} from "../src/date_utils"; +} from "../date_utils"; registerLocale("pt-BR", ptBR); diff --git a/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx similarity index 99% rename from test/datepicker_test.test.tsx rename to src/test/datepicker_test.test.tsx index e36f45ef7..b1f950a08 100644 --- a/test/datepicker_test.test.tsx +++ b/src/test/datepicker_test.test.tsx @@ -22,8 +22,8 @@ import { subMonths, subWeeks, subYears, -} from "../src/date_utils"; -import DatePicker, { registerLocale } from "../src/index"; +} from "../date_utils"; +import DatePicker, { registerLocale } from "../index"; import CustomInput from "./helper_components/custom_input"; import TestWrapper from "./helper_components/test_wrapper"; diff --git a/test/day_test.test.tsx b/src/test/day_test.test.tsx similarity index 99% rename from test/day_test.test.tsx rename to src/test/day_test.test.tsx index 4461ff073..ae66b00c4 100644 --- a/test/day_test.test.tsx +++ b/src/test/day_test.test.tsx @@ -12,8 +12,8 @@ import { getHighLightDaysMap, getHolidaysMap, registerLocale, -} from "../src/date_utils"; -import Day from "../src/day"; +} from "../date_utils"; +import Day from "../day"; function renderDay(day, props = {}) { return render( diff --git a/test/exclude_dates.test.tsx b/src/test/exclude_dates.test.tsx similarity index 97% rename from test/exclude_dates.test.tsx rename to src/test/exclude_dates.test.tsx index 1d3c332ef..22048df80 100644 --- a/test/exclude_dates.test.tsx +++ b/src/test/exclude_dates.test.tsx @@ -2,7 +2,7 @@ import { render } from "@testing-library/react"; import { subDays } from "date-fns"; import React from "react"; -import DatePicker from "../src/index"; +import DatePicker from "../index"; describe("DatePicker", () => { const excludeDates = [new Date(), subDays(new Date(), 1)]; diff --git a/test/exclude_time_period_test.test.tsx b/src/test/exclude_time_period_test.test.tsx similarity index 66% rename from test/exclude_time_period_test.test.tsx rename to src/test/exclude_time_period_test.test.tsx index 1266657ce..6531bf649 100644 --- a/test/exclude_time_period_test.test.tsx +++ b/src/test/exclude_time_period_test.test.tsx @@ -1,19 +1,19 @@ import { render } from "@testing-library/react"; import React from "react"; -import * as utils from "../src/date_utils"; -import DatePicker from "../src/index"; +import { newDate, setTime } from "../date_utils"; +import DatePicker from "../index"; describe("DatePicker", () => { it("should only display times between minTime and maxTime", () => { - const now = utils.newDate(); + const now = newDate(); const { container } = render( null} - minTime={utils.setTime(now, { hour: 17, minute: 0 })} - maxTime={utils.setTime(now, { hour: 18, minute: 0 })} + minTime={setTime(now, { hour: 17, minute: 0 })} + maxTime={setTime(now, { hour: 18, minute: 0 })} open />, ); diff --git a/test/exclude_times_test.test.tsx b/src/test/exclude_times_test.test.tsx similarity index 93% rename from test/exclude_times_test.test.tsx rename to src/test/exclude_times_test.test.tsx index 7d91457b8..5c90cc4f8 100644 --- a/test/exclude_times_test.test.tsx +++ b/src/test/exclude_times_test.test.tsx @@ -1,8 +1,8 @@ import { render } from "@testing-library/react"; import React from "react"; -import { setTime, newDate } from "../src/date_utils"; -import DatePicker from "../src/index"; +import { setTime, newDate } from "../date_utils"; +import DatePicker from "../index"; describe("DatePicker", () => { let now, excludeTimes; diff --git a/test/filter_times_test.test.tsx b/src/test/filter_times_test.test.tsx similarity index 94% rename from test/filter_times_test.test.tsx rename to src/test/filter_times_test.test.tsx index 1b0271a1b..1724ba451 100644 --- a/test/filter_times_test.test.tsx +++ b/src/test/filter_times_test.test.tsx @@ -1,8 +1,8 @@ import { render } from "@testing-library/react"; import React from "react"; -import { getHours } from "../src/date_utils"; -import TimeComponent from "../src/time"; +import { getHours } from "../date_utils"; +import TimeComponent from "../time"; describe("TimeComponent", () => { const HOUR_TO_DISABLE_IN_12_HR = 5; diff --git a/test/helper_components/calendar_icon.tsx b/src/test/helper_components/calendar_icon.tsx similarity index 100% rename from test/helper_components/calendar_icon.tsx rename to src/test/helper_components/calendar_icon.tsx diff --git a/test/helper_components/custom_input.tsx b/src/test/helper_components/custom_input.tsx similarity index 100% rename from test/helper_components/custom_input.tsx rename to src/test/helper_components/custom_input.tsx diff --git a/test/helper_components/custom_time_input.tsx b/src/test/helper_components/custom_time_input.tsx similarity index 100% rename from test/helper_components/custom_time_input.tsx rename to src/test/helper_components/custom_time_input.tsx diff --git a/test/helper_components/test_wrapper.tsx b/src/test/helper_components/test_wrapper.tsx similarity index 100% rename from test/helper_components/test_wrapper.tsx rename to src/test/helper_components/test_wrapper.tsx diff --git a/test/include_times_test.test.tsx b/src/test/include_times_test.test.tsx similarity index 96% rename from test/include_times_test.test.tsx rename to src/test/include_times_test.test.tsx index 1211c8dbe..c3e89d882 100644 --- a/test/include_times_test.test.tsx +++ b/src/test/include_times_test.test.tsx @@ -1,8 +1,8 @@ import { render } from "@testing-library/react"; import React from "react"; -import * as utils from "../src/date_utils"; -import TimeComponent from "../src/time"; +import * as utils from "../date_utils"; +import TimeComponent from "../time"; describe("TimeComponent", () => { let today, includeTimes; diff --git a/test/index.ts b/src/test/index.ts similarity index 100% rename from test/index.ts rename to src/test/index.ts diff --git a/test/inject_times_test.test.tsx b/src/test/inject_times_test.test.tsx similarity index 67% rename from test/inject_times_test.test.tsx rename to src/test/inject_times_test.test.tsx index 229ae7ce6..945e14430 100644 --- a/test/inject_times_test.test.tsx +++ b/src/test/inject_times_test.test.tsx @@ -1,18 +1,24 @@ import { render } from "@testing-library/react"; import React from "react"; -import * as utils from "../src/date_utils"; -import TimeComponent from "../src/time"; +import { + addHours, + addMinutes, + addSeconds, + getStartOfDay, + newDate, +} from "../date_utils"; +import TimeComponent from "../time"; describe("TimeComponent", () => { it("should show times specified in injectTimes props", () => { - const today = utils.getStartOfDay(utils.newDate()); + const today = getStartOfDay(newDate()); const { container } = render( , ); @@ -24,14 +30,14 @@ describe("TimeComponent", () => { }); it("should not affect existing time intervals", () => { - const today = utils.getStartOfDay(utils.newDate()); + const today = getStartOfDay(newDate()); const { container } = render( , ); @@ -43,14 +49,14 @@ describe("TimeComponent", () => { }); it("should allow multiple injected times per interval", () => { - const today = utils.getStartOfDay(utils.newDate()); + const today = getStartOfDay(newDate()); const { container } = render( , ); @@ -62,15 +68,15 @@ describe("TimeComponent", () => { }); it("should sort injected times automatically", () => { - const today = utils.getStartOfDay(utils.newDate()); + const today = getStartOfDay(newDate()); const { container } = render( , ); @@ -86,16 +92,16 @@ describe("TimeComponent", () => { }); it("should support hours, minutes, and seconds", () => { - const today = utils.getStartOfDay(utils.newDate()); + const today = getStartOfDay(newDate()); const { container } = render( , ); diff --git a/test/min_time_test.test.tsx b/src/test/min_time_test.test.tsx similarity index 98% rename from test/min_time_test.test.tsx rename to src/test/min_time_test.test.tsx index 120539444..5dcbef46c 100644 --- a/test/min_time_test.test.tsx +++ b/src/test/min_time_test.test.tsx @@ -1,7 +1,7 @@ import { fireEvent, render } from "@testing-library/react"; import React, { useState } from "react"; -import DatePicker from "../src/index"; +import DatePicker from "../index"; const DatePickerWithState = (props) => { const [selected, setSelected] = useState(null); diff --git a/test/month_dropdown_test.test.tsx b/src/test/month_dropdown_test.test.tsx similarity index 97% rename from test/month_dropdown_test.test.tsx rename to src/test/month_dropdown_test.test.tsx index c745dfca8..9debe3477 100644 --- a/test/month_dropdown_test.test.tsx +++ b/src/test/month_dropdown_test.test.tsx @@ -6,9 +6,9 @@ import range from "lodash/range"; import React from "react"; import onClickOutside from "react-onclickoutside"; -import { getMonthInLocale, registerLocale } from "../src/date_utils"; -import MonthDropdown from "../src/month_dropdown"; -import MonthDropdownOptions from "../src/month_dropdown_options"; +import { getMonthInLocale, registerLocale } from "../date_utils"; +import MonthDropdown from "../month_dropdown"; +import MonthDropdownOptions from "../month_dropdown_options"; describe("MonthDropdown", () => { let monthDropdown: HTMLElement | null = null; diff --git a/test/month_test.test.tsx b/src/test/month_test.test.tsx similarity index 99% rename from test/month_test.test.tsx rename to src/test/month_test.test.tsx index d9be3216e..03f91e782 100644 --- a/test/month_test.test.tsx +++ b/src/test/month_test.test.tsx @@ -4,9 +4,9 @@ import { es } from "date-fns/locale"; import range from "lodash/range"; import React from "react"; -import DatePicker from "../src"; -import * as utils from "../src/date_utils"; -import Month from "../src/month"; +import DatePicker from "../"; +import * as utils from "../date_utils"; +import Month from "../month"; import { runAxe } from "./run_axe"; import { getKey } from "./test_utils"; diff --git a/test/month_year_dropdown_test.test.tsx b/src/test/month_year_dropdown_test.test.tsx similarity index 98% rename from test/month_year_dropdown_test.test.tsx rename to src/test/month_year_dropdown_test.test.tsx index 7bbecb75b..28712d315 100644 --- a/test/month_year_dropdown_test.test.tsx +++ b/src/test/month_year_dropdown_test.test.tsx @@ -10,9 +10,9 @@ import { formatDate, isAfter, registerLocale, -} from "../src/date_utils"; -import MonthYearDropdown from "../src/month_year_dropdown"; -import MonthYearDropdownOptions from "../src/month_year_dropdown_options"; +} from "../date_utils"; +import MonthYearDropdown from "../month_year_dropdown"; +import MonthYearDropdownOptions from "../month_year_dropdown_options"; describe("MonthYearDropdown", () => { let monthYearDropdown: HTMLElement | null = null; diff --git a/test/multi_month_test.test.tsx b/src/test/multi_month_test.test.tsx similarity index 94% rename from test/multi_month_test.test.tsx rename to src/test/multi_month_test.test.tsx index 8f325e66b..1bc3aec18 100644 --- a/test/multi_month_test.test.tsx +++ b/src/test/multi_month_test.test.tsx @@ -1,8 +1,8 @@ import { render } from "@testing-library/react"; import React from "react"; -import Calendar from "../src/calendar"; -import * as utils from "../src/date_utils"; +import Calendar from "../calendar"; +import * as utils from "../date_utils"; describe("Multi month calendar", function () { const dateFormat = "LLLL yyyy"; diff --git a/test/multiple_selected_dates.test.tsx b/src/test/multiple_selected_dates.test.tsx similarity index 98% rename from test/multiple_selected_dates.test.tsx rename to src/test/multiple_selected_dates.test.tsx index b1648c262..2032f3bc1 100644 --- a/test/multiple_selected_dates.test.tsx +++ b/src/test/multiple_selected_dates.test.tsx @@ -1,7 +1,7 @@ import { render } from "@testing-library/react"; import React from "react"; -import DatePicker from "../src"; +import DatePicker from "../"; describe("Multiple Dates Selected", function () { function getDatePicker(extraProps) { diff --git a/test/run_axe.tsx b/src/test/run_axe.tsx similarity index 84% rename from test/run_axe.tsx rename to src/test/run_axe.tsx index c79a1adfe..25b119b97 100644 --- a/test/run_axe.tsx +++ b/src/test/run_axe.tsx @@ -3,7 +3,7 @@ import axe from "axe-core"; const wrapper = document.createElement("main"); document.body.appendChild(wrapper); -export function runAxe(domNode) { +export function runAxe(domNode: Node): Promise { wrapper.appendChild(domNode); return axe .run(domNode) diff --git a/test/show_time_test.test.tsx b/src/test/show_time_test.test.tsx similarity index 96% rename from test/show_time_test.test.tsx rename to src/test/show_time_test.test.tsx index 8784d83f4..9ab79ed51 100644 --- a/test/show_time_test.test.tsx +++ b/src/test/show_time_test.test.tsx @@ -1,8 +1,8 @@ import { render, fireEvent } from "@testing-library/react"; import React from "react"; -import DatePicker from "../src/index"; -import TimeComponent from "../src/time"; +import DatePicker from "../index"; +import TimeComponent from "../time"; describe("DatePicker", () => { it("should show time component when showTimeSelect prop is present", () => { diff --git a/test/test_utils.ts b/src/test/test_utils.ts similarity index 96% rename from test/test_utils.ts rename to src/test/test_utils.ts index dbc625b59..3b30daada 100644 --- a/test/test_utils.ts +++ b/src/test/test_utils.ts @@ -1,4 +1,4 @@ -import { KeyType } from "../src/date_utils"; +import { KeyType } from "../date_utils"; interface KeyEvent { key: string; diff --git a/test/time_format_test.test.tsx b/src/test/time_format_test.test.tsx similarity index 98% rename from test/time_format_test.test.tsx rename to src/test/time_format_test.test.tsx index 643ffcb6e..617914f0e 100644 --- a/test/time_format_test.test.tsx +++ b/src/test/time_format_test.test.tsx @@ -2,8 +2,8 @@ import { render, waitFor } from "@testing-library/react"; import { ptBR } from "date-fns/locale/pt-BR"; import React from "react"; -import * as utils from "../src/date_utils"; -import TimeComponent from "../src/time"; +import * as utils from "../date_utils"; +import TimeComponent from "../time"; describe("TimeComponent", () => { utils.registerLocale("pt-BR", ptBR); diff --git a/test/time_input_test.test.tsx b/src/test/time_input_test.test.tsx similarity index 98% rename from test/time_input_test.test.tsx rename to src/test/time_input_test.test.tsx index ad84a488f..68bc21298 100644 --- a/test/time_input_test.test.tsx +++ b/src/test/time_input_test.test.tsx @@ -1,8 +1,8 @@ import { render, fireEvent, act } from "@testing-library/react"; import React from "react"; -import DatePicker from "../src/index"; -import InputTimeComponent from "../src/input_time"; +import DatePicker from "../index"; +import InputTimeComponent from "../input_time"; import CustomTimeInput from "./helper_components/custom_time_input"; diff --git a/test/timepicker_test.test.tsx b/src/test/timepicker_test.test.tsx similarity index 98% rename from test/timepicker_test.test.tsx rename to src/test/timepicker_test.test.tsx index c5cc95196..eb16b2be6 100644 --- a/test/timepicker_test.test.tsx +++ b/src/test/timepicker_test.test.tsx @@ -1,8 +1,8 @@ import { render, fireEvent, waitFor } from "@testing-library/react"; import React from "react"; -import { newDate, formatDate, KeyType } from "../src/date_utils"; -import DatePicker from "../src/index"; +import { newDate, formatDate, KeyType } from "../date_utils"; +import DatePicker from "../index"; import { getKey } from "./test_utils"; diff --git a/test/week_number_test.test.tsx b/src/test/week_number_test.test.tsx similarity index 99% rename from test/week_number_test.test.tsx rename to src/test/week_number_test.test.tsx index 533cb5ae6..4ecd5bcda 100644 --- a/test/week_number_test.test.tsx +++ b/src/test/week_number_test.test.tsx @@ -1,8 +1,8 @@ import { render, fireEvent } from "@testing-library/react"; import React from "react"; -import * as utils from "../src/date_utils"; -import WeekNumber from "../src/week_number"; +import * as utils from "../date_utils"; +import WeekNumber from "../week_number"; function renderWeekNumber(weekNumber, props = {}) { return render( diff --git a/test/week_picker_test.test.tsx b/src/test/week_picker_test.test.tsx similarity index 97% rename from test/week_picker_test.test.tsx rename to src/test/week_picker_test.test.tsx index 8051d4fbb..1320e19b3 100644 --- a/test/week_picker_test.test.tsx +++ b/src/test/week_picker_test.test.tsx @@ -1,7 +1,7 @@ import { render, fireEvent } from "@testing-library/react"; import React from "react"; -import DatePicker from "../src/index"; +import DatePicker from "../index"; describe("WeekPicker", () => { it("should change the week when clicked on any option in the picker", () => { diff --git a/test/week_test.test.tsx b/src/test/week_test.test.tsx similarity index 99% rename from test/week_test.test.tsx rename to src/test/week_test.test.tsx index ab810ec1d..3394affe1 100644 --- a/test/week_test.test.tsx +++ b/src/test/week_test.test.tsx @@ -1,8 +1,8 @@ import { render, fireEvent } from "@testing-library/react"; import React from "react"; -import * as utils from "../src/date_utils"; -import Week from "../src/week"; +import * as utils from "../date_utils"; +import Week from "../week"; describe("Week", () => { it("should have the week CSS class", () => { diff --git a/test/year_dropdown_options_test.test.tsx b/src/test/year_dropdown_options_test.test.tsx similarity index 99% rename from test/year_dropdown_options_test.test.tsx rename to src/test/year_dropdown_options_test.test.tsx index bee0d4d0f..e0021bf2d 100644 --- a/test/year_dropdown_options_test.test.tsx +++ b/src/test/year_dropdown_options_test.test.tsx @@ -2,8 +2,8 @@ import { render, fireEvent } from "@testing-library/react"; import React from "react"; import onClickOutside from "react-onclickoutside"; -import * as utils from "../src/date_utils"; -import YearDropdownOptions from "../src/year_dropdown_options"; +import * as utils from "../date_utils"; +import YearDropdownOptions from "../year_dropdown_options"; describe("YearDropdownOptions", () => { let yearDropdown: HTMLElement | null = null, diff --git a/test/year_dropdown_test.test.tsx b/src/test/year_dropdown_test.test.tsx similarity index 98% rename from test/year_dropdown_test.test.tsx rename to src/test/year_dropdown_test.test.tsx index 197cd1580..575379e35 100644 --- a/test/year_dropdown_test.test.tsx +++ b/src/test/year_dropdown_test.test.tsx @@ -2,8 +2,8 @@ import { render, fireEvent } from "@testing-library/react"; import range from "lodash/range"; import React from "react"; -import { newDate } from "../src/date_utils"; -import YearDropdown from "../src/year_dropdown"; +import { newDate } from "../date_utils"; +import YearDropdown from "../year_dropdown"; describe("YearDropdown", () => { let yearDropdown: HTMLElement | null = null; diff --git a/test/year_picker_test.test.tsx b/src/test/year_picker_test.test.tsx similarity index 99% rename from test/year_picker_test.test.tsx rename to src/test/year_picker_test.test.tsx index 94c05e5ac..a8cf8860b 100644 --- a/test/year_picker_test.test.tsx +++ b/src/test/year_picker_test.test.tsx @@ -1,9 +1,9 @@ import { render, fireEvent } from "@testing-library/react"; import React from "react"; -import * as utils from "../src/date_utils"; -import DatePicker from "../src/index"; -import Year from "../src/year"; +import * as utils from "../date_utils"; +import DatePicker from "../index"; +import Year from "../year"; import { getKey } from "./test_utils"; diff --git a/tsconfig.build.json b/tsconfig.build.json new file mode 100644 index 000000000..65a6e269b --- /dev/null +++ b/tsconfig.build.json @@ -0,0 +1,4 @@ +{ + "extends": "./tsconfig.json", + "exclude": ["node_modules", "dist", "src/test/**/*"] +} diff --git a/tsconfig.dev.json b/tsconfig.dev.json deleted file mode 100644 index 63fd9d48d..000000000 --- a/tsconfig.dev.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": "./tsconfig.json", - "include": ["test/**/*"] -} diff --git a/tsconfig.json b/tsconfig.json index 2eb61d0d4..65678a241 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,7 +4,6 @@ "noFallthroughCasesInSwitch": true, "noUnusedParameters": true, "noUnusedLocals": true, - "declarationDir": "dist/types", "declaration": true, "strict": true, "noUncheckedIndexedAccess": true, @@ -21,7 +20,8 @@ "strictNullChecks": true, "esModuleInterop": true, "baseUrl": "src/", - "typeRoots": ["./src/@types"] + "typeRoots": ["./src/@types", "./node_modules/@types"], + "types": ["node", "jest"] }, "include": ["src/**/*"], "exclude": ["node_modules", "dist"] From a944948adc88492c00969459ed2ac6c58bdc2420 Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 01:25:18 +0900 Subject: [PATCH 02/17] fix src/test/show_time_test.test.tsx --- src/test/show_time_test.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/test/show_time_test.test.tsx b/src/test/show_time_test.test.tsx index 9ab79ed51..742cc7ab5 100644 --- a/src/test/show_time_test.test.tsx +++ b/src/test/show_time_test.test.tsx @@ -21,12 +21,12 @@ describe("DatePicker", () => { }); describe("Time Select Only", () => { - let datePicker; + let datePicker: HTMLElement; beforeEach(() => { datePicker = render( , ).container; - fireEvent.click(datePicker.querySelector("input")); + fireEvent.click(datePicker.querySelector("input") ?? new HTMLElement()); }); it("should not show month container when showTimeSelectOnly prop is present", () => { From 16c2e46a36c63263ca8475c378336ac9cd8388d4 Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 01:26:48 +0900 Subject: [PATCH 03/17] fix src/test/calendar_icon.test.tsx --- src/test/calendar_icon.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/test/calendar_icon.test.tsx b/src/test/calendar_icon.test.tsx index 8b8928b56..27f5c241e 100644 --- a/src/test/calendar_icon.test.tsx +++ b/src/test/calendar_icon.test.tsx @@ -6,7 +6,7 @@ import CalendarIcon from "../calendar_icon"; import { IconParkSolidApplication } from "./helper_components/calendar_icon"; describe("CalendarIcon", () => { - let onClickMock; + let onClickMock: jest.Mock; beforeEach(() => { onClickMock = jest.fn(); }); From 7c068afa8d9d5a7a576ad2b8d61dd4aa69aac2f7 Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 01:29:52 +0900 Subject: [PATCH 04/17] fix src/test/date_utils_test.test.ts --- src/test/date_utils_test.test.ts | 28 ++++++++++++++-------------- tsconfig.build.json | 3 +++ tsconfig.json | 2 +- 3 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/test/date_utils_test.test.ts b/src/test/date_utils_test.test.ts index 8d7330075..a3d5c2511 100644 --- a/src/test/date_utils_test.test.ts +++ b/src/test/date_utils_test.test.ts @@ -318,20 +318,20 @@ describe("date_utils", () => { it("should be enabled if date filter returns true", () => { const day = newDate(); - const filterDate = (d) => isEqual(d, day); + const filterDate = (d: Date) => isEqual(d, day); expect(isDayDisabled(day, { filterDate })).toBe(false); }); it("should be disabled if date filter returns false", () => { const day = newDate(); - const filterDate = (d) => !isEqual(d, day); + const filterDate = (d: Date) => !isEqual(d, day); expect(isDayDisabled(day, { filterDate })).toBe(true); }); it("should not allow date filter to modify input date", () => { const day = newDate(); const dayClone = newDate(day); - const filterDate = (d) => { + const filterDate = (d: Date) => { addDays(d, 1); return true; }; @@ -456,20 +456,20 @@ describe("date_utils", () => { it("should be enabled if date filter returns true", () => { const day = newDate(); - const filterDate = (d) => isEqual(d, day); + const filterDate = (d: Date) => isEqual(d, day); expect(isMonthDisabled(day, { filterDate })).toBe(false); }); it("should be disabled if date filter returns false", () => { const day = newDate(); - const filterDate = (d) => !isEqual(d, day); + const filterDate = (d: Date) => !isEqual(d, day); expect(isMonthDisabled(day, { filterDate })).toBe(true); }); it("should not allow date filter to modify input date", () => { const day = newDate(); const dayClone = newDate(day); - const filterDate = (d) => { + const filterDate = (d: Date) => { addDays(d, 40); return true; }; @@ -540,20 +540,20 @@ describe("date_utils", () => { it("should be enabled if date filter returns true", () => { const day = newDate(); - const filterDate = (d) => isEqual(d, day); + const filterDate = (d: Date) => isEqual(d, day); expect(isQuarterDisabled(day, { filterDate })).toBe(false); }); it("should be disabled if date filter returns false", () => { const day = newDate(); - const filterDate = (d) => !isEqual(d, day); + const filterDate = (d: Date) => !isEqual(d, day); expect(isQuarterDisabled(day, { filterDate })).toBe(true); }); it("should not allow date filter to modify input date", () => { const day = newDate(); const dayClone = newDate(day); - const filterDate = (d) => { + const filterDate = (d: Date) => { addDays(d, 40); return true; }; @@ -605,12 +605,12 @@ describe("date_utils", () => { }); it("should be enabled if date filter returns true", () => { - const filterDate = (d) => isSameYear(d, newYearsDay); + const filterDate = (d: Date) => isSameYear(d, newYearsDay); expect(isYearDisabled(year, { filterDate })).toBe(false); }); it("should be disabled if date filter returns false", () => { - const filterDate = (d) => !isSameYear(d, newYearsDay); + const filterDate = (d: Date) => !isSameYear(d, newYearsDay); expect(isYearDisabled(year, { filterDate })).toBe(true); }); }); @@ -868,14 +868,14 @@ describe("date_utils", () => { it("should be enabled if time filter returns true", () => { const date = newDate(); const time = setHours(setMinutes(date, 30), 1); - const filterTime = (t) => isEqual(t, time); + const filterTime = (t: Date) => isEqual(t, time); expect(isTimeDisabled(time, { filterTime })).toBe(false); }); it("should be disabled if time filter returns false", () => { const date = newDate(); const time = setHours(setMinutes(date, 30), 1); - const filterTime = (t) => !isEqual(t, time); + const filterTime = (t: Date) => !isEqual(t, time); expect(isTimeDisabled(time, { filterTime })).toBe(true); }); @@ -883,7 +883,7 @@ describe("date_utils", () => { const date = newDate(); const time = setHours(setMinutes(date, 30), 1); const timeClone = newDate(time); - const filterTime = (t) => { + const filterTime = (t: Date) => { addHours(t, 1); return true; }; diff --git a/tsconfig.build.json b/tsconfig.build.json index 65a6e269b..8caab2a97 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -1,4 +1,7 @@ { + "compilerOptions": { + "target": "es5" + }, "extends": "./tsconfig.json", "exclude": ["node_modules", "dist", "src/test/**/*"] } diff --git a/tsconfig.json b/tsconfig.json index 65678a241..7bc5c097d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,7 +8,7 @@ "strict": true, "noUncheckedIndexedAccess": true, "module": "esnext", - "target": "es5", + "target": "ES2015", "lib": ["ES2021", "dom"], "sourceMap": true, "jsx": "react", From 3d23b17672022c814dc99370435234e774b8e8b4 Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 01:37:46 +0900 Subject: [PATCH 05/17] fix src/test/day_test.test.tsx --- src/test/day_test.test.tsx | 42 +++++++++++++++++++++++--------------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/src/test/day_test.test.tsx b/src/test/day_test.test.tsx index ae66b00c4..07c347a68 100644 --- a/src/test/day_test.test.tsx +++ b/src/test/day_test.test.tsx @@ -15,7 +15,7 @@ import { } from "../date_utils"; import Day from "../day"; -function renderDay(day, props = {}) { +function renderDay(day: Date, props = {}) { return render( {}} {...props} />, ).container; @@ -46,7 +46,7 @@ describe("Day", () => { it("should render custom day contents", () => { const day = newDate(); - function renderDayContents(day, date) { + function renderDayContents(_day: Date, date: Date) { const tooltipText = `Tooltip for date: ${date}`; return {getDate(date)}; } @@ -57,14 +57,14 @@ describe("Day", () => { describe("selected", () => { const className = "react-datepicker__day--selected"; - let day; + let day: Date; beforeEach(() => { day = newDate(); }); describe("if selected", () => { - let container; + let container: HTMLElement; beforeEach(() => { container = renderDay(day, { selected: day }); }); @@ -81,7 +81,7 @@ describe("Day", () => { expect( container .querySelector(".react-datepicker__day") - .getAttribute("aria-selected"), + ?.getAttribute("aria-selected"), ).toBe("true"); }); @@ -111,7 +111,7 @@ describe("Day", () => { }); describe("if not selected", () => { - let container; + let container: HTMLElement; beforeEach(() => { const selected = addDays(day, 1); container = renderDay(day, { selected }); @@ -129,7 +129,7 @@ describe("Day", () => { expect( container .querySelector(".react-datepicker__day") - .getAttribute("aria-selected"), + ?.getAttribute("aria-selected"), ).toBe("false"); }); }); @@ -371,7 +371,7 @@ describe("Day", () => { it("should pass rendered days date to dayClassName func", () => { const day = newDate(); - const dayClassNameFunc = (date) => { + const dayClassNameFunc = (date: Date) => { expect(date).toBe(day); return className; }; @@ -495,7 +495,11 @@ describe("Day", () => { "react-datepicker__day--selecting-range-start"; const rangeDayEndClassName = "react-datepicker__day--selecting-range-end"; - function createDateRange(beforeDays, afterDays, day = newDate()) { + function createDateRange( + beforeDays: number, + afterDays: number, + day = newDate(), + ) { return { startDate: subDays(day, beforeDays), endDate: addDays(day, afterDays), @@ -1191,7 +1195,7 @@ describe("Day", () => { }); describe("click", () => { - let onClickCalled; + let onClickCalled: boolean; function onClick() { onClickCalled = true; @@ -1303,7 +1307,11 @@ describe("Day", () => { const rangeDayStartClassName = "react-datepicker__day--range-start"; const rangeDayEndClassName = "react-datepicker__day--range-end"; - function createDateRange(beforeDays, afterDays, day = newDate()) { + function createDateRange( + beforeDays: number, + afterDays: number, + day = newDate(), + ) { return { startDate: subDays(day, beforeDays), endDate: addDays(day, afterDays), @@ -1465,7 +1473,7 @@ describe("Day", () => { it("should apply focus to the preselected day", async () => { const day = newDate(); - let instance; + let instance: Day | null = null; render( { @@ -1479,20 +1487,20 @@ describe("Day", () => { ); const focusSpy = jest - .spyOn(instance.dayEl.current, "focus") + .spyOn(instance!.dayEl.current!, "focus") .mockImplementation(); Object.defineProperty(document, "activeElement", { value: undefined, writable: false, }); - instance.componentDidMount(); + instance!.componentDidMount(); expect(focusSpy).toHaveBeenCalledTimes(1); }); it("should not apply focus to the preselected day if inline", () => { const day = newDate(); - let instance; + let instance: Day | null; render( { @@ -1506,13 +1514,13 @@ describe("Day", () => { />, ); - const focusSpy = jest.spyOn(instance.dayEl.current, "focus"); + const focusSpy = jest.spyOn(instance!.dayEl.current!, "focus"); Object.defineProperty(document, "activeElement", { value: undefined, writable: false, }); - instance.componentDidMount(); + instance!.componentDidMount(); expect(focusSpy).not.toHaveBeenCalledTimes(1); }); }); From a3ec2c010b5e4bd32e9ae2174be8fec3c4d2b996 Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 01:38:28 +0900 Subject: [PATCH 06/17] fix src/test/exclude_dates.test.tsx --- src/test/exclude_dates.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/test/exclude_dates.test.tsx b/src/test/exclude_dates.test.tsx index 22048df80..39a435bef 100644 --- a/src/test/exclude_dates.test.tsx +++ b/src/test/exclude_dates.test.tsx @@ -40,10 +40,10 @@ describe("DatePicker", () => { ); expect(disabledTimeItems.length).toBe(excludeDatesWithMessages.length); - expect(disabledTimeItems[0].getAttribute("title")).toBe( + expect(disabledTimeItems[0]?.getAttribute("title")).toBe( "This day is excluded", ); - expect(disabledTimeItems[1].getAttribute("title")).toBe( + expect(disabledTimeItems[1]?.getAttribute("title")).toBe( "Today is excluded", ); }); From 329d6e382adabbdcfe75f06e49a63a6fa46feaf7 Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 01:39:16 +0900 Subject: [PATCH 07/17] fix src/test/exclude_times_test.test.tsx --- src/test/exclude_times_test.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/test/exclude_times_test.test.tsx b/src/test/exclude_times_test.test.tsx index 5c90cc4f8..69745a3e3 100644 --- a/src/test/exclude_times_test.test.tsx +++ b/src/test/exclude_times_test.test.tsx @@ -5,7 +5,7 @@ import { setTime, newDate } from "../date_utils"; import DatePicker from "../index"; describe("DatePicker", () => { - let now, excludeTimes; + let now: Date, excludeTimes: Date[]; beforeEach(() => { now = newDate(); From 295db6de563278e01ed5e69347737cb4c54f294a Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 01:39:42 +0900 Subject: [PATCH 08/17] fix src/test/include_times_test.test.tsx --- src/test/include_times_test.test.tsx | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/test/include_times_test.test.tsx b/src/test/include_times_test.test.tsx index c3e89d882..65daddf1c 100644 --- a/src/test/include_times_test.test.tsx +++ b/src/test/include_times_test.test.tsx @@ -1,18 +1,24 @@ import { render } from "@testing-library/react"; import React from "react"; -import * as utils from "../date_utils"; +import { + addHours, + addMinutes, + addSeconds, + getStartOfDay, + newDate, +} from "../date_utils"; import TimeComponent from "../time"; describe("TimeComponent", () => { - let today, includeTimes; + let today: Date, includeTimes: Date[]; beforeEach(() => { - today = utils.getStartOfDay(utils.newDate()); + today = getStartOfDay(newDate()); includeTimes = [ - utils.addMinutes(today, 60), - utils.addMinutes(today, 120), - utils.addMinutes(today, 150), + addMinutes(today, 60), + addMinutes(today, 120), + addMinutes(today, 150), ]; }); @@ -58,8 +64,8 @@ describe("TimeComponent", () => { it("should factor in seconds", () => { const includeHoursMinutesSeconds = [ - utils.addHours(utils.addSeconds(today, 30), 1), //01:00:30 - utils.addSeconds(today, 30), //00:00:30 + addHours(addSeconds(today, 30), 1), //01:00:30 + addSeconds(today, 30), //00:00:30 ]; const { container: timeComponent } = render( Date: Sat, 8 Jun 2024 01:57:29 +0900 Subject: [PATCH 09/17] fix src/test/year_picker_test.test.tsx --- src/test/year_picker_test.test.tsx | 345 ++++++++++++++--------------- 1 file changed, 172 insertions(+), 173 deletions(-) diff --git a/src/test/year_picker_test.test.tsx b/src/test/year_picker_test.test.tsx index a8cf8860b..d7aa4cf80 100644 --- a/src/test/year_picker_test.test.tsx +++ b/src/test/year_picker_test.test.tsx @@ -1,7 +1,16 @@ import { render, fireEvent } from "@testing-library/react"; import React from "react"; -import * as utils from "../date_utils"; +import { + DEFAULT_YEAR_ITEM_NUMBER, + KeyType, + formatDate, + getStartOfYear, + getYear, + getYearsPeriod, + newDate, + setYear, +} from "../date_utils"; import DatePicker from "../index"; import Year from "../year"; @@ -25,7 +34,7 @@ describe("YearPicker", () => { const yearItems = container.querySelectorAll( ".react-datepicker__year-text", ); - expect(yearItems.length).toBe(utils.DEFAULT_YEAR_ITEM_NUMBER); + expect(yearItems.length).toBe(DEFAULT_YEAR_ITEM_NUMBER); }); it("should show year picker component with specific year item number", () => { @@ -57,7 +66,7 @@ describe("YearPicker", () => { const firstYearDiv = container.querySelectorAll( ".react-datepicker__year-text", )[1]; - fireEvent.click(firstYearDiv); + fireEvent.click(firstYearDiv ?? new HTMLElement()); expect(onYearChangeSpy).toHaveBeenCalled(); }); @@ -73,8 +82,8 @@ describe("YearPicker", () => { ); const year = container.querySelectorAll( ".react-datepicker__year-text--selected", - )[0].textContent; - expect(year).toBe(utils.getYear(date).toString()); + )[0]?.textContent; + expect(year).toBe(getYear(date).toString()); }); it("should have current year class when element of array equal of current year", () => { @@ -89,7 +98,7 @@ describe("YearPicker", () => { const year = container.querySelector( ".react-datepicker__year-text--today", )?.textContent; - expect(year).toBe(utils.getYear(date).toString()); + expect(year).toBe(getYear(date).toString()); }); it("should have aria-current date when element of array equal to current year", () => { @@ -126,9 +135,9 @@ describe("YearPicker", () => { it("should return disabled class if current date is out of bound of minDate and maxDate", () => { const { container } = render( {}} onYearMouseLeave={() => {}} />, @@ -140,11 +149,11 @@ describe("YearPicker", () => { }); it("should not return disabled class if current date is before minDate but same year", () => { - const date = utils.newDate("2023-01-01"); + const date = newDate("2023-01-01"); const { container } = render( {}} onYearMouseLeave={() => {}} />, @@ -152,24 +161,24 @@ describe("YearPicker", () => { const yearTexts = container.querySelectorAll( ".react-datepicker__year-text", ); - const firstYear = utils.getYearsPeriod( + const firstYear = getYearsPeriod( date, - utils.DEFAULT_YEAR_ITEM_NUMBER, + DEFAULT_YEAR_ITEM_NUMBER, ).startPeriod; expect( - yearTexts[2023 - firstYear].classList.contains( + yearTexts[2023 - firstYear]?.classList.contains( "react-datepicker__year-text--disabled", ), ).toBe(false); }); it("should not return disabled class if current date is after maxDate but same year", () => { - const date = utils.newDate("2023-12-31"); + const date = newDate("2023-12-31"); const { container } = render( {}} onYearMouseLeave={() => {}} />, @@ -177,33 +186,33 @@ describe("YearPicker", () => { const yearTexts = container.querySelectorAll( ".react-datepicker__year-text", ); - const firstYear = utils.getYearsPeriod( + const firstYear = getYearsPeriod( date, - utils.DEFAULT_YEAR_ITEM_NUMBER, + DEFAULT_YEAR_ITEM_NUMBER, ).startPeriod; expect( - yearTexts[2023 - firstYear].classList.contains( + yearTexts[2023 - firstYear]?.classList.contains( "react-datepicker__year-text--disabled", ), ).toBe(false); }); it("should return disabled class if specified excludeDate", () => { - const date = utils.newDate("2023-12-31"); - const firstYear = utils.getYearsPeriod( + const date = newDate("2023-12-31"); + const firstYear = getYearsPeriod( date, - utils.DEFAULT_YEAR_ITEM_NUMBER, + DEFAULT_YEAR_ITEM_NUMBER, ).startPeriod; const excludeDates: Date[] = []; for (let year = firstYear; year <= 2023; year++) { - excludeDates.push(utils.newDate(`${year}-01-01`)); + excludeDates.push(newDate(`${year}-01-01`)); } const { container } = render( {}} onYearMouseLeave={() => {}} @@ -217,25 +226,25 @@ describe("YearPicker", () => { for (let i = 0; i <= 2023 - firstYear; i++) { const year = yearTexts[i]; expect( - year.classList.contains("react-datepicker__year-text--disabled"), + year?.classList.contains("react-datepicker__year-text--disabled"), ).toBe(true); } }); it("should return disabled class if specified includeDate", () => { - const date = utils.newDate("2023-12-31"); - const firstYear = utils.getYearsPeriod( + const date = newDate("2023-12-31"); + const firstYear = getYearsPeriod( date, - utils.DEFAULT_YEAR_ITEM_NUMBER, + DEFAULT_YEAR_ITEM_NUMBER, ).startPeriod; const includeDates: Date[] = []; for (let year = firstYear; year <= 2023; year++) { - includeDates.push(utils.newDate(`${year}-01-01`)); + includeDates.push(newDate(`${year}-01-01`)); } const { container } = render( {}} onYearMouseLeave={() => {}} @@ -250,13 +259,13 @@ describe("YearPicker", () => { for (let i = 0; i <= pos; i++) { const year = yearTexts[i]; expect( - year.classList.contains("react-datepicker__year-text--disabled"), + year?.classList.contains("react-datepicker__year-text--disabled"), ).toBe(false); } for (let i = pos + 1; i < 12; i++) { const year = yearTexts[i]; expect( - year.classList.contains("react-datepicker__year-text--disabled"), + year?.classList.contains("react-datepicker__year-text--disabled"), ).toBe(true); } }); @@ -267,7 +276,7 @@ describe("YearPicker", () => { } const { container } = render( {}} onYearMouseLeave={() => {}} @@ -281,9 +290,9 @@ describe("YearPicker", () => { it("should add range classes", () => { const { container } = render( {}} onYearMouseLeave={() => {}} />, @@ -294,31 +303,31 @@ describe("YearPicker", () => { ); expect(inRangeYears.length).toBe(4); - expect(inRangeYears[0].textContent).toBe("2009"); - expect(inRangeYears[1].textContent).toBe("2010"); - expect(inRangeYears[2].textContent).toBe("2011"); - expect(inRangeYears[3].textContent).toBe("2012"); + expect(inRangeYears[0]?.textContent).toBe("2009"); + expect(inRangeYears[1]?.textContent).toBe("2010"); + expect(inRangeYears[2]?.textContent).toBe("2011"); + expect(inRangeYears[3]?.textContent).toBe("2012"); const rangeStartYear = container.querySelectorAll( ".react-datepicker__year-text--range-start", ); expect(rangeStartYear.length).toBe(1); - expect(rangeStartYear[0].textContent).toBe("2009"); + expect(rangeStartYear[0]?.textContent).toBe("2009"); const rangeEndYear = container.querySelectorAll( ".react-datepicker__year-text--range-end", ); expect(rangeEndYear.length).toBe(1); - expect(rangeEndYear[0].textContent).toBe("2012"); + expect(rangeEndYear[0]?.textContent).toBe("2012"); }); it("should not add range classes when start date is not defined", () => { const { container } = render( {}} onYearMouseLeave={() => {}} />, @@ -342,8 +351,8 @@ describe("YearPicker", () => { it("should not add range classes when end date is not defined", () => { const { container } = render( {}} onYearMouseLeave={() => {}} />, @@ -368,10 +377,10 @@ describe("YearPicker", () => { it("should add in-selecting-range class if year is between the selecting date and end date", () => { const { container } = render( {}} onYearMouseLeave={() => {}} @@ -383,17 +392,17 @@ describe("YearPicker", () => { ); expect(years.length).toBe(2); - expect(years[0].textContent).toBe("2015"); - expect(years[1].textContent).toBe("2016"); + expect(years[0]?.textContent).toBe("2015"); + expect(years[1]?.textContent).toBe("2016"); }); it("should add in-selecting-range class if year is between the start date and selecting date", () => { const { container } = render( {}} onYearMouseLeave={() => {}} @@ -405,16 +414,16 @@ describe("YearPicker", () => { ); expect(years.length).toBe(2); - expect(years[0].textContent).toBe("2010"); - expect(years[1].textContent).toBe("2011"); + expect(years[0]?.textContent).toBe("2010"); + expect(years[1]?.textContent).toBe("2011"); }); it("should use pre selection date if selecting date is not defined", () => { const { container } = render( {}} onYearMouseLeave={() => {}} @@ -426,17 +435,17 @@ describe("YearPicker", () => { ); expect(years.length).toBe(2); - expect(years[0].textContent).toBe("2010"); - expect(years[1].textContent).toBe("2011"); + expect(years[0]?.textContent).toBe("2010"); + expect(years[1]?.textContent).toBe("2011"); }); it("should add in-selecting-range class for one year picker if year is between the start date and selecting date", () => { const { container } = render( {}} onYearMouseLeave={() => {}} @@ -447,16 +456,16 @@ describe("YearPicker", () => { ); expect(years.length).toBe(2); - expect(years[0].textContent).toBe("2010"); - expect(years[1].textContent).toBe("2011"); + expect(years[0]?.textContent).toBe("2010"); + expect(years[1]?.textContent).toBe("2011"); }); it("should not add in-selecting-range class for one year picker if the start date is not defined", () => { const { container } = render( {}} onYearMouseLeave={() => {}} @@ -472,10 +481,10 @@ describe("YearPicker", () => { it("should not add in-selecting-range class for one year picker if the end date is defined", () => { const { container } = render( {}} onYearMouseLeave={() => {}} @@ -491,10 +500,10 @@ describe("YearPicker", () => { it("should add 'selecting-range-start' class to the start selecting year", () => { const { container } = render( {}} onYearMouseLeave={() => {}} @@ -504,17 +513,17 @@ describe("YearPicker", () => { ".react-datepicker__year-text--selecting-range-start", ); expect(years.length).toBe(1); - expect(years[0].textContent).toBe("2012"); + expect(years[0]?.textContent).toBe("2012"); }); it("should add 'selecting-range-end' class to the end selecting year", () => { const { container } = render( {}} onYearMouseLeave={() => {}} @@ -524,7 +533,7 @@ describe("YearPicker", () => { ".react-datepicker__year-text--selecting-range-end", ); expect(years.length).toBe(1); - expect(years[0].textContent).toBe("2014"); + expect(years[0]?.textContent).toBe("2014"); }); }); }); @@ -533,13 +542,11 @@ describe("YearPicker", () => { const className = "react-datepicker__year-text--keyboard-selected"; it("should set the date to the selected year of the previous period when previous button clicked", () => { - let date; - const expectedDate = utils.getStartOfYear( - utils.setYear(utils.newDate(), 2008), - ); + let date: Date | null; + const expectedDate = getStartOfYear(setYear(newDate(), 2008)); const { container } = render( { @@ -559,20 +566,18 @@ describe("YearPicker", () => { const year = container.querySelector(".react-datepicker__year"); const allPreselectedYears = year?.querySelectorAll(`.${className}`) ?? []; - expect(utils.formatDate(date, "dd.MM.yyyy")).toBe( - utils.formatDate(expectedDate, "dd.MM.yyyy"), + expect(formatDate(date!, "dd.MM.yyyy")).toBe( + formatDate(expectedDate, "dd.MM.yyyy"), ); expect(allPreselectedYears.length).toBe(1); }); it("should set the date to the selected year of the next period when next button clicked", () => { - let date; - const expectedDate = utils.getStartOfYear( - utils.setYear(utils.newDate(), 2032), - ); + let date: Date | null; + const expectedDate = getStartOfYear(setYear(newDate(), 2032)); const { container } = render( { @@ -593,31 +598,34 @@ describe("YearPicker", () => { const year = container.querySelector(".react-datepicker__year"); const allPreselectedYears = year?.querySelectorAll(`.${className}`) ?? []; - expect(utils.formatDate(date, "dd.MM.yyyy")).toBe( - utils.formatDate(expectedDate, "dd.MM.yyyy"), + expect(formatDate(date!, "dd.MM.yyyy")).toBe( + formatDate(expectedDate, "dd.MM.yyyy"), ); expect(allPreselectedYears.length).toBe(1); }); }); describe("Keyboard navigation", () => { - let preSelected; - const setPreSelection = (preSelection) => { - preSelected = preSelection; + let preSelected: Date | null | undefined; + const setPreSelection = (preSelection: Date | null | undefined) => { + preSelected = preSelection ? newDate(preSelection) : preSelection; }; - let selectedDay; - const onDayClick = (day) => { + let selectedDay: Date | null | undefined; + const onDayClick = (day: Date | null | undefined) => { selectedDay = day; }; - const getPicker = (initialDate, props = {}) => + const getPicker = ( + initialDate: string | number | Date | null | undefined, + props = {}, + ) => render( {}} @@ -626,147 +634,144 @@ describe("YearPicker", () => { />, ).container; - const simulateLeft = (target) => - fireEvent.keyDown(target, getKey(utils.KeyType.ArrowLeft)); - const simulateRight = (target) => - fireEvent.keyDown(target, getKey(utils.KeyType.ArrowRight)); - const simulateUp = (target) => - fireEvent.keyDown(target, getKey(utils.KeyType.ArrowUp)); - const simulateDown = (target) => - fireEvent.keyDown(target, getKey(utils.KeyType.ArrowDown)); + const simulateLeft = (target: HTMLElement) => + fireEvent.keyDown(target, getKey(KeyType.ArrowLeft)); + const simulateRight = (target: HTMLElement) => + fireEvent.keyDown(target, getKey(KeyType.ArrowRight)); + const simulateUp = (target: HTMLElement) => + fireEvent.keyDown(target, getKey(KeyType.ArrowUp)); + const simulateDown = (target: HTMLElement) => + fireEvent.keyDown(target, getKey(KeyType.ArrowDown)); it("should preSelect and set 2020 on left arrow press", () => { const yearPicker = getPicker("2021-01-01"); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - simulateLeft(target); + simulateLeft(target ?? new HTMLElement()); - expect(utils.getYear(preSelected)).toBe(2020); + expect(preSelected ? getYear(preSelected) : preSelected).toBe(2020); }); it("should preSelect and set 2022 on left arrow press", () => { const yearPicker = getPicker("2021-01-01"); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - simulateRight(target); + simulateRight(target ?? new HTMLElement()); - expect(utils.getYear(preSelected)).toBe(2022); + expect(preSelected ? getYear(preSelected) : preSelected).toBe(2022); }); it("should preSelect and set 2021 on up arrow press", () => { const yearPicker = getPicker("2024-01-01"); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - simulateUp(target); + simulateUp(target ?? new HTMLElement()); - expect(utils.getYear(preSelected)).toBe(2021); + expect(preSelected ? getYear(preSelected) : preSelected).toBe(2021); }); it("should preSelect and set 2027 on down arrow press", () => { const yearPicker = getPicker("2024-01-01"); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - simulateDown(target); + simulateDown(target ?? new HTMLElement()); - expect(utils.getYear(preSelected)).toBe(2027); + expect(preSelected ? getYear(preSelected) : preSelected).toBe(2027); }); it("should paginate from 2018 to 2015", () => { const yearPicker = getPicker("2018-01-01"); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - simulateUp(target); + simulateUp(target ?? new HTMLElement()); - expect(utils.getYear(preSelected)).toBe(2015); + expect(preSelected ? getYear(preSelected) : preSelected).toBe(2015); }); it("should paginate from 2018 to 2016 with custom yearItemNumber", () => { const yearPicker = getPicker("2018-01-01", { yearItemNumber: 8 }); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - simulateUp(target); + simulateUp(target ?? new HTMLElement()); - expect(utils.getYear(preSelected)).toBe(2016); + expect(preSelected ? getYear(preSelected) : preSelected).toBe(2016); }); it("should paginate from 2019 to 2014 with custom yearItemNumber", () => { const yearPicker = getPicker("2019-01-01", { yearItemNumber: 8 }); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - simulateUp(target); + simulateUp(target ?? new HTMLElement()); - expect(utils.getYear(preSelected)).toBe(2014); + expect(preSelected ? getYear(preSelected) : preSelected).toBe(2014); }); it("should paginate from 2028 to 2031", () => { const yearPicker = getPicker("2028-01-01"); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - simulateDown(target); + simulateDown(target ?? new HTMLElement()); - expect(utils.getYear(preSelected)).toBe(2031); + expect(preSelected ? getYear(preSelected) : preSelected).toBe(2031); }); it("should paginate from 2024 to 2026 with custom yearItemNumber", () => { const yearPicker = getPicker("2024-01-01", { yearItemNumber: 8 }); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - simulateDown(target); + simulateDown(target ?? new HTMLElement()); - expect(utils.getYear(preSelected)).toBe(2026); + expect(preSelected ? getYear(preSelected) : preSelected).toBe(2026); }); it("should paginate from 2022 to 2027 with custom yearItemNumber", () => { const yearPicker = getPicker("2022-01-01", { yearItemNumber: 8 }); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - simulateDown(target); + simulateDown(target ?? new HTMLElement()); - expect(utils.getYear(preSelected)).toBe(2027); + expect(preSelected ? getYear(preSelected) : preSelected).toBe(2027); }); it("should paginate from 2017 to 2016", () => { const yearPicker = getPicker("2017-01-01"); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - simulateLeft(target); + simulateLeft(target ?? new HTMLElement()); - expect(utils.getYear(preSelected)).toBe(2016); + expect(preSelected ? getYear(preSelected) : preSelected).toBe(2016); }); it("should paginate from 2028 to 2029", () => { const yearPicker = getPicker("2028-01-01"); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - simulateRight(target); + simulateRight(target ?? new HTMLElement()); - expect(utils.getYear(preSelected)).toBe(2029); + expect(preSelected ? getYear(preSelected) : preSelected).toBe(2029); }); it("should select 2021 when Enter key is pressed", () => { const yearPicker = getPicker("2021-01-01"); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - fireEvent.keyDown( - target ?? new HTMLElement(), - getKey(utils.KeyType.Enter), - ); - expect(utils.getYear(selectedDay)).toBe(2021); + fireEvent.keyDown(target ?? new HTMLElement(), getKey(KeyType.Enter)); + expect(selectedDay ? getYear(selectedDay) : selectedDay).toBe(2021); }); it("should call onKeyDown handler on any key press", () => { @@ -786,10 +791,7 @@ describe("YearPicker", () => { const year = container.querySelector(".react-datepicker__year-text"); - fireEvent.keyDown( - year ?? new HTMLElement(), - getKey(utils.KeyType.ArrowDown), - ); + fireEvent.keyDown(year ?? new HTMLElement(), getKey(KeyType.ArrowDown)); expect(onKeyDownSpy).toHaveBeenCalledTimes(1); }); @@ -797,15 +799,12 @@ describe("YearPicker", () => { it("should select 2021 when Space key is pressed", () => { const yearPicker = getPicker("2021-01-01"); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - fireEvent.keyDown( - target ?? new HTMLElement(), - getKey(utils.KeyType.Space), - ); - expect(utils.getYear(selectedDay)).toBe(2021); + fireEvent.keyDown(target ?? new HTMLElement(), getKey(KeyType.Space)); + expect(selectedDay ? getYear(selectedDay) : selectedDay).toBe(2021); }); it("should disable keyboard navigation", () => { @@ -813,12 +812,12 @@ describe("YearPicker", () => { disabledKeyboardNavigation: true, }); - const target = yearPicker.querySelector( + const target = yearPicker.querySelector( ".react-datepicker__year-text--selected", ); - simulateRight(target); + simulateRight(target ?? new HTMLElement()); - expect(utils.getYear(preSelected)).toBe(2021); + expect(preSelected ? getYear(preSelected) : preSelected).toBe(2021); }); }); From 869d6f986ba7232716bb100dd00b0a3fed841a93 Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 02:00:12 +0900 Subject: [PATCH 10/17] fix src/test/year_dropdown_test.test.tsx --- src/test/year_dropdown_test.test.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/test/year_dropdown_test.test.tsx b/src/test/year_dropdown_test.test.tsx index 575379e35..5509b0106 100644 --- a/src/test/year_dropdown_test.test.tsx +++ b/src/test/year_dropdown_test.test.tsx @@ -7,9 +7,9 @@ import YearDropdown from "../year_dropdown"; describe("YearDropdown", () => { let yearDropdown: HTMLElement | null = null; - let lastOnChangeValue; + let lastOnChangeValue: number | null; - function onChangeMock(value) { + function onChangeMock(value: number) { lastOnChangeValue = value; } @@ -66,7 +66,7 @@ describe("YearDropdown", () => { ); fireEvent.click( (yearDropdown?.querySelectorAll(".react-datepicker__year-option") ?? - [])[0], + [])[0] ?? new HTMLElement(), ); expect( yearDropdown?.querySelectorAll("react-datepicker__year-dropdown"), @@ -80,7 +80,7 @@ describe("YearDropdown", () => { ); fireEvent.click( (yearDropdown?.querySelectorAll(".react-datepicker__year-option") ?? - [])[6], + [])[6] ?? new HTMLElement(), ); expect(lastOnChangeValue).toBeNull(); }); @@ -92,7 +92,7 @@ describe("YearDropdown", () => { ); fireEvent.click( (yearDropdown?.querySelectorAll(".react-datepicker__year-option") ?? - [])[7], + [])[7] ?? new HTMLElement(), ); expect(lastOnChangeValue).toEqual(2014); }); @@ -104,9 +104,9 @@ describe("YearDropdown", () => { const select: NodeListOf = yearDropdown.querySelectorAll(".react-datepicker__year-select"); expect(select).toHaveLength(1); - expect(select[0].value).toBe("2015"); + expect(select[0]?.value).toBe("2015"); - const options = select[0].querySelectorAll("option"); + const options = select[0]?.querySelectorAll("option") ?? []; expect(Array.from(options).map((o) => o.textContent)).toEqual( range(1900, 2101).map((n) => `${n}`), ); @@ -121,9 +121,9 @@ describe("YearDropdown", () => { const select: NodeListOf = yearDropdown.querySelectorAll(".react-datepicker__year-select"); expect(select).toHaveLength(1); - expect(select[0].value).toEqual("2015"); + expect(select[0]?.value).toEqual("2015"); - const options = select[0].querySelectorAll("option"); + const options = select[0]?.querySelectorAll("option") ?? []; expect(Array.from(options).map((o) => o.textContent)).toEqual( range(1988, 2017).map((n) => `${n}`), ); From ae166a1a7639a2eb5e734a464cb550f9a8a2775f Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 07:48:04 +0900 Subject: [PATCH 11/17] fix fix src/test/year_dropdown_options_test.test.tsx --- src/test/year_dropdown_options_test.test.tsx | 26 +++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/test/year_dropdown_options_test.test.tsx b/src/test/year_dropdown_options_test.test.tsx index e0021bf2d..286419696 100644 --- a/src/test/year_dropdown_options_test.test.tsx +++ b/src/test/year_dropdown_options_test.test.tsx @@ -7,11 +7,11 @@ import YearDropdownOptions from "../year_dropdown_options"; describe("YearDropdownOptions", () => { let yearDropdown: HTMLElement | null = null, - handleChangeResult; - const mockHandleChange = function (changeInput) { + handleChangeResult: number; + const mockHandleChange = function (changeInput: number) { handleChangeResult = changeInput; }; - let onCancelSpy; + let onCancelSpy: jest.Mock; beforeEach(() => { onCancelSpy = jest.fn(); @@ -143,7 +143,7 @@ describe("YearDropdownOptions", () => { describe("selected", () => { const className = "react-datepicker__year-option--selected_year"; - let yearOptions; + let yearOptions: HTMLElement[]; beforeEach(() => { yearOptions = Array.from( @@ -152,11 +152,11 @@ describe("YearDropdownOptions", () => { }); describe("if selected", () => { - let selectedYearOption; + let selectedYearOption: HTMLElement; beforeEach(() => { selectedYearOption = yearOptions.find((o) => o.classList.contains(className), - ); + )!; }); it("should apply the selected class", () => { expect(selectedYearOption.classList.contains(className)).toBe(true); @@ -169,11 +169,11 @@ describe("YearDropdownOptions", () => { }); describe("if not selected", () => { - let selectedYearOption; + let selectedYearOption: HTMLElement; beforeEach(() => { selectedYearOption = yearOptions.find( (o) => !o.classList.contains(className), - ); + )!; }); it("should not apply the selected class", () => { expect(selectedYearOption.classList.contains(className)).toBe(false); @@ -504,7 +504,7 @@ describe("YearDropdownOptions with scrollable dropwdown", () => { it("should scroll year dropdown to the middle on open", () => { const onCancelSpy = jest.fn(); const onChangeSpy = jest.fn(); - let instance; + let instance: YearDropdownOptions | null; render( { @@ -518,11 +518,13 @@ describe("YearDropdownOptions with scrollable dropwdown", () => { />, ); - instance.dropdownRef.current = { + ( + instance!.dropdownRef as { current: Record | null } + ).current = { scrollHeight: 800, clientHeight: 400, }; - instance.componentDidMount(); - expect(instance.dropdownRef.current.scrollTop).toBe(200); + instance!.componentDidMount(); + expect(instance!.dropdownRef.current!.scrollTop).toBe(200); }); }); From 38852471e37c5004442dc445d42c3af50dcaf674 Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 07:52:46 +0900 Subject: [PATCH 12/17] fix src/test/week_test.test.tsx --- src/test/week_test.test.tsx | 122 +++++++++++++++++++----------------- 1 file changed, 65 insertions(+), 57 deletions(-) diff --git a/src/test/week_test.test.tsx b/src/test/week_test.test.tsx index 3394affe1..c3d080e68 100644 --- a/src/test/week_test.test.tsx +++ b/src/test/week_test.test.tsx @@ -1,25 +1,33 @@ import { render, fireEvent } from "@testing-library/react"; import React from "react"; -import * as utils from "../date_utils"; +import { + addDays, + addWeeks, + formatDate, + getStartOfWeek, + getWeek, + isEqual, + newDate, +} from "../date_utils"; import Week from "../week"; describe("Week", () => { it("should have the week CSS class", () => { - const { container } = render(); + const { container } = render(); expect(container.querySelector(".react-datepicker__week")).not.toBeNull(); }); it("should render the days of the week", () => { - const weekStart = utils.getStartOfWeek(utils.newDate("2015-12-20")); + const weekStart = getStartOfWeek(newDate("2015-12-20")); const { container } = render(); const days = container.querySelectorAll(".react-datepicker__day"); expect(days.length).toBe(7); days.forEach((day, offset) => { - const expectedDay = utils.addDays(weekStart, offset); + const expectedDay = addDays(weekStart, offset); expect(day.getAttribute("aria-label")).toEqual( - `Choose ${utils.formatDate(expectedDay, "PPPP")}`, + `Choose ${formatDate(expectedDay, "PPPP")}`, ); }); @@ -30,15 +38,15 @@ describe("Week", () => { }); it("should render the week number", () => { - const weekStart = utils.getStartOfWeek(utils.newDate("2015-12-20")); + const weekStart = getStartOfWeek(newDate("2015-12-20")); const { container } = render(); const days = container.querySelectorAll(".react-datepicker__day"); expect(days.length).toBe(7); days.forEach((day, offset) => { - const expectedDay = utils.addDays(weekStart, offset); + const expectedDay = addDays(weekStart, offset); expect(day.getAttribute("aria-label")).toEqual( - `Choose ${utils.formatDate(expectedDay, "PPPP")}`, + `Choose ${formatDate(expectedDay, "PPPP")}`, ); }); @@ -49,13 +57,13 @@ describe("Week", () => { }); it("should call the provided onDayClick function", () => { - let dayClicked = null; + let dayClicked: Date | null = null; - function onDayClick(day) { + function onDayClick(day: Date) { dayClicked = day; } - const weekStart = utils.newDate("2015-12-20"); + const weekStart = newDate("2015-12-20"); const { container } = render( , ); @@ -64,7 +72,7 @@ describe("Week", () => { fireEvent.click(day); // eslint-disable-next-line jest/no-conditional-expect expect(day.getAttribute("aria-label")).toEqual( - `Choose ${utils.formatDate(dayClicked, "PPPP")}`, + `Choose ${formatDate(dayClicked, "PPPP")}`, ); } else { // eslint-disable-next-line jest/no-conditional-expect @@ -73,13 +81,13 @@ describe("Week", () => { }); it("should call the provided onWeekSelect function and pass the first day of the week", () => { - let firstDayReceived = null; + let firstDayReceived: Date | null = null; - function onWeekClick(newFirstWeekDay) { + function onWeekClick(newFirstWeekDay: Date) { firstDayReceived = newFirstWeekDay; } - const weekStart = utils.newDate("2015-12-20"); + const weekStart = newDate("2015-12-20"); const setOpenSpy = jest.fn(); const { container } = render( { ); expect(weekNumberElement).not.toBeNull(); fireEvent.click(weekNumberElement ?? new HTMLElement()); - expect(utils.isEqual(firstDayReceived, weekStart)).toBe(true); + expect(isEqual(firstDayReceived, weekStart)).toBe(true); }); it("should call the provided onWeekSelect function and call the setopen function", () => { - const weekStart = utils.newDate("2015-12-20"); + const weekStart = newDate("2015-12-20"); const setOpenSpy = jest.fn(); const { container } = render( @@ -119,7 +127,7 @@ describe("Week", () => { }); it("should call the provided onWeekSelect function and not call the setopen function when 'shouldCloseOnSelect' is false", () => { - const weekStart = utils.newDate("2015-12-20"); + const weekStart = newDate("2015-12-20"); const setOpenSpy = jest.fn(); const setOnWeekSelect = jest.fn(); @@ -144,14 +152,14 @@ describe("Week", () => { }); it("should call the provided onWeekSelect function and pass the week number", () => { - let weekNumberReceived = null; + let weekNumberReceived: number | null = null; - function onWeekClick(unused, newWeekNumber) { + function onWeekClick(_unused: Date, newWeekNumber: number) { weekNumberReceived = newWeekNumber; } - const weekStart = utils.newDate("2015-12-20"); - const realWeekNumber = utils.getWeek(weekStart); + const weekStart = newDate("2015-12-20"); + const realWeekNumber = getWeek(weekStart); const { container } = render( { }); it("should set the week number with the provided formatWeekNumber function", () => { - let firstDayReceived = null; + let firstDayReceived: Date | null = null; - function weekNumberFormatter(newFirstWeekDay) { + function weekNumberFormatter(newFirstWeekDay: Date) { firstDayReceived = newFirstWeekDay; return 9; } - const weekStart = utils.newDate("2015-12-20"); + const weekStart = newDate("2015-12-20"); const { container } = render( { ".react-datepicker__week-number", ); expect(weekNumberElement).not.toBeNull(); - expect(utils.isEqual(firstDayReceived, weekStart)).toBe(true); + expect(isEqual(firstDayReceived, weekStart)).toBe(true); expect(weekNumberElement?.getAttribute("aria-label")).toBe("week 9"); }); it("should call the provided onDayMouseEnter (Mouse Event) function", () => { const onDayMouseEnterSpy = jest.fn(); - const weekStart = utils.newDate(); + const weekStart = newDate(); const { container } = render( , ); @@ -204,13 +212,13 @@ describe("Week", () => { fireEvent.mouseEnter(day ?? new HTMLElement()); expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith( - utils.getStartOfWeek(weekStart), + getStartOfWeek(weekStart), ); }); it("should call the provided onDayMouseEnter (Pointer Event) function", () => { const onDayMouseEnterSpy = jest.fn(); - const weekStart = utils.newDate(); + const weekStart = newDate(); const { container } = render( { fireEvent.pointerEnter(day); // eslint-disable-next-line jest/no-conditional-expect expect(onDayMouseEnterSpy).toHaveBeenLastCalledWith( - utils.getStartOfWeek(weekStart), + getStartOfWeek(weekStart), ); // eslint-disable-next-line jest/no-conditional-expect } else expect(day).not.toBeNull(); @@ -235,8 +243,8 @@ describe("Week", () => { const onWeekSelect = jest.fn(); const day = new Date("2022-02-01"); const weekNumber = 5; - const event = { target: {} }; - let instance; + const event = { target: {} } as React.MouseEvent; + let instance: Week | null; render( { @@ -249,15 +257,15 @@ describe("Week", () => { setOpen={() => {}} />, ); - instance.handleWeekClick(day, weekNumber, event); + instance!.handleWeekClick(day, weekNumber, event); expect(onWeekSelect).toHaveBeenCalledWith(day, weekNumber, event); }); it("should call handleDayClick with start of week if showWeekPicker prop is true", () => { const day = new Date("2022-02-01"); const weekNumber = 5; - const event = { target: {} }; - let instance; + const event = { target: {} } as React.MouseEvent; + let instance: Week | null; render( { @@ -270,8 +278,8 @@ describe("Week", () => { setOpen={() => {}} />, ); - const handleDayClick = jest.spyOn(instance, "handleDayClick"); - instance.handleWeekClick(day, weekNumber, event); + const handleDayClick = jest.spyOn(instance!, "handleDayClick"); + instance!.handleWeekClick(day, weekNumber, event); expect(handleDayClick).toHaveBeenCalledWith(day, event); }); @@ -279,8 +287,8 @@ describe("Week", () => { const setOpen = jest.fn(); const day = new Date("2022-02-01"); const weekNumber = 5; - const event = { target: {} }; - let instance; + const event = { target: {} } as React.MouseEvent; + let instance: Week | null; render( { @@ -293,14 +301,14 @@ describe("Week", () => { setOpen={setOpen} />, ); - instance.handleWeekClick(day, weekNumber, event); + instance!.handleWeekClick(day, weekNumber, event); expect(setOpen).toHaveBeenCalledWith(false); }); }); describe("selected and keyboard-selected", () => { it("selected is current week and preselected is also current week", () => { - const currentWeek = utils.newDate("2023-10-22T13:09:53+02:00"); + const currentWeek = newDate("2023-10-22T13:09:53+02:00"); const { container } = render( { }); it("selected is current week and preselected is not current week", () => { - const currentWeek = utils.newDate("2023-10-22T13:09:53+02:00"); - const preSelection = utils.addWeeks(currentWeek, 1); + const currentWeek = newDate("2023-10-22T13:09:53+02:00"); + const preSelection = addWeeks(currentWeek, 1); const { container } = render( { }); it("selected is not current week and preselect is current week", () => { - const currentWeek = utils.newDate("2023-10-22T13:09:53+02:00"); - const selected = utils.addWeeks(currentWeek, 1); + const currentWeek = newDate("2023-10-22T13:09:53+02:00"); + const selected = addWeeks(currentWeek, 1); const { container } = render( { }); it("select is not current week and preselect is not current week", () => { - const currentWeek = utils.newDate("2023-10-22T13:09:53+02:00"); - const selected = utils.addWeeks(currentWeek, 1); + const currentWeek = newDate("2023-10-22T13:09:53+02:00"); + const selected = addWeeks(currentWeek, 1); const { container } = render( , ); @@ -363,12 +371,12 @@ describe("Week", () => { describe("selected and calendarStartDay", () => { it("shoud starts the selected day on the Wednesday immediately preceding that day, When the calendarStartDay Props is 3.", () => { const calendarStartDay = 3; - const currentWeek = utils.getStartOfWeek( - utils.newDate("2024-03-01"), + const currentWeek = getStartOfWeek( + newDate("2024-03-01"), undefined, calendarStartDay, ); - const selected = utils.addWeeks(currentWeek, 0); + const selected = addWeeks(currentWeek, 0); const { container } = render( { expect(days).toHaveLength(7); // 2024-02-28 to 2024-03-05 - expect(days[0].textContent).toBe("28"); - expect(days[1].textContent).toBe("29"); - expect(days[2].textContent).toBe("1"); - expect(days[3].textContent).toBe("2"); - expect(days[4].textContent).toBe("3"); - expect(days[5].textContent).toBe("4"); - expect(days[6].textContent).toBe("5"); + expect(days[0]?.textContent).toBe("28"); + expect(days[1]?.textContent).toBe("29"); + expect(days[2]?.textContent).toBe("1"); + expect(days[3]?.textContent).toBe("2"); + expect(days[4]?.textContent).toBe("3"); + expect(days[5]?.textContent).toBe("4"); + expect(days[6]?.textContent).toBe("5"); }); }); }); From 2045dbd2533e4c9cafc7c65472f87933bbb79ce2 Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 07:55:49 +0900 Subject: [PATCH 13/17] fix src/test/time_input_test.test.tsx --- src/test/time_input_test.test.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/test/time_input_test.test.tsx b/src/test/time_input_test.test.tsx index 68bc21298..a04ba8906 100644 --- a/src/test/time_input_test.test.tsx +++ b/src/test/time_input_test.test.tsx @@ -86,8 +86,8 @@ describe("timeInput", () => { const expectedDate = new Date(mockDate); const [expectedHours, expectedMinutes] = newTime.split(":"); - expectedDate.setHours(parseInt(expectedHours)); - expectedDate.setMinutes(parseInt(expectedMinutes)); + expectedDate.setHours(parseInt(expectedHours!)); + expectedDate.setMinutes(parseInt(expectedMinutes!)); expect(onChangeSpy).toHaveBeenCalledWith(expectedDate); }); @@ -128,8 +128,8 @@ describe("timeInput", () => { const expectedDate = new Date(mockDate); const [expectedHours, expectedMinutes] = newTime.split(":"); - expectedDate.setHours(parseInt(expectedHours)); - expectedDate.setMinutes(parseInt(expectedMinutes)); + expectedDate.setHours(parseInt(expectedHours!)); + expectedDate.setMinutes(parseInt(expectedMinutes!)); expect(mockOnChange).toHaveBeenCalledWith(expectedDate); }); @@ -153,8 +153,8 @@ describe("timeInput", () => { const expectedDate = new Date(mockCurrentDate); const [expectedHours, expectedMinutes] = newTime.split(":"); - expectedDate.setHours(parseInt(expectedHours)); - expectedDate.setMinutes(parseInt(expectedMinutes)); + expectedDate.setHours(parseInt(expectedHours!)); + expectedDate.setMinutes(parseInt(expectedMinutes!)); expect(mockOnChange).toHaveBeenCalledWith(expectedDate); From 6a70e8e8cec71f34eabe3e389c188edc8b1f8c24 Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 08:15:56 +0900 Subject: [PATCH 14/17] fix src/test/timepicker_test.test.tsx --- src/test/timepicker_test.test.tsx | 36 +++++++++++++++---------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/test/timepicker_test.test.tsx b/src/test/timepicker_test.test.tsx index eb16b2be6..0c51ed079 100644 --- a/src/test/timepicker_test.test.tsx +++ b/src/test/timepicker_test.test.tsx @@ -1,7 +1,7 @@ import { render, fireEvent, waitFor } from "@testing-library/react"; import React from "react"; -import { newDate, formatDate, KeyType } from "../date_utils"; +import { formatDate, KeyType } from "../date_utils"; import DatePicker from "../index"; import { getKey } from "./test_utils"; @@ -35,7 +35,7 @@ describe("TimePicker", () => { datePicker?.querySelector(".react-datepicker__time-container") ?? new HTMLElement(); const lis = time?.querySelectorAll("li"); - fireEvent.click(lis[1]); + fireEvent.click(lis[1] ?? new HTMLElement()); expect(getInputString()).toBe("February 28, 2018 12:30 AM"); }); @@ -48,7 +48,7 @@ describe("TimePicker", () => { }); it("should not close datepicker after time clicked when shouldCloseOnSelect is false", () => { - let instance; + let instance: DatePicker | null; const { container } = render( { @@ -58,15 +58,15 @@ describe("TimePicker", () => { showTimeSelect />, ); - fireEvent.focus(instance.input); + fireEvent.focus(instance!.input!); const time = container.querySelector(".react-datepicker__time-container"); const lis = time?.querySelectorAll("li") ?? []; - fireEvent.click(lis[0]); - expect(instance.state.open).toBe(true); + fireEvent.click(lis?.[0] ?? new HTMLElement()); + expect(instance!.state.open).toBe(true); }); it("should show different colors for times", () => { - const handleTimeColors = (time) => { + const handleTimeColors = (time: Date) => { return time.getHours() < 12 ? "red" : "green"; }; const { container } = render( @@ -152,7 +152,7 @@ describe("TimePicker", () => { datePicker?.querySelector(".react-datepicker__time-container") ?? new HTMLElement(); const lis = time.querySelectorAll("li"); - fireEvent.keyDown(lis[1], getKey(KeyType.Enter)); + fireEvent.keyDown(lis[1] ?? new HTMLElement(), getKey(KeyType.Enter)); expect(getInputString()).toBe("February 28, 2018 12:30 AM"); }); @@ -163,7 +163,7 @@ describe("TimePicker", () => { datePicker?.querySelector(".react-datepicker__time-container") ?? new HTMLElement(); const lis = time.querySelectorAll("li"); - fireEvent.keyDown(lis[1], getKey(KeyType.Space)); + fireEvent.keyDown(lis[1] ?? new HTMLElement(), getKey(KeyType.Space)); expect(getInputString()).toBe("February 28, 2018 12:30 AM"); }); @@ -176,7 +176,7 @@ describe("TimePicker", () => { datePicker?.querySelector(".react-datepicker__time-container") ?? new HTMLElement(); const lis = time.querySelectorAll("li"); - fireEvent.keyDown(lis[1], getKey(KeyType.Enter)); + fireEvent.keyDown(lis[1] ?? new HTMLElement(), getKey(KeyType.Enter)); await waitFor(() => { expect(document.activeElement).toBe(input); @@ -190,7 +190,7 @@ describe("TimePicker", () => { datePicker?.querySelector(".react-datepicker__time-container") ?? new HTMLElement(); const lis = time.querySelectorAll("li"); - fireEvent.keyDown(lis[1], getKey(KeyType.Escape)); + fireEvent.keyDown(lis[1] ?? new HTMLElement(), getKey(KeyType.Escape)); expect(getInputString()).toBe("February 28, 2018 4:43 PM"); }); @@ -204,7 +204,7 @@ describe("TimePicker", () => { datePicker?.querySelector(".react-datepicker__time-container") ?? new HTMLElement(); const lis = time.querySelectorAll("li"); - fireEvent.keyDown(lis[1], getKey(KeyType.Escape)); + fireEvent.keyDown(lis[1] ?? new HTMLElement(), getKey(KeyType.Escape)); expect(onKeyDownSpy).toHaveBeenCalledTimes(1); }); @@ -218,7 +218,7 @@ describe("TimePicker", () => { datePicker?.querySelector(".react-datepicker__time-container") ?? new HTMLElement(); const lis = time.querySelectorAll("li"); - fireEvent.keyDown(lis[1], getKey(KeyType.Enter)); + fireEvent.keyDown(lis[1] ?? new HTMLElement(), getKey(KeyType.Enter)); expect(onKeyDownSpy).toHaveBeenCalledTimes(1); }); @@ -232,7 +232,7 @@ describe("TimePicker", () => { datePicker?.querySelector(".react-datepicker__time-container") ?? new HTMLElement(); const lis = time.querySelectorAll("li"); - fireEvent.keyDown(lis[1], getKey(KeyType.Space)); + fireEvent.keyDown(lis[1] ?? new HTMLElement(), getKey(KeyType.Space)); expect(onKeyDownSpy).toHaveBeenCalledTimes(1); }); @@ -250,7 +250,7 @@ describe("TimePicker", () => { expect(onKeyDownSpy).toHaveBeenCalledTimes(1); }); - function setManually(string) { + function setManually(string: string) { fireEvent.focus(instance?.input ?? new HTMLElement()); fireEvent.change(instance?.input ?? new HTMLElement(), { target: { value: string }, @@ -285,8 +285,8 @@ describe("TimePicker", () => { ).container; } - function onChange(m) { - onChangeMoment = newDate(m); - renderDatePicker(m); + function onChange(m: Date | null) { + onChangeMoment = m ?? undefined; + renderDatePicker(m?.toISOString() ?? ""); } }); From 195d788760557c6109c6a2d7a9c643d6ab652935 Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 08:17:16 +0900 Subject: [PATCH 15/17] fix src/test/time_format_test.test.tsx --- src/test/time_format_test.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/test/time_format_test.test.tsx b/src/test/time_format_test.test.tsx index 617914f0e..283accffb 100644 --- a/src/test/time_format_test.test.tsx +++ b/src/test/time_format_test.test.tsx @@ -2,11 +2,11 @@ import { render, waitFor } from "@testing-library/react"; import { ptBR } from "date-fns/locale/pt-BR"; import React from "react"; -import * as utils from "../date_utils"; +import { registerLocale } from "../date_utils"; import TimeComponent from "../time"; describe("TimeComponent", () => { - utils.registerLocale("pt-BR", ptBR); + registerLocale("pt-BR", ptBR); beforeEach(() => { // sandbox = sinon.createSandbox(); @@ -23,7 +23,7 @@ describe("TimeComponent", () => { }); describe("Format", () => { - let spy; + let spy: jest.SpyInstance; beforeEach(() => { spy = jest.spyOn(TimeComponent, "calcCenterPosition"); }); @@ -53,7 +53,7 @@ describe("TimeComponent", () => { }); describe("Initial position", () => { - let spy; + let spy: jest.SpyInstance; beforeEach(() => { spy = jest.spyOn(TimeComponent, "calcCenterPosition"); }); From a9fd6cf874c7c7ffd61fae2c7bf624b072264251 Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 11:55:57 +0900 Subject: [PATCH 16/17] fix jest config --- jest.config.js | 72 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 71 insertions(+), 1 deletion(-) diff --git a/jest.config.js b/jest.config.js index 31a968649..12733849a 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,3 +1,54 @@ +const babelTargetList = [ + "helper_components/custom_input\\.tsx", + "calendar_test\\.test\\.tsx", + "datepicker_test\\.test\\.tsx", + "min_time_test\\.test\\.tsx", + "month_dropdown_test\\.test\\.tsx", + "month_test\\.test\\.tsx", + "month_year_dropdown_test\\.test\\.tsx", + "multi_month_test\\.test\\.tsx", + "multiple_selected_dates\\.test\\.tsx", + "week_number_test\\.test\\.tsx", + "year_dropdown_test\\.test\\.tsx", +]; + +const tsTargetList = [ + "helper_components/calendar_icon\\.tsx", + // "helper_components/custom_input\\.tsx", + "helper_components/custom_time_input\\.tsx", + "helper_components/test_wrapper\\.tsx", + "calendar_icon\\.test\\.tsx", + // "calendar_test\\.test\\.tsx", + "date_utils_test\\.test\\.ts", + // "datepicker_test\\.test\\.tsx", + "day_test\\.test\\.tsx", + "exclude_dates\\.test\\.tsx", + "exclude_time_period_test\\.test\\.tsx", + "exclude_times_test\\.test\\.tsx", + "filter_times_test\\.test\\.tsx", + "include_times_test\\.test\\.tsx", + "index\\.ts", + "inject_times_test\\.test\\.tsx", + // "min_time_test\\.test\\.tsx", + // "month_dropdown_test\\.test\\.tsx", + // "month_test\\.test\\.tsx", + // "month_year_dropdown_test\\.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_picker_test\\.test\\.tsx", + "week_test\\.test\\.tsx", + "year_dropdown_options_test\\.test\\.tsx", + // "year_dropdown_test\\.test\\.tsx", + "year_picker_test\\.test\\.tsx", +]; + module.exports = { roots: ["./src/test"], setupFilesAfterEnv: ["/src/test/index.ts"], @@ -11,7 +62,26 @@ module.exports = { ], transformIgnorePatterns: ["/node_modules/(?!date-fns)"], transform: { - "^.+\\.(js|jsx|ts|tsx)$": "babel-jest", + "^.+\\.(js|jsx)$": "babel-jest", + ...babelTargetList.reduce((prev, item) => { + return { + ...prev, + // [`^/src/test/${item}$`]: "babel-jest", + [`^.+/src/test/${item}$`]: "babel-jest", + // [`^/${item}$`]: "babel-jest", + // [`^.+/${item}$`]: "babel-jest", + }; + }, {}), + ...tsTargetList.reduce((prev, item) => { + return { + ...prev, + // [`^/src/test/${item}$`]: "ts-jest", + [`^.+/src/test/${item}$`]: "ts-jest", + // [`^/${item}$`]: "ts-jest", + // [`^.+/${item}$`]: "ts-jest", + }; + }, {}), + "^.+/src/(?!test/).*\\.(ts|tsx)$": "ts-jest", // TODO: use it after the migration // "^.+\\.ts?$": "ts-jest", "node_modules/(?!date-fns/.*)": "ts-jest", From 2c3f9200fff169a9eb25e0bd9c32c91e2ba9b4a0 Mon Sep 17 00:00:00 2001 From: yuki0410-dev Date: Sat, 8 Jun 2024 15:06:55 +0900 Subject: [PATCH 17/17] fix src/test/year_dropdown_test.test.tsx --- jest.config.js | 3 +-- src/test/test_utils.ts | 8 ++++++++ src/test/year_dropdown_test.test.tsx | 3 ++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/jest.config.js b/jest.config.js index 12733849a..fb7737594 100644 --- a/jest.config.js +++ b/jest.config.js @@ -9,7 +9,6 @@ const babelTargetList = [ "multi_month_test\\.test\\.tsx", "multiple_selected_dates\\.test\\.tsx", "week_number_test\\.test\\.tsx", - "year_dropdown_test\\.test\\.tsx", ]; const tsTargetList = [ @@ -45,7 +44,7 @@ const tsTargetList = [ "week_picker_test\\.test\\.tsx", "week_test\\.test\\.tsx", "year_dropdown_options_test\\.test\\.tsx", - // "year_dropdown_test\\.test\\.tsx", + "year_dropdown_test\\.test\\.tsx", "year_picker_test\\.test\\.tsx", ]; diff --git a/src/test/test_utils.ts b/src/test/test_utils.ts index 3b30daada..2d3662370 100644 --- a/src/test/test_utils.ts +++ b/src/test/test_utils.ts @@ -57,3 +57,11 @@ export function getKey(key: KeyType, shiftKey = false) { } return { ...event, shiftKey }; } + +export const range = (from: number, to: number): number[] => { + const list: number[] = []; + for (let i = from; i < to; i++) { + list.push(i); + } + return list; +}; diff --git a/src/test/year_dropdown_test.test.tsx b/src/test/year_dropdown_test.test.tsx index 5509b0106..b91a9c841 100644 --- a/src/test/year_dropdown_test.test.tsx +++ b/src/test/year_dropdown_test.test.tsx @@ -1,10 +1,11 @@ import { render, fireEvent } from "@testing-library/react"; -import range from "lodash/range"; import React from "react"; import { newDate } from "../date_utils"; import YearDropdown from "../year_dropdown"; +import { range } from "./test_utils"; + describe("YearDropdown", () => { let yearDropdown: HTMLElement | null = null; let lastOnChangeValue: number | null;