Implement data-testid prop

wojtekmaj · Jan 12, 2023 · 2ebe92d · 2ebe92d
1 parent b3ec397
commit 2ebe92d
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -94,6 +94,7 @@ Displays an input field complete with custom inputs, native input, and a calenda
 | clearIcon            | Content of the clear button. Setting the value explicitly to `null` will hide the icon.                                                                                                                                                                                                                                                      | (default icon)          | <ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>                                     |
 | clockClassName       | Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element.                                                                                                                                                                                                                                      | n/a                     | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>            |
 | closeWidgets         | Whether to close the widgets on value selection.                                                                                                                                                                                                                                                                                             | `true`                  | `false`                                                                                                        |
+| data-testid          | `data-testid` attribute for the main React-DateTimeRange-Picker `<div>` element.                                                                                                                                                                                                                                                             | n/a                     | `"date-picker"`                                                                                                |
 | dayAriaLabel         | `aria-label` for the day input.                                                                                                                                                                                                                                                                                                              | n/a                     | `"Day"`                                                                                                        |
 | disabled             | Whether the datetime range picker should be disabled.                                                                                                                                                                                                                                                                                        | `false`                 | `true`                                                                                                         |
 | disableCalendar      | When set to `true`, will remove the calendar and the button toggling its visibility.                                                                                                                                                                                                                                                         | `false`                 | `true`                                                                                                         |

diff --git a/src/DateTimeRangePicker.jsx b/src/DateTimeRangePicker.jsx
@@ -496,7 +496,7 @@ export default class DateTimeRangePicker extends PureComponent {
 
   render() {
     const { eventProps } = this;
-    const { className, disabled } = this.props;
+    const { className, 'data-testid': dataTestid, disabled } = this.props;
     const { isCalendarOpen, isClockOpen } = this.state;
 
     const { onChange, ...eventPropsWithoutOnChange } = eventProps;
@@ -509,6 +509,7 @@ export default class DateTimeRangePicker extends PureComponent {
           `${baseClassName}--${disabled ? 'disabled' : 'enabled'}`,
           className,
         )}
+        data-testid={dataTestid}
         {...eventPropsWithoutOnChange}
         onFocus={this.onFocus}
         ref={this.wrapper}
@@ -576,6 +577,7 @@ DateTimeRangePicker.propTypes = {
   clearIcon: PropTypes.node,
   clockClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   closeWidgets: PropTypes.bool,
+  'data-testid': PropTypes.string,
   dayAriaLabel: PropTypes.string,
   dayPlaceholder: PropTypes.string,
   disableCalendar: PropTypes.bool,

diff --git a/test/Test.jsx b/test/Test.jsx
@@ -76,6 +76,7 @@ export default function Test() {
             <DateTimeRangePicker
               calendarClassName="myCustomCalendarClassName"
               className="myCustomDateTimeRangePickerClassName"
+              data-testid="myCustomDateTimeRangePicker"
               disabled={disabled}
               locale={locale}
               maxDate={maxDate}