@instructure/ui-date-input 8.55.0 → 8.55.1-snapshot-3

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.55.1-snapshot-3](https://github.com/instructure/instructure-ui/compare/v8.55.0...v8.55.1-snapshot-3) (2024-04-17)
+
+**Note:** Version bump only for package @instructure/ui-date-input
+
+
+
+
+
 # [8.55.0](https://github.com/instructure/instructure-ui/compare/v8.54.0...v8.55.0) (2024-04-09)
 
 **Note:** Version bump only for package @instructure/ui-date-input

package/es/DateInput/__new-tests__/DateInput.test.js

@@ -1,3 +1,4 @@
+var _Calendar$Day, _button, _button2, _Calendar$Day2, _Calendar$Day3;
 /*
  * The MIT License (MIT)
  *
@@ -21,69 +22,571 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-// import React from 'react'
-// import { render, screen, act } from '@testing-library/react'
-
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
-// import DateInput from '../index'
 
+// eslint-disable-next-line no-restricted-imports
+import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { Calendar } from '@instructure/ui-calendar';
+import Examples from '../__examples__/DateInput.examples';
+import { DateInput } from '../index';
 describe('<DateInput />', () => {
+  const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  const generateDays = (count = Calendar.DAY_COUNT) => {
+    const days = [];
+    const date = new Date('2019-07-28');
+    while (days.length < count) {
+      days.push( /*#__PURE__*/React.createElement(Calendar.Day, {
+        key: date.toISOString(),
+        date: date.toISOString(),
+        label: date.toISOString()
+      }, date.getDate()));
+      date.setDate(date.getDate() + 1);
+    }
+    return days;
+  };
+  it('should render an input and a calendar', async () => {
+    const _render = render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "date-input",
+        renderWeekdayLabels: weekdayLabels,
+        isShowingCalendar: true
+      }, generateDays())),
+      container = _render.container,
+      findByRole = _render.findByRole;
+    const dateInput = container.querySelector('input');
+    expect(dateInput).toBeInTheDocument();
+    expect(dateInput).toHaveAttribute('type', 'text');
+    await userEvent.click(dateInput);
+    const calendarTable = await findByRole('listbox');
+    const calendarWrapper = await document.querySelector('[id^="Selectable_"][id$="-list"]');
+    await waitFor(() => {
+      expect(calendarWrapper).toBeInTheDocument();
+      expect(calendarTable).toBeInTheDocument();
+    });
+  });
+  describe('input', () => {
+    it('should render a label', () => {
+      const labelText = 'label text';
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: labelText,
+        renderWeekdayLabels: weekdayLabels
+      }, generateDays()));
+      const dateInput = screen.getByLabelText('label text');
+      expect(dateInput).toBeInTheDocument();
+    });
+    it('should set value', () => {
+      const value = 'January 5';
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        value: value,
+        onChange: jest.fn(),
+        renderWeekdayLabels: weekdayLabels
+      }, generateDays()));
+      const dateInput = screen.getByLabelText('Choose date');
+      expect(dateInput).toHaveValue(value);
+    });
+    it('should call onChange with the updated value', async () => {
+      const onChange = jest.fn();
+      const value = 'May 18, 2022';
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        onChange: onChange
+      }, generateDays()));
+      const dateInput = screen.getByLabelText('Choose date');
+      fireEvent.change(dateInput, {
+        target: {
+          value: value
+        }
+      });
+      fireEvent.keyDown(dateInput, {
+        key: 'Enter',
+        code: 'Enter'
+      });
+      fireEvent.blur(dateInput);
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange.mock.calls[0][1].value).toEqual(expect.stringContaining(value));
+      });
+    });
+    it('should call onBlur', () => {
+      const onBlur = jest.fn();
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        onBlur: onBlur
+      }, generateDays()));
+      const dateInput = screen.getByLabelText('Choose date');
+      fireEvent.blur(dateInput);
+      expect(onBlur).toHaveBeenCalledTimes(1);
+    });
+    it('should correctly set interaction type', async () => {
+      const _render2 = render( /*#__PURE__*/React.createElement(DateInput, {
+          renderLabel: "Choose date",
+          renderWeekdayLabels: weekdayLabels,
+          interaction: "disabled"
+        }, generateDays())),
+        rerender = _render2.rerender;
+      const dateInput = screen.getByLabelText('Choose date');
+      expect(dateInput).toHaveAttribute('disabled');
+      rerender( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        interaction: "readonly"
+      }, generateDays()));
+      const dateInputAfterUpdate = screen.getByLabelText('Choose date');
+      await waitFor(() => {
+        expect(dateInputAfterUpdate).toHaveAttribute('readonly');
+      });
+    });
+    it('should correctly set disabled', () => {
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        disabled: true
+      }, generateDays()));
+      const dateInput = screen.getByLabelText('Choose date');
+      expect(dateInput).toHaveAttribute('disabled');
+    });
+    it('should correctly set readOnly', () => {
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        readOnly: true
+      }, generateDays()));
+      const dateInput = screen.getByLabelText('Choose date');
+      expect(dateInput).toHaveAttribute('readOnly');
+    });
+    it('should set placeholder', () => {
+      const placeholder = 'Start typing to choose a date';
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        placeholder: placeholder
+      }, generateDays()));
+      const dateInput = screen.getByLabelText('Choose date');
+      expect(dateInput).toHaveAttribute('placeholder', placeholder);
+    });
+    it('should be requireable', () => {
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        isRequired: true
+      }, generateDays()));
+      const dateInput = screen.getByLabelText('Choose date');
+      expect(dateInput).toHaveAttribute('required');
+    });
+    it('should provide inputRef', () => {
+      const inputRef = jest.fn();
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        inputRef: inputRef
+      }, generateDays()));
+      const dateInput = screen.getByLabelText('Choose date');
+      expect(inputRef).toHaveBeenCalledWith(dateInput);
+    });
+    it('should render messages', () => {
+      const text = 'The selected date is invalid';
+      const _render3 = render( /*#__PURE__*/React.createElement(DateInput, {
+          renderLabel: "Choose date",
+          renderWeekdayLabels: weekdayLabels,
+          messages: [{
+            type: 'error',
+            text
+          }]
+        }, generateDays())),
+        container = _render3.container;
+      expect(container).toHaveTextContent(text);
+    });
+    it('should allow custom props to pass through', () => {
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        "data-custom-attr": "custom value",
+        name: "my name"
+      }, generateDays()));
+      const dateInput = screen.getByLabelText('Choose date');
+      expect(dateInput).toHaveAttribute('data-custom-attr', 'custom value');
+      expect(dateInput).toHaveAttribute('name', 'my name');
+    });
+  });
+  describe('Calendar', () => {
+    it('should show calendar when `isShowingCalendar` is set', async () => {
+      const _render4 = render( /*#__PURE__*/React.createElement(DateInput, {
+          renderLabel: "Choose date",
+          renderWeekdayLabels: weekdayLabels
+        }, generateDays())),
+        rerender = _render4.rerender,
+        queryByRole = _render4.queryByRole;
+      const dateInput = screen.getByLabelText('Choose date');
+      const calendarTable = await queryByRole('listbox');
+      const calendarWrapper = await document.querySelector('[id^="Selectable_"][id$="-list"]');
+      expect(dateInput).toBeInTheDocument();
+      expect(calendarTable).not.toBeInTheDocument();
+      expect(calendarWrapper).not.toBeInTheDocument();
+      rerender( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        isShowingCalendar: true
+      }, generateDays()));
+      const dateInputAfterUpdate = screen.getByLabelText('Choose date');
+      const calendarTableAfterUpdate = await queryByRole('listbox');
+      const calendarWrapperAfterUpdate = await document.querySelector('[id^="Selectable_"][id$="-list"]');
+      await waitFor(() => {
+        expect(dateInputAfterUpdate).toBeInTheDocument();
+        expect(calendarTableAfterUpdate).toBeInTheDocument();
+        expect(calendarWrapperAfterUpdate).toBeInTheDocument();
+      });
+    });
+    describe('onRequestShowCalendar', () => {
+      it('should call onRequestShowCalendar when label is clicked', async () => {
+        const onRequestShowCalendar = jest.fn();
+        const _render5 = render( /*#__PURE__*/React.createElement(DateInput, {
+            renderLabel: "Choose date",
+            renderWeekdayLabels: weekdayLabels,
+            onRequestShowCalendar: onRequestShowCalendar
+          }, generateDays())),
+          container = _render5.container;
+        const dateInput = container.querySelector("[class$='-formFieldLabel']");
+        expect(dateInput).toHaveTextContent('Choose date');
+        await userEvent.click(dateInput);
+        await waitFor(() => {
+          expect(onRequestShowCalendar).toHaveBeenCalled();
+        });
+      });
+      it('should call onRequestShowCalendar when input is clicked', async () => {
+        const onRequestShowCalendar = jest.fn();
+        const _render6 = render( /*#__PURE__*/React.createElement(DateInput, {
+            renderLabel: "Choose date",
+            renderWeekdayLabels: weekdayLabels,
+            onRequestShowCalendar: onRequestShowCalendar
+          }, generateDays())),
+          container = _render6.container;
+        const dateInput = container.querySelector('input');
+        await userEvent.click(dateInput);
+        await waitFor(() => {
+          expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
+        });
+      });
+      it('should call onRequestShowCalendar when input receives space event', async () => {
+        const onRequestShowCalendar = jest.fn();
+        render( /*#__PURE__*/React.createElement(DateInput, {
+          renderLabel: "Choose date",
+          renderWeekdayLabels: weekdayLabels,
+          onRequestShowCalendar: onRequestShowCalendar
+        }, generateDays()));
+        const dateInput = screen.getByLabelText('Choose date');
+        await userEvent.type(dateInput, '{space}');
+        await waitFor(() => {
+          expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
+        });
+      });
+      it('should not call onRequestShowCalendar when input receives space event if calendar is already showing', async () => {
+        const onRequestShowCalendar = jest.fn();
+        render( /*#__PURE__*/React.createElement(DateInput, {
+          renderLabel: "Choose date",
+          renderWeekdayLabels: weekdayLabels,
+          onRequestShowCalendar: onRequestShowCalendar,
+          isShowingCalendar: true
+        }, generateDays()));
+        const dateInput = screen.getByLabelText('Choose date');
+        await userEvent.type(dateInput, '{space}');
+        await waitFor(() => {
+          expect(onRequestShowCalendar).not.toHaveBeenCalled();
+        });
+      });
+      it('should call onRequestShowCalendar when input receives down arrow event', async () => {
+        const onRequestShowCalendar = jest.fn();
+        render( /*#__PURE__*/React.createElement(DateInput, {
+          renderLabel: "Choose date",
+          renderWeekdayLabels: weekdayLabels,
+          onRequestShowCalendar: onRequestShowCalendar
+        }, generateDays()));
+        const dateInput = screen.getByLabelText('Choose date');
+        await userEvent.type(dateInput, '{arrowdown}');
+        await waitFor(() => {
+          expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
+        });
+      });
+      it('should not call onRequestShowCalendar when input receives down arrow event if calendar is already showing', async () => {
+        const onRequestShowCalendar = jest.fn();
+        render( /*#__PURE__*/React.createElement(DateInput, {
+          renderLabel: "Choose date",
+          renderWeekdayLabels: weekdayLabels,
+          onRequestShowCalendar: onRequestShowCalendar,
+          isShowingCalendar: true
+        }, generateDays()));
+        const dateInput = screen.getByLabelText('Choose date');
+        await userEvent.type(dateInput, '{arrowdown}');
+        await waitFor(() => {
+          expect(onRequestShowCalendar).not.toHaveBeenCalled();
+        });
+      });
+      it('should call onRequestShowCalendar when input receives up arrow event', async () => {
+        const onRequestShowCalendar = jest.fn();
+        render( /*#__PURE__*/React.createElement(DateInput, {
+          renderLabel: "Choose date",
+          renderWeekdayLabels: weekdayLabels,
+          onRequestShowCalendar: onRequestShowCalendar
+        }, generateDays()));
+        const dateInput = screen.getByLabelText('Choose date');
+        await userEvent.type(dateInput, '{arrowup}');
+        await waitFor(() => {
+          expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
+        });
+      });
+      it('should not call onRequestShowCalendar when input receives up arrow event if calendar is already showing', async () => {
+        const onRequestShowCalendar = jest.fn();
+        render( /*#__PURE__*/React.createElement(DateInput, {
+          renderLabel: "Choose date",
+          renderWeekdayLabels: weekdayLabels,
+          onRequestShowCalendar: onRequestShowCalendar,
+          isShowingCalendar: true
+        }, generateDays()));
+        const dateInput = screen.getByLabelText('Choose date');
+        await userEvent.type(dateInput, '{arrowup}');
+        await waitFor(() => {
+          expect(onRequestShowCalendar).not.toHaveBeenCalled();
+        });
+      });
+      it('should call onRequestShowCalendar when input receives onChange event', async () => {
+        const onRequestShowCalendar = jest.fn();
+        render( /*#__PURE__*/React.createElement(DateInput, {
+          renderLabel: "Choose date",
+          renderWeekdayLabels: weekdayLabels,
+          onRequestShowCalendar: onRequestShowCalendar
+        }, generateDays()));
+        const dateInput = screen.getByLabelText('Choose date');
+        fireEvent.change(dateInput, {
+          target: {
+            value: 'January 5'
+          }
+        });
+        await waitFor(() => {
+          expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
+        });
+      });
+      it('should not call onRequestShowCalendar when disabled', async () => {
+        const onRequestShowCalendar = jest.fn();
+        render( /*#__PURE__*/React.createElement(DateInput, {
+          renderLabel: "Choose date",
+          renderWeekdayLabels: weekdayLabels,
+          onRequestShowCalendar: onRequestShowCalendar,
+          interaction: "disabled"
+        }, generateDays()));
+        const dateInput = screen.getByLabelText('Choose date');
+        fireEvent.click(dateInput);
+        await userEvent.type(dateInput, '{arrowup}{arrowdown}{space}January 5', {
+          skipClick: true
+        });
+        await waitFor(() => {
+          expect(onRequestShowCalendar).not.toHaveBeenCalled();
+        });
+      });
+    });
+    describe('onRequestHideCalendar and onRequestValidateDate', () => {
+      it('should call onRequestHideCalendar and onRequestValidateDate input receives onBlur event', async () => {
+        const onRequestHideCalendar = jest.fn();
+        const onRequestValidateDate = jest.fn();
+        render( /*#__PURE__*/React.createElement(DateInput, {
+          renderLabel: "Choose date",
+          renderWeekdayLabels: weekdayLabels,
+          onRequestHideCalendar: onRequestHideCalendar,
+          onRequestValidateDate: onRequestValidateDate,
+          isShowingCalendar: true
+        }, generateDays()));
+        const dateInput = screen.getByLabelText('Choose date');
+        fireEvent.blur(dateInput);
+        await waitFor(() => {
+          expect(onRequestHideCalendar).toHaveBeenCalledTimes(1);
+          expect(onRequestValidateDate).toHaveBeenCalledTimes(1);
+        });
+      });
+      it('should call onRequestHideCalendar and onRequestValidateDate when input receives esc event', async () => {
+        const onRequestHideCalendar = jest.fn();
+        const onRequestValidateDate = jest.fn();
+        render( /*#__PURE__*/React.createElement(DateInput, {
+          renderLabel: "Choose date",
+          renderWeekdayLabels: weekdayLabels,
+          onRequestHideCalendar: onRequestHideCalendar,
+          onRequestValidateDate: onRequestValidateDate,
+          isShowingCalendar: true
+        }, generateDays()));
+        const dateInput = screen.getByLabelText('Choose date');
+        await userEvent.type(dateInput, '{esc}');
+        await waitFor(() => {
+          expect(onRequestHideCalendar).toHaveBeenCalledTimes(1);
+          expect(onRequestValidateDate).toHaveBeenCalledTimes(1);
+        });
+      });
+      it('should call onRequestHideCalendar and onRequestValidateDate when input receives enter event', async () => {
+        const onRequestHideCalendar = jest.fn();
+        const onRequestValidateDate = jest.fn();
+        const days = generateDays();
+        days[4] = _Calendar$Day || (_Calendar$Day = /*#__PURE__*/React.createElement(Calendar.Day, {
+          key: "4",
+          label: "4",
+          date: "2019-09-28",
+          isSelected: true
+        }, 4));
+        render( /*#__PURE__*/React.createElement(DateInput, {
+          renderLabel: "Choose date",
+          renderWeekdayLabels: weekdayLabels,
+          onRequestHideCalendar: onRequestHideCalendar,
+          onRequestValidateDate: onRequestValidateDate,
+          isShowingCalendar: true
+        }, days));
+        const dateInput = screen.getByLabelText('Choose date');
+        await userEvent.type(dateInput, '{enter}');
+        await waitFor(() => {
+          expect(onRequestHideCalendar).toHaveBeenCalledTimes(1);
+          expect(onRequestValidateDate).toHaveBeenCalledTimes(1);
+        });
+      });
+    });
+    it('should render calendar navigation label', () => {
+      const label = 'January 2019';
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        renderNavigationLabel: /*#__PURE__*/React.createElement("div", {
+          "data-testId": "label-id"
+        }, label),
+        isShowingCalendar: true
+      }, generateDays()));
+      const navigationLabel = screen.getByTestId('label-id');
+      expect(navigationLabel).toBeInTheDocument();
+      expect(navigationLabel).toHaveTextContent(label);
+    });
+    it('should render calendar weekday labels', async () => {
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        isShowingCalendar: true
+      }, generateDays()));
+      const calendar = await screen.findByRole('listbox');
+      const headers = calendar.querySelectorAll('th');
+      expect(headers.length).toEqual(7);
+      weekdayLabels.forEach(label => {
+        expect(calendar).toHaveTextContent(label);
+      });
+    });
+    it('should render all focusable elements in calendar with tabIndex="-1"', async () => {
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        renderNextMonthButton: _button || (_button = /*#__PURE__*/React.createElement("button", {
+          "data-testId": "button-next"
+        }, "next")),
+        renderPrevMonthButton: _button2 || (_button2 = /*#__PURE__*/React.createElement("button", {
+          "data-testId": "button-prev"
+        }, "prev")),
+        isShowingCalendar: true
+      }, generateDays()));
+      const calendar = await screen.findByRole('listbox');
+      const calendarDays = calendar.querySelectorAll('button');
+      const nextMonthButton = screen.getByTestId('button-next');
+      const prevMonthButton = screen.getByTestId('button-prev');
+      expect(nextMonthButton).toHaveAttribute('tabIndex', '-1');
+      expect(prevMonthButton).toHaveAttribute('tabIndex', '-1');
+      expect(calendarDays).toHaveLength(42);
+      calendarDays.forEach(day => {
+        expect(day).toHaveAttribute('tabIndex', '-1');
+      });
+    });
+    it('should render days with the correct role', async () => {
+      const days = generateDays();
+      days[5] = _Calendar$Day2 || (_Calendar$Day2 = /*#__PURE__*/React.createElement(Calendar.Day, {
+        key: "5",
+        label: "5",
+        date: "2019-09-28",
+        id: "5",
+        isOutsideMonth: true
+      }, "outside"));
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        isShowingCalendar: true
+      }, days));
+      const calendar = await screen.findByRole('listbox');
+      const calendarDays = calendar.querySelectorAll('button');
+      calendarDays.forEach(day => {
+        if (day.textContent.includes('outside')) {
+          expect(day).toHaveAttribute('role', 'presentation');
+        } else {
+          expect(day).toHaveAttribute('role', 'option');
+        }
+      });
+    });
+    it('should assign aria-selected to the selected date and link it to the input', async () => {
+      const days = generateDays();
+      days[7] = _Calendar$Day3 || (_Calendar$Day3 = /*#__PURE__*/React.createElement(Calendar.Day, {
+        key: "7",
+        label: "7",
+        date: "2019-09-28",
+        id: "selected-day-id",
+        isSelected: true
+      }, "selected"));
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        renderWeekdayLabels: weekdayLabels,
+        isShowingCalendar: true
+      }, days));
+      const calendar = await screen.findByRole('listbox');
+      const calendarDays = calendar.querySelectorAll('button');
+      let selectedDayID = '';
+      calendarDays.forEach(day => {
+        if (day.textContent.includes('selected')) {
+          selectedDayID = day.id;
+          expect(day).toHaveAttribute('aria-selected', 'true');
+        } else {
+          expect(day).toHaveAttribute('aria-selected', 'false');
+        }
+      });
+      const dateInput = screen.getByLabelText('Choose date');
+      expect(dateInput).toHaveAttribute('aria-activedescendant', selectedDayID);
+    });
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = generateA11yTests(DateInput, Examples);
+    it.each(generatedComponents)('should be accessible with example: $description', async ({
+      content
+    }) => {
+      const _render7 = render(content),
+        container = _render7.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+  });
   describe('with minimal config', () => {
-    it('should be a placeholer', () => {
-      expect(1 + 1).toEqual(2);
-    });
-    // TODO find out why timeouts
-    // it('should render 44 buttons (a calendar) when clicked', async () => {
-    //   const onChange = jest.fn()
-    //   render(
-    //     <DateInput
-    //       renderLabel="Choose a date"
-    //       assistiveText="Type a date or use arrow keys to navigate date picker."
-    //       width="20rem"
-    //       isInline
-    //       value={'2023-11-23'}
-    //       onChange={onChange}
-    //       currentDate="2023-12-23"
-    //       disabledDates={['2023-12-22', '2023-12-12', '2023-12-11']}
-    //       disabledDateErrorMessage="disabled date"
-    //       invalidDateErrorMessage="invalid date"
-    //     ></DateInput>
-    //   )
-    //   const inputField = screen.queryByRole('combobox')
-    //   await act(async () => {
-    //     await inputField?.click()
-    //   })
-    //   const buttons = document.getElementsByTagName('button')
-    //   expect(buttons.length).toEqual(44)
-    // })
-    // it('should select the correct day on Calendar when value is set', async () => {
-    //   const onChange = jest.fn()
-    //   render(
-    //     <DateInput
-    //       renderLabel="Choose a date"
-    //       assistiveText="Type a date or use arrow keys to navigate date picker."
-    //       width="20rem"
-    //       isInline
-    //       value={'2023-11-23'}
-    //       onChange={onChange}
-    //       currentDate="2023-11-25"
-    //       disabledDates={['2023-12-22', '2023-12-12', '2023-12-11']}
-    //       disabledDateErrorMessage="disabled date"
-    //       invalidDateErrorMessage="invalid date"
-    //     ></DateInput>
-    //   )
-    //   const inputField = screen.queryByRole('combobox')
-    //   await act(async () => {
-    //     await inputField?.click()
-    //   })
-    //   const selectedDay =
-    //     screen.queryByText('23 November 2023')?.parentElement?.parentElement
-    //   expect(selectedDay).toBeDefined()
-    //   if (selectedDay) {
-    //     expect(window.getComputedStyle(selectedDay)?.background).toBe(
-    //       'rgb(11, 135, 75)'
-    //     )
-    //   }
-    // })
+    it('should render 44 buttons (a calendar) when clicked', async () => {
+      const onChange = jest.fn();
+      render( /*#__PURE__*/React.createElement(DateInput, {
+        renderLabel: "Choose date",
+        assistiveText: "Type a date or use arrow keys to navigate date picker.",
+        width: "20rem",
+        isInline: true,
+        value: '2023-11-23',
+        onChange: onChange,
+        currentDate: "2023-12-23",
+        disabledDates: ['2023-12-22', '2023-12-12', '2023-12-11'],
+        disabledDateErrorMessage: "disabled date",
+        invalidDateErrorMessage: "invalid date"
+      }));
+      const dateInput = screen.getByLabelText('Choose date');
+      fireEvent.click(dateInput);
+      const calendarTable = document.querySelector('table');
+      const calendarDays = calendarTable.querySelectorAll('button');
+      const calendarWrapper = document.querySelector('[id^="Selectable_"][id$="-list"]');
+      const calendarButtons = calendarWrapper.querySelectorAll('button');
+      await waitFor(() => {
+        expect(calendarButtons).toHaveLength(44);
+        expect(calendarDays).toHaveLength(42);
+      });
+    });
   });
 });