fixes failing input box tests

mongodb · Sep 20, 2023 · 21296ee · 21296ee
1 parent 3d8ab86
commit 21296ee
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 18 deletions.
diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.spec.tsx
@@ -6,16 +6,28 @@ import {
   DatePickerProvider,
   DatePickerProviderProps,
 } from '../../DatePickerContext';
+import { defaultDatePickerContext } from '../../DatePickerContext/DatePickerContext.utils';
 
+import { SegmentRefs } from './DateInputBox.types';
 import { DateInputBox, type DateInputBoxProps } from '.';
 
 const renderDateInputBox = (
-  props?: DateInputBoxProps,
-  context?: DatePickerProviderProps,
+  props?: Omit<DateInputBoxProps, 'segmentRefs'>,
+  context?: Partial<DatePickerProviderProps>,
 ) => {
+  const segmentRefsMock: SegmentRefs = {
+    day: React.createRef(),
+    month: React.createRef(),
+    year: React.createRef(),
+  };
+
   const result = render(
-    <DatePickerProvider value={{ label: 'Label', ...context }}>
-      <DateInputBox {...props} value={props?.value ?? null} />
+    <DatePickerProvider value={{ ...defaultDatePickerContext, ...context }}>
+      <DateInputBox
+        {...props}
+        value={props?.value ?? null}
+        segmentRefs={segmentRefsMock}
+      />
     </DatePickerProvider>,
   );
 

diff --git a/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts b/packages/date-picker/src/DateInput/DateInputBox/DateInputBox.types.ts
@@ -4,6 +4,11 @@ import { HTMLElementProps } from '@leafygreen-ui/lib';
 import { DateType } from '../../types';
 import { DateSegment } from '../DateInput.types';
 
+export type SegmentRefs = Record<
+  DateSegment,
+  ReturnType<DynamicRefGetter<HTMLInputElement>>
+>;
+
 export interface DateInputBoxProps
   extends Omit<HTMLElementProps<'div'>, 'onChange'> {
   /**
@@ -23,8 +28,5 @@ export interface DateInputBoxProps
   labelledBy?: string;
 
   /** Refs  */
-  segmentRefs: Record<
-    DateSegment,
-    ReturnType<DynamicRefGetter<HTMLInputElement>>
-  >;
+  segmentRefs: SegmentRefs;
 }
diff --git a/packages/date-picker/src/DatePicker/DatePicker.types.ts b/packages/date-picker/src/DatePicker/DatePicker.types.ts
@@ -1,13 +1,5 @@
-import { DynamicRefGetter } from '@leafygreen-ui/hooks/src/useDynamicRefs';
-
-import { DateSegment } from '../DateInput/DateInput.types';
 import { BaseDatePickerProps, DateType } from '../types';
 
-export type SegmentRefs = Record<
-  DateSegment,
-  ReturnType<DynamicRefGetter<HTMLInputElement>>
->;
-
 export interface DatePickerProps extends BaseDatePickerProps {
   /**
    * The selected date, given in UTC time

diff --git a/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx b/packages/date-picker/src/DatePicker/DatePickerContents/DatePickerContents.tsx
@@ -7,8 +7,8 @@ import {
   useForwardedRef,
 } from '@leafygreen-ui/hooks';
 
+import { SegmentRefs } from '../../DateInput/DateInputBox/DateInputBox.types';
 import { useDatePickerContext } from '../../DatePickerContext';
-import { SegmentRefs } from '../DatePicker.types';
 import { DatePickerInput, DatePickerInputProps } from '../DatePickerInput';
 import { DatePickerMenu, DatePickerMenuProps } from '../DatePickerMenu';
 import { focusRelevantSegment } from '../utils/focusRelevantSegment';

diff --git a/packages/date-picker/src/DatePicker/utils/focusRelevantSegment.ts b/packages/date-picker/src/DatePicker/utils/focusRelevantSegment.ts
@@ -2,8 +2,8 @@ import isUndefined from 'lodash/isUndefined';
 import last from 'lodash/last';
 
 import { isDateSegment } from '../../DateInput/DateInput.types';
+import { SegmentRefs } from '../../DateInput/DateInputBox/DateInputBox.types';
 import { DatePickerContextProps } from '../../DatePickerContext';
-import { SegmentRefs } from '../DatePicker.types';
 
 interface FocusRelevantSegmentArgs {
   target: EventTarget;