test: added test for timepicker (#86)

src/timepicker/TimePickerColumn.ts

@@ -9,7 +9,7 @@ import { TIME_PICKER_COLUMN_KEYS } from "./__keys";
 import { TimePickerColumnStateReturn } from "./TimePickerColumnState";
 
 export type TimePickerColumnOptions = CompositeOptions &
-  Pick<TimePickerColumnStateReturn, "type">;
+  Pick<TimePickerColumnStateReturn, "columnType">;
 
 export type TimePickerColumnHTMLProps = CompositeHTMLProps;
 
@@ -27,7 +27,7 @@ export const useTimePickerColumn = createHook<
   useProps(options, htmlProps) {
     return {
       role: "listbox",
-      "aria-label": options.type,
+      "aria-label": options.columnType,
       ...htmlProps,
     };
   },

src/timepicker/TimePickerColumnState.ts

@@ -8,7 +8,7 @@ export type ColumnType = "hour" | "minute" | "meridian";
 
 export interface TimePickerColumnInitialState extends ValueBase<Date> {
   visible?: boolean;
-  type?: ColumnType;
+  columnType?: ColumnType;
 }
 
 export const useTimePickerColumnState = (
@@ -19,7 +19,7 @@ export const useTimePickerColumnState = (
     defaultValue = new Date(),
     onChange,
     visible,
-    type = "hour",
+    columnType = "hour",
   } = props;
 
   const [date, setDate] = useControllableState({
@@ -28,7 +28,7 @@ export const useTimePickerColumnState = (
     onChange,
   });
 
-  const selected = getSelectedValueFromDate(date, type);
+  const selected = getSelectedValueFromDate(date, columnType);
 
   const composite = useCompositeState({
     loop: true,
@@ -37,10 +37,10 @@ export const useTimePickerColumnState = (
   });
 
   const setSelected = (value: number) => {
-    setDate(getSelectedDateFromValue(value, date, type));
+    setDate(getSelectedDateFromValue(value, date, columnType));
   };
 
-  return { selected, setSelected, visible, type, ...composite };
+  return { selected, setSelected, visible, columnType, ...composite };
 };
 
 export type TimePickerColumnStateReturn = ReturnType<

src/timepicker/TimePickerState.ts

@@ -55,21 +55,21 @@ export const useTimePickerState = (props: TimePickerStateProps = {}) => {
   };
 
   const hourState = useTimePickerColumnState({
-    type: "hour",
+    columnType: "hour",
     value: time,
     onChange: setTimeProp,
     visible: popover.visible,
   });
 
   const minuteState = useTimePickerColumnState({
-    type: "minute",
+    columnType: "minute",
     value: time,
     onChange: setTimeProp,
     visible: popover.visible,
   });
 
   const meridiesState = useTimePickerColumnState({
-    type: "meridian",
+    columnType: "meridian",
     value: time,
     onChange: setTimeProp,
     visible: popover.visible,

src/timepicker/__keys.ts

@@ -37,7 +37,7 @@ const TIME_PICKER_COLUMN_STATE_KEYS = [
   "selected",
   "setSelected",
   "visible",
-  "type",
+  "columnType",
 ] as const;
 const TIME_PICKER_STATE_KEYS = [
   "fieldValue",

src/timepicker/__tests__/TimePicker.test.tsx

@@ -0,0 +1,148 @@
+import * as React from "react";
+import { axe, render, press } from "reakit-test-utils";
+import {
+  TimePicker,
+  TimePickerColumn,
+  TimePickerTrigger,
+  TimePickerSegment,
+  TimePickerContent,
+  useTimePickerState,
+  TimePickerStateProps,
+  TimePickerColumnValue,
+  TimePickerSegmentField,
+} from "..";
+
+beforeAll(() => {
+  // https://github.com/jsdom/jsdom/issues/1695
+  Element.prototype.scrollIntoView = jest.fn();
+
+  // ChakraUI's focus() uses requestAnimationFrame so we need to mock it
+  jest
+    .spyOn(window, "requestAnimationFrame")
+    .mockImplementation((cb: any) => cb());
+});
+
+afterAll(() => {
+  (window.requestAnimationFrame as any).mockRestore();
+});
+
+const TimePickerComp: React.FC<TimePickerStateProps> = props => {
+  const state = useTimePickerState(props);
+
+  return (
+    <>
+      <TimePicker {...state}>
+        <TimePickerSegmentField data-testid="current-time" {...state}>
+          {state.segments.map((segment, i) => (
+            <TimePickerSegment key={i} segment={segment} {...state} />
+          ))}
+        </TimePickerSegmentField>
+        <TimePickerTrigger {...state}>open</TimePickerTrigger>
+      </TimePicker>
+      <TimePickerContent data-testid="timepicker-content" {...state}>
+        <TimePickerColumn {...state.hourState}>
+          {state.hours.map(n => {
+            return (
+              <TimePickerColumnValue key={n} value={n} {...state.hourState}>
+                {n}
+              </TimePickerColumnValue>
+            );
+          })}
+        </TimePickerColumn>
+        <TimePickerColumn {...state.minuteState}>
+          {state.minutes.map((n, i) => {
+            return (
+              <TimePickerColumnValue key={n} value={i} {...state.minuteState}>
+                {n}
+              </TimePickerColumnValue>
+            );
+          })}
+        </TimePickerColumn>
+        <TimePickerColumn {...state.meridiesState}>
+          {state.meridies.map((n, i) => {
+            return (
+              <TimePickerColumnValue key={n} value={i} {...state.meridiesState}>
+                {n}
+              </TimePickerColumnValue>
+            );
+          })}
+        </TimePickerColumn>
+      </TimePickerContent>
+    </>
+  );
+};
+
+describe("TimePicker", () => {
+  it("should render correctly", () => {
+    const { getByTestId: testId } = render(
+      <TimePickerComp defaultValue="12:45pm" />,
+    );
+
+    expect(testId("current-time")).toHaveTextContent("12:45 PM");
+  });
+
+  it("should open and change time value", () => {
+    const { getByTestId: testId } = render(
+      <TimePickerComp defaultValue="12:45pm" />,
+    );
+
+    expect(testId("timepicker-content")).not.toBeVisible();
+    press.Tab();
+
+    press.ArrowDown(null, { altKey: true });
+
+    expect(testId("timepicker-content")).toBeVisible();
+
+    expect(document.activeElement).toHaveTextContent("12");
+    press.ArrowDown();
+    expect(document.activeElement).toHaveTextContent("1");
+
+    press.Enter();
+    expect(testId("timepicker-content")).not.toBeVisible();
+    expect(testId("current-time")).toHaveTextContent("1:45 PM");
+  });
+
+  it("should be able to navigate with keyboard", () => {
+    const { getByTestId: testId } = render(
+      <TimePickerComp defaultValue="12:45pm" />,
+    );
+
+    expect(testId("timepicker-content")).not.toBeVisible();
+    press.Tab();
+
+    press.ArrowDown(null, { altKey: true });
+
+    expect(testId("timepicker-content")).toBeVisible();
+
+    expect(document.activeElement).toHaveTextContent("12");
+    press.ArrowDown();
+    press.ArrowDown();
+    press.ArrowDown();
+    expect(document.activeElement).toHaveTextContent("3");
+
+    // Go to minute column
+    press.ArrowRight();
+    expect(document.activeElement).toHaveTextContent("45");
+    press.ArrowUp();
+    press.ArrowUp();
+    press.ArrowUp();
+    expect(document.activeElement).toHaveTextContent("42");
+
+    // Go to meridian column
+    press.ArrowRight();
+    expect(document.activeElement).toHaveTextContent("PM");
+    press.ArrowUp();
+    expect(document.activeElement).toHaveTextContent("AM");
+
+    press.Enter();
+    expect(testId("timepicker-content")).not.toBeVisible();
+    expect(testId("current-time")).toHaveTextContent("12:45 AM");
+  });
+
+  test("TimePicker renders with no a11y violations", async () => {
+    const { container } = render(<TimePickerComp />);
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+});