Forker/fluxscape
1
0
Fork 0
mirror of https://github.com/fluxscape/fluxscape.git synced 2026-01-10 14:22:53 +01:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

feat(runtime): Add "data-testid" attributes to UI nodes (#42)

Browse Source
This commit is contained in:
Eric Tuvesson
2024-06-26 21:08:01 +02:00
committed by GitHub
parent 0ee55c26eb
commit fa282d6169
18 changed files with 129 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/noodl-viewer-react/src/components/controls/Button/Button.tsx
View File

@@ -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)}

3
packages/noodl-viewer-react/src/components/controls/Checkbox/Checkbox.tsx
View File

@@ -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,

3
packages/noodl-viewer-react/src/components/controls/RadioButton/RadioButton.tsx
View File

@@ -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(' '),

3
packages/noodl-viewer-react/src/components/controls/Select/Select.tsx
View File

@@ -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: {

3
packages/noodl-viewer-react/src/components/controls/Slider/Slider.tsx
View File

@@ -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%',

3
packages/noodl-viewer-react/src/components/controls/TextInput/TextInput.tsx
View File

@@ -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),

3
packages/noodl-viewer-react/src/components/visual/Group/Group.tsx
View File

@@ -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}

3
packages/noodl-viewer-react/src/components/visual/Image/Image.tsx
View File

@@ -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} />;
}

3
packages/noodl-viewer-react/src/components/visual/Text/Text.tsx
View File

@@ -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}

13
packages/noodl-viewer-react/src/nodes/controls/button.ts
View File

@@ -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,

11
packages/noodl-viewer-react/src/nodes/controls/checkbox.ts
View File

@@ -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: {

11
packages/noodl-viewer-react/src/nodes/controls/options.ts
View File

@@ -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: {

11
packages/noodl-viewer-react/src/nodes/controls/radiobutton.ts
View File

@@ -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: {

11
packages/noodl-viewer-react/src/nodes/controls/slider.ts
View File

@@ -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: {

11
packages/noodl-viewer-react/src/nodes/controls/text-input.ts
View File

@@ -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: {

11
packages/noodl-viewer-react/src/nodes/visual/group.js
View File

@@ -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: {

11
packages/noodl-viewer-react/src/nodes/visual/image.js
View File

@@ -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: {

13
packages/noodl-viewer-react/src/nodes/visual/text.js
View File

@@ -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();
}
}
}
};