Add more unit tests

Author: connor-baer

packages/circuit-ui/components/DateInput/DateInput.spec.tsx

@@ -13,14 +13,17 @@
  * limitations under the License.
  */
 
-import { beforeAll, describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi, type Mock } from 'vitest';
 import { createRef } from 'react';
 import MockDate from 'mockdate';
 
 import { render, screen, axe, userEvent } from '../../util/test-utils.js';
+import { useMedia } from '../../hooks/useMedia/useMedia.js';
 
 import { DateInput } from './DateInput.js';
 
+vi.mock('../../hooks/useMedia/useMedia.js');
+
 describe('DateInput', () => {
   const props = {
     onChange: vi.fn(),
@@ -36,8 +39,9 @@ describe('DateInput', () => {
     clearDateButtonLabel: 'Clear date',
   };
 
-  beforeAll(() => {
+  beforeEach(() => {
     MockDate.set('2000-01-01');
+    (useMedia as Mock).mockReturnValue(false);
   });
 
   it('should forward a ref', () => {
@@ -182,32 +186,38 @@ describe('DateInput', () => {
       );
     });
 
-    it.skip('should mark the year input as readonly when the minimum and maximum dates have the same year', () => {
-      render(<DateInput {...props} min="2000-04-29" max="2000-06-15" />);
-      expect(screen.getByLabelText(/year/i)).toHaveAttribute('readonly');
-      expect(screen.getByLabelText(/month/i)).toHaveAttribute(
-        'aria-valuemin',
-        '4',
-      );
-      expect(screen.getByLabelText(/month/i)).toHaveAttribute(
-        'aria-valuemax',
-        '6',
-      );
-    });
+    it.todo(
+      'should mark the year input as readonly when the minimum and maximum dates have the same year',
+      () => {
+        render(<DateInput {...props} min="2000-04-29" max="2000-06-15" />);
+        expect(screen.getByLabelText(/year/i)).toHaveAttribute('readonly');
+        expect(screen.getByLabelText(/month/i)).toHaveAttribute(
+          'aria-valuemin',
+          '4',
+        );
+        expect(screen.getByLabelText(/month/i)).toHaveAttribute(
+          'aria-valuemax',
+          '6',
+        );
+      },
+    );
 
-    it.skip('should mark the year and month inputs as readonly when the minimum and maximum dates have the same year and month', () => {
-      render(<DateInput {...props} min="2000-04-09" max="2000-04-27" />);
-      expect(screen.getByLabelText(/year/i)).toHaveAttribute('readonly');
-      expect(screen.getByLabelText(/month/i)).toHaveAttribute('readonly');
-      expect(screen.getByLabelText(/day/i)).toHaveAttribute(
-        'aria-valuemin',
-        '9',
-      );
-      expect(screen.getByLabelText(/day/i)).toHaveAttribute(
-        'aria-valuemax',
-        '27',
-      );
-    });
+    it.todo(
+      'should mark the year and month inputs as readonly when the minimum and maximum dates have the same year and month',
+      () => {
+        render(<DateInput {...props} min="2000-04-09" max="2000-04-27" />);
+        expect(screen.getByLabelText(/year/i)).toHaveAttribute('readonly');
+        expect(screen.getByLabelText(/month/i)).toHaveAttribute('readonly');
+        expect(screen.getByLabelText(/day/i)).toHaveAttribute(
+          'aria-valuemin',
+          '9',
+        );
+        expect(screen.getByLabelText(/day/i)).toHaveAttribute(
+          'aria-valuemax',
+          '27',
+        );
+      },
+    );
   });
 
   describe('state', () => {
@@ -227,6 +237,14 @@ describe('DateInput', () => {
       expect(screen.getByLabelText(/year/i)).toHaveValue('2000');
     });
 
+    it('should ignore an invalid value', () => {
+      render(<DateInput {...props} value="2000-13-54" />);
+
+      expect(screen.getByLabelText(/day/i)).toHaveValue('');
+      expect(screen.getByLabelText(/month/i)).toHaveValue('');
+      expect(screen.getByLabelText(/year/i)).toHaveValue('');
+    });
+
     it('should update the displayed value', () => {
       const { rerender } = render(<DateInput {...props} value="2000-01-12" />);
 
@@ -341,6 +359,88 @@ describe('DateInput', () => {
 
       expect(onChange).toHaveBeenCalledWith('');
     });
+
+    describe('on narrow viewports', () => {
+      beforeEach(() => {
+        (useMedia as Mock).mockReturnValue(true);
+      });
+
+      it('should allow users to select a date on a calendar', async () => {
+        (useMedia as Mock).mockReturnValue(true);
+        const onChange = vi.fn();
+
+        render(<DateInput {...props} onChange={onChange} />);
+
+        const openCalendarButton = screen.getByRole('button', {
+          name: /change date/i,
+        });
+        await userEvent.click(openCalendarButton);
+
+        const calendarDialog = screen.getByRole('dialog');
+        expect(calendarDialog).toBeVisible();
+
+        const dateButton = screen.getByRole('button', { name: /12/i });
+        await userEvent.click(dateButton);
+
+        expect(onChange).not.toHaveBeenCalled();
+
+        const applyButton = screen.getByRole('button', { name: /apply/i });
+        await userEvent.click(applyButton);
+
+        expect(onChange).toHaveBeenCalledWith('2000-01-12');
+      });
+
+      it('should allow users to clear the date', async () => {
+        const onChange = vi.fn();
+
+        render(
+          <DateInput
+            {...props}
+            defaultValue="2000-01-12"
+            onChange={onChange}
+          />,
+        );
+
+        const openCalendarButton = screen.getByRole('button', {
+          name: /change date/i,
+        });
+        await userEvent.click(openCalendarButton);
+
+        const calendarDialog = screen.getByRole('dialog');
+        expect(calendarDialog).toBeVisible();
+
+        const clearButton = screen.getByRole('button', { name: /clear date/i });
+        await userEvent.click(clearButton);
+
+        expect(onChange).toHaveBeenCalledWith('');
+      });
+
+      it('should allow users to close the calendar dialog without selecting a date', async () => {
+        const onChange = vi.fn();
+
+        render(
+          <DateInput
+            {...props}
+            defaultValue="2000-01-12"
+            onChange={onChange}
+          />,
+        );
+
+        const openCalendarButton = screen.getByRole('button', {
+          name: /change date/i,
+        });
+        await userEvent.click(openCalendarButton);
+
+        const calendarDialog = screen.getByRole('dialog');
+        expect(calendarDialog).toBeVisible();
+
+        const closeButton = screen.getByRole('button', { name: /close/i });
+        await userEvent.click(closeButton);
+
+        expect(calendarDialog).not.toBeVisible();
+        expect(onChange).not.toHaveBeenCalled();
+      });
+    });
   });
 
   describe('status messages', () => {

packages/circuit-ui/components/DateInput/DateInput.tsx

@@ -183,8 +183,7 @@ export const DateInput = forwardRef<HTMLDivElement, DateInputProps>(
     const isMobile = useMedia('(max-width: 479px)');
 
     const fieldRef = useRef<HTMLDivElement>(null);
-    const floatingRef = useRef<HTMLDialogElement>(null);
-    const calendarRef = useRef<HTMLDivElement>(null);
+    const dialogRef = useRef<HTMLDialogElement>(null);
 
     const dialogId = useId();
     const headlineId = useId();
@@ -211,7 +210,7 @@ export const DateInput = forwardRef<HTMLDivElement, DateInputProps>(
       middleware: [offset(4), flip(), shift()],
       elements: {
         reference: fieldRef.current,
-        floating: floatingRef.current,
+        floating: dialogRef.current,
       },
     });
 
@@ -281,9 +280,10 @@ export const DateInput = forwardRef<HTMLDivElement, DateInputProps>(
 
     const mobileStyles = {
       position: 'fixed',
+      top: 'auto',
+      right: '0px',
       bottom: '0px',
       left: '0px',
-      right: '0px',
     } as const;
 
     const dialogStyles = isMobile ? mobileStyles : floatingStyles;
@@ -454,9 +454,10 @@ export const DateInput = forwardRef<HTMLDivElement, DateInputProps>(
           />
         </FieldSet>
         <Dialog
-          ref={floatingRef}
+          ref={dialogRef}
           id={dialogId}
           open={open}
+          isModal={isMobile}
           onClose={closeCalendar}
           aria-labelledby={headlineId}
           style={dialogStyles}
@@ -478,7 +479,6 @@ export const DateInput = forwardRef<HTMLDivElement, DateInputProps>(
               </header>
 
               <Calendar
-                ref={calendarRef}
                 className={classes.calendar}
                 onSelect={handleSelect}
                 selection={selection}

packages/circuit-ui/components/DateInput/DateInputService.spec.ts

@@ -14,8 +14,9 @@
  */
 
 import { describe, expect, it } from 'vitest';
+import { Temporal } from 'temporal-polyfill';
 
-import { getDateSegments } from './DateInputService.js';
+import { getCalendarButtonLabel, getDateSegments } from './DateInputService.js';
 
 describe('DateInputService', () => {
   describe('getDateSegments', () => {
@@ -43,4 +44,29 @@ describe('DateInputService', () => {
       expect(literalSegment?.value).toBe(literal);
     });
   });
+
+  describe('getCalendarButtonLabel', () => {
+    const label = 'Change date';
+
+    it('should return the plain label if the date is undefined', () => {
+      const date = undefined;
+      const locale = undefined;
+      const actual = getCalendarButtonLabel(label, date, locale);
+      expect(actual).toBe(label);
+    });
+
+    it('should postfix the formatted date to the label', () => {
+      const date = new Temporal.PlainDate(2017, 8, 28);
+      const locale = undefined;
+      const actual = getCalendarButtonLabel(label, date, locale);
+      expect(actual).toBe(`${label}, August 28, 2017`);
+    });
+
+    it('should format the date for the locale', () => {
+      const date = new Temporal.PlainDate(2017, 8, 28);
+      const locale = 'fr-FR';
+      const actual = getCalendarButtonLabel(label, date, locale);
+      expect(actual).toBe(`${label}, 28 août 2017`);
+    });
+  });
 });