Add Tests on UI

Add some test to UI and fix errors reported by JEST during Ui tests

Issue-ID: POLICY-3200
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: I69e93ad1f1714fa60a0c7ea9b1f3fb691f089f8a
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

5 files changed, 22 insertions, 19 deletions

diff --git a/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/ui-react/src/components/loop_viewer/logs/LoopLogs.js
index b3f052626..e3d9f601f 100644
--- a/ui-react/src/components/loop_viewer/logs/LoopLogs.js
+++ b/ui-react/src/components/loop_viewer/logs/LoopLogs.js
@@ -66,10 +66,9 @@ export default class LoopLogs extends React.Component {
 	}
 
 	renderLogs() {
-		if (this.state.loopCache.getLoopLogsArray() != null) {
-			return (
-				this.state.loopCache.getLoopLogsArray().map(row => <TableRow logRow={row} />)
-			)
+	    let logsArray = this.state.loopCache.getLoopLogsArray();
+		if (logsArray != null) {
+			return (logsArray.map(row => <TableRow key={row.id} logRow={row} />));
 		}
 	}
 
diff --git a/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap b/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap
index 75b817bab..996c67457 100644
--- a/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap
+++ b/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap
@@ -45,6 +45,7 @@ exports[`Verify LoopLogs Test the render method 1`] = `
     </thead>
     <tbody>
       <TableRow
+        key="1"
         logRow={
           Object {
             "id": 1,
diff --git a/ui-react/src/components/loop_viewer/status/LoopStatus.js b/ui-react/src/components/loop_viewer/status/LoopStatus.js
index d960c31e6..4b35b48e1 100644
--- a/ui-react/src/components/loop_viewer/status/LoopStatus.js
+++ b/ui-react/src/components/loop_viewer/status/LoopStatus.js
@@ -57,12 +57,13 @@ export default class LoopStatus extends React.Component {
 
 
 	renderStatus() {
-		if (this.state.loopCache.getComponentStates() != null) {
-			return Object.keys(this.state.loopCache.getComponentStates()).map((key) => {
+	    let componentStates = this.state.loopCache.getComponentStates();
+		if (componentStates != null) {
+			return Object.keys(componentStates).map((key) => {
 				console.debug("Adding status for: ",key);
 				var res={}
 				res[key]=this.state.loopCache.getComponentStates()[key];
-				return (<TableRow statusRow={{'componentName':key,'stateName':this.state.loopCache.getComponentStates()[key].componentState.stateName,'description':this.state.loopCache.getComponentStates()[key].componentState.description}} />)
+				return (<TableRow key={key} statusRow={{'componentName':key,'stateName':this.state.loopCache.getComponentStates()[key].componentState.stateName,'description':this.state.loopCache.getComponentStates()[key].componentState.description}} />)
 			})
 
 		}
diff --git a/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap b/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap
index 73da5fff1..24d879de9 100644
--- a/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap
+++ b/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap
@@ -40,6 +40,7 @@ exports[`Verify LoopStatus Test the render method 1`] = `
       </thead>
       <tbody>
         <TableRow
+          key="POLICY"
           statusRow={
             Object {
               "componentName": "POLICY",
@@ -49,6 +50,7 @@ exports[`Verify LoopStatus Test the render method 1`] = `
           }
         />
         <TableRow
+          key="DCAE"
           statusRow={
             Object {
               "componentName": "DCAE",
diff --git a/ui-react/src/components/loop_viewer/svg/SvgGenerator.js b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
index f5f5047ba..6d3cd7a21 100644
--- a/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
+++ b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
@@ -59,16 +59,16 @@ class SvgGenerator extends React.Component {
 	}
 
 	shouldComponentUpdate(nextProps, nextState) {
-		return this.state.loopCache !== nextState.loopCache;
+		return this.state.loopCache !== nextProps.loopCache;
 	}
 
-	componentWillReceiveProps(newProps) {
-		if (this.state.loopCache !== newProps.loopCache) {
-			this.setState({
-				loopCache: newProps.loopCache,
-			});
-		}
-	}
+    componentDidUpdate(prevProps) {
+        if (prevProps.loopCache !== this.props.loopCache) {
+            this.setState({
+                loopCache: this.props.loopCache,
+            });
+        }
+    }
 
 	handleSvgClick(event) {
 		console.debug("svg click event received");
@@ -233,10 +233,10 @@ class SvgGenerator extends React.Component {
         return (
 
             <DivStyled onClick={this.handleSvgClick} >
-                <svg height={svgHeight} width={svgWidth}  viewBox="0,0,{svgWidth},{svgHeight}" preserveAspectRatio="none">
-									<svg x="-50" y="25">
-                    {allTheElements}
-									</svg>
+                <svg key="main" height={svgHeight} width={svgWidth}  viewBox="0,0,{svgWidth},{svgHeight}" preserveAspectRatio="none">
+                    <svg key="content" x="-50" y="25">
+                        {allTheElements}
+					</svg>
                 </svg>
             </DivStyled>
         );