@terreno/ui 0.0.1

package/src/DateTimeField.test.tsx

@@ -0,0 +1,393 @@
+import {afterEach, beforeEach, describe, expect, it, type mock} from "bun:test";
+import {act, userEvent} from "@testing-library/react-native";
+import {DateTime} from "luxon";
+
+import {DateTimeField} from "./DateTimeField";
+import {renderWithTheme, setupComponentTest, teardownComponentTest} from "./test-utils";
+
+describe("DateTimeField", () => {
+  let mockOnChange: ReturnType<typeof mock>;
+
+  beforeEach(() => {
+    const mocks = setupComponentTest();
+    mockOnChange = mocks.onChange;
+  });
+
+  afterEach(() => {
+    teardownComponentTest();
+  });
+
+  describe("date type", () => {
+    it("should render correctly", () => {
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="date" value="2023-05-15T00:00:00.000Z" />
+      );
+
+      expect(getByPlaceholderText("MM").props.value).toBe("05");
+      expect(getByPlaceholderText("DD").props.value).toBe("15");
+      expect(getByPlaceholderText("YYYY").props.value).toBe("2023");
+    });
+
+    it("should call onChange when date is changed", async () => {
+      const user = userEvent.setup();
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="date" value="2023-05-15T00:00:00.000Z" />
+      );
+
+      const dayInput = getByPlaceholderText("DD");
+
+      await user.clear(dayInput);
+      await user.type(dayInput, "20");
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+
+      expect(mockOnChange).toHaveBeenCalled();
+
+      // Verify that the time is set to 00:00:00
+      const lastCall = mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
+      const date = DateTime.fromISO(lastCall, {zone: "UTC"});
+      expect(date.hour).toBe(0);
+      expect(date.minute).toBe(0);
+      expect(date.second).toBe(0);
+    });
+
+    it("should call onChange when date is changed, starting with a non-zero time", async () => {
+      const user = userEvent.setup();
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="date" value="2023-05-15T14:30:45.000Z" />
+      );
+
+      const dayInput = getByPlaceholderText("DD");
+
+      await user.clear(dayInput);
+      await user.type(dayInput, "20");
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+
+      expect(mockOnChange).toHaveBeenCalled();
+
+      // Verify that the time is set to 00:00:00
+      const lastCall = mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
+      const date = DateTime.fromISO(lastCall, {zone: "UTC"});
+      expect(date.hour).toBe(0);
+      expect(date.minute).toBe(0);
+      expect(date.second).toBe(0);
+    });
+
+    it("should update the date when changing month", async () => {
+      const user = userEvent.setup();
+
+      // Start with a value that has a non-zero time
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="date" value="2023-05-15T14:30:45.000Z" />
+      );
+
+      const monthInput = getByPlaceholderText("MM");
+
+      await user.clear(monthInput);
+      await user.type(monthInput, "06");
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+
+      expect(mockOnChange).toHaveBeenCalled();
+
+      // Verify that the time is set to 00:00:00
+      const lastCall = mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
+      const date = DateTime.fromISO(lastCall, {zone: "UTC"});
+      expect(date.hour).toBe(0);
+      expect(date.minute).toBe(0);
+      expect(date.second).toBe(0);
+      expect(date.month).toBe(6);
+    });
+  });
+
+  describe("time type", () => {
+    it("should render correctly", () => {
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="time"
+          value="2023-05-15T15:30:00.000Z"
+        />
+      );
+
+      expect(getByPlaceholderText("hh").props.value).toBe("11");
+      expect(getByPlaceholderText("mm").props.value).toBe("30");
+    });
+
+    it("should render correctly in different timezone", () => {
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/Chicago"
+          type="time"
+          value="2023-05-15T15:30:00.000Z"
+        />
+      );
+
+      expect(getByPlaceholderText("hh").props.value).toBe("10");
+      expect(getByPlaceholderText("mm").props.value).toBe("30");
+    });
+
+    it("should preserve the date portion when changing only the time", async () => {
+      const user = userEvent.setup();
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="time" value="2023-05-15T15:30:00.000Z" />
+      );
+
+      const minuteInput = getByPlaceholderText("mm");
+
+      await user.clear(minuteInput);
+      await user.type(minuteInput, "45");
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+
+      expect(mockOnChange).toHaveBeenCalled();
+      // Extract the date part from the argument to avoid timezone issues
+      const dateArg = mockOnChange.mock.calls[0][0];
+      const dateObj = DateTime.fromISO(dateArg);
+      expect(dateObj.day).toBe(15);
+      expect(dateObj.month).toBe(5);
+      expect(dateObj.year).toBe(2023);
+    });
+  });
+
+  // Simplified datetime test that checks fewer things
+  describe("datetime type", () => {
+    it("should render correctly with date and time", () => {
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="datetime" value="2023-05-15T15:30:00.000Z" />
+      );
+
+      // Validate placeholders for month, hour, and minute
+      expect(getByPlaceholderText("MM")).toBeTruthy(); // month
+      expect(getByPlaceholderText("hh")).toBeTruthy(); // hour
+      expect(getByPlaceholderText("mm")).toBeTruthy(); // minute
+    });
+  });
+
+  describe("timezone handling", () => {
+    it("should respect provided timezone", () => {
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/Los_Angeles"
+          type="date"
+          value="2023-05-15T00:00:00.000Z"
+        />
+      );
+
+      expect(getByPlaceholderText("MM").props.value).toBe("05");
+      expect(getByPlaceholderText("DD").props.value).toBe("15");
+      expect(getByPlaceholderText("YYYY").props.value).toBe("2023");
+    });
+
+    it("should handle timezone conversion when changing dates", async () => {
+      const user = userEvent.setup();
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/Los_Angeles"
+          type="date"
+          value="2023-05-15T00:00:00.000Z"
+        />
+      );
+
+      const dayInput = getByPlaceholderText("DD");
+
+      await user.clear(dayInput);
+      await user.type(dayInput, "20");
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+
+      expect(mockOnChange).toHaveBeenCalled();
+    });
+  });
+
+  describe("special cases", () => {
+    it("should handle invalid date inputs gracefully", async () => {
+      const user = userEvent.setup();
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="date" value="2023-05-15T00:00:00.000Z" />
+      );
+
+      mockOnChange.mockClear();
+
+      // Try to set an invalid month
+      const monthInput = getByPlaceholderText("MM");
+
+      await user.clear(monthInput);
+      await user.type(monthInput, "13");
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+
+      // Month should be capped and always return a valid date
+      const validCalls = mockOnChange.mock.calls.filter((args: any[]) => {
+        const date = DateTime.fromISO(args[0]);
+        return date.isValid && date.month <= 12;
+      });
+
+      expect(validCalls.length).toBe(mockOnChange.mock.calls.length);
+    });
+
+    it("should handle invalid time inputs gracefully", async () => {
+      const user = userEvent.setup();
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="time" value="2023-05-15T15:30:00.000Z" />
+      );
+
+      // Try to set an invalid minute
+      const minuteInput = getByPlaceholderText("mm");
+
+      await user.clear(minuteInput);
+      await user.type(minuteInput, "60");
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+
+      // The component should call onChange for valid minute updates (0 and 6)
+      // and must never emit an invalid minute (60).
+      expect(mockOnChange).toHaveBeenCalled();
+      expect(mockOnChange).toHaveBeenCalledTimes(4);
+      const calls = mockOnChange.mock.calls.map(([iso]: any) => iso);
+      // No call should use an invalid "60" minute.
+      expect(calls.some((iso: string) => iso.includes(":60:00.000Z"))).toBe(false);
+      // It should include a reset to "00" and then a valid "06".
+      expect(calls).toEqual(
+        expect.arrayContaining([
+          expect.stringContaining("T15:00:00.000Z"),
+          expect.stringContaining("T15:06:00.000Z"),
+        ])
+      );
+    });
+  });
+
+  // Add tests specifically for the 00:00:00 time behavior with date type
+  describe("date type time handling", () => {
+    it("should handle date-only fields by setting the time to 00:00:00", async () => {
+      const user = userEvent.setup();
+      // Test with a non-midnight time as input
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="date" value="2023-05-15T14:30:45.000Z" />
+      );
+
+      const dayInput = getByPlaceholderText("DD");
+
+      await user.clear(dayInput);
+      await user.type(dayInput, "16");
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+
+      // The time should be normalized to 00:00:00 regardless of input time
+      expect(mockOnChange).toHaveBeenCalled();
+
+      // Get the last call and check the time components
+      const lastCall = mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
+      const date = DateTime.fromISO(lastCall, {zone: "UTC"});
+      // Only check that minutes and seconds are 0, as the hours may vary based on implementation
+      expect(date.minute).toBe(0);
+      expect(date.second).toBe(0);
+    });
+
+    it("should preserve the 00:00:00 time when updating any date component", async () => {
+      const user = userEvent.setup();
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="date" value="2023-05-15T00:00:00.000Z" />
+      );
+
+      // Change month
+      const monthInput = getByPlaceholderText("MM");
+
+      await user.clear(monthInput);
+      await user.type(monthInput, "06");
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+
+      expect(mockOnChange).toHaveBeenCalled();
+    });
+
+    // New tests for dates ending at 0 minutes
+    it("should correctly display dates with 0 minutes", () => {
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="date" value="2023-05-15T14:00:00.000Z" />
+      );
+
+      // Check that the date is displayed correctly
+      expect(getByPlaceholderText("MM").props.value).toBe("05");
+      expect(getByPlaceholderText("DD").props.value).toBe("15");
+      expect(getByPlaceholderText("YYYY").props.value).toBe("2023");
+    });
+
+    it("should maintain 00:00:00 time when modifying a date that originally had 0 minutes", async () => {
+      const user = userEvent.setup();
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="date" value="2023-05-15T16:00:00.000Z" />
+      );
+
+      // Change day
+      const dayInput = getByPlaceholderText("DD");
+
+      await user.clear(dayInput);
+      await user.type(dayInput, "20");
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+
+      expect(mockOnChange).toHaveBeenCalled();
+
+      // Verify that the time is set to 00:00:00
+      const lastCall = mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
+      const date = DateTime.fromISO(lastCall, {zone: "UTC"});
+      expect(date.hour).toBe(0);
+      expect(date.minute).toBe(0);
+      expect(date.second).toBe(0);
+    });
+  });
+
+  // Add comprehensive test for 12-hour and 0-minute handling
+  describe("date type with specific time values", () => {
+    it("should handle dates at exactly 12:00 noon UTC", () => {
+      mockOnChange.mockClear();
+
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="date" value="2023-05-15T12:00:00.000Z" />
+      );
+
+      // Verify that the date is displayed correctly
+      expect(getByPlaceholderText("MM").props.value).toBe("05");
+      expect(getByPlaceholderText("DD").props.value).toBe("15");
+      expect(getByPlaceholderText("YYYY").props.value).toBe("2023");
+    });
+
+    it("should handle dates with exactly 0 minutes", () => {
+      // Use a non-midnight time with exactly 0 minutes
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="date" value="2023-05-15T14:00:00.000Z" />
+      );
+
+      // UI should show the date component only
+      expect(getByPlaceholderText("MM").props.value).toBe("05");
+      expect(getByPlaceholderText("DD").props.value).toBe("15");
+      expect(getByPlaceholderText("YYYY").props.value).toBe("2023");
+    });
+  });
+});