@nypl/design-system-react-components 0.25.0 → 0.25.4

package/src/components/DatePicker/DatePicker.test.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import userEvent from "@testing-library/user-event";
+import renderer from "react-test-renderer";
 
 import DatePicker from "./DatePicker";
 import { DatePickerTypes } from "./DatePickerTypes";
@@ -36,7 +37,7 @@ describe("DatePicker Accessibility", () => {
     const { container } = render(
       <DatePicker
         labelText="Select the date range you want to visit NYPL"
-        dateRange={true}
+        isDateRange
       />
     );
     expect(await axe(container)).toHaveNoViolations();
@@ -195,7 +196,7 @@ describe("DatePicker", () => {
           labelText="Select the date you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           invalidText="Please select a valid date."
-          errored={true}
+          isInvalid
         />
       );
       // When errored, we expect only the error text to appear.
@@ -207,12 +208,45 @@ describe("DatePicker", () => {
       ).toBeInTheDocument();
     });
 
+    it("should not render the helper text or invalid text when 'showHelperInvalidText' is false", () => {
+      const { rerender } = render(
+        <DatePicker
+          labelText="Select the date you want to visit NYPL"
+          helperText="Note that the Library may be closed on Sundays."
+          invalidText="Please select a valid date."
+          showHelperInvalidText={false}
+        />
+      );
+      expect(
+        screen.queryByText("Note that the Library may be closed on Sundays.")
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByText("Please select a valid date.")
+      ).not.toBeInTheDocument();
+
+      rerender(
+        <DatePicker
+          labelText="Select the date you want to visit NYPL"
+          helperText="Note that the Library may be closed on Sundays."
+          invalidText="Please select a valid date."
+          showHelperInvalidText={false}
+          isInvalid
+        />
+      );
+      expect(
+        screen.queryByText("Note that the Library may be closed on Sundays.")
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByText("Please select a valid date.")
+      ).not.toBeInTheDocument();
+    });
+
     it("should render a disabled input field", () => {
       render(
         <DatePicker
           labelText="Select the date you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
-          disabled={true}
+          isDisabled
         />
       );
 
@@ -226,13 +260,45 @@ describe("DatePicker", () => {
         <DatePicker
           labelText="Select the date you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
-          required={true}
+          isRequired
         />
       );
 
       expect(screen.getByText(/required/i)).toBeInTheDocument();
     });
 
+    it("should hide the Optional/Required text in the label with `showOptReqLabel`", () => {
+      const { rerender } = render(
+        <DatePicker labelText="Select the date you want to visit NYPL" />
+      );
+      expect(screen.getByText(/Optional/i)).toBeInTheDocument();
+
+      rerender(
+        <DatePicker
+          labelText="Select the date you want to visit NYPL"
+          showOptReqLabel={false}
+        />
+      );
+      expect(screen.queryByText(/Optional/i)).not.toBeInTheDocument();
+
+      rerender(
+        <DatePicker
+          labelText="Select the date you want to visit NYPL"
+          isRequired
+        />
+      );
+      expect(screen.getByText(/Required/i)).toBeInTheDocument();
+
+      rerender(
+        <DatePicker
+          labelText="Select the date you want to visit NYPL"
+          showOptReqLabel={false}
+          isRequired
+        />
+      );
+      expect(screen.queryByText(/Required/i)).not.toBeInTheDocument();
+    });
+
     it("should pass the value to the `onChange` function", () => {
       let dateObject: any = {};
       const onChange = (data) => {
@@ -242,8 +308,8 @@ describe("DatePicker", () => {
         <DatePicker
           labelText="Select the date you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
-          required={true}
           onChange={onChange}
+          isRequired
         />
       );
 
@@ -299,17 +365,68 @@ describe("DatePicker", () => {
       );
     });
 
-    it("should not render a required label if the 'showOptReqLabel' flag is false", () => {
-      render(
-        <DatePicker
-          labelText="Select the date you want to visit NYPL"
-          helperText="Note that the Library may be closed on Sundays."
-          required={true}
-          showOptReqLabel={false}
-        />
-      );
-
-      expect(screen.queryByText(/required/i)).not.toBeInTheDocument();
+    // Note: Have to add an initial date so that the snapshot tests always
+    // pass. Otherwise, it'll use the _current_ date which changes
+    // based on the day it is tested and is not what we want.
+    it.skip("renders the UI snapshot correctly", () => {
+      const basic = renderer
+        .create(
+          <DatePicker
+            id="basic"
+            labelText="Select the full date you want to visit NYPL"
+            initialDate="1/2/1988"
+          />
+        )
+        .toJSON();
+      const withoutLabel = renderer
+        .create(
+          <DatePicker
+            id="no-label"
+            labelText="Select the date you want to visit NYPL"
+            initialDate="1/2/1988"
+            showLabel={false}
+          />
+        )
+        .toJSON();
+      const withCustomFormat = renderer
+        .create(
+          <DatePicker
+            id="custom-format"
+            labelText="Select the date you want to visit NYPL"
+            dateFormat="yyyy/dd/MM"
+            initialDate="1/2/1988"
+          />
+        )
+        .toJSON();
+      const invalid = renderer
+        .create(
+          <DatePicker
+            id="invalid"
+            labelText="Select the date you want to visit NYPL"
+            helperText="Note that the Library may be closed on Sundays."
+            invalidText="Please select a valid date."
+            initialDate="1/2/1988"
+            isInvalid
+          />
+        )
+        .toJSON();
+      const disabled = renderer
+        .create(
+          <DatePicker
+            id="disabled"
+            labelText="Select the date you want to visit NYPL"
+            helperText="Note that the Library may be closed on Sundays."
+            invalidText="Please select a valid date."
+            initialDate="1/2/1988"
+            isDisabled
+          />
+        )
+        .toJSON();
+      expect(basic).toMatchSnapshot();
+      expect(withoutLabel).toMatchSnapshot();
+      expect(withCustomFormat).toMatchSnapshot();
+      expect(invalid).toMatchSnapshot();
+      expect(disabled).toMatchSnapshot();
     });
   });
 
@@ -317,8 +434,8 @@ describe("DatePicker", () => {
     it("should render the date range with two input fields", () => {
       render(
         <DatePicker
-          dateRange={true}
           labelText="Select the date range you want to visit NYPL"
+          isDateRange
         />
       );
       const [year, month, day] = getTodaysValues();
@@ -337,7 +454,7 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           labelText="Select the full date you want to visit NYPL"
-          dateRange={true}
+          isDateRange
           initialDate="1/2/1988"
           initialDateTo="3/4/1990"
         />
@@ -352,12 +469,12 @@ describe("DatePicker", () => {
     it("should render two input labels and three separate helper text", () => {
       render(
         <DatePicker
-          dateRange={true}
           labelText="Select the date range you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           helperTextFrom="Note for the 'from' field."
           helperTextTo="Note for the 'to' field."
           invalidText="Please select a valid date range."
+          isDateRange
         />
       );
       // There are two labels for each input.
@@ -375,95 +492,169 @@ describe("DatePicker", () => {
       expect(screen.getByText(/Note for the 'to' field./i)).toBeInTheDocument();
     });
 
-    it("should render based on other props", () => {
+    it("should render different states based on respective props", () => {
       const { rerender } = render(
         <DatePicker
-          dateRange={true}
           labelText="Select the date range you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           helperTextTo="Note for the 'to' field."
           invalidText="Please select a valid date range."
-          errored={true}
+          isDateRange
+          isInvalid
         />
       );
 
+      // The invalid text displays under each input field.
       expect(
         screen.getAllByText("Please select a valid date range.")
       ).toHaveLength(2);
 
       rerender(
         <DatePicker
-          dateRange={true}
           labelText="Select the date range you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           helperTextTo="Note for the 'to' field."
           invalidText="Please select a valid date range."
-          disabled={true}
+          isDisabled
+          isDateRange
         />
       );
-
+      // Both input fields are disabled.
       expect(screen.getByLabelText(/From/i)).toHaveAttribute("disabled");
       expect(screen.getByLabelText(/To/i)).toHaveAttribute("disabled");
 
       rerender(
         <DatePicker
-          dateRange={true}
           labelText="Select the date range you want to visit NYPL"
           helperText="Note that the Library may be closed on Sundays."
           helperTextTo="Note for the 'to' field."
           invalidText="Please select a valid date range."
-          required={true}
+          isRequired
+          isDateRange
         />
       );
+      // Both input fields are required.
+      // The "Required" text is only displayed once in the `legend`.
+      expect(screen.getAllByText(/required/i)).toHaveLength(1);
+      expect(screen.getByLabelText(/From/i)).toHaveAttribute("required");
+      expect(screen.getByLabelText(/To/i)).toHaveAttribute("required");
+    });
 
-      expect(screen.getAllByText(/required/i)).toHaveLength(2);
+    // Note: Have to add initial dates so that the snapshot tests always
+    // pass. Otherwise, it'll use the _current_ date which changes
+    // based on the day it is tested and is not what we want.
+    it("renders the UI snapshot correctly", () => {
+      const basic = renderer
+        .create(
+          <DatePicker
+            id="basic"
+            labelText="Select the full date you want to visit NYPL"
+            initialDate="1/2/1988"
+            initialDateTo="2/2/1988"
+            isDateRange
+          />
+        )
+        .toJSON();
+      const withoutLabel = renderer
+        .create(
+          <DatePicker
+            id="no-label"
+            labelText="Select the date you want to visit NYPL"
+            showLabel={false}
+            initialDate="1/2/1988"
+            initialDateTo="2/2/1988"
+            isDateRange
+          />
+        )
+        .toJSON();
+      const withCustomFormat = renderer
+        .create(
+          <DatePicker
+            id="custom-format"
+            labelText="Select the date you want to visit NYPL"
+            dateFormat="yyyy/dd/MM"
+            initialDate="1/2/1988"
+            initialDateTo="2/2/1988"
+            isDateRange
+          />
+        )
+        .toJSON();
+      const invalid = renderer
+        .create(
+          <DatePicker
+            id="invalid"
+            labelText="Select the date you want to visit NYPL"
+            helperText="Note that the Library may be closed on Sundays."
+            invalidText="Please select a valid date."
+            initialDate="1/2/1988"
+            initialDateTo="2/2/1988"
+            isInvalid
+            isDateRange
+          />
+        )
+        .toJSON();
+      const disabled = renderer
+        .create(
+          <DatePicker
+            id="disabled"
+            labelText="Select the date you want to visit NYPL"
+            helperText="Note that the Library may be closed on Sundays."
+            invalidText="Please select a valid date."
+            initialDate="1/2/1988"
+            initialDateTo="2/2/1988"
+            isDisabled
+            isDateRange
+          />
+        )
+        .toJSON();
+      expect(basic).toMatchSnapshot();
+      expect(withoutLabel).toMatchSnapshot();
+      expect(withCustomFormat).toMatchSnapshot();
+      expect(invalid).toMatchSnapshot();
+      expect(disabled).toMatchSnapshot();
     });
 
-    /* // REVISIT THIS TEST
     it("should select two new dates", () => {
       render(
         <DatePicker
-          dateRange={true}
+          initialDate="3/2/1988"
+          initialDateTo="3/28/1988"
+          isDateRange
           labelText="Select the date range you want to visit NYPL"
         />
       );
       const fromInput = screen.getByLabelText(/From/i);
       const toInput = screen.getByLabelText(/To/i);
-      const date = getTodaysDateDisplay();
 
-      expect(screen.getAllByDisplayValue(date)).toHaveLength(2);
+      expect(fromInput).toHaveValue("1988-03-02");
+      expect(toInput).toHaveValue("1988-03-28");
+      // expect(screen.getAllByDisplayValue(date)).toHaveLength(2);
 
       // Let's select a new day.
       userEvent.click(fromInput);
       // The popup displays. Select a new day.
-      const newDateFrom =
-        todaysDate.getDate() > 28 ? 1 : todaysDate.getDate() + 1;
-      const newDateTo =
-        todaysDate.getDate() > 28 ? 18 : todaysDate.getDate() + 5;
-      const newDateToSelect = str_pad(newDateFrom);
-      userEvent.click(screen.getAllByText(newDateFrom)[0]);
+      const newDateFrom = 5;
+      const newDateTo = 25;
+      userEvent.click(screen.getByText(newDateFrom));
 
-      // We selected a new day but kept everything else the same. So we just
-      // need to remove the older day with the new "2" selected date.
-      // Example: 2021-08-01 -> 2 is selected -> 2021-08-02
-      const newFromValue = `${date.slice(0, -2)}${newDateToSelect}`;
-      expect(screen.getByDisplayValue(newFromValue)).toBeInTheDocument();
+      // We selected a new day but kept everything else the same.
+      // Example: 2021-03-02 -> 5 is selected -> 2021-03-05
+      expect(screen.getByDisplayValue("1988-03-05")).toBeInTheDocument();
       // The "To" input should only have the older value now.
-      expect(screen.getAllByDisplayValue(date)).toHaveLength(1);
+      // expect(screen.getAllByDisplayValue(date)).toHaveLength(1);
 
       // Now select the "To" date.
       userEvent.click(toInput);
       // The popup displays.
       userEvent.click(screen.getByText(newDateTo));
 
-      const newToValue = `${date.slice(0, -2)}${newDateTo}`;
-      expect(screen.getByDisplayValue(newToValue)).toBeInTheDocument();
-      // The original date value is no longer in display.
-      expect(screen.queryAllByDisplayValue(date)).toHaveLength(0);
+      expect(screen.getByDisplayValue("1988-03-25")).toBeInTheDocument();
+      // The original date values are no longer in display.
+      expect(screen.queryByDisplayValue("1988-03-02")).not.toBeInTheDocument();
+      expect(screen.queryByDisplayValue("1988-03-28")).not.toBeInTheDocument();
       // The "From" date value wasn't affected by this!
-      expect(screen.getByDisplayValue(newFromValue)).toBeInTheDocument();
+      expect(screen.getByDisplayValue("1988-03-05")).toBeInTheDocument();
     });
-    */
   });
 
   describe("Popup Calendar", () => {
@@ -496,11 +687,16 @@ describe("DatePicker", () => {
     });
 
     it("should select a new date from the calendar", () => {
-      render(<DatePicker labelText="Select the date you want to visit NYPL" />);
+      render(
+        <DatePicker
+          labelText="Select the date you want to visit NYPL"
+          initialDate="08/01/2021"
+        />
+      );
       const input = screen.getByLabelText(
         /Select the date you want to visit NYPL/i
       );
-      const date = getTodaysDateDisplay();
+      const date = "2021-08-01";
       const midMonthDay = "15";
 
       expect(screen.getByDisplayValue(date)).toBeInTheDocument();
@@ -518,19 +714,18 @@ describe("DatePicker", () => {
 
       // Let's select a new month
       userEvent.click(input);
-      // The popup displays.
+      // The popup displays. We are currently on 08/15/2021.
       expect(
-        screen.getByText(monthArray[todaysDate.getMonth()], { exact: false })
+        screen.getByText(monthArray["7"], { exact: false })
       ).toBeInTheDocument();
       userEvent.click(screen.getByLabelText("Next Month"));
       userEvent.click(screen.getByLabelText("Next Month"));
 
       // We are two months ahead but still selecting the midmonth day.
       userEvent.click(screen.getByText(midMonthDay));
-      // So only the month should change accordingly. The month value from JS'
-      // Date object is 0-index so we have to add 3.
+      // So only the month should change accordingly.
       const newMonthValue = `${newDayValue.substr(0, 5)}${str_pad(
-        todaysDate.getMonth() + 3
+        "10"
       )}${newDayValue.substr(7)}`;
       expect(screen.getByDisplayValue(newMonthValue)).toBeInTheDocument();
     });
@@ -565,33 +760,38 @@ describe("DatePicker", () => {
       render(
         <DatePicker
           dateType={DatePickerTypes.Month}
+          initialDate="4/1/1988"
           labelText="Select the month you want to visit NYPL"
         />
       );
       const input = screen.getByLabelText(
         /Select the month you want to visit NYPL/i
       );
-      const date = getTodaysDateDisplay(DatePickerTypes.Month);
-      let currentMonthSelected = monthArray[todaysDate.getMonth() + 1];
+      // In the "month" format.
+      const date = "04-1988";
+      // Let's select May as the new month.
+      let currentMonthSelected = monthArray[4];
       let currentMonthSelectedDisplay = currentMonthSelected.slice(0, 3);
 
+      // We start off with April being displayed as "4-1988".
       expect(screen.getByDisplayValue(date)).toBeInTheDocument();
       expect(
         screen.queryByText(currentMonthSelectedDisplay)
       ).not.toBeInTheDocument();
 
-      // Let's select a new day.
+      // Let's select a new day by first clicking on the input to open
+      // the calendar popup.
       userEvent.click(input);
-      // The popup displays.
 
+      // Now "May" appears as the next month in the calendar popup.
       expect(screen.getByText(currentMonthSelectedDisplay)).toBeInTheDocument();
 
-      userEvent.click(screen.getByText("Jan"));
+      userEvent.click(screen.getByText(currentMonthSelectedDisplay));
 
       // We selected a new month but kept the year the same.
-      // Example: 08-2021 -> "Jan" -> 01-2021
+      // Example: 04-2021 -> "May" -> 05-2021
       expect(
-        screen.getByDisplayValue(`01-${date.substr(3)}`)
+        screen.getByDisplayValue(`05-${date.substr(3)}`)
       ).toBeInTheDocument();
     });