@instructure/ui-date-input 10.4.2-snapshot-10 → 10.4.2-snapshot-13

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.4.2-snapshot-10](https://github.com/instructure/instructure-ui/compare/v10.4.1...v10.4.2-snapshot-10) (2024-11-06)
+## [10.4.2-snapshot-13](https://github.com/instructure/instructure-ui/compare/v10.4.1...v10.4.2-snapshot-13) (2024-11-07)
 
 
 ### Bug Fixes
@@ -11,6 +11,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **ui-date-input:** fix DateInput2 to update messages properly ([553a235](https://github.com/instructure/instructure-ui/commit/553a2351fc7f8c6d012d4001ff49c2450d29ee97))
 
 
+### Features
+
+* **many:** add new form field error msg style + add asterisk for required fields ([9b03683](https://github.com/instructure/instructure-ui/commit/9b03683dadeef4c5deae2c60bea10686f143ff5d))
+
+
 
 
 

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

@@ -188,7 +188,7 @@ describe('<DateInput />', () => {
         renderWeekdayLabels: weekdayLabels,
         isRequired: true
       }, generateDays()));
-      const dateInput = screen.getByLabelText('Choose date');
+      const dateInput = screen.getByLabelText('Choose date *');
       expect(dateInput).toHaveAttribute('required');
     });
     it('should provide inputRef', () => {

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

@@ -0,0 +1,313 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _DateInputExample, _DateInputExample2, _DateInputExample3, _DateInputExample4;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { useState } from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { DateInput2 } from '../index';
+const LABEL_TEXT = 'Choose a date';
+const DateInputExample = () => {
+  const _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  return /*#__PURE__*/React.createElement(DateInput2, {
+    renderLabel: LABEL_TEXT,
+    screenReaderLabels: {
+      calendarIcon: 'Calendar',
+      nextMonthButton: 'Next month',
+      prevMonthButton: 'Previous month'
+    },
+    value: inputValue,
+    onChange: (_e, inputValue, _dateString) => {
+      setInputValue(inputValue);
+    }
+  });
+};
+describe('<DateInput2 />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render an input', async () => {
+    const _render = render(_DateInputExample || (_DateInputExample = /*#__PURE__*/React.createElement(DateInputExample, null))),
+      container = _render.container;
+    const dateInput = container.querySelector('input');
+    expect(dateInput).toBeInTheDocument();
+    expect(dateInput).toHaveAttribute('type', 'text');
+  });
+  it('should render an input label', async () => {
+    const _render2 = render(_DateInputExample2 || (_DateInputExample2 = /*#__PURE__*/React.createElement(DateInputExample, null))),
+      container = _render2.container;
+    const dateInput = container.querySelector('input');
+    const label = container.querySelector('label');
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveTextContent(LABEL_TEXT);
+    expect(dateInput === null || dateInput === void 0 ? void 0 : dateInput.id).toBe(label === null || label === void 0 ? void 0 : label.htmlFor);
+  });
+  it('should render an input placeholder', async () => {
+    const placeholder = 'Placeholder';
+    render(/*#__PURE__*/React.createElement(DateInput2, {
+      renderLabel: "Choose a date",
+      screenReaderLabels: {
+        calendarIcon: 'Calendar',
+        nextMonthButton: 'Next month',
+        prevMonthButton: 'Previous month'
+      },
+      placeholder: placeholder,
+      value: ""
+    }));
+    const dateInput = screen.getByLabelText('Choose a date');
+    expect(dateInput).toHaveAttribute('placeholder', placeholder);
+  });
+  it('should render a calendar icon with screen reader label', async () => {
+    const iconLabel = 'Calendar icon Label';
+    const _render3 = render(/*#__PURE__*/React.createElement(DateInput2, {
+        renderLabel: "Choose a date",
+        screenReaderLabels: {
+          calendarIcon: iconLabel,
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        },
+        value: ""
+      })),
+      container = _render3.container;
+    const calendarIcon = container.querySelector('svg[name="IconCalendarMonth"]');
+    const calendarLabel = screen.getByText(iconLabel);
+    expect(calendarIcon).toBeInTheDocument();
+    expect(calendarLabel).toBeInTheDocument();
+  });
+  it('should not show calendar table by default', async () => {
+    render(_DateInputExample3 || (_DateInputExample3 = /*#__PURE__*/React.createElement(DateInputExample, null)));
+    const calendarTable = screen.queryByRole('listbox');
+    expect(calendarTable).not.toBeInTheDocument();
+  });
+  it('should show calendar table when calendar button is clicked', async () => {
+    render(_DateInputExample4 || (_DateInputExample4 = /*#__PURE__*/React.createElement(DateInputExample, null)));
+    const calendarButton = screen.getByRole('button');
+    expect(calendarButton).toBeInTheDocument();
+    await userEvent.click(calendarButton);
+    await waitFor(() => {
+      const calendarTable = screen.queryByRole('listbox');
+      expect(calendarTable).toBeInTheDocument();
+    });
+  });
+  it('should render navigation arrow buttons with screen reader labels', async () => {
+    const nextMonthLabel = 'Next month';
+    const prevMonthLabel = 'Previous month';
+    render(/*#__PURE__*/React.createElement(DateInput2, {
+      renderLabel: "Choose a date",
+      screenReaderLabels: {
+        calendarIcon: 'Calendar',
+        nextMonthButton: nextMonthLabel,
+        prevMonthButton: prevMonthLabel
+      },
+      value: ""
+    }));
+    const calendarButton = screen.getByRole('button');
+    await userEvent.click(calendarButton);
+    await waitFor(() => {
+      const prevMonthButton = screen.getByRole('button', {
+        name: prevMonthLabel
+      });
+      const nextMonthButton = screen.getByRole('button', {
+        name: nextMonthLabel
+      });
+      expect(prevMonthButton).toBeInTheDocument();
+      expect(nextMonthButton).toBeInTheDocument();
+      const prevButtonLabel = screen.getByText(prevMonthLabel);
+      const nextButtonLabel = screen.getByText(nextMonthLabel);
+      expect(prevButtonLabel).toBeInTheDocument();
+      expect(nextButtonLabel).toBeInTheDocument();
+      const prevMonthIcon = prevMonthButton.querySelector('svg[name="IconArrowOpenStart"]');
+      const nextMonthIcon = nextMonthButton.querySelector('svg[name="IconArrowOpenEnd"]');
+      expect(prevMonthIcon).toBeInTheDocument();
+      expect(nextMonthIcon).toBeInTheDocument();
+    });
+  });
+  it('should programmatically set and render the initial value', async () => {
+    const value = '26/03/2024';
+    render(/*#__PURE__*/React.createElement(DateInput2, {
+      renderLabel: "Choose a date",
+      screenReaderLabels: {
+        calendarIcon: 'Calendar',
+        nextMonthButton: 'Next month',
+        prevMonthButton: 'Previous month'
+      },
+      locale: "en-GB",
+      timezone: "UTC",
+      value: value
+    }));
+    const dateInput = screen.getByLabelText('Choose a date');
+    expect(dateInput).toHaveValue(value);
+    expect(dateInput).toBeInTheDocument();
+  });
+  it('should set interaction type to disabled', async () => {
+    const interactionDisabled = 'disabled';
+    const _render4 = render(/*#__PURE__*/React.createElement(DateInput2, {
+        renderLabel: "Choose a date",
+        screenReaderLabels: {
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        },
+        value: "",
+        interaction: interactionDisabled
+      })),
+      container = _render4.container;
+    const dateInput = container.querySelector('input');
+    expect(dateInput).toHaveAttribute(interactionDisabled);
+  });
+  it('should set interaction type to readonly', async () => {
+    const interactionReadOnly = 'readonly';
+    const _render5 = render(/*#__PURE__*/React.createElement(DateInput2, {
+        renderLabel: "Choose a date",
+        screenReaderLabels: {
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        },
+        value: "",
+        interaction: interactionReadOnly
+      })),
+      container = _render5.container;
+    const dateInput = container.querySelector('input');
+    const calendarButton = screen.getByRole('button');
+    expect(dateInput).toHaveAttribute(interactionReadOnly);
+    expect(calendarButton).toBeInTheDocument();
+    await userEvent.click(calendarButton);
+    await waitFor(() => {
+      const calendarTable = screen.queryByRole('listbox');
+      expect(calendarTable).not.toBeInTheDocument();
+    });
+  });
+  it('should set required', async () => {
+    const _render6 = render(/*#__PURE__*/React.createElement(DateInput2, {
+        renderLabel: "Choose a date",
+        screenReaderLabels: {
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        },
+        value: "",
+        isRequired: true
+      })),
+      container = _render6.container;
+    const dateInput = container.querySelector('input');
+    expect(dateInput).toHaveAttribute('required');
+  });
+  it('should call onBlur', async () => {
+    const onBlur = vi.fn();
+    render(/*#__PURE__*/React.createElement(DateInput2, {
+      renderLabel: "Choose a date",
+      screenReaderLabels: {
+        calendarIcon: 'Calendar',
+        nextMonthButton: 'Next month',
+        prevMonthButton: 'Previous month'
+      },
+      value: "",
+      onBlur: onBlur
+    }));
+    const dateInput = screen.getByLabelText('Choose a date');
+    fireEvent.blur(dateInput);
+    await waitFor(() => {
+      expect(onBlur).toHaveBeenCalled();
+    });
+  });
+  it('should validate if the invalidDateErrorMessage prop is provided', async () => {
+    const errorMsg = 'errorMsg';
+    const Example = () => {
+      const _useState3 = useState(''),
+        _useState4 = _slicedToArray(_useState3, 2),
+        inputValue = _useState4[0],
+        setInputValue = _useState4[1];
+      return /*#__PURE__*/React.createElement(DateInput2, {
+        renderLabel: LABEL_TEXT,
+        screenReaderLabels: {
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        },
+        value: inputValue,
+        onChange: (_e, inputValue, _dateString) => {
+          setInputValue(inputValue);
+        },
+        invalidDateErrorMessage: errorMsg
+      });
+    };
+    render(/*#__PURE__*/React.createElement(Example, null));
+    expect(screen.queryByText(errorMsg)).not.toBeInTheDocument();
+    const dateInput = screen.getByLabelText(LABEL_TEXT);
+    await userEvent.click(dateInput);
+    await userEvent.type(dateInput, 'Not a date');
+    dateInput.blur();
+    await waitFor(() => {
+      expect(screen.getByText(errorMsg)).toBeInTheDocument();
+    });
+  });
+  it('should show form field messages', async () => {
+    const messages = [{
+      text: 'TypeLess'
+    }, {
+      type: 'error',
+      text: 'Error'
+    }, {
+      type: 'success',
+      text: 'Success'
+    }, {
+      type: 'hint',
+      text: 'Hint'
+    }, {
+      type: 'screenreader-only',
+      text: 'Screenreader'
+    }];
+    render(/*#__PURE__*/React.createElement(DateInput2, {
+      renderLabel: "Choose a date",
+      screenReaderLabels: {
+        calendarIcon: 'Calendar',
+        nextMonthButton: 'Next month',
+        prevMonthButton: 'Previous month'
+      },
+      value: "",
+      messages: messages
+    }));
+    expect(screen.getByText('TypeLess')).toBeVisible();
+    expect(screen.getByText('Error')).toBeVisible();
+    expect(screen.getByText('Success')).toBeVisible();
+    expect(screen.getByText('Hint')).toBeVisible();
+    const screenreaderMessage = screen.getByText('Screenreader');
+    expect(screenreaderMessage).toBeInTheDocument();
+    expect(screenreaderMessage).toHaveClass(/screenReaderContent/);
+  });
+});

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

@@ -190,7 +190,7 @@ describe('<DateInput />', () => {
         renderWeekdayLabels: weekdayLabels,
         isRequired: true
       }, generateDays()));
-      const dateInput = _react2.screen.getByLabelText('Choose date');
+      const dateInput = _react2.screen.getByLabelText('Choose date *');
       expect(dateInput).toHaveAttribute('required');
     });
     it('should provide inputRef', () => {

package/lib/DateInput2/__new-tests__/DateInput2.test.js

@@ -0,0 +1,317 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _DateInputExample, _DateInputExample2, _DateInputExample3, _DateInputExample4;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const LABEL_TEXT = 'Choose a date';
+const DateInputExample = () => {
+  const _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement(_index.DateInput2, {
+    renderLabel: LABEL_TEXT,
+    screenReaderLabels: {
+      calendarIcon: 'Calendar',
+      nextMonthButton: 'Next month',
+      prevMonthButton: 'Previous month'
+    },
+    value: inputValue,
+    onChange: (_e, inputValue, _dateString) => {
+      setInputValue(inputValue);
+    }
+  });
+};
+describe('<DateInput2 />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render an input', async () => {
+    const _render = (0, _react2.render)(_DateInputExample || (_DateInputExample = /*#__PURE__*/_react.default.createElement(DateInputExample, null))),
+      container = _render.container;
+    const dateInput = container.querySelector('input');
+    expect(dateInput).toBeInTheDocument();
+    expect(dateInput).toHaveAttribute('type', 'text');
+  });
+  it('should render an input label', async () => {
+    const _render2 = (0, _react2.render)(_DateInputExample2 || (_DateInputExample2 = /*#__PURE__*/_react.default.createElement(DateInputExample, null))),
+      container = _render2.container;
+    const dateInput = container.querySelector('input');
+    const label = container.querySelector('label');
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveTextContent(LABEL_TEXT);
+    expect(dateInput === null || dateInput === void 0 ? void 0 : dateInput.id).toBe(label === null || label === void 0 ? void 0 : label.htmlFor);
+  });
+  it('should render an input placeholder', async () => {
+    const placeholder = 'Placeholder';
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
+      renderLabel: "Choose a date",
+      screenReaderLabels: {
+        calendarIcon: 'Calendar',
+        nextMonthButton: 'Next month',
+        prevMonthButton: 'Previous month'
+      },
+      placeholder: placeholder,
+      value: ""
+    }));
+    const dateInput = _react2.screen.getByLabelText('Choose a date');
+    expect(dateInput).toHaveAttribute('placeholder', placeholder);
+  });
+  it('should render a calendar icon with screen reader label', async () => {
+    const iconLabel = 'Calendar icon Label';
+    const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
+        renderLabel: "Choose a date",
+        screenReaderLabels: {
+          calendarIcon: iconLabel,
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        },
+        value: ""
+      })),
+      container = _render3.container;
+    const calendarIcon = container.querySelector('svg[name="IconCalendarMonth"]');
+    const calendarLabel = _react2.screen.getByText(iconLabel);
+    expect(calendarIcon).toBeInTheDocument();
+    expect(calendarLabel).toBeInTheDocument();
+  });
+  it('should not show calendar table by default', async () => {
+    (0, _react2.render)(_DateInputExample3 || (_DateInputExample3 = /*#__PURE__*/_react.default.createElement(DateInputExample, null)));
+    const calendarTable = _react2.screen.queryByRole('listbox');
+    expect(calendarTable).not.toBeInTheDocument();
+  });
+  it('should show calendar table when calendar button is clicked', async () => {
+    (0, _react2.render)(_DateInputExample4 || (_DateInputExample4 = /*#__PURE__*/_react.default.createElement(DateInputExample, null)));
+    const calendarButton = _react2.screen.getByRole('button');
+    expect(calendarButton).toBeInTheDocument();
+    await _userEvent.default.click(calendarButton);
+    await (0, _react2.waitFor)(() => {
+      const calendarTable = _react2.screen.queryByRole('listbox');
+      expect(calendarTable).toBeInTheDocument();
+    });
+  });
+  it('should render navigation arrow buttons with screen reader labels', async () => {
+    const nextMonthLabel = 'Next month';
+    const prevMonthLabel = 'Previous month';
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
+      renderLabel: "Choose a date",
+      screenReaderLabels: {
+        calendarIcon: 'Calendar',
+        nextMonthButton: nextMonthLabel,
+        prevMonthButton: prevMonthLabel
+      },
+      value: ""
+    }));
+    const calendarButton = _react2.screen.getByRole('button');
+    await _userEvent.default.click(calendarButton);
+    await (0, _react2.waitFor)(() => {
+      const prevMonthButton = _react2.screen.getByRole('button', {
+        name: prevMonthLabel
+      });
+      const nextMonthButton = _react2.screen.getByRole('button', {
+        name: nextMonthLabel
+      });
+      expect(prevMonthButton).toBeInTheDocument();
+      expect(nextMonthButton).toBeInTheDocument();
+      const prevButtonLabel = _react2.screen.getByText(prevMonthLabel);
+      const nextButtonLabel = _react2.screen.getByText(nextMonthLabel);
+      expect(prevButtonLabel).toBeInTheDocument();
+      expect(nextButtonLabel).toBeInTheDocument();
+      const prevMonthIcon = prevMonthButton.querySelector('svg[name="IconArrowOpenStart"]');
+      const nextMonthIcon = nextMonthButton.querySelector('svg[name="IconArrowOpenEnd"]');
+      expect(prevMonthIcon).toBeInTheDocument();
+      expect(nextMonthIcon).toBeInTheDocument();
+    });
+  });
+  it('should programmatically set and render the initial value', async () => {
+    const value = '26/03/2024';
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
+      renderLabel: "Choose a date",
+      screenReaderLabels: {
+        calendarIcon: 'Calendar',
+        nextMonthButton: 'Next month',
+        prevMonthButton: 'Previous month'
+      },
+      locale: "en-GB",
+      timezone: "UTC",
+      value: value
+    }));
+    const dateInput = _react2.screen.getByLabelText('Choose a date');
+    expect(dateInput).toHaveValue(value);
+    expect(dateInput).toBeInTheDocument();
+  });
+  it('should set interaction type to disabled', async () => {
+    const interactionDisabled = 'disabled';
+    const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
+        renderLabel: "Choose a date",
+        screenReaderLabels: {
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        },
+        value: "",
+        interaction: interactionDisabled
+      })),
+      container = _render4.container;
+    const dateInput = container.querySelector('input');
+    expect(dateInput).toHaveAttribute(interactionDisabled);
+  });
+  it('should set interaction type to readonly', async () => {
+    const interactionReadOnly = 'readonly';
+    const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
+        renderLabel: "Choose a date",
+        screenReaderLabels: {
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        },
+        value: "",
+        interaction: interactionReadOnly
+      })),
+      container = _render5.container;
+    const dateInput = container.querySelector('input');
+    const calendarButton = _react2.screen.getByRole('button');
+    expect(dateInput).toHaveAttribute(interactionReadOnly);
+    expect(calendarButton).toBeInTheDocument();
+    await _userEvent.default.click(calendarButton);
+    await (0, _react2.waitFor)(() => {
+      const calendarTable = _react2.screen.queryByRole('listbox');
+      expect(calendarTable).not.toBeInTheDocument();
+    });
+  });
+  it('should set required', async () => {
+    const _render6 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
+        renderLabel: "Choose a date",
+        screenReaderLabels: {
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        },
+        value: "",
+        isRequired: true
+      })),
+      container = _render6.container;
+    const dateInput = container.querySelector('input');
+    expect(dateInput).toHaveAttribute('required');
+  });
+  it('should call onBlur', async () => {
+    const onBlur = _vitest.vi.fn();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
+      renderLabel: "Choose a date",
+      screenReaderLabels: {
+        calendarIcon: 'Calendar',
+        nextMonthButton: 'Next month',
+        prevMonthButton: 'Previous month'
+      },
+      value: "",
+      onBlur: onBlur
+    }));
+    const dateInput = _react2.screen.getByLabelText('Choose a date');
+    _react2.fireEvent.blur(dateInput);
+    await (0, _react2.waitFor)(() => {
+      expect(onBlur).toHaveBeenCalled();
+    });
+  });
+  it('should validate if the invalidDateErrorMessage prop is provided', async () => {
+    const errorMsg = 'errorMsg';
+    const Example = () => {
+      const _useState3 = (0, _react.useState)(''),
+        _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+        inputValue = _useState4[0],
+        setInputValue = _useState4[1];
+      return /*#__PURE__*/_react.default.createElement(_index.DateInput2, {
+        renderLabel: LABEL_TEXT,
+        screenReaderLabels: {
+          calendarIcon: 'Calendar',
+          nextMonthButton: 'Next month',
+          prevMonthButton: 'Previous month'
+        },
+        value: inputValue,
+        onChange: (_e, inputValue, _dateString) => {
+          setInputValue(inputValue);
+        },
+        invalidDateErrorMessage: errorMsg
+      });
+    };
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(Example, null));
+    expect(_react2.screen.queryByText(errorMsg)).not.toBeInTheDocument();
+    const dateInput = _react2.screen.getByLabelText(LABEL_TEXT);
+    await _userEvent.default.click(dateInput);
+    await _userEvent.default.type(dateInput, 'Not a date');
+    dateInput.blur();
+    await (0, _react2.waitFor)(() => {
+      expect(_react2.screen.getByText(errorMsg)).toBeInTheDocument();
+    });
+  });
+  it('should show form field messages', async () => {
+    const messages = [{
+      text: 'TypeLess'
+    }, {
+      type: 'error',
+      text: 'Error'
+    }, {
+      type: 'success',
+      text: 'Success'
+    }, {
+      type: 'hint',
+      text: 'Hint'
+    }, {
+      type: 'screenreader-only',
+      text: 'Screenreader'
+    }];
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
+      renderLabel: "Choose a date",
+      screenReaderLabels: {
+        calendarIcon: 'Calendar',
+        nextMonthButton: 'Next month',
+        prevMonthButton: 'Previous month'
+      },
+      value: "",
+      messages: messages
+    }));
+    expect(_react2.screen.getByText('TypeLess')).toBeVisible();
+    expect(_react2.screen.getByText('Error')).toBeVisible();
+    expect(_react2.screen.getByText('Success')).toBeVisible();
+    expect(_react2.screen.getByText('Hint')).toBeVisible();
+    const screenreaderMessage = _react2.screen.getByText('Screenreader');
+    expect(screenreaderMessage).toBeInTheDocument();
+    expect(screenreaderMessage).toHaveClass(/screenReaderContent/);
+  });
+});