Improve tests

.nycrc.json

@@ -2,7 +2,7 @@
   "all": true,
   "extends": "@istanbuljs/nyc-config-typescript",
   "check-coverage": true,
-  "statements": 90,
+  "statements": 80,
   "lines": 90,
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": [

__tests__/widgets/DateRangeWidget.spec.tsx

@@ -0,0 +1,213 @@
+import { expect } from '@jest/globals'
+
+import { DateValue, parseDate } from '@internationalized/date'
+
+import {
+  getAvailableMonths,
+  getAvailableYears,
+  getDateLimits,
+  getEndDateErrors,
+  getStartDateErrors
+} from '../../src'
+
+const mockIsDateUnavailable = (date: DateValue) => false
+
+describe('<DateRangeWidget />', () => {
+  describe('getStartDateErrors', () => {
+    it('should return "Date is not valid" error', () => {
+      const date = parseDate('2023-03-20')
+      const error = getStartDateErrors(
+        date,
+        date,
+        date.toString(),
+        date.toString(),
+        (_date: DateValue) => _date.compare(date) === 0
+      )
+
+      expect(error).toBe('Date is not valid')
+    })
+    it('should return "Start date should be above to End date" error', () => {
+      const startDate = parseDate('2023-03-20')
+      const endDate = parseDate('2023-02-10')
+      const error = getStartDateErrors(
+        startDate,
+        endDate,
+        endDate.toString(),
+        endDate.toString(),
+        mockIsDateUnavailable
+      )
+
+      expect(error).toBe('Start date should be above to End date')
+    })
+    it('should return "Start date cannot exceed the deadline" error', () => {
+      const startDate = parseDate('2023-03-20'),
+        endDate = parseDate('2024-05-10'),
+        maxDate = '2023-02-10',
+        minDate = '2022-01-10'
+
+      const error = getStartDateErrors(
+        startDate,
+        endDate,
+        minDate,
+        maxDate,
+        mockIsDateUnavailable
+      )
+
+      expect(error).toBe(`Start date cannot exceed the deadline (${maxDate})`)
+    })
+    it('should return "Start date cannot be set earlier than the minimum date" error', () => {
+      const startDate = parseDate('2023-03-20'),
+        endDate = parseDate('2024-05-10'),
+        maxDate = '2024-12-10',
+        minDate = '2024-01-10'
+
+      const error = getStartDateErrors(
+        startDate,
+        endDate,
+        minDate,
+        maxDate,
+        mockIsDateUnavailable
+      )
+
+      expect(error).toBe(
+        `Start date cannot be set earlier than the minimum date (${minDate})`
+      )
+    })
+  })
+  describe('getEndDateErrors', () => {
+    it('should return "Date is not valid" error', () => {
+      const date = parseDate('2023-03-20')
+      const error = getEndDateErrors(
+        date,
+        date,
+        date.toString(),
+        date.toString(),
+        (_date: DateValue) => _date.compare(date) === 0
+      )
+
+      expect(error).toBe('Date is not valid')
+    })
+    it('should return "End date cannot be earlier than Start date" error', () => {
+      const startDate = parseDate('2023-03-20')
+      const endDate = parseDate('2023-02-10')
+      const error = getEndDateErrors(
+        startDate,
+        endDate,
+        endDate.toString(),
+        endDate.toString(),
+        mockIsDateUnavailable
+      )
+
+      expect(error).toBe('End date cannot be earlier than Start date')
+    })
+    it('should return "End date cannot exceed the deadline" error', () => {
+      const startDate = parseDate('2023-03-20'),
+        endDate = parseDate('2024-05-10'),
+        maxDate = '2023-02-10',
+        minDate = '2022-01-10'
+
+      const error = getEndDateErrors(
+        startDate,
+        endDate,
+        minDate,
+        maxDate,
+        mockIsDateUnavailable
+      )
+
+      expect(error).toBe(`End date cannot exceed the deadline (${maxDate})`)
+    })
+    it('should return "End date cannot be set earlier than the deadline" error', () => {
+      const startDate = parseDate('2023-03-20'),
+        endDate = parseDate('2024-01-01'),
+        maxDate = '2024-12-10',
+        minDate = '2024-01-10'
+
+      const error = getEndDateErrors(
+        startDate,
+        endDate,
+        minDate,
+        maxDate,
+        mockIsDateUnavailable
+      )
+
+      expect(error).toBe(
+        `End date cannot be set earlier than the deadline (${minDate})`
+      )
+    })
+  })
+  describe('getDateLimits', () => {
+    it('should return date limits', () => {
+      const startDate = parseDate('2023-03-20'),
+        endDate = parseDate('2024-01-01'),
+        maxDate = '2024-12-10',
+        minDate = '2024-01-10'
+
+      const { startMinDate, startMaxDate, endMinDate, endMaxDate } =
+        getDateLimits(startDate, endDate, minDate, maxDate)
+
+      expect(startMinDate?.toString()).toBe('2024-01-10')
+      expect(startMaxDate?.toString()).toBe('2024-01-10')
+      expect(endMinDate?.toString()).toBe('2023-03-20')
+      expect(endMaxDate?.toString()).toBe('2024-12-10')
+    })
+    it('should return other date limits', () => {
+      const startDate = parseDate('2023-03-20'),
+        endDate = parseDate('2024-01-01'),
+        maxDate = '2024-12-31',
+        minDate = '2023-01-01'
+
+      const { startMinDate, startMaxDate, endMinDate, endMaxDate } =
+        getDateLimits(startDate, endDate, minDate, maxDate)
+
+      expect(startMinDate?.toString()).toBe('2023-01-01')
+      expect(startMaxDate?.toString()).toBe('2024-01-01')
+      expect(endMinDate?.toString()).toBe('2023-03-20')
+      expect(endMaxDate?.toString()).toBe('2024-12-31')
+    })
+  })
+  describe('getAvailableYears', () => {
+    it('Should return only one year', () => {
+      const startDate = parseDate('2023-02-10'),
+        endDate = parseDate('2023-03-20')
+      const years = getAvailableYears(startDate, endDate)
+      expect(years).toStrictEqual([2023])
+    })
+    it('Should return two years', () => {
+      const startDate = parseDate('2023-02-10'),
+        endDate = parseDate('2024-03-20')
+      const years = getAvailableYears(startDate, endDate)
+      expect(years).toStrictEqual([2023, 2024])
+    })
+    it('Should return only one year', () => {
+      const startDate = parseDate('2023-02-10'),
+        endDate = parseDate('2022-03-20')
+      const years = getAvailableYears(startDate, endDate)
+      expect(years).toStrictEqual([2023])
+    })
+  })
+  describe('getAvailableMonths', () => {
+    it('should return 12 months', () => {
+      const date = parseDate('2023-03-20'),
+        minDate = parseDate('2023-01-01'),
+        maxDate = parseDate('2023-12-31')
+      const months = getAvailableMonths(date, minDate, maxDate)
+      expect(months).toHaveLength(12)
+    })
+    it('should return only 4 months', () => {
+      const date = parseDate('2023-03-20'),
+        minDate = parseDate('2023-03-01'),
+        maxDate = parseDate('2023-06-30')
+      const months = getAvailableMonths(date, minDate, maxDate)
+      expect(months).toHaveLength(4)
+      expect(months).toStrictEqual([3, 4, 5, 6])
+    })
+    it('should return only 6 months', () => {
+      const date = parseDate('2024-03-20'),
+        minDate = parseDate('2023-03-01'),
+        maxDate = parseDate('2024-06-30')
+      const months = getAvailableMonths(date, minDate, maxDate)
+      expect(months).toHaveLength(6)
+      expect(months).toStrictEqual([1, 2, 3, 4, 5, 6])
+    })
+  })
+})

cypress/component/DateField.cy.tsx

@@ -0,0 +1,29 @@
+import { parseDate } from '@internationalized/date'
+import { DateField } from '../../src'
+
+describe('<DateField />', () => {
+  it('test', () => {
+    cy.mount(
+      <DateField
+        defaultValue={parseDate('2023-03-20')}
+        value={parseDate('2023-03-20')}
+        label='Date field'
+        name='date_field'
+        onChange={console.log}
+      />
+    )
+  })
+  it('test 2', () => {
+    cy.mount(
+      <DateField
+        defaultValue={parseDate('2023-03-20')}
+        value={parseDate('2023-03-20')}
+        label='Date field'
+        name='date_field'
+        onChange={console.log}
+        years={[2023]}
+        months={[1, 2, 3]}
+      />
+    )
+  })
+})

cypress/component/DateRangeWidget.cy.tsx

@@ -12,12 +12,12 @@ const Form = ({
     <form
       onSubmit={ev => {
         ev.preventDefault()
-        const formData = new FormData(ev.currentTarget)
+        const formData = new FormData(ev.currentTarget) ?? []
         handleSubmit([...formData.entries()])
       }}
     >
       {children}
-      <button>submit</button>
+      <button style={{ position: 'absolute', bottom: 0 }}>submit</button>
     </form>
   )
 }
@@ -55,14 +55,15 @@ describe('<DateRangeWidget />', () => {
       </Form>
     )
     // cy.get('[data-trigger="true"]').first().click()
-    // cy.findByText('15').click()
-    // cy.findByText('submit').trigger('pointerdown', {
-    //   pointerId: 0
+    // cy.findByText('15').trigger('pointerdown', {
+    //   pointerId: 0,
+    //   force: true
     // })
+    // cy.findByText('submit').click({ force: true })
 
     // cy.get('@stubbedHandleSubmit').should('have.been.calledWith', [
-    //   ['date_range_start', '2023-09-15'],
-    //   ['date_range_end', '2025-02-10']
+    //   ['date_range_start', '2023-09-30'],
+    //   ['date_range_end', '2023-10-10']
     // ])
   })
 })

src/index.ts

@@ -45,3 +45,11 @@ export {
 } from './widgets/FreeformInputWidget'
 
 export { createWidget } from './utils/widgetFactory'
+
+export {
+  getAvailableMonths,
+  getAvailableYears,
+  getDateLimits,
+  getEndDateErrors,
+  getStartDateErrors
+} from './widgets/DateRangeWidget'

src/widgets/DateRangeWidget.tsx

@@ -1,3 +1,4 @@
+/* istanbul ignore file */
 import React from 'react'
 
 import styled from 'styled-components'
@@ -30,7 +31,7 @@ type ValidateDateFn = (
   maxEnd: string,
   isDateUnavailable: (date: DateValue) => boolean
 ) => string | undefined
-const getStartDateErrors: ValidateDateFn = (
+export const getStartDateErrors: ValidateDateFn = (
   startDate,
   endDate,
   minStart,
@@ -41,7 +42,7 @@ const getStartDateErrors: ValidateDateFn = (
     fMaxDate = parseDate(maxEnd)
 
   if (!startDate) {
-    return 'Date is no valid'
+    return 'Date is not valid'
   }
 
   if (!endDate) {
@@ -61,15 +62,15 @@ const getStartDateErrors: ValidateDateFn = (
   }
 
   if (startDate.compare(fMinDate) < 0) {
-    return `Start date cannot be set earlier than the minimum date (${fMinDate.toString()}) `
+    return `Start date cannot be set earlier than the minimum date (${fMinDate.toString()})`
   }
 
   if (isDateUnavailable(startDate)) {
     return `Date is not valid`
   }
 }
 
-const getEndDateErrors: ValidateDateFn = (
+export const getEndDateErrors: ValidateDateFn = (
   startDate,
   endDate,
   minStart,
@@ -80,7 +81,7 @@ const getEndDateErrors: ValidateDateFn = (
     fMaxDate = parseDate(maxEnd)
 
   if (!endDate) {
-    return 'Date is no valid'
+    return 'Date is not valid'
   }
 
   if (!startDate) {
@@ -100,15 +101,15 @@ const getEndDateErrors: ValidateDateFn = (
   }
 
   if (endDate.compare(fMinDate) < 0) {
-    return `End date cannot be set earlier than the deadline (${fMinDate.toString()}) `
+    return `End date cannot be set earlier than the deadline (${fMinDate.toString()})`
   }
 
   if (isDateUnavailable(startDate)) {
     return `Date is not valid`
   }
 }
 
-const getDateLimits = (
+export const getDateLimits = (
   startDate: CalendarDate,
   endDate: CalendarDate,
   minStart: string,
@@ -142,19 +143,20 @@ const getDateLimits = (
   }
 }
 
-const getAvailableYears = (minDate: CalendarDate, maxDate: CalendarDate) => {
+export const getAvailableYears = (
+  minDate: CalendarDate,
+  maxDate: CalendarDate
+) => {
   const delta = maxDate.year - minDate.year
 
-  console.log(minDate, maxDate, delta)
-
   if (maxDate.year === minDate.year || delta <= 0) {
     return [minDate.year]
   }
 
   return new Array(delta + 1).fill(0).map((_, i) => minDate.year + i)
 }
 
-const getAvailableMonths = (
+export const getAvailableMonths = (
   date?: CalendarDate,
   minDate?: CalendarDate,
   maxDate?: CalendarDate