From fa282d6169f934caaa8c7c12943c0ee35c3a0497 Mon Sep 17 00:00:00 2001
From: Eric Tuvesson <eric.tuvesson@gmail.com>
Date: Wed, 26 Jun 2024 21:08:01 +0200
Subject: [PATCH] feat(runtime): Add "data-testid" attributes to UI nodes (#42)

---
 .../src/components/controls/Button/Button.tsx       |  3 +++
 .../src/components/controls/Checkbox/Checkbox.tsx   |  3 +++
 .../components/controls/RadioButton/RadioButton.tsx |  3 +++
 .../src/components/controls/Select/Select.tsx       |  3 +++
 .../src/components/controls/Slider/Slider.tsx       |  3 +++
 .../src/components/controls/TextInput/TextInput.tsx |  3 +++
 .../src/components/visual/Group/Group.tsx           |  3 +++
 .../src/components/visual/Image/Image.tsx           |  3 ++-
 .../src/components/visual/Text/Text.tsx             |  3 +++
 .../noodl-viewer-react/src/nodes/controls/button.ts | 13 +++++++++++++
 .../src/nodes/controls/checkbox.ts                  | 11 +++++++++++
 .../src/nodes/controls/options.ts                   | 11 +++++++++++
 .../src/nodes/controls/radiobutton.ts               | 11 +++++++++++
 .../noodl-viewer-react/src/nodes/controls/slider.ts | 11 +++++++++++
 .../src/nodes/controls/text-input.ts                | 11 +++++++++++
 .../noodl-viewer-react/src/nodes/visual/group.js    | 11 +++++++++++
 .../noodl-viewer-react/src/nodes/visual/image.js    | 11 +++++++++++
 .../noodl-viewer-react/src/nodes/visual/text.js     | 13 +++++++++++++
 18 files changed, 129 insertions(+), 1 deletion(-)

diff --git a/packages/noodl-viewer-react/src/components/controls/Button/Button.tsx b/packages/noodl-viewer-react/src/components/controls/Button/Button.tsx
index 4772443..a6e092f 100644
--- a/packages/noodl-viewer-react/src/components/controls/Button/Button.tsx
+++ b/packages/noodl-viewer-react/src/components/controls/Button/Button.tsx
@@ -7,6 +7,8 @@ import { Noodl, Slot } from '../../../types';
 export interface ButtonProps extends Noodl.ReactProps {
   enabled: boolean;
   buttonType: 'button' | 'submit';
+  
+  attrs: React.Attributes;
 
   textStyle: Noodl.TextStyle;
 
@@ -96,6 +98,7 @@ export function Button(props: ButtonProps) {
 
   return (
     <button
+      {...props.attrs}
       className={className}
       disabled={!props.enabled}
       {...Utils.controlEvents(props)}
diff --git a/packages/noodl-viewer-react/src/components/controls/Checkbox/Checkbox.tsx b/packages/noodl-viewer-react/src/components/controls/Checkbox/Checkbox.tsx
index e819f0c..461dd89 100644
--- a/packages/noodl-viewer-react/src/components/controls/Checkbox/Checkbox.tsx
+++ b/packages/noodl-viewer-react/src/components/controls/Checkbox/Checkbox.tsx
@@ -9,6 +9,8 @@ export interface CheckboxProps extends Noodl.ReactProps {
   enabled: boolean;
   checked: boolean;
 
+  attrs: React.Attributes;
+
   useLabel: boolean;
   label: string;
   labelSpacing: string;
@@ -47,6 +49,7 @@ export function Checkbox(props: CheckboxProps) {
   Layout.align(style, props);
 
   const inputProps = {
+    ...props.attrs,
     id: props.id,
     className: [props.className, 'ndl-controls-checkbox-2'].join(' '),
     disabled: !props.enabled,
diff --git a/packages/noodl-viewer-react/src/components/controls/RadioButton/RadioButton.tsx b/packages/noodl-viewer-react/src/components/controls/RadioButton/RadioButton.tsx
index bb73233..5f85bce 100644
--- a/packages/noodl-viewer-react/src/components/controls/RadioButton/RadioButton.tsx
+++ b/packages/noodl-viewer-react/src/components/controls/RadioButton/RadioButton.tsx
@@ -10,6 +10,8 @@ export interface RadioButtonProps extends Noodl.ReactProps {
   enabled: boolean;
   value: string;
 
+  attrs: React.Attributes;
+
   useLabel: boolean;
   label: string;
   labelSpacing: string;
@@ -47,6 +49,7 @@ export function RadioButton(props: RadioButtonProps) {
   props.checkedChanged && props.checkedChanged(radioButtonGroup ? radioButtonGroup.selected === props.value : false);
 
   const inputProps = {
+    ...props.attrs,
     id: props.id,
     disabled: !props.enabled,
     className: [props.className, 'ndl-controls-radio-2'].join(' '),
diff --git a/packages/noodl-viewer-react/src/components/controls/Select/Select.tsx b/packages/noodl-viewer-react/src/components/controls/Select/Select.tsx
index 32a9a6d..8d1cdf2 100644
--- a/packages/noodl-viewer-react/src/components/controls/Select/Select.tsx
+++ b/packages/noodl-viewer-react/src/components/controls/Select/Select.tsx
@@ -12,6 +12,8 @@ export interface SelectProps extends Noodl.ReactProps {
   textStyle: Noodl.TextStyle;
   items: TSFixme;
 
+  attrs: React.Attributes;
+
   placeholder: string;
   placeholderOpacity: string;
 
@@ -81,6 +83,7 @@ export function Select(props: SelectProps) {
   }
 
   const inputProps = {
+    ...props.attrs,
     id: props.id,
     className: props.className,
     style: {
diff --git a/packages/noodl-viewer-react/src/components/controls/Slider/Slider.tsx b/packages/noodl-viewer-react/src/components/controls/Slider/Slider.tsx
index c5e11d8..0633796 100644
--- a/packages/noodl-viewer-react/src/components/controls/Slider/Slider.tsx
+++ b/packages/noodl-viewer-react/src/components/controls/Slider/Slider.tsx
@@ -9,6 +9,8 @@ export interface SliderProps extends Noodl.ReactProps {
   id: string;
   enabled: boolean;
 
+  attrs: React.Attributes;
+
   value: number;
   min: number;
   max: number;
@@ -103,6 +105,7 @@ export function Slider(props: SliderProps) {
   const className = `ndl-controls-range2 ${instanceClassId} ${props.className ? props.className : ''} `;
 
   const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
+    ...props.attrs,
     id: props.id,
     style: {
       width: '100%',
diff --git a/packages/noodl-viewer-react/src/components/controls/TextInput/TextInput.tsx b/packages/noodl-viewer-react/src/components/controls/TextInput/TextInput.tsx
index 8fafea4..ab30a5c 100644
--- a/packages/noodl-viewer-react/src/components/controls/TextInput/TextInput.tsx
+++ b/packages/noodl-viewer-react/src/components/controls/TextInput/TextInput.tsx
@@ -17,6 +17,8 @@ export interface TextInputProps extends Noodl.ReactProps {
   type: 'text' | 'textArea' | 'email' | 'number' | 'password' | 'url';
   textStyle: Noodl.TextStyle;
 
+  attrs: React.Attributes;
+
   enabled: boolean;
 
   placeholder: string;
@@ -149,6 +151,7 @@ export class TextInput extends React.Component<TextInputProps, State> {
     inputStyles.color = props.noodlNode.context.styles.resolveColor(inputStyles.color);
 
     const inputProps = {
+      ...props.attrs,
       id: props.id,
       value: this.state.value,
       ...Utils.controlEvents(props),
diff --git a/packages/noodl-viewer-react/src/components/visual/Group/Group.tsx b/packages/noodl-viewer-react/src/components/visual/Group/Group.tsx
index c55fb19..e521042 100644
--- a/packages/noodl-viewer-react/src/components/visual/Group/Group.tsx
+++ b/packages/noodl-viewer-react/src/components/visual/Group/Group.tsx
@@ -19,6 +19,8 @@ BScroll.use(Slide);
 export interface GroupProps extends Noodl.ReactProps {
   as?: keyof JSX.IntrinsicElements | React.ComponentType<unknown>;
 
+  attrs: React.Attributes;
+
   scrollSnapEnabled: boolean;
   showScrollbar: boolean;
   scrollEnabled: boolean;
@@ -271,6 +273,7 @@ export class Group extends React.Component<GroupProps> {
       <Component
         // @ts-expect-error Lets hope that the type passed here is always static!
         className={props.className}
+        {...props.attrs}
         {...props.dom}
         {...PointerListeners(props)}
         style={style}
diff --git a/packages/noodl-viewer-react/src/components/visual/Image/Image.tsx b/packages/noodl-viewer-react/src/components/visual/Image/Image.tsx
index f4dba5f..0ce2c08 100644
--- a/packages/noodl-viewer-react/src/components/visual/Image/Image.tsx
+++ b/packages/noodl-viewer-react/src/components/visual/Image/Image.tsx
@@ -10,6 +10,7 @@ export interface ImageProps extends Noodl.ReactProps {
     src: string;
     onLoad?: () => void;
   };
+  attrs: React.Attributes;
 }
 
 export function Image(props: ImageProps) {
@@ -30,5 +31,5 @@ export function Image(props: ImageProps) {
     }
   }
 
-  return <img className={props.className} {...props.dom} {...PointerListeners(props)} style={style} />;
+  return <img {...props.attrs} className={props.className} {...props.dom} {...PointerListeners(props)} style={style} />;
 }
diff --git a/packages/noodl-viewer-react/src/components/visual/Text/Text.tsx b/packages/noodl-viewer-react/src/components/visual/Text/Text.tsx
index 2001aad..5845ed7 100644
--- a/packages/noodl-viewer-react/src/components/visual/Text/Text.tsx
+++ b/packages/noodl-viewer-react/src/components/visual/Text/Text.tsx
@@ -7,6 +7,8 @@ import { Noodl } from '../../../types';
 export interface TextProps extends Noodl.ReactProps {
   as?: keyof JSX.IntrinsicElements | React.ComponentType<unknown>;
 
+  attrs: React.Attributes;
+
   textStyle: Noodl.TextStyle;
   text: string;
 
@@ -48,6 +50,7 @@ export function Text(props: TextProps) {
   return (
     <Component
       className={['ndl-visual-text', props.className].join(' ')}
+      {...props.attrs}
       {...props.dom}
       {...PointerListeners(props)}
       style={style}
diff --git a/packages/noodl-viewer-react/src/nodes/controls/button.ts b/packages/noodl-viewer-react/src/nodes/controls/button.ts
index 71422e4..d184207 100644
--- a/packages/noodl-viewer-react/src/nodes/controls/button.ts
+++ b/packages/noodl-viewer-react/src/nodes/controls/button.ts
@@ -30,11 +30,24 @@ const ButtonNode = {
     ]
   },
   initialize() {
+    this.props.attrs = {};
     this.props.layout = 'row'; //Used to tell child nodes what layout to expect
   },
   getReactComponent() {
     return Button;
   },
+  inputs: {
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
+    }
+  },
   inputCss: {
     backgroundColor: {
       index: 100,
diff --git a/packages/noodl-viewer-react/src/nodes/controls/checkbox.ts b/packages/noodl-viewer-react/src/nodes/controls/checkbox.ts
index 493bcbb..486b96e 100644
--- a/packages/noodl-viewer-react/src/nodes/controls/checkbox.ts
+++ b/packages/noodl-viewer-react/src/nodes/controls/checkbox.ts
@@ -31,6 +31,7 @@ const CheckBoxNode = {
     ]
   },
   initialize() {
+    this.props.attrs = {};
     this.props.sizeMode = 'explicit';
     this.props.id = 'input-' + guid();
     this.props.checked = this._internal.checked = false;
@@ -94,6 +95,16 @@ const CheckBoxNode = {
         this.flagOutputDirty('checked');
         this._updateVisualState();
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   },
   inputCss: {
diff --git a/packages/noodl-viewer-react/src/nodes/controls/options.ts b/packages/noodl-viewer-react/src/nodes/controls/options.ts
index c5cd777..20d5c85 100644
--- a/packages/noodl-viewer-react/src/nodes/controls/options.ts
+++ b/packages/noodl-viewer-react/src/nodes/controls/options.ts
@@ -31,6 +31,7 @@ const OptionsNode = {
     ]
   },
   initialize: function () {
+    this.props.attrs = {};
     this._itemsChanged = () => {
       this.forceUpdate();
     };
@@ -90,6 +91,16 @@ const OptionsNode = {
           this.flagOutputDirty('value');
         }
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   },
   inputProps: {
diff --git a/packages/noodl-viewer-react/src/nodes/controls/radiobutton.ts b/packages/noodl-viewer-react/src/nodes/controls/radiobutton.ts
index b209339..3750593 100644
--- a/packages/noodl-viewer-react/src/nodes/controls/radiobutton.ts
+++ b/packages/noodl-viewer-react/src/nodes/controls/radiobutton.ts
@@ -31,6 +31,7 @@ const RadioButtonNode = {
     ]
   },
   initialize() {
+    this.props.attrs = {};
     this.props.sizeMode = 'explicit';
     this.props.id = 'input-' + guid();
 
@@ -61,6 +62,16 @@ const RadioButtonNode = {
       set(value) {
         this.setStyle({ backgroundColor: value }, 'fill');
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   },
   inputProps: {
diff --git a/packages/noodl-viewer-react/src/nodes/controls/slider.ts b/packages/noodl-viewer-react/src/nodes/controls/slider.ts
index 2004b3f..7696a4c 100644
--- a/packages/noodl-viewer-react/src/nodes/controls/slider.ts
+++ b/packages/noodl-viewer-react/src/nodes/controls/slider.ts
@@ -27,6 +27,7 @@ const RangeNode = {
     ]
   },
   initialize() {
+    this.props.attrs = {};
     this.props.sizeMode = 'contentHeight';
     this.props.id = 'input-' + guid();
 
@@ -67,6 +68,16 @@ const RangeNode = {
       set(value) {
         this._setInputValue(value);
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   },
   outputs: {
diff --git a/packages/noodl-viewer-react/src/nodes/controls/text-input.ts b/packages/noodl-viewer-react/src/nodes/controls/text-input.ts
index 15de53f..73c4d89 100644
--- a/packages/noodl-viewer-react/src/nodes/controls/text-input.ts
+++ b/packages/noodl-viewer-react/src/nodes/controls/text-input.ts
@@ -43,6 +43,7 @@ const TextInputNode = {
     return TextInput;
   },
   initialize() {
+    this.props.attrs = {};
     this.props.startValue = '';
     this.props.id = this._internal.controlId = 'input-' + guid();
   },
@@ -167,6 +168,16 @@ const TextInputNode = {
             break;
         }
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   },
   inputCss: {
diff --git a/packages/noodl-viewer-react/src/nodes/visual/group.js b/packages/noodl-viewer-react/src/nodes/visual/group.js
index 2e68408..b0d5b8b 100644
--- a/packages/noodl-viewer-react/src/nodes/visual/group.js
+++ b/packages/noodl-viewer-react/src/nodes/visual/group.js
@@ -11,6 +11,7 @@ const GroupNode = {
     groupPriority: ['General', 'Style', 'Events', 'Mounted', 'Hover Events', 'Pointer Events', 'Focus', 'Scroll']
   },
   initialize() {
+    this.props.attrs = {};
     this._internal = {
       scrollElementDuration: 500,
       scrollIndexDuration: 500,
@@ -143,6 +144,16 @@ const GroupNode = {
       valueChangedToTrue() {
         this.context.setNodeFocused(this, true);
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   },
   inputProps: {
diff --git a/packages/noodl-viewer-react/src/nodes/visual/image.js b/packages/noodl-viewer-react/src/nodes/visual/image.js
index 47a7f2e..10a119e 100644
--- a/packages/noodl-viewer-react/src/nodes/visual/image.js
+++ b/packages/noodl-viewer-react/src/nodes/visual/image.js
@@ -27,6 +27,7 @@ const ImageNode = {
     ]
   },
   initialize() {
+    this.props.attrs = {};
     this.props.default = '';
   },
   getReactComponent() {
@@ -86,6 +87,16 @@ const ImageNode = {
         this.props.dom.src = getAbsoluteUrl(url);
         this.forceUpdate();
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   },
   inputProps: {
diff --git a/packages/noodl-viewer-react/src/nodes/visual/text.js b/packages/noodl-viewer-react/src/nodes/visual/text.js
index a80d3cb..aad338f 100644
--- a/packages/noodl-viewer-react/src/nodes/visual/text.js
+++ b/packages/noodl-viewer-react/src/nodes/visual/text.js
@@ -20,6 +20,9 @@ const TextNode = {
   nodeDoubleClickAction: {
     focusPort: 'text'
   },
+  initialize() {
+    this.props.attrs = {};
+  },
   getReactComponent() {
     return Text;
   },
@@ -135,6 +138,16 @@ const TextNode = {
             break;
         }
       }
+    },
+    testId: {
+      index: 100009,
+      displayName: 'Test ID Attribute',
+      group: 'Advanced HTML',
+      type: 'string',
+      set(value) {
+        this.props.attrs["data-testid"] = value;
+        this.forceUpdate();
+      }
     }
   }
 };