Add test cases ui5/webcomponents-react explore

Author: knewbury01

javascript/frameworks/ui5/src/Diagnostics/InvestigateReact.ql

@@ -0,0 +1,15 @@
+/**
+ * @name List properties of react modelling
+ * @description List properties of react modelling
+ * @ kind problem
+ * @problem.severity info
+ * @precision high
+ * @id js/ui5-investigate-react
+ * @tags diagnostics
+ */
+
+import javascript
+import semmle.javascript.frameworks.React
+
+from ViewComponentInput v
+select v, v.getSourceType()

javascript/frameworks/ui5/test/models/source-react/controlledcomponent.tsx

@@ -0,0 +1,38 @@
+import { Input, Button } from '@ui5/webcomponents-react';
+import { useRef, useState } from 'react';
+import type { InputDomRef } from '@ui5/webcomponents-react';
+
+function ControlledComponent( { props }) {
+    const inputRef1 = useRef < InputDomRef > (null);
+    const [inputRef2, setInputValue] = useState('');
+
+    const handleButtonPress1 = () => {
+        // Access the input value via the hook
+            console.log('Current input value:', inputRef1.current.value); // SOURCE
+    };
+
+    const handleButtonPress2 = event => {
+        setInputValue(event.target.value); // SOURCE
+        console.log('Current input value:', inputRef2);  // SOURCE - only because of setInputValue
+    };
+
+    return (
+        <div>
+            <Input
+                ref={inputRef1}
+                placeholder="Enter some text"
+            />
+            <Button onClick={handleButtonPress1}>
+                Get Input Value
+            </Button>
+            <Input
+                placeholder="Enter some text"
+                value={inputRef2}
+            />
+            <Button onClick={handleButtonPress2}>
+                Get Input Value
+            </Button>
+        </div>
+    );
+}
+

javascript/frameworks/ui5/test/models/source-react/propscomponents.tsx

@@ -0,0 +1,20 @@
+import { Input } from '@ui5/webcomponents-react';
+
+// normal react component props 
+function ChildComponent({ value }) { // SOURCE
+
+ console.log('Input finalized with value:', value);
+
+ return (
+        <div>
+            <Input
+                placeholder={value}
+            />
+        </div>
+    );
+} 
+
+function ParentComponent() {
+  const data = "Hello from Parent";
+  return <ChildComponent value={data} />;
+}

javascript/frameworks/ui5/test/models/source-react/sourceTest.expected

@@ -0,0 +1 @@
+Diagnostics/InvestigateReact.ql

javascript/frameworks/ui5/test/models/source-react/sourceTest.qlref

@@ -0,0 +1,24 @@
+import { Input, Button } from '@ui5/webcomponents-react';
+import type { InputDomRef } from '@ui5/webcomponents-react';
+import type { Ui5CustomEvent } from '@ui5/webcomponents-react-base';
+
+function UncontrolledComponent({ props }) {
+
+  //direct event value access, no hook/react specific function
+  const handleButtonPress = (event: Ui5CustomEvent<InputDomRef>) => {
+    const finalValue = event.target.value; // SOURCE
+    console.log('Input finalized with value:', finalValue);
+  };
+
+    return (
+        <div>
+            <Input
+                placeholder="Enter some text"
+            />
+            <Button>
+                Get Input Value
+            </Button>
+        </div>
+    );
+}
+