@kaizen/components 1.68.6 → 1.68.8

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, HTMLAttributes, useReducer } from "react"
-import { useIntl } from "@cultureamp/i18n-react-intl"
-import classnames from "classnames"
+import React, { useEffect, HTMLAttributes, useReducer } from 'react'
+import { useIntl } from '@cultureamp/i18n-react-intl'
+import classnames from 'classnames'
 import {
   CalendarRange,
   CalendarRangeProps,
@@ -9,31 +9,24 @@ import {
   formatDateAsText,
   isInvalidDate,
   parseDateFromTextFormatValue,
-} from "~components/Calendar"
-import {
-  DatePickerSupportedLocales,
-  getLocale,
-} from "~components/DatePicker/utils/getLocale"
-import { DateValidationResponse } from "~components/Filter/FilterDatePicker"
-import { useDateInputHandlers } from "~components/Filter/FilterDatePicker/hooks/useDateInputHandlers"
-import { DataAttributes } from "~components/types/DataAttributes"
-import { OverrideClassName } from "~components/types/OverrideClassName"
-import {
-  DateRangeInputField,
-  DateRangeInputFieldProps,
-} from "../DateRangeInputField"
-import { filterDatePickerFieldReducer } from "./filterDateRangePickerFieldReducer"
-import { useEndDateValidation } from "./hooks/useEndDateValidation"
-import { useStartDateValidation } from "./hooks/useStartDateValidation"
-import { DateRangeFieldValidationMessage } from "./types"
-import { isValidRange } from "./utils/isValidRange"
-import styles from "./FilterDateRangePickerField.module.scss"
-
-type InputStartDateProps = DateRangeInputFieldProps["inputStartDateProps"]
-type InputEndDateProps = DateRangeInputFieldProps["inputEndDateProps"]
-
-type FilterInputProps<InputProps> = Omit<Partial<InputProps>, "value"> &
-  DataAttributes
+} from '~components/Calendar'
+import { DatePickerSupportedLocales, getLocale } from '~components/DatePicker/utils/getLocale'
+import { DateValidationResponse } from '~components/Filter/FilterDatePicker'
+import { useDateInputHandlers } from '~components/Filter/FilterDatePicker/hooks/useDateInputHandlers'
+import { DataAttributes } from '~components/types/DataAttributes'
+import { OverrideClassName } from '~components/types/OverrideClassName'
+import { DateRangeInputField, DateRangeInputFieldProps } from '../DateRangeInputField'
+import { filterDatePickerFieldReducer } from './filterDateRangePickerFieldReducer'
+import { useEndDateValidation } from './hooks/useEndDateValidation'
+import { useStartDateValidation } from './hooks/useStartDateValidation'
+import { DateRangeFieldValidationMessage } from './types'
+import { isValidRange } from './utils/isValidRange'
+import styles from './FilterDateRangePickerField.module.scss'
+
+type InputStartDateProps = DateRangeInputFieldProps['inputStartDateProps']
+type InputEndDateProps = DateRangeInputFieldProps['inputEndDateProps']
+
+type FilterInputProps<InputProps> = Omit<Partial<InputProps>, 'value'> & DataAttributes
 
 export type FilterDateRangePickerFieldProps = {
   id: string
@@ -42,7 +35,7 @@ export type FilterDateRangePickerFieldProps = {
   /**
    * Sets first displayed month to month of provided date if there isn't a date set.
    */
-  defaultMonth?: CalendarRangeProps["defaultMonth"]
+  defaultMonth?: CalendarRangeProps['defaultMonth']
   /**
    * The date range passed in from the consumer that renders in the inputs and calendar.
    */
@@ -61,7 +54,7 @@ export type FilterDateRangePickerFieldProps = {
   /**
    * Custom description to provide extra context (input format help text remains).
    */
-  description?: DateRangeInputFieldProps["description"]
+  description?: DateRangeInputFieldProps['description']
   validationMessage?: DateRangeFieldValidationMessage
   /**
    * Callback when a date is selected. Utilises internal validation if not set.
@@ -92,21 +85,20 @@ export const FilterDateRangePickerField = ({
   const locale = getLocale(propsLocale)
 
   const translatedDateFrom = formatMessage({
-    id: "filterDateRangePicker.dateFrom",
-    defaultMessage: "Date from",
+    id: 'filterDateRangePicker.dateFrom',
+    defaultMessage: 'Date from',
     description: "Label for the 'Date from' field",
   })
   const translatedDateTo = formatMessage({
-    id: "filterDateRangePicker.dateTo",
-    defaultMessage: "Date to",
+    id: 'filterDateRangePicker.dateTo',
+    defaultMessage: 'Date to',
     description: "Label for the 'date to' field",
   })
-  const inputStartDateLabel =
-    inputStartDateProps?.labelText || translatedDateFrom
-  const inputEndDateLabel = inputEndDateProps?.labelText || translatedDateTo
+  const inputStartDateLabel = inputStartDateProps?.labelText ?? translatedDateFrom
+  const inputEndDateLabel = inputEndDateProps?.labelText ?? translatedDateTo
 
   const transformDateToInputValue = (date: Date | undefined): string =>
-    date ? formatDateAsText(date, disabledDays, locale) : ""
+    date ? formatDateAsText(date, disabledDays, locale) : ''
 
   const handleDateRangeChange = (dateRange: DateRange | undefined): void => {
     onRangeChange(dateRange)
@@ -126,19 +118,13 @@ export const FilterDateRangePickerField = ({
     onValidate: onValidate?.dateEnd,
   })
 
-  const validateStartDate = (
-    date: Date | undefined,
-    inputValue: string
-  ): Date | undefined =>
+  const validateStartDate = (date: Date | undefined, inputValue: string): Date | undefined =>
     dateStartValidation.validateDate({
       date,
       inputValue,
     })
 
-  const validateEndDate = (
-    date: Date | undefined,
-    inputValue: string
-  ): Date | undefined =>
+  const validateEndDate = (date: Date | undefined, inputValue: string): Date | undefined =>
     dateEndValidation.validateDate({
       endDate: date,
       endDateInputValue: inputValue,
@@ -154,19 +140,19 @@ export const FilterDateRangePickerField = ({
     startMonth:
       selectedRange?.from && !isInvalidDate(selectedRange.from)
         ? selectedRange.from
-        : defaultMonth || new Date(),
+        : (defaultMonth ?? new Date()),
   })
 
   const inputStartDateHandlers = useDateInputHandlers({
     locale,
     disabledDays,
-    setInputValue: value => {
+    setInputValue: (value) => {
       dispatch({
-        type: "update_input_start_field",
+        type: 'update_input_start_field',
         inputValue: value,
       })
     },
-    onDateChange: date => {
+    onDateChange: (date) => {
       const newDate = validateStartDate(date, state.inputStartValue)
 
       // We need to parse the date from the input field due to the
@@ -175,14 +161,14 @@ export const FilterDateRangePickerField = ({
       const isRangeValid = isValidRange(newDate, endDate)
 
       dispatch({
-        type: "update_selected_start_date",
+        type: 'update_selected_start_date',
         date: newDate,
       })
 
       // If the range ends up being invalid due to the change in start date
       // we need to remove the end date as its now deemed invalid.
       dispatch({
-        type: "update_selected_end_date",
+        type: 'update_selected_end_date',
         date: isRangeValid ? endDate : undefined,
       })
 
@@ -207,19 +193,19 @@ export const FilterDateRangePickerField = ({
   const inputEndDateHandlers = useDateInputHandlers({
     locale,
     disabledDays,
-    setInputValue: value => {
+    setInputValue: (value) => {
       dispatch({
-        type: "update_input_end_field",
+        type: 'update_input_end_field',
         inputValue: value,
       })
     },
-    onDateChange: date => {
+    onDateChange: (date) => {
       const startDate = state.selectedStartDate
       const newEndDate = validateEndDate(date, state.inputEndValue)
       const isRangeValid = isValidRange(startDate, newEndDate)
 
       dispatch({
-        type: "update_selected_end_date",
+        type: 'update_selected_end_date',
         date: isRangeValid ? newEndDate : undefined,
       })
 
@@ -231,7 +217,7 @@ export const FilterDateRangePickerField = ({
     ...inputEndDateProps,
   })
 
-  const handleCalendarSelectRange: CalendarRangeProps["onSelect"] = range => {
+  const handleCalendarSelectRange: CalendarRangeProps['onSelect'] = (range) => {
     const inputStartValue = transformDateToInputValue(range?.from)
     const inputEndValue = transformDateToInputValue(range?.to)
 
@@ -239,13 +225,13 @@ export const FilterDateRangePickerField = ({
     const newEndDate = validateEndDate(range?.to, inputEndValue)
 
     dispatch({
-      type: "update_selected_start_date",
+      type: 'update_selected_start_date',
       date: newStartDate,
       inputValue: inputStartValue,
     })
 
     dispatch({
-      type: "update_selected_end_date",
+      type: 'update_selected_end_date',
       date: newEndDate,
       inputValue: inputEndValue,
     })
@@ -254,37 +240,33 @@ export const FilterDateRangePickerField = ({
   }
 
   useEffect(() => {
-    if (inputStartDateLabel === " " || inputEndDateLabel === " ") {
+    if (inputStartDateLabel === ' ' || inputEndDateLabel === ' ') {
       // Translations are loading
       return
     }
 
-    if (state.inputStartValue === "" && state.inputEndValue === "") {
+    if (state.inputStartValue === '' && state.inputEndValue === '') {
       return
     }
 
-    const newStartDate = validateStartDate(
-      selectedRange?.from,
-      state.inputStartValue
-    )
+    const newStartDate = validateStartDate(selectedRange?.from, state.inputStartValue)
     const newEndDate = validateEndDate(selectedRange?.to, state.inputEndValue)
 
     if (newStartDate && !isValidRange(newStartDate, newEndDate)) {
       dispatch({
-        type: "update_selected_end_date",
+        type: 'update_selected_end_date',
         date: undefined,
       })
     }
 
     handleDateRangeChange({ from: newStartDate, to: newEndDate })
+    // We only want to run this effect on the first render after translations have loaded
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputStartDateLabel, inputEndDateLabel])
 
   return (
     <div
-      className={classnames(
-        styles.filterDateRangePickerField,
-        classNameOverride
-      )}
+      className={classnames(styles.filterDateRangePickerField, classNameOverride)}
       {...restProps}
     >
       <DateRangeInputField
@@ -321,12 +303,10 @@ export const FilterDateRangePickerField = ({
         }}
         onSelect={handleCalendarSelectRange}
         month={state.startMonth}
-        onMonthChange={(value: Date) =>
-          dispatch({ type: "navigate_months", date: value })
-        }
+        onMonthChange={(value: Date) => dispatch({ type: 'navigate_months', date: value })}
       />
     </div>
   )
 }
 
-FilterDateRangePickerField.displayName = "FilterDateRangePickerField"
+FilterDateRangePickerField.displayName = 'FilterDateRangePickerField'

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/filterDateRangePickerFieldReducer.tsx

@@ -1,26 +1,26 @@
-import { isInvalidDate } from "~components/Calendar"
+import { isInvalidDate } from '~components/Calendar'
 
 type DateRangeFieldActions =
   | {
-      type: "update_selected_start_date"
+      type: 'update_selected_start_date'
       date: Date | undefined
       inputValue?: string
     }
   | {
-      type: "update_selected_end_date"
+      type: 'update_selected_end_date'
       date: Date | undefined
       inputValue?: string
     }
   | {
-      type: "navigate_months"
+      type: 'navigate_months'
       date: Date | undefined
     }
   | {
-      type: "update_input_start_field"
+      type: 'update_input_start_field'
       inputValue: string
     }
   | {
-      type: "update_input_end_field"
+      type: 'update_input_end_field'
       inputValue: string
     }
 
@@ -34,41 +34,33 @@ type FilterDateRangePickerState = {
 
 export const filterDatePickerFieldReducer = (
   state: FilterDateRangePickerState,
-  action: DateRangeFieldActions
+  action: DateRangeFieldActions,
 ): FilterDateRangePickerState => {
   switch (action.type) {
-    case "update_selected_start_date":
+    case 'update_selected_start_date':
       return {
         ...state,
         selectedStartDate: action.date,
-        inputStartValue:
-          action.inputValue === undefined
-            ? state.inputStartValue
-            : action.inputValue,
-        startMonth:
-          action.date && !isInvalidDate(action.date) ? action.date : new Date(),
+        inputStartValue: action.inputValue ?? state.inputStartValue,
+        startMonth: action.date && !isInvalidDate(action.date) ? action.date : new Date(),
       }
-    case "update_selected_end_date":
+    case 'update_selected_end_date':
       return {
         ...state,
         selectedEndDate: action.date,
-        inputEndValue:
-          action.inputValue === undefined
-            ? state.inputEndValue
-            : action.inputValue,
+        inputEndValue: action.inputValue ?? state.inputEndValue,
       }
-    case "navigate_months":
+    case 'navigate_months':
       return {
         ...state,
-        startMonth:
-          action.date && !isInvalidDate(action.date) ? action.date : new Date(),
+        startMonth: action.date && !isInvalidDate(action.date) ? action.date : new Date(),
       }
-    case "update_input_start_field":
+    case 'update_input_start_field':
       return {
         ...state,
         inputStartValue: action.inputValue,
       }
-    case "update_input_end_field":
+    case 'update_input_end_field':
       return {
         ...state,
         inputEndValue: action.inputValue,

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.spec.ts

@@ -1,64 +1,60 @@
-import { act } from "react"
-import { waitFor, renderHook, render } from "@testing-library/react"
-import { useEndDateValidation } from "./useEndDateValidation"
+import { act } from 'react'
+import { waitFor, renderHook, render } from '@testing-library/react'
+import { useEndDateValidation } from './useEndDateValidation'
 
-describe("useEndDateValidation()", () => {
-  describe("validateDate()", () => {
-    it("returns a validation message and no date", async () => {
+describe('useEndDateValidation()', () => {
+  describe('validateDate()', () => {
+    it('returns a validation message and no date', async () => {
       const { result } = renderHook(() =>
         useEndDateValidation({
-          inputLabel: "End date",
-        })
+          inputLabel: 'End date',
+        }),
       )
       const { validateDate } = result.current
 
       act(() => {
         const newDate = validateDate({
-          endDate: new Date("potato"),
-          endDateInputValue: "potato",
+          endDate: new Date('potato'),
+          endDateInputValue: 'potato',
           startDate: undefined,
-          startDateFieldLabel: "Start date",
+          startDateFieldLabel: 'Start date',
         })
         expect(newDate).toEqual(undefined)
       })
 
-      expect(result.current.validationMessage?.status).toBe("error")
+      expect(result.current.validationMessage?.status).toBe('error')
 
       const { container } = render(result.current.validationMessage?.message)
       await waitFor(() => {
-        expect(container).toHaveTextContent(
-          "End date:potato is an invalid date"
-        )
+        expect(container).toHaveTextContent('End date:potato is an invalid date')
       })
     })
   })
 
-  describe("validateEndDateBeforeStartDate()", () => {
-    it("returns a validation message and date", async () => {
+  describe('validateEndDateBeforeStartDate()', () => {
+    it('returns a validation message and date', async () => {
       const { result } = renderHook(() =>
         useEndDateValidation({
-          inputLabel: "End date",
-        })
+          inputLabel: 'End date',
+        }),
       )
       const { validateEndDateBeforeStartDate } = result.current
 
       act(() => {
         const newDate = validateEndDateBeforeStartDate({
-          endDate: new Date("2023-04-03"),
-          endDateInputValue: "3 Apr 2023",
-          startDate: new Date("2023-05-01"),
-          startDateFieldLabel: "Start date",
+          endDate: new Date('2023-04-03'),
+          endDateInputValue: '3 Apr 2023',
+          startDate: new Date('2023-05-01'),
+          startDateFieldLabel: 'Start date',
         })
-        expect(newDate).toEqual(new Date("2023-04-03"))
+        expect(newDate).toEqual(new Date('2023-04-03'))
       })
 
-      expect(result.current.validationMessage?.status).toBe("error")
+      expect(result.current.validationMessage?.status).toBe('error')
 
       const { container } = render(result.current.validationMessage?.message)
       await waitFor(() => {
-        expect(container).toHaveTextContent(
-          'Cannot be earlier than the selection in "Start date"'
-        )
+        expect(container).toHaveTextContent('Cannot be earlier than the selection in "Start date"')
       })
     })
   })

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.ts

@@ -2,11 +2,11 @@ import {
   useDateValidation,
   UseDateValidationArgs,
   ValidationMessage,
-} from "~components/Filter/FilterDatePicker"
+} from '~components/Filter/FilterDatePicker'
 import {
   validateEndDateBeforeStartDate,
   ValidateEndDateBeforeStartDateArgs,
-} from "../utils/validateEndDateBeforeStartDate"
+} from '../utils/validateEndDateBeforeStartDate'
 
 export type UseEndDateValidationArgs = UseDateValidationArgs
 
@@ -18,26 +18,20 @@ export type UseEndDateValidationValue = {
     startDate: Date | undefined
     startDateFieldLabel: React.ReactNode
   }) => Date | undefined
-  validateEndDateBeforeStartDate: (
-    args: ValidateEndDateBeforeStartDateArgs
-  ) => Date | undefined
+  validateEndDateBeforeStartDate: (args: ValidateEndDateBeforeStartDateArgs) => Date | undefined
 }
 
-export const useEndDateValidation = (
-  args: UseEndDateValidationArgs
-): UseEndDateValidationValue => {
-  const { validationMessage, validateDate, updateValidation } =
-    useDateValidation(args)
+export const useEndDateValidation = (args: UseEndDateValidationArgs): UseEndDateValidationValue => {
+  const { validationMessage, validateDate, updateValidation } = useDateValidation(args)
 
-  const handleValidateEndDateBeforeStartDate: UseEndDateValidationValue["validateEndDateBeforeStartDate"] =
-    handlerArgs => {
-      const { validationResponse, newDate } =
-        validateEndDateBeforeStartDate(handlerArgs)
+  const handleValidateEndDateBeforeStartDate: UseEndDateValidationValue['validateEndDateBeforeStartDate'] =
+    (handlerArgs) => {
+      const { validationResponse, newDate } = validateEndDateBeforeStartDate(handlerArgs)
       updateValidation(validationResponse)
       return newDate
     }
 
-  const validateEndDate: UseEndDateValidationValue["validateDate"] = ({
+  const validateEndDate: UseEndDateValidationValue['validateDate'] = ({
     endDate,
     endDateInputValue,
     startDate,

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.spec.ts

@@ -1,32 +1,30 @@
-import { act } from "react"
-import { waitFor, renderHook, render } from "@testing-library/react"
-import { useStartDateValidation } from "./useStartDateValidation"
+import { act } from 'react'
+import { waitFor, renderHook, render } from '@testing-library/react'
+import { useStartDateValidation } from './useStartDateValidation'
 
-describe("useStartDateValidation()", () => {
-  describe("validateDate()", () => {
-    it("returns a validation message and no date", async () => {
+describe('useStartDateValidation()', () => {
+  describe('validateDate()', () => {
+    it('returns a validation message and no date', async () => {
       const { result } = renderHook(() =>
         useStartDateValidation({
-          inputLabel: "Start date",
-        })
+          inputLabel: 'Start date',
+        }),
       )
       const { validateDate } = result.current
 
       act(() => {
         const newDate = validateDate({
-          date: new Date("potato"),
-          inputValue: "potato",
+          date: new Date('potato'),
+          inputValue: 'potato',
         })
         expect(newDate).toBeUndefined()
       })
 
-      expect(result.current.validationMessage?.status).toBe("error")
+      expect(result.current.validationMessage?.status).toBe('error')
 
       const { container } = render(result.current.validationMessage?.message)
       await waitFor(() => {
-        expect(container).toHaveTextContent(
-          "Start date:potato is an invalid date"
-        )
+        expect(container).toHaveTextContent('Start date:potato is an invalid date')
       })
     })
   })

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.ts

@@ -2,28 +2,21 @@ import {
   useDateValidation,
   UseDateValidationArgs,
   ValidationMessage,
-} from "~components/Filter/FilterDatePicker"
+} from '~components/Filter/FilterDatePicker'
 
 export type UseStartDateValidationArgs = UseDateValidationArgs
 
 export type UseStartDateValidationValue = {
   validationMessage: ValidationMessage | undefined
-  validateDate: (args: {
-    date: Date | undefined
-    inputValue: string
-  }) => Date | undefined
+  validateDate: (args: { date: Date | undefined; inputValue: string }) => Date | undefined
 }
 
 export const useStartDateValidation = (
-  args: UseStartDateValidationArgs
+  args: UseStartDateValidationArgs,
 ): UseStartDateValidationValue => {
-  const { validationMessage, validateDate, updateValidation } =
-    useDateValidation(args)
+  const { validationMessage, validateDate, updateValidation } = useDateValidation(args)
 
-  const validateStartDate: UseStartDateValidationValue["validateDate"] = ({
-    date,
-    inputValue,
-  }) => {
+  const validateStartDate: UseStartDateValidationValue['validateDate'] = ({ date, inputValue }) => {
     const { validationResponse, newDate } = validateDate({ date, inputValue })
     updateValidation(validationResponse)
     return newDate

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/index.ts

@@ -1 +1 @@
-export * from "./FilterDateRangePickerField"
+export * from './FilterDateRangePickerField'

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/types.ts

@@ -1,4 +1,4 @@
-import { ValidationMessage } from "~components/Filter/FilterDatePicker"
+import { ValidationMessage } from '~components/Filter/FilterDatePicker'
 
 export type DateRangeFieldValidationMessage = {
   dateStart?: ValidationMessage

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/isValidRange.spec.ts

@@ -1,39 +1,39 @@
-import { isValidRange } from "./isValidRange"
+import { isValidRange } from './isValidRange'
 
-describe("isValidRange()", () => {
-  it("returns true when the start date is before the end date", () => {
-    const startDate = new Date("2022-05-15")
-    const endDate = new Date("2022-05-20")
+describe('isValidRange()', () => {
+  it('returns true when the start date is before the end date', () => {
+    const startDate = new Date('2022-05-15')
+    const endDate = new Date('2022-05-20')
     const result = isValidRange(startDate, endDate)
 
     expect(result).toEqual(true)
   })
 
-  it("returns false when the start date is after the end date", () => {
-    const startDate = new Date("2022-05-25")
-    const endDate = new Date("2022-05-20")
+  it('returns false when the start date is after the end date', () => {
+    const startDate = new Date('2022-05-25')
+    const endDate = new Date('2022-05-20')
     const result = isValidRange(startDate, endDate)
 
     expect(result).toEqual(false)
   })
 
-  it("returns false when the start date is undefined", () => {
+  it('returns false when the start date is undefined', () => {
     const startDate = undefined
-    const endDate = new Date("2022-05-20")
+    const endDate = new Date('2022-05-20')
     const result = isValidRange(startDate, endDate)
 
     expect(result).toEqual(false)
   })
 
-  it("returns false when the end date is undefined", () => {
-    const startDate = new Date("2022-05-20")
+  it('returns false when the end date is undefined', () => {
+    const startDate = new Date('2022-05-20')
     const endDate = undefined
     const result = isValidRange(startDate, endDate)
 
     expect(result).toEqual(false)
   })
 
-  it("returns false when both the end and start dates are undefined", () => {
+  it('returns false when both the end and start dates are undefined', () => {
     const startDate = undefined
     const endDate = undefined
     const result = isValidRange(startDate, endDate)
@@ -41,9 +41,9 @@ describe("isValidRange()", () => {
     expect(result).toEqual(false)
   })
 
-  it("returns true when both the end and start dates are equal", () => {
-    const startDate = new Date("2022-05-20")
-    const endDate = new Date("2022-05-20")
+  it('returns true when both the end and start dates are equal', () => {
+    const startDate = new Date('2022-05-20')
+    const endDate = new Date('2022-05-20')
     const result = isValidRange(startDate, endDate)
 
     expect(result).toEqual(true)