adds tests for input segment

Author: TheSonOfThomp

packages/date-picker/src/DateInputSegment/DateInputSegment.spec.tsx

@@ -1,11 +1,36 @@
-
 import React from 'react';
 import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { DateInputSegment } from '.';
 
-describe('packages/date-input-segment', () => {
-  test('condition', () => {
-
-  })
-})
+describe('packages/date-picker/date-input-segment', () => {
+  describe('Typing', () => {
+    test('Typing a number sets the value', async () => {
+      const result = render(<DateInputSegment segment="day" />);
+      const input = result.getByRole('spinbutton');
+      await userEvent.type(input, '12');
+      expect(input).toHaveValue('12');
+    });
+    test('Typing letters does not the value', async () => {
+      const result = render(<DateInputSegment segment="day" />);
+      const input = result.getByRole('spinbutton');
+      await userEvent.type(input, 'abc');
+      expect(input).toHaveValue('');
+    });
+  });
+  describe('Arrow Keys', () => {
+    test('ArrowUp increments value', async () => {
+      const result = render(<DateInputSegment segment="day" />);
+      const input = result.getByRole('spinbutton');
+      await userEvent.type(input, '{arrowup}');
+      expect(input).toHaveValue('01');
+    });
+    test('ArrowDown decrements value', async () => {
+      const result = render(<DateInputSegment segment="day" />);
+      const input = result.getByRole('spinbutton');
+      await userEvent.type(input, '{arrowup}{arrowup}{arrowdown}');
+      expect(input).toHaveValue('01');
+    });
+  });
+});

packages/date-picker/src/DateInputSegment/DateInputSegment.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { StoryFn } from '@storybook/react';
+import { StoryFn, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
 
 import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import { StoryMetaType } from '@leafygreen-ui/lib';
@@ -62,4 +63,21 @@ const Template: StoryFn<typeof DateInputSegment> = props => (
 
 export const Basic = Template.bind({});
 
+export const Type: StoryObj<typeof DateInputSegment> = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole('spinbutton');
+    await userEvent.type(input, '12');
+  },
+};
+
+export const ArrowUp: StoryObj<typeof DateInputSegment> = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole('spinbutton');
+    input.focus();
+    await userEvent.type(input, '{arrowup}');
+  },
+};
+
 export const Generated = () => {};

packages/date-picker/src/DateInputSegment/DateInputSegment.tsx

@@ -7,7 +7,7 @@ import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { Size } from '@leafygreen-ui/tokens';
 import { useUpdatedBaseFontSize } from '@leafygreen-ui/typography';
 
-import { useDatePickerContext } from '../DatePickerContext';
+import { useDatePickerContext } from '../DatePickerContext/DatePickerContext';
 
 import {
   charsPerSegment,

packages/date-picker/src/DateInputSegment/index.ts

@@ -0,0 +1,2 @@
+export { DateInputSegment } from './DateInputSegment';
+export { DateInputSegmentProps } from './DateInputSegment.types';

packages/date-picker/src/DatePicker/index.ts

@@ -1,2 +1,2 @@
 export { DatePicker } from './DatePicker';
-export { DatePickerProps } from './DatePicker.types';
+export { type DatePickerProps } from './DatePicker.types';

packages/date-picker/src/index.ts

@@ -1 +1 @@
-export { DatePicker, DatePickerProps } from './DatePicker';
+export { DatePicker, type DatePickerProps } from './DatePicker';