WIP tests

sumup-oss · Oct 17, 2024 · 21a3279 · 21a3279
1 parent 480fdb6
commit 21a3279
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 3 deletions.
diff --git a/packages/circuit-ui/components/DateInput/DateInput.spec.tsx b/packages/circuit-ui/components/DateInput/DateInput.spec.tsx
@@ -80,7 +80,99 @@ describe('DateInput', () => {
     expect(onChange).toHaveBeenCalledWith('2000-01-12');
   });
 
-  it('should');
+  it('should display the initial value correctly', () => {
+    render(<DateInput {...baseProps} value="2000-01-12" />);
+
+    expect(screen.getByLabelText(/day/i)).toHaveValue(12);
+    expect(screen.getByLabelText(/month/i)).toHaveValue(1);
+    expect(screen.getByLabelText(/year/i)).toHaveValue(2000);
+  });
+
+  it('should render a disabled input', () => {
+    render(<DateInput {...baseProps} disabled />);
+    expect(screen.getByLabelText(/day/i)).toBeDisabled();
+    expect(screen.getByLabelText(/month/i)).toBeDisabled();
+    expect(screen.getByLabelText(/year/i)).toBeDisabled();
+    expect(
+      screen.getByRole('button', { name: baseProps.openCalendarButtonLabel }),
+    ).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('should handle min/max dates', () => {
+    render(<DateInput {...baseProps} min="2000-01-01" max="2001-01-01" />);
+    expect(screen.getByLabelText(/day/i)).toHaveAttribute('min', '1');
+    expect(screen.getByLabelText(/day/i)).toHaveAttribute('max', '31');
+    expect(screen.getByLabelText(/month/i)).toHaveAttribute('min', '1');
+    expect(screen.getByLabelText(/month/i)).toHaveAttribute('max', '12');
+    expect(screen.getByLabelText(/year/i)).toHaveAttribute('min', '2000');
+    expect(screen.getByLabelText(/year/i)).toHaveAttribute('max', '2001');
+  });
+
+  it('should handle min/max dates as the user types year', async () => {
+    render(<DateInput {...baseProps} min="2000-04-29" max="2001-02-15" />);
+
+    await userEvent.type(screen.getByLabelText(/year/i), '2001');
+    /*    expect(screen.getByLabelText(/day/i)).toHaveAttribute('min', '1');
+    expect(screen.getByLabelText(/day/i)).toHaveAttribute('max', '1');*/
+    expect(screen.getByLabelText(/month/i)).toHaveAttribute('min', '1');
+    expect(screen.getByLabelText(/month/i)).toHaveAttribute('max', '2');
+  });
+
+  it('should handle min/max dates as the user types year and month', async () => {
+    render(<DateInput {...baseProps} min="2000-04-29" max="2001-02-15" />);
+
+    await userEvent.type(screen.getByLabelText(/year/i), '2001');
+    await userEvent.type(screen.getByLabelText(/month/i), '02');
+
+    expect(screen.getByLabelText(/day/i)).toHaveAttribute('min', '1');
+    // should this be set to 15 or leave it as 28 ?
+    expect(screen.getByLabelText(/day/i)).toHaveAttribute('max', '28');
+  });
+
+  it('years field should be readonly if min/max dates have the same year', () => {
+    render(<DateInput {...baseProps} min="2000-04-29" max="2000-06-15" />);
+    expect(screen.getByLabelText(/year/i)).toHaveAttribute('readonly');
+    // should we also update the min/max values for the month field?
+    /*    expect(screen.getByLabelText(/month/i)).toHaveAttribute('min', '4');
+    expect(screen.getByLabelText(/month/i)).toHaveAttribute('max', '6');*/
+  });
+
+  it('years and months fields should render as readonly if min/max dates have the same year and same month', () => {
+    render(<DateInput {...baseProps} min="2000-04-09" max="2000-04-27" />);
+    expect(screen.getByLabelText(/year/i)).toHaveAttribute('readonly');
+    expect(screen.getByLabelText(/month/i)).toHaveAttribute('readonly');
+
+    // should we also update the min/max values for the day field?
+    /*    expect(screen.getByLabelText(/day/i)).toHaveAttribute('min', '9');
+    expect(screen.getByLabelText(/day/i)).toHaveAttribute('max', '27');*/
+  });
+
+  describe('Status messages', () => {
+    it('should render an empty live region on mount', () => {
+      render(<DateInput {...baseProps} />);
+      const liveRegionEl = screen.getByRole('status');
+
+      expect(liveRegionEl).toBeEmptyDOMElement();
+    });
+
+    it('should render status messages in a live region', () => {
+      const statusMessage = 'This field is required';
+      render(
+        <DateInput {...baseProps} invalid validationHint={statusMessage} />,
+      );
+      const liveRegionEl = screen.getByRole('status');
+
+      expect(liveRegionEl).toHaveTextContent(statusMessage);
+    });
+
+    it('should not render descriptions in a live region', () => {
+      const statusMessage = 'This field is required';
+      render(<DateInput {...baseProps} validationHint={statusMessage} />);
+      const liveRegionEl = screen.getByRole('status');
+
+      expect(liveRegionEl).toBeEmptyDOMElement();
+    });
+  });
 
   it('should have no accessibility violations', async () => {
     const { container } = render(<DateInput {...baseProps} />);

diff --git a/packages/circuit-ui/components/DateInput/DateInput.tsx b/packages/circuit-ui/components/DateInput/DateInput.tsx
@@ -315,12 +315,14 @@ export const DateInput = forwardRef<HTMLFieldSetElement, DateInputProps>(
       }
     }
 
-    const plainDate = toPlainDate(value);
+    const calendarButtonLabel = openCalendarButtonLabel;
+    // TODO fix Error: Uncaught [TypeError: Cannot use valueOf]
+    /*const plainDate = toPlainDate(value);
     const calendarButtonLabel = plainDate
       ? [openCalendarButtonLabel, formatDate(plainDate, locale, 'long')].join(
           ', ',
         )
-      : openCalendarButtonLabel;
+      : openCalendarButtonLabel;*/
 
     const segments = getDateSegments(locale);
 
@@ -414,6 +416,7 @@ export const DateInput = forwardRef<HTMLFieldSetElement, DateInputProps>(
               variant="secondary"
               onClick={openCalendar}
               className={classes['calendar-button']}
+              disabled={disabled}
             >
               {calendarButtonLabel}
             </IconButton>