test: add basic testing

jason89521 · jason89521 · commit a015d58ccfe4 · 2022-10-10T14:46:58.000+08:00
diff --git a/packages/react-use-calendar-component/README.md b/packages/react-use-calendar-component/README.md
@@ -6,8 +6,8 @@ This project is aimed to provide an easy-to-use API interface for those people w
 
 - [x] Generate 42 date cell information
 - [x] Change displayed year/month when selected date is change
-- [ ] Support selecting with range
-- [ ] Select multiple dates
+- [x] Select multiple dates
+- [ ] Select with range
 - [ ] Support disabled date
 - [ ] Support displaying two calendar
 - [ ] Support week, month, year selection
diff --git a/packages/react-use-calendar-component/package.json b/packages/react-use-calendar-component/package.json
@@ -24,6 +24,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "14.4.3",
     "@types/jest": "^29.0.3",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
diff --git a/packages/react-use-calendar-component/src/app/App.tsx b/packages/react-use-calendar-component/src/app/App.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 
-import Multiple from './components/Examples/Multiple';
-import Single from './components/Examples/Single';
+import { Single, Multiple } from './components/Examples';
 
 type ExampleType = 'single' | 'multiple';
 
diff --git a/packages/react-use-calendar-component/src/app/components/CalendarBody.tsx b/packages/react-use-calendar-component/src/app/components/CalendarBody.tsx
@@ -19,33 +19,9 @@ export default function CalendarBody({ dateCellInfos }: Props) {
         ))}
       </div>
       <div className='grid grid-cols-7 gap-y-4'>
-        {dateCellInfos.map(
-          ({
-            key,
-            monthStatus,
-            isSelected,
-            isToday,
-            dayOfMonth,
-            selectThisDate,
-          }) => {
-            let className = 'rounded-full';
-            if (monthStatus !== 'current')
-              className = `${className} text-slate-300`;
-            if (isSelected) className = `${className} bg-green-200`;
-            if (isToday && !isSelected) className = `${className} bg-amber-200`;
-            if (!isToday && !isSelected)
-              className = `${className} hover:bg-stone-100`;
-
-            return (
-              <CalendarCell
-                key={key}
-                onClick={selectThisDate}
-                className={className}
-                dayOfMonth={dayOfMonth}
-              />
-            );
-          }
-        )}
+        {dateCellInfos.map(({ key, ...info }) => (
+          <CalendarCell key={key} {...info} />
+        ))}
       </div>
     </div>
   );
diff --git a/packages/react-use-calendar-component/src/app/components/CalendarCell.tsx b/packages/react-use-calendar-component/src/app/components/CalendarCell.tsx
@@ -1,16 +1,25 @@
-interface Props {
-  className: string;
-  onClick: () => void;
-  dayOfMonth: number;
-}
+import type { DateCellInfo } from '../../lib/types';
 
 export default function CalendarCell({
-  className,
-  onClick,
+  monthStatus,
+  isSelected,
+  isToday,
   dayOfMonth,
-}: Props) {
+  selectThisDate,
+}: DateCellInfo) {
+  const title = isToday ? 'today' : undefined;
+  let className = 'rounded-full';
+  if (monthStatus !== 'current') className = `${className} text-slate-300`;
+  if (isSelected) className = `${className} bg-green-200 selected`;
+  if (isToday && !isSelected) className = `${className} bg-amber-200`;
+  if (!isToday && !isSelected) className = `${className} hover:bg-stone-100`;
+
   return (
-    <button className={className} onClick={onClick}>
+    <button
+      className={`${className} ${monthStatus}`}
+      onClick={() => selectThisDate()}
+      type='button'
+      title={title}>
       <div className='flex items-center justify-center'>
         <span>{dayOfMonth}</span>
       </div>
diff --git a/packages/react-use-calendar-component/src/app/components/CalendarHeader.tsx b/packages/react-use-calendar-component/src/app/components/CalendarHeader.tsx
@@ -19,14 +19,22 @@ export default function CalendarHeader({
 }: Props) {
   return (
     <div className='flex justify-between items-center'>
-      <LeftArrow arrowAmount={2} onClick={() => onYearClick(-1)} />
-      <LeftArrow onClick={() => onMonthClick(-1)} />
+      <LeftArrow
+        arrowAmount={2}
+        onClick={() => onYearClick(-1)}
+        ariaLabel='sub-year'
+      />
+      <LeftArrow onClick={() => onMonthClick(-1)} ariaLabel='sub-month' />
       <div className='flex flex-col justify-center items-center'>
         <span className='text-lg'>{year}</span>
         <span className='text-sm'>{monthList[month]}</span>
       </div>
-      <RightArrow onClick={() => onMonthClick(1)} />
-      <RightArrow arrowAmount={2} onClick={() => onYearClick(1)} />
+      <RightArrow onClick={() => onMonthClick(1)} ariaLabel='add-month' />
+      <RightArrow
+        arrowAmount={2}
+        onClick={() => onYearClick(1)}
+        ariaLabel='add-year'
+      />
     </div>
   );
 }
diff --git a/packages/react-use-calendar-component/src/app/components/Examples/Multiple.tsx b/packages/react-use-calendar-component/src/app/components/Examples/Multiple.tsx
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import useCalendarComponent from '../../../lib';
 import Calendar from '../Calendar';
 
-export default function Multiple() {
+export function Multiple() {
   const calendarControl = useCalendarComponent({ selectType: 'multiple' });
   const { selectedDates, value } = calendarControl;
   // const { year, month, dayOfMonth } = selectedDate;
diff --git a/packages/react-use-calendar-component/src/app/components/Examples/Single.tsx b/packages/react-use-calendar-component/src/app/components/Examples/Single.tsx
@@ -1,16 +1,9 @@
-import { useEffect } from 'react';
-
 import useCalendarComponent from '../../../lib';
 import Calendar from '../Calendar';
 
-export default function Single() {
+export function Single() {
   const calendarControl = useCalendarComponent();
-  const { selectedDates, value } = calendarControl;
-  // const { year, month, dayOfMonth } = selectedDate;
-
-  useEffect(() => {
-    console.log('value:', value);
-  }, [value]);
+  const { selectedDates } = calendarControl;
 
   return (
     <div>
diff --git a/packages/react-use-calendar-component/src/app/components/Examples/index.ts b/packages/react-use-calendar-component/src/app/components/Examples/index.ts
@@ -0,0 +1,2 @@
+export * from './Single';
+export * from './Multiple';
diff --git a/packages/react-use-calendar-component/src/app/components/LeftArrow.tsx b/packages/react-use-calendar-component/src/app/components/LeftArrow.tsx
@@ -1,12 +1,15 @@
 export default function LeftArrow({
   arrowAmount = 1,
   onClick,
+  ariaLabel,
 }: {
   arrowAmount?: number;
   onClick: () => void;
+  ariaLabel: string;
 }) {
   return (
     <button
+      aria-label={ariaLabel}
       onClick={onClick}
       className='w-10 h-10 flex justify-center items-center'>
       {[...Array(arrowAmount)].map((_, index) => (
diff --git a/packages/react-use-calendar-component/src/app/components/RightArrow.tsx b/packages/react-use-calendar-component/src/app/components/RightArrow.tsx
@@ -1,12 +1,15 @@
 export default function RightArrow({
   arrowAmount = 1,
   onClick,
+  ariaLabel,
 }: {
   arrowAmount?: number;
   onClick: () => void;
+  ariaLabel: string;
 }) {
   return (
     <button
+      aria-label={ariaLabel}
       onClick={onClick}
       className='w-10 h-10 flex justify-center items-center'>
       {[...Array(arrowAmount)].map((_, index) => (
diff --git a/packages/react-use-calendar-component/src/lib/constant.ts b/packages/react-use-calendar-component/src/lib/constant.ts
@@ -0,0 +1 @@
+export const CALENDAR_CELLS_NUM = 42;
diff --git a/packages/react-use-calendar-component/src/lib/hooks/useCalendarComponent.ts b/packages/react-use-calendar-component/src/lib/hooks/useCalendarComponent.ts
@@ -1,18 +1,17 @@
 import { useState } from 'react';
 
+import { CALENDAR_CELLS_NUM } from '../constant';
 import type {
   UseCalendarOptions,
   DateCellInfo,
   SelectDateOptions,
   SelectType,
 } from '../types';
-import { getNumberOfDays, isToday } from '../utils';
+import { getDateInfoByIndex } from '../utils';
 import useDisplayedDate from './useDisplayedDate';
 
-const CELLS_OF_PICKER = 42;
-
 export default function useCalendarComponent<S extends SelectType = 'single'>({
-  displayedDate = new Date(),
+  initialDisplayedDate = new Date(),
   selectType,
   defaultValue,
 }: UseCalendarOptions<S> = {}) {
@@ -23,48 +22,28 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
     setDisplayedMonth,
     changeDisplayedYear,
     changeDisplayedMonth,
-  } = useDisplayedDate(displayedDate);
+  } = useDisplayedDate(initialDisplayedDate);
   const [selectedDates, setSelectedDates] = useState<Date[]>([]);
   const [value, setValue] = useState(defaultValue);
 
-  const getDateCellInfo = (cellIndex: number): DateCellInfo => {
-    const prevMonth = displayedMonth === 0 ? 11 : displayedMonth - 1;
-    const prevYear = displayedMonth === 0 ? displayedYear - 1 : displayedYear;
-    const prevMonthNumberOfDays = getNumberOfDays(prevYear, prevMonth);
-    const weekDayOfFirstDay = new Date(displayedYear, displayedMonth).getDay();
-    const offset = cellIndex - weekDayOfFirstDay;
-    const numberOfDays = getNumberOfDays(displayedYear, displayedMonth);
-    const dayOfMonth =
-      (offset < 0 ? prevMonthNumberOfDays + offset : offset % numberOfDays) + 1;
-    const monthOffset = offset < 0 ? -1 : offset >= numberOfDays ? 1 : 0;
-
-    const { year, month } = (() => {
-      const targetMonth = displayedMonth + monthOffset;
-      if (targetMonth < 0)
-        return {
-          year: displayedYear - 1,
-          month: 11,
-        };
-
-      if (targetMonth > 11)
-        return {
-          year: displayedYear + 1,
-          month: 0,
-        };
-
-      return {
-        year: displayedYear,
-        month: targetMonth,
-      };
-    })();
-    const weekDay = cellIndex % 7;
+  const getDateCellInfo = (
+    year: number,
+    month: number,
+    cellIndex: number
+  ): DateCellInfo => {
+    const {
+      year: dateYear,
+      month: dateMonth,
+      dayOfMonth,
+      ...info
+    } = getDateInfoByIndex(year, month, cellIndex);
     const selectThisDate = (options: SelectDateOptions = {}) => {
       const { changeDisplayedValues = true } = options;
       if (changeDisplayedValues) {
-        setDisplayedYear(year);
-        setDisplayedMonth(month);
+        setDisplayedYear(dateYear);
+        setDisplayedMonth(dateMonth);
       }
-      const selectedDate = new Date(year, month, dayOfMonth);
+      const selectedDate = new Date(dateYear, dateMonth, dayOfMonth);
       if (selectType === 'multiple') {
         const newDates = selectedDates.filter(
           date => date.toString() !== selectedDate.toString()
@@ -83,28 +62,27 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
     };
 
     return {
-      key: `${year}-${month}-${dayOfMonth}`,
-      year,
-      month,
+      key: `${dateYear}-${dateMonth}-${dayOfMonth}`,
+      year: dateYear,
+      month: dateMonth,
       dayOfMonth: dayOfMonth,
-      dayOfWeek: weekDay,
-      isToday: isToday(year, month, dayOfMonth),
       isSelected: !!selectedDates.find(
         date =>
-          date.getFullYear() === year &&
-          date.getMonth() === month &&
-          date.getDate() === dayOfMonth
+          date.toString() ===
+          new Date(dateYear, dateMonth, dayOfMonth).toString()
       ),
-      monthStatus:
-        monthOffset < 0 ? 'previous' : monthOffset > 0 ? 'next' : 'current',
       selectThisDate,
+      ...info,
     };
   };
 
-  const getDateCellInfos = () => {
+  const getDateCellInfos = (
+    year: number = displayedYear,
+    month: number = displayedMonth
+  ) => {
     const arr: DateCellInfo[] = [];
-    for (let i = 0; i < CELLS_OF_PICKER; i++) {
-      arr.push(getDateCellInfo(i));
+    for (let i = 0; i < CALENDAR_CELLS_NUM; i++) {
+      arr.push(getDateCellInfo(year, month, i));
     }
 
     return arr;
diff --git a/packages/react-use-calendar-component/src/lib/types.ts b/packages/react-use-calendar-component/src/lib/types.ts
@@ -8,11 +8,20 @@ export type DefaultValue<S extends SelectType> = S extends 'single'
   : never;
 
 export type UseCalendarOptions<S extends SelectType = 'single'> = {
-  displayedDate?: Date;
+  initialDisplayedDate?: Date;
   selectType?: S;
   defaultValue?: DefaultValue<S>;
 };
 
+export interface DateInfo {
+  year: number;
+  month: number;
+  dayOfMonth: number;
+  dayOfWeek: number;
+  isToday: boolean;
+  monthStatus: 'current' | 'next' | 'previous';
+}
+
 export interface DateCellInfo {
   key: string;
   year: number;
diff --git a/packages/react-use-calendar-component/src/lib/utils/getDateInfo.ts b/packages/react-use-calendar-component/src/lib/utils/getDateInfo.ts
diff --git a/packages/react-use-calendar-component/src/lib/utils/index.ts b/packages/react-use-calendar-component/src/lib/utils/index.ts
diff --git a/packages/react-use-calendar-component/src/test/getDateInfoByIndex.test.ts b/packages/react-use-calendar-component/src/test/getDateInfoByIndex.test.ts
diff --git a/packages/react-use-calendar-component/src/test/single.test.tsx b/packages/react-use-calendar-component/src/test/single.test.tsx
diff --git a/packages/react-use-calendar-component/src/test/utils/getTodayDate.ts b/packages/react-use-calendar-component/src/test/utils/getTodayDate.ts
diff --git a/packages/react-use-calendar-component/src/test/utils/index.ts b/packages/react-use-calendar-component/src/test/utils/index.ts
diff --git a/packages/react-use-calendar-component/src/test/utils/locale.ts b/packages/react-use-calendar-component/src/test/utils/locale.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from './Single';`
	`2`	`+export * from './Multiple';`