Add ui tests

Add more tests for react UI.

Issue-ID: CLAMP-512
Change-Id: Iab51ff107688164dfa85341a3758b8799fe60ecd
Signed-off-by: xuegao <xg353y@intl.att.com>

3 files changed, 136 insertions, 7 deletions

diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
index 48f0335fc..bb4b6d03c 100644
--- a/ui-react/src/components/loop_viewer/svg/LoopSvg.js
+++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
@@ -55,6 +55,7 @@ class LoopViewSvg extends React.Component {
 		this.state.loopCache = props.loopCache;
 		this.state.componentModalMapping = LoopComponentConverter.buildMapOfComponents(props.loopCache);
 		this.getSvg(props.loopCache.getLoopName());
+		console.log("!!!!!!!!!!!!!!!!!!!!!!!!:"+this.state.componentModalMapping);
 	}
 
 	shouldComponentUpdate(nextProps, nextState) {
@@ -62,7 +63,9 @@ class LoopViewSvg extends React.Component {
 	}
 
 	componentWillReceiveProps(newProps) {	
+	console.log("!!!!!!!!!!!!!!!!!!!!!!!!");
 		if (this.state.loopCache !== newProps.loopCache) {
+		console.log("!!!!!!!!!!!!!!!!!!!!!!!!changed");
 			this.setState({
 				loopCache: newProps.loopCache,
 				componentModalMapping: LoopComponentConverter.buildMapOfComponents(newProps.loopCache)
diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.test.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.test.js
index 5a28328c9..635185463 100644
--- a/ui-react/src/components/loop_viewer/svg/LoopSvg.test.js
+++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.test.js
@@ -23,12 +23,111 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import LoopSvg from './LoopSvg';
+import LoopCache from '../../../api/LoopCache';
+import LoopService from '../../../api/LoopService';
 
 describe('Verify LoopSvg', () => {
+    const loopCache = new LoopCache({
+        "name": "LOOP_Jbv1z_v1_0_ResourceInstanceName1_tca",
+        "microServicePolicies": [{
+            "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
+            "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
+            "properties": {"domain": "measurementsForVfScaling"},
+            "shared": false,
+            "jsonRepresentation": {"schema": {}}
+        }],
+        "operationalPolicies": [{
+            "name": "OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca",
+            "configurationsJson": {
+                "guard_policies": {},
+                "operational_policy": {
+                    "controlLoop": {},
+                    "policies": []
+                }
+            }
+        }]
+    });
 
-	it('Test the render method', () => {
-		const component = shallow(<LoopSvg />)
+    it('Test the render method no loopName', () => {
+        const localLoopCache = new LoopCache({
+        "microServicePolicies": [{
+            "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
+            "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
+            "properties": {"domain": "measurementsForVfScaling"},
+            "shared": false,
+            "jsonRepresentation": {"schema": {}}
+          }]
+        });
+        const component = shallow(
+            <LoopSvg.WrappedComponent loopCache={localLoopCache}/>
+        );
 
-		expect(component).toMatchSnapshot();
-	});
+        expect(component).toMatchSnapshot();
+    });
+
+    it('Test the render method', () => {
+        const component = shallow(
+            <LoopSvg.WrappedComponent  loopCache={loopCache}/>
+        );
+
+        expect(component).toMatchSnapshot();
+    });
+
+    it('Test the render method svg not empty', async () => {
+        const flushPromises = () => new Promise(setImmediate);
+        LoopService.getSvg = jest.fn().mockImplementation(() => {
+            return Promise.resolve("<svg><text test</text></svg>");
+        });
+        const component = shallow(
+            <LoopSvg.WrappedComponent  loopCache={loopCache}/>
+        );
+        await flushPromises();
+        expect(component).toMatchSnapshot();
+    });
+
+    it('Test handleSvgClick', () => {
+        const historyMock = { push: jest.fn() };
+
+        const component = shallow(
+            <LoopSvg.WrappedComponent loopCache={loopCache} history={historyMock}/>
+        );
+        let dummyElement = document.createElement('div');
+        dummyElement.setAttribute("data-element-id","TCA_h2NMX_v1_0_ResourceInstanceName1_tca");
+
+        const event = { target: { parentNode: { parentNode:{ parentNode: dummyElement }}}};
+
+        component.simulate('click', event);
+        component.update();
+
+        expect(historyMock.push.mock.calls[0]).toEqual([ '/configurationPolicyModal/TCA_h2NMX_v1_0_ResourceInstanceName1_tca']);
+
+        //click operational policy
+        dummyElement.setAttribute("data-element-id","OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca");
+        const event2 = { target: { parentNode: { parentNode:{ parentNode: dummyElement }}}};
+
+        component.simulate('click', event2);
+        component.update();
+
+        expect(historyMock.push.mock.calls[1]).toEqual([ '/operationalPolicyModal']);
+    });
+
+    it('Test componentWillReceiveProps method', () => {
+        const localLoopCache = new LoopCache({
+        "microServicePolicies": [{
+            "name": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca",
+            "modelType": "onap.policies.monitoring.cdap.tca.hi.lo.app",
+            "properties": {"domain": "measurementsForVfScaling"},
+            "shared": false,
+            "jsonRepresentation": {"schema": {}}
+          }]
+        });
+        const component = shallow(
+            <LoopSvg.WrappedComponent loopCache={localLoopCache}/>
+        );
+
+        expect(component.state('componentModalMapping').size).toEqual(2);
+
+        component.setProps({loopCache: loopCache});
+        expect(component.state('componentModalMapping').size).toEqual(3);
+    });
 });
diff --git a/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap b/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap
index 23d22256f..cecfb425a 100644
--- a/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap
+++ b/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap
@@ -1,7 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Verify LoopSvg Test the render method 1`] = `
-<ContextConsumer>
-  <Component />
-</ContextConsumer>
+<styled.div
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<svg><text x=\\"20\\" y=\\"40\\">No LOOP (SVG)</text></svg>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;
+
+exports[`Verify LoopSvg Test the render method no loopName 1`] = `
+<styled.div
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<svg><text x=\\"20\\" y=\\"40\\">No LOOP (SVG)</text></svg>",
+    }
+  }
+  onClick={[Function]}
+/>
+`;
+
+exports[`Verify LoopSvg Test the render method svg not empty 1`] = `
+<styled.div
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "<svg><text test</text></svg>",
+    }
+  }
+  onClick={[Function]}
+/>
 `;