Add support for data-testid prop

Author: wojtekmaj

packages/react-clock/README.md

@@ -67,6 +67,7 @@ Displays a complete clock.
 | Prop name                | Description                                                                                                                                                                                                                                                    | Default value                         | Example values                                                                                      |
 | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | --------------------------------------------------------------------------------------------------- |
 | className                | Class name(s) that will be added along with `"react-clock"` to the main react-clock `<time>` element.                                                                                                                                                          | n/a                                   | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
+| data-testid              | The test ID used for testing purposes.                                                                                                                                                                                                                         | n/a                                   | `'clock'`                                                                                           |
 | formatHour               | Function called to override default formatting of hour marks. Can be used to use your own formatting function.                                                                                                                                                 | (default formatter)                   | `(locale, hour) => formatHour(hour, 'HH')`                                                          |
 | hourHandLength           | Hour hand length, in %.                                                                                                                                                                                                                                        | `50`                                  | `80`                                                                                                |
 | hourHandOppositeLength   | The length of the part of an hour hand on the opposite side the hand is pointing to, in %.                                                                                                                                                                     | `10`                                  | `20`                                                                                                |

packages/react-clock/src/Clock.spec.tsx

@@ -23,6 +23,16 @@ describe('Clock', () => {
       expect(wrapper).toHaveClass(className);
     });
 
+    it('applies data-testid to its wrapper when given a string', async () => {
+      const dataTestId = 'testClock';
+
+      const { container } = await render(<Clock data-testid={dataTestId} />);
+
+      const wrapper = container.querySelector('.react-clock');
+
+      expect(wrapper).toHaveAttribute('data-testid', dataTestId);
+    });
+
     it('has 150px size by default', async () => {
       const { container } = await render(<Clock />);
 

packages/react-clock/src/Clock.tsx

@@ -25,6 +25,12 @@ export type ClockProps = {
    * @example ['class1', 'class2 class3']
    */
   className?: ClassName;
+  /**
+   * The test ID used for testing purposes.
+   *
+   * @example 'clock'
+   */
+  'data-testid'?: string;
   /**
    * Function called to override default formatting of hour marks. Can be used to use your own formatting function.
    *
@@ -193,6 +199,7 @@ export type ClockProps = {
  */
 export default function Clock({
   className,
+  'data-testid': dataTestId,
   formatHour = defaultFormatHour,
   hourHandLength = 50,
   hourHandOppositeLength,
@@ -362,6 +369,7 @@ export default function Clock({
   return (
     <time
       className={clsx('react-clock', className)}
+      data-testid={dataTestId}
       dateTime={
         value instanceof Date
           ? // Returns a string in the format "HH:MM" or "HH:MM:SS"