test: complete testing for single mode

Author: jason89521

packages/react-use-calendar-component/src/app/components/StateInfo.tsx

@@ -6,16 +6,16 @@ interface Props {
 export default function StateInfo({ value, selectedDates }: Props) {
   return (
     <div className='text-white flex justify-between mt-5'>
-      <div className='flex flex-col'>
+      <div className='flex flex-col' data-testid='value'>
         <div className='text-lg text-rose-300'>value:</div>
         {value.map((v, index) => (
-          <span key={index}>{v.toLocaleDateString()}</span>
+          <span key={index}>{v.toDateString()}</span>
         ))}
       </div>
-      <div className='flex flex-col'>
+      <div className='flex flex-col' data-testid='selected-dates'>
         <div className='text-lg text-rose-300'>selected dates:</div>
         {selectedDates.map((date, index) => {
-          return <span key={index}>{date.toLocaleDateString()}</span>;
+          return <span key={index}>{date.toDateString()}</span>;
         })}
       </div>
     </div>

packages/react-use-calendar-component/src/test/single.test.tsx

@@ -4,9 +4,12 @@ import userEvent from '@testing-library/user-event';
 import { Single } from '../app/components/Examples';
 import { getLocaleMonth } from './utils';
 
+const dateInstance = new Date(2022, 9, 1);
+const idValue = 'value';
+const idSelectedDates = 'selected-dates';
+
 describe('common functionality', () => {
   it('should display correct year/month', async () => {
-    const dateInstance = new Date(2022, 9, 1);
     jest.useFakeTimers({ now: dateInstance });
     const user = userEvent.setup({ delay: null });
     render(<Single />);
@@ -49,4 +52,29 @@ describe('common functionality', () => {
     expect(screen.getByText(currentMonth)).toBeInTheDocument();
     expect(screen.getByTitle('today')).toHaveTextContent('1');
   });
+
+  it('should change value and selected dates correctly', async () => {
+    jest.useFakeTimers({ now: dateInstance });
+    const user = userEvent.setup({ delay: null });
+    render(<Single />);
+    const valueBlock = screen.getByTestId(idValue);
+    const datesBlock = screen.getByTestId(idSelectedDates);
+    let testString = dateInstance.toDateString();
+    expect(valueBlock).toHaveTextContent(testString);
+    expect(datesBlock).toHaveTextContent(testString);
+
+    const date10 = screen.getByRole('button', { name: '10' });
+    await user.click(date10);
+    testString = new Date(2022, 9, 10).toDateString();
+    expect(valueBlock).toHaveTextContent(testString);
+    expect(datesBlock).toHaveTextContent(testString);
+    expect(datesBlock.childElementCount).toBe(2);
+
+    const date20 = screen.getByRole('button', { name: '20' });
+    await user.click(date20);
+    testString = new Date(2022, 9, 20).toDateString();
+    expect(valueBlock).toHaveTextContent(testString);
+    expect(datesBlock).toHaveTextContent(testString);
+    expect(datesBlock.childElementCount).toBe(2);
+  });
 });