@dhasdk/simple-ui 1.0.7 → 1.0.8

package/src/lib/DatePicker--DatePicker.stories.tsx

@@ -0,0 +1,228 @@
+// DatePicker.stories.tsx
+import { Meta, StoryObj, StoryContext } from '@storybook/react';
+import { DatePicker, DatePickerProps } from './DatePicker';
+import { expect, userEvent, within } from 'storybook/test';
+import { fireEvent } from 'storybook/test';
+import dayjs from 'dayjs';
+
+// Meta object
+export default {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+  args: {
+    id: '42',
+    label: 'Select Date',
+    value: '',
+  },
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+} as Meta<DatePickerProps>;
+
+// Default story
+export const Default: StoryObj<DatePickerProps> = {
+  args: {
+    // You can override the default args here
+    label: 'Select Birthday',
+    // value: '', // no default date
+    onChange: (date) => {
+      console.log('Date changed:', date);
+    },
+  },
+};
+
+// Default story
+export const NoColor: StoryObj<DatePickerProps> = {
+  args: {
+    // You can override the default args here
+    label: 'Select Birthday',
+    // color: '',
+    // value: '', // no default date
+    onChange: (date) => {
+      console.log('Date changed:', date);
+    },
+  },
+};
+
+// Story with a pre-filled date
+export const PreFilledDate: StoryObj<DatePickerProps> = {
+  args: {
+    label: 'Pre-filled Date',
+    value: '01-15-2025', // for example
+    onChange: (date) => {
+      console.log('Date changed:', date);
+    },
+  },
+};
+
+
+// Story with no default date and forced invalid state
+export const InvalidDate: StoryObj<DatePickerProps> = {
+  args: {
+    label: 'Invalid Date Handling',
+    value: '13-40-9999', // obviously invalid
+    onChange: (date) => {
+      console.log('Date changed:', date);
+    },
+  },
+};
+
+// Story demonstrating using today's date
+export const TodayDate = {
+  args: {
+    label: 'Today\'s Date',
+    value: new Date().toLocaleDateString('en-US', { 
+      month: '2-digit', day: '2-digit', year: 'numeric' 
+    }).replace(/\//g, '-'), 
+    // This converts something like 2/5/2025 -> "02-05-2025"
+    onChange: (date: string) => {
+      console.log('Date changed:', date);
+    },
+  },
+  play: async ({ canvasElement }: StoryContext ) => {
+
+    const currentMonthName = dayjs().format('MMMM');  // full month name
+    const currentYear = dayjs().format('YYYY');       // 4-digit year
+    // const testMonthYear = currentMonthName + ' ' + currentYear;
+    const testMonthYear = 'February 2025';
+    console.log('current month + year: \'' + testMonthYear + '\'');
+
+    const canvas = within(canvasElement);
+
+    // select input box
+    const inputBox = canvas.getByLabelText('Today\'s Date');  // Select via text of input label
+    expect (inputBox).toBeVisible();
+    
+    // clear box
+    await new Promise((resolve) => setTimeout(resolve, 250)); // required to clear text effectively
+    await userEvent.clear(inputBox);
+
+    // enter '01-2' into box
+    await userEvent.type(inputBox, '01-');
+    await new Promise((resolve) => setTimeout(resolve, 250)); // required to clear text effectively
+
+    // confirm this partial input creates an error
+    const errorParagraph = canvas.getByText("Please enter a valid date 'MM-DD-YYYY'");
+    expect(errorParagraph).toBeInTheDocument();
+    expect(errorParagraph).toBeVisible();
+
+    // enter remainder of an incorrect date
+    await userEvent.type(inputBox, '33-2025');
+    await new Promise((resolve) => setTimeout(resolve, 250)); // required to clear text effectively
+    expect(errorParagraph).toBeVisible();
+
+    // clear input, type VALID date
+    await userEvent.clear(inputBox);
+    await new Promise((resolve) => setTimeout(resolve, 250)); 
+    await userEvent.type(inputBox, '02-01-2025');
+
+    // Confirm no error box visible
+    expect(errorParagraph).not.toBeVisible();
+    
+    await new Promise((resolve) => setTimeout(resolve, 250)); 
+
+    // Open Calendar via Button
+    const button = canvas.getByLabelText('Open calendar');
+    await button.click();
+
+    // Test that the correct Month + Year are displayed in the Calendar
+    const monthYearDiv = canvas.getByText('February 2025');
+    expect(monthYearDiv).toHaveTextContent('February 2025');
+
+    // Click the next button two times, see that it advances
+    const nextMonthButton = canvas.getByLabelText('Next month');
+    await nextMonthButton.click();
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    await nextMonthButton.click();
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    expect (monthYearDiv).not.toHaveTextContent(testMonthYear);
+
+    // Click the previous button two times, see that it retreats
+    const prevMonthButton = canvas.getByLabelText('Previous month');
+    await prevMonthButton.click();
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    await prevMonthButton.click();
+    await new Promise((resolve) => setTimeout(resolve, 250));
+
+    // Test again that we are at the original location
+    expect (monthYearDiv).toHaveTextContent(testMonthYear);
+
+    // Click outside of Calendar
+    await userEvent.click(canvasElement);
+
+    // verify Calendar is no longer visible
+    expect (monthYearDiv).not.toBeVisible();
+
+    // re-open calendar
+    await button.click();
+
+    // find the 5th of the month, and click on that
+    const fifthOfMonth = canvas.getByText('5');
+    await new Promise((resolve) => setTimeout(resolve, 250));
+
+    fireEvent.keyDown(fifthOfMonth, {key: 'Enter', code: 'Enter', charCode: 13});
+
+    await new Promise((resolve) => setTimeout(resolve, 250));
+
+    // verify we DO NOT have an input error
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    expect(errorParagraph).not.toBeVisible();
+
+    // select input box, clear it, then type out 01-24-2025
+    // const inputBox = canvas.getByLabelText('Today\'s Date');  // Select via text of input label
+    expect (inputBox).toBeVisible();
+    
+    // clear box
+    await new Promise((resolve) => setTimeout(resolve, 250)); // required to clear text effectively
+    await userEvent.clear(inputBox);
+
+  }
+};
+
+
+// Story demonstrating using today's date
+export const ClickDate = {
+  args: {
+    label: 'Today\'s Date',
+    value: new Date().toLocaleDateString('en-US', { 
+      month: '2-digit', day: '2-digit', year: 'numeric' 
+    }).replace(/\//g, '-'), 
+    // This converts something like 2/5/2025 -> "02-05-2025"
+    onChange: (date: string) => {
+      console.log('Date changed:', date);
+    },
+  },
+  play: async ({ canvasElement }: StoryContext ) => {
+
+    const currentMonthName = dayjs().format('MMMM');  // full month name
+    const currentYear = dayjs().format('YYYY');       // 4-digit year
+    const testMonthYear = currentMonthName + ' ' + currentYear;
+    console.log('current month + year: \'' + testMonthYear + '\'');
+
+    const canvas = within(canvasElement);
+
+    // select input box
+    const inputBox = canvas.getByLabelText('Today\'s Date') as HTMLInputElement;  // Select via text of input label
+    expect (inputBox).toBeVisible();
+    
+    // clear box
+    await new Promise((resolve) => setTimeout(resolve, 250)); // required to clear text effectively
+    await userEvent.clear(inputBox);
+
+    // Open Calendar via Button
+    const button = canvas.getByLabelText('Open calendar');
+    await button.click();
+
+
+    // find the 5th of the month, and click on that
+    const fifthOfMonth = canvas.getByText('5');
+    await new Promise((resolve) => setTimeout(resolve, 250));
+
+    // click on / select the 5th of the Month
+    fifthOfMonth.click()
+
+    await new Promise((resolve) => setTimeout(resolve, 500)); // required to clear text effectively
+    await expect(inputBox.value).toContain('-05-');
+  }
+};

package/src/lib/DatePicker.spec.tsx

@@ -0,0 +1,424 @@
+// DatePicker.test.tsx
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { axe } from "vitest-axe";
+import dayjs from "dayjs";
+import { DatePicker } from "./DatePicker";
+
+// Make sure to clean up any mocks between tests.
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+/*describe("DatePicker - AddStylesSvg", () => {
+  it("returns the original SVG string when no fill attribute is present", async () => {
+    // Arrange: create an SVG string without a fill attribute.
+    const svgWithoutFill = '<svg width="100" height="100"></svg>';
+    const testColor = "purple";
+
+    // Mock the global fetch to return our SVG string.
+    vi.spyOn(global, "fetch").mockResolvedValue({
+      // The fetch API returns a Response-like object.
+      text: async () => svgWithoutFill,
+    } as Response);
+
+    // Render the DatePicker.
+    render(
+      <DatePicker
+        id="test-datepicker"
+        label="Test Date"
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onChange={() => {}}
+        color={testColor}
+      />
+    );
+
+    // Wait for the image to appear (the fetch & useEffect run asynchronously).
+    const img = await screen.findByAltText("calendar icon");
+
+    // The AddStylesSvg function encodes the returned SVG string.
+    const expectedDataUrl = `data:image/svg+xml,${encodeURIComponent(svgWithoutFill)}`;
+
+    // Assert: the <img> element's src should be built using the original (unmodified) SVG string.
+    expect(img.getAttribute("src")).toEqual(expectedDataUrl);
+  });
+});*/
+
+describe("DatePicker Component", () => {
+  let onChangeMock: (date: string) => void;
+
+  it("sets focusedDate to null and shows an error when an invalid date is passed", async () => {
+    // Pass an invalid date string. This will force:
+    // dayjs(value, "MM-DD-YYYY", true).isValid() === false
+    render(
+      <DatePicker
+        id="test-datepicker"
+        label="Test Date"
+        value="99-99-9999"
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onChange={() => {}}
+      />
+    );
+
+    // The invalid date should cause an error message to be rendered
+    expect(
+      screen.getByText("Please enter a valid date 'MM-DD-YYYY'")
+    ).toBeInTheDocument();
+
+    // Open the calendar so we can check the header (which displays the month/year)
+    const calendarButton = screen.getByRole("button", { name: /open calendar/i });
+    userEvent.click(calendarButton);
+
+    // Wait for the dialog to be rendered
+    const dialog = await screen.findByRole("dialog");
+
+    // The header is defined as:
+    // <div className="text-lg font-semibold">
+    //   {focusedDate?.format("MMMM YYYY")}
+    // </div>
+    // Since focusedDate should be null for an invalid date, this header will render empty.
+    const header = dialog.querySelector("div.text-lg.font-semibold");
+    expect(header?.textContent).toBe(""); // Empty header indicates focusedDate is null.
+  });
+
+  // Before each test, create a mock onChange function and stub the fetch call for the calendar icon.
+  beforeEach(() => {
+    onChangeMock = vi.fn();
+    global.fetch = vi.fn(() =>
+      Promise.resolve({
+        text: () =>
+          Promise.resolve('<svg fill="#000" stroke="#000"></svg>'),
+      })
+    ) as unknown as typeof fetch;
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("renders with the provided label and initial value", async () => {
+    render(
+      <DatePicker
+        id="date-picker"
+        label="Select Date"
+        value="10-27-2023"
+        onChange={onChangeMock}
+      />
+    );
+
+    // The label should be in the document.
+    expect(screen.getByLabelText("Select Date")).toBeInTheDocument();
+
+    // The input should show the initial value.
+    const input = screen.getByRole("textbox");
+    await waitFor(() => expect(input).toHaveValue("10-27-2023"));
+  });
+
+  it("opens and closes the calendar dialog when clicking the calendar button and outside", async () => {
+    render(
+      <DatePicker
+        id="date-picker"
+        label="Select Date"
+        value="10-27-2023"
+        onChange={onChangeMock}
+      />
+    );
+
+    const calendarButton = screen.getByRole("button", {
+      name: /open calendar/i,
+    });
+
+    // The dialog should not be visible initially.
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+    // Click the calendar button to open the dialog.
+    userEvent.click(calendarButton);
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+
+    // Clicking outside (simulate a mousedown on the document body) should close the dialog.
+    fireEvent.mouseDown(document.body);
+    await waitFor(() =>
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    );
+  });
+
+  it("calls onChange with the selected date when a day is clicked", async () => {
+    // Use an initial valid date so that the calendar shows the correct month.
+    render(
+      <DatePicker
+        id="date-picker"
+        label="Select Date"
+        value="10-27-2023"
+        onChange={onChangeMock}
+      />
+    );
+
+    // Open the calendar dialog.
+    const calendarButton = screen.getByRole("button", {
+      name: /open calendar/i,
+    });
+    userEvent.click(calendarButton);
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+
+    // Locate a day button by its aria-label. For example, select "15".
+    // (The day buttons use aria-label set to the full date string.)
+    const dayButton = screen.getByText("15");
+    userEvent.click(dayButton);
+
+    // The dialog should now be closed and the input value updated.
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+      expect(screen.getByRole("textbox")).toHaveValue("10-15-2023");
+    });
+  });
+
+  it("updates the input when a valid date is typed", async () => {
+    render(
+      <DatePicker
+        id="date-picker"
+        label="Select Date"
+        value="10-27-2023"
+        onChange={onChangeMock}
+      />
+    );
+
+    const input = screen.getByRole("textbox");
+
+    // Clear the input and type a new valid date.
+    userEvent.clear(input);
+    userEvent.type(input, "12-25-2023");
+
+    // The input value should update.
+    await waitFor(() =>
+      expect(input).toHaveValue("12-25-2023")
+    );
+
+    // onChange should eventually be called with the new valid date.
+    expect(onChangeMock).toHaveBeenLastCalledWith("12-25-2023");
+
+    // There should be no error message about invalid date format.
+    expect(
+      screen.queryByText(/please enter a valid date 'MM-DD-YYYY'/i)
+    ).not.toBeInTheDocument();
+  });
+
+  it("displays an error message for an invalid date input", async () => {
+    render(
+      <DatePicker
+        id="date-picker"
+        label="Select Date"
+        value="10-27-2023"
+        onChange={onChangeMock}
+      />
+    );
+
+    const input = screen.getByRole("textbox");
+
+    // Clear the input and type an invalid date.
+    // For example, "13-40-2023" matches the regex but is not a valid date.
+    userEvent.clear(input);
+    userEvent.type(input, "13-40-2023");
+
+    // An error message should appear.
+    expect(
+      await screen.findByText(/please enter a valid date 'MM-DD-YYYY'/i)
+    ).toBeInTheDocument();
+  });
+
+  it("allows keyboard selection of a date using the Enter key", async () => {
+    render(
+      <DatePicker
+        id="date-picker"
+        label="Select Date"
+        value="10-27-2023"
+        onChange={onChangeMock}
+      />
+    );
+
+    // Open the calendar dialog.
+    const calendarButton = screen.getByRole("button", {
+      name: /open calendar/i,
+    });
+    userEvent.click(calendarButton);
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+
+    // Focus on a day button (for example, "October 20, 2023").
+    const dayButton = screen.getByLabelText("October 20, 2023");
+    dayButton.focus();
+    expect(dayButton).toHaveFocus();
+
+    // Simulate pressing the Enter key.
+    fireEvent.keyDown(dayButton, { key: "Enter", code: "Enter" });
+    await waitFor(() =>
+      expect(onChangeMock).toHaveBeenCalledWith("10-20-2023")
+    );
+  });
+
+  it("navigates to previous and next months", async () => {
+    render(
+      <DatePicker
+        id="date-picker"
+        label="Select Date"
+        value="10-27-2023"
+        onChange={onChangeMock}
+      />
+    );
+
+    // Open the calendar dialog.
+    const calendarButton = screen.getByRole("button", {
+      name: /open calendar/i,
+    });
+    userEvent.click(calendarButton);
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+
+    // Initially, the month/year label should be "October 2023".
+    expect(screen.getByText("October 2023")).toBeInTheDocument();
+
+    // Click the "previous month" button.
+    const prevButton = screen.getByRole("button", {
+      name: /previous month/i,
+    });
+    userEvent.click(prevButton);
+    await waitFor(() =>
+      expect(screen.getByText("September 2023")).toBeInTheDocument()
+    );
+
+    // Click the "next month" button twice (to go from September back to November).
+    const nextButton = screen.getByRole("button", {
+      name: /next month/i,
+    });
+    userEvent.click(nextButton);
+    await waitFor(() =>
+      expect(screen.getByText("October 2023")).toBeInTheDocument()
+    );
+    userEvent.click(nextButton);
+    await waitFor(() =>
+      expect(screen.getByText("November 2023")).toBeInTheDocument()
+    );
+  });
+
+  it("has no detectable accessibility violations", async () => {
+    const { container } = render(
+      <DatePicker
+        id="date-picker"
+        label="Select Date"
+        value="10-27-2023"
+        onChange={onChangeMock}
+      />
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("handles empty initial value by setting today's date internally but displays an empty input", async () => {
+    // Render the DatePicker without providing a value prop.
+    render(
+      <DatePicker
+        id="date-picker-empty"
+        label="Select Date"
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onChange={() => {}}
+      />
+    );
+
+    // The component's effect sets inputValue to today's date internally,
+    // but because valueEntered is set to false, the input shows an empty string.
+    const input = screen.getByRole("textbox");
+
+    // Wait for the effect to complete and then assert the input displays empty string.
+    await waitFor(() => {
+      expect(input).toHaveValue('');
+    });
+  });
+
+
+  it("handles input change with a regex-valid but invalid date, triggering the 'else' branch", async () => {
+    const onChangeMock = vi.fn();
+
+    render(
+      <DatePicker
+        id="date-picker-invalid"
+        label="Select Date"
+        value="10-27-2023"
+        onChange={onChangeMock}
+      />
+    );
+
+    const input = screen.getByRole("textbox");
+
+    // Clear the input and simulate typing an invalid date.
+    // "02-31-2023" matches the regex (02 for month, 31 for day, 2023 for year)
+    // but February 31st is not a valid date.
+    userEvent.clear(input);
+    userEvent.type(input, "02-34-2023");
+
+    // Wait until the component processes the input change.
+    await waitFor(() => {
+      // onChange should be called with the invalid date.
+      expect(onChangeMock).toHaveBeenLastCalledWith("02-34-2023");
+
+      // Because the date is invalid, an error message should be displayed.
+      expect(
+        screen.getByText(/please enter a valid date 'MM-DD-YYYY'/i)
+      ).toBeInTheDocument();
+    });
+  });
+
+});
+
+
+/*describe("DatePicker SVG styling branch", () => {
+  const originalSvg = '<svg fill="#000" stroke="#000"></svg>';
+
+  beforeEach(() => {
+    // Mock the fetch call so that it always returns our known SVG.
+    global.fetch = vi.fn(() =>
+      Promise.resolve({
+        text: () => Promise.resolve(originalSvg)
+      })
+    ) as unknown as typeof fetch;
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("returns the original SVG when color prop is empty", async () => {
+    render(
+      <DatePicker
+        id="date-picker-empty-color"
+        label="Select Date"
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onChange={() => {}}
+        color=""
+      />
+    );
+
+    // Wait for the SVG image to load.
+    const img = await screen.findByAltText("calendar icon");
+    const expectedSrc = `data:image/svg+xml,${encodeURIComponent(originalSvg)}`;
+
+    expect(img).toHaveAttribute("src", expectedSrc);
+  });
+
+  it("returns the original SVG when color prop is 'none'", async () => {
+    render(
+      <DatePicker
+        id="date-picker-none-color"
+        label="Select Date"
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onChange={() => {}}
+        color="none"
+      />
+    );
+
+    // Wait for the SVG image to load.
+    const img = await screen.findByAltText("calendar icon");
+    const expectedSrc = `data:image/svg+xml,${encodeURIComponent(originalSvg)}`;
+
+    expect(img).toHaveAttribute("src", expectedSrc);
+  });
+});
+*/