Added JEST Unit Tests for Monitoring Functionality

Created Unit Tests to cover monitoring functionality

Issue-ID: POLICY-3561
Change-Id: I48035f3960447c66d29005d5eba2e8332c55b591
Signed-off-by: brunomilitzer <bruno.militzer@est.tech>

13 files changed, 324 insertions, 98 deletions

diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.js
new file mode 100644
index 0000000..2997239
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.js
@@ -0,0 +1,116 @@
+/*
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2021 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ *
+ *
+ */
+
+import styled from "styled-components";
+import { Accordion, Button } from "react-bootstrap";
+import React, { useEffect, useState } from "react";
+
+const UninitialisedHeader = styled.div`
+  margin: 0;
+  padding: 0 0 1px 0;
+  border-bottom: 1px solid #7f7f7f;
+  background: #cccccc;
+  font-weight: normal;
+  border-radius: 0;
+`
+
+const PassiveHeader = styled.div`
+  margin: 0;
+  padding: 0 0 1px 0;
+  border-bottom: 1px solid #7f7f7f;
+  background: #ffe87c;
+  font-weight: normal;
+  border-radius: 0;
+`
+
+const RunningHeader = styled.div`
+  margin: 0;
+  padding: 0 0 1px 0;
+  border-bottom: 1px solid #7f7f7f;
+  background: #7ec699;
+  font-weight: normal;
+  border-radius: 0;
+`
+
+const ToggleButton = styled(Button)`
+  color: #000000;
+  text-decoration: none;
+
+  :hover, :active {
+    color: #000000;
+    text-decoration: none !important;
+  }
+`
+
+const AccordionHeader = (props) => {
+
+  const toggleState = () => {
+    switch (props.orderedState) {
+      case 'UNINITIALISED':
+        return renderUninitialisedOrderedState();
+      case 'PASSIVE':
+        return renderPassiveOrderedState();
+      case 'RUNNING':
+        return renderRunningOrderedState();
+    }
+  }
+
+  const renderUninitialisedOrderedState = () => {
+
+    return (
+      <UninitialisedHeader className="panel-header">
+        <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
+          { props.title }
+        </Accordion.Toggle>
+      </UninitialisedHeader>
+    )
+  }
+
+  const renderPassiveOrderedState = () => {
+    console.log("renderPassiveOrderedState called");
+
+    return (
+      <PassiveHeader className="panel-header">
+        <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
+          { props.title }
+        </Accordion.Toggle>
+      </PassiveHeader>
+    )
+  }
+
+  const renderRunningOrderedState = () => {
+    console.log("renderRunningOrderedState called");
+
+    return (
+      <RunningHeader className="panel-header">
+        <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
+          { props.title }
+        </Accordion.Toggle>
+      </RunningHeader>
+    )
+  }
+
+  return (
+    toggleState()
+  );
+}
+
+export default AccordionHeader;
\ No newline at end of file
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.test.js
new file mode 100644
index 0000000..7685340
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/AccordionHeader.test.js
@@ -0,0 +1,38 @@
+/*
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2021 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ *
+ *
+ */
+
+import { shallow } from "enzyme";
+import React from "react";
+import AccordionHeader from "./AccordionHeader";
+import toJson from "enzyme-to-json";
+
+describe('Verify AccordionHeader', () => {
+
+  const index = 0;
+  const title = "PMSH Instance";
+  const orderState = "UNINITIALISED";
+  const container = shallow(<AccordionHeader title={ { title } } orderState={ { orderState } } index={ { index } } key={ { index } }/>);
+
+  it("renders correctly", () => {
+    expect(toJson(container)).toMatchSnapshot();
+  });
+
+});
\ No newline at end of file
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js
index 8ad855e..7a473e7 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstancePropertiesModal.js
@@ -235,9 +235,11 @@ const InstancePropertiesModal = (props) => {
   }
 
   const handleSave = async () => {
-    console.log("handleSave called")
+    console.log("handleSave called");
 
-    console.log("instanceName to be saved is: " + instanceName)
+    console.log("instanceName to be saved is: " + instanceName);
+
+    console.log(JSON.stringify(toscaFullTemplate));
 
     updateTemplate(jsonEditor.getValue());
 
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElementItem.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElementItem.test.js
new file mode 100644
index 0000000..136983a
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElementItem.test.js
@@ -0,0 +1,33 @@
+/*
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2021 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ *
+ *
+ */
+
+import { shallow } from "enzyme";
+import toJson from "enzyme-to-json";
+import React from "react";
+import InstantiationElementItem from "./InstantiationElementItem";
+
+describe('Verify InstantiationElementItem', () => {
+  const container = shallow(<InstantiationElementItem />);
+
+  it("renders correctly", () => {
+    expect(toJson(container)).toMatchSnapshot();
+  });
+});
\ No newline at end of file
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElements.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElements.test.js
new file mode 100644
index 0000000..127a886
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationElements.test.js
@@ -0,0 +1,33 @@
+/*
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2021 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ *
+ *
+ */
+
+import toJson from "enzyme-to-json";
+import { shallow } from "enzyme";
+import React from "react";
+import InstantiationElements from "./InstantiationElements";
+
+describe('Verify InstantiationElements', () => {
+  const container = shallow(<InstantiationElements />);
+
+  it("renders correctly", () => {
+    expect(toJson(container)).toMatchSnapshot();
+  });
+});
\ No newline at end of file
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js
index a59770b..7b8e453 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.js
@@ -21,6 +21,7 @@ import React from "react";
 import styled from 'styled-components';
 
 import { Accordion, Button, Card } from "react-bootstrap";
+import AccordionHeader from "./AccordionHeader";
 
 const AccordionBody = styled.div`
   margin: 0;
@@ -34,89 +35,12 @@ const CardBody = styled(Card.Body)`
   margin: 0;
 `
 
-const UninitialisedHeader = styled.div`
-  margin: 0;
-  padding: 0 0 1px 0;
-  border-bottom: 1px solid #7f7f7f;
-  background: #cccccc;
-  font-weight: normal;
-  border-radius: 0;
-`
-
-const PassiveHeader = styled.div`
-  margin: 0;
-  padding: 0 0 1px 0;
-  border-bottom: 1px solid #7f7f7f;
-  background: #ffe87c;
-  font-weight: normal;
-  border-radius: 0;
-`
-
-const RunningHeader = styled.div`
-  margin: 0;
-  padding: 0 0 1px 0;
-  border-bottom: 1px solid #7f7f7f;
-  background: #7ec699;
-  font-weight: normal;
-  border-radius: 0;
-`
-
-const ToggleButton = styled(Button)`
-  color: #000000;
-  text-decoration: none;
-
-  :hover, :active {
-    color: #000000;
-    text-decoration: none !important;
-  }
-`
-
 const InstantiationItem = (props) => {
-  const toggleState = () => {
-    switch (props.orderedState) {
-      case 'UNINITIALISED':
-        return renderUninitialisedOrderedState()
-      case 'PASSIVE':
-        return renderPassiveOrderedState();
-      case 'RUNNING':
-        return renderRunningOrderedState();
-    }
-  }
-
-  const renderUninitialisedOrderedState = () => {
-    return (
-      <UninitialisedHeader className="panel-header">
-        <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
-          { props.title }
-        </Accordion.Toggle>
-      </UninitialisedHeader>
-    )
-  }
-
-  const renderPassiveOrderedState = () => {
-    return (
-      <PassiveHeader className="panel-header">
-        <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
-          { props.title }
-        </Accordion.Toggle>
-      </PassiveHeader>
-    )
-  }
-
-  const renderRunningOrderedState = () => {
-    return (
-      <RunningHeader className="panel-header">
-        <Accordion.Toggle as={ToggleButton} variant="link" eventKey={ props.index.toString() }>
-          { props.title }
-        </Accordion.Toggle>
-      </RunningHeader>
-    )
-  }
 
   return (
     <Accordion>
       <AccordionBody>
-        { toggleState() }
+        <AccordionHeader title={ props.title } orderedState={ props.orderedState } index={ props.index } key={ props.index } />
         <Accordion.Collapse eventKey={ props.index.toString() }>
           <CardBody>{ props.children }</CardBody>
         </Accordion.Collapse>
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.test.js
new file mode 100644
index 0000000..fe4aaf8
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/InstantiationItem.test.js
@@ -0,0 +1,53 @@
+/*
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2021 Nordix Foundation.
+ *  ================================================================================
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ *
+ *
+ */
+
+import React from "react";
+import { shallow } from "enzyme";
+import toJson from "enzyme-to-json";
+
+import InstantiationItem from "./InstantiationItem";
+
+describe('Verify InstantiationItem', () => {
+
+  const index = 0;
+  const title = "PMSH Instance";
+  const orderState = "UNINITIALISED";
+  const container = shallow(<InstantiationItem title={ { title } } orderState={ { orderState } } index={ { index } } key={ { index } }/>);
+
+  it("renders without crashing", () => {
+    shallow(<InstantiationItem title={ { title } } orderState={ { orderState } } index={ { index } } key={ { index } }/>);
+  });
+
+  it("renders correctly", () => {
+    expect(toJson(container)).toMatchSnapshot();
+  });
+
+  it("should contain an Accordion", () => {
+    const accordion = container.find('Accordion');
+    expect(accordion).toHaveLength(1);
+  });
+
+  it("should contain an AccordionHeader", () => {
+    const accordion = container.find('AccordionHeader');
+    expect(accordion).toHaveLength(1);
+  });
+
+});
\ No newline at end of file
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js
index dad4185..4186477 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.js
@@ -43,13 +43,13 @@ const MonitorInstantiation = (props) => {
     const controlLoopInstantiation = await ControlLoopService.getControlLoopInstantiation()
       .catch(error => error.message);
 
-    const controlLoopInstantiationJson = await controlLoopInstantiation.json()
-    console.log(controlLoopInstantiationJson)
+    const controlLoopInstantiationJson = await controlLoopInstantiation.json();
+
     if (!controlLoopInstantiation.ok || controlLoopInstantiationJson['controlLoopList'].length === 0) {
       setControlLoopInstantiationOk(false)
       setControlLoopInstantiationError(controlLoopInstantiationJson)
     } else {
-      setControlLoopList(controlLoopInstantiationJson[['controlLoopList']])
+      setControlLoopList(controlLoopInstantiationJson['controlLoopList']);
     }
   }, [])
 
@@ -67,7 +67,7 @@ const MonitorInstantiation = (props) => {
       <Modal.Body>
         {
           controlLoopList.map((clList, index) => (
-            <InstantiationItem title={ clList["name"] } orderedState={ clList["orderedState"] } index={ index } key={ index }>
+            <InstantiationItem title={ clList["name"] } orderedState={ clList["orderedState"] } index={ index } key={ index } >
               <InstantiationElements elements={ clList["elements"] } />
             </InstantiationItem>
           ))
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.test.js b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.test.js
index 5e30924..cce6225 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.test.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/MonitorInstantiation.test.js
@@ -17,7 +17,7 @@
  *  ============LICENSE_END=========================================================
  */
 
-import { mount, shallow } from "enzyme";
+import { shallow } from "enzyme";
 import toJson from "enzyme-to-json";
 import { createMemoryHistory } from "history";
 import React from "react";
@@ -25,39 +25,31 @@ import MonitorInstantiation from "./MonitorInstantiation";
 import { act } from "react-dom/test-utils";
 
 describe('Verify MonitoringInstantiation', () => {
-
-  it("renders without crashing", () => {
-    shallow(<MonitorInstantiation/>);
-  });
+  const container = shallow(<MonitorInstantiation />);
+  const containerWithHistory = shallow(<MonitorInstantiation history={ createMemoryHistory() }/>);
 
   it("renders correctly", () => {
-    const tree = shallow(<MonitorInstantiation/>);
-    expect(toJson(tree)).toMatchSnapshot();
+    expect(toJson(container)).toMatchSnapshot();
   });
 
   it('should have a Button element', () => {
-    const container = shallow(<MonitorInstantiation/>)
     expect(container.find('Button').length).toEqual(1);
   });
 
   it('handleClose called when bottom button clicked', () => {
-    const history = createMemoryHistory();
-    const component = mount(<MonitorInstantiation history={ history }/>)
     const logSpy = jest.spyOn(console, 'log');
 
     act(() => {
-      component.find('[variant="secondary"]').simulate('click');
+      containerWithHistory.find('[variant="secondary"]').simulate('click');
       expect(logSpy).toHaveBeenCalledWith('handleClose called');
     });
   });
 
   it('handleClose called when top-right button clicked', () => {
-    const history = createMemoryHistory();
-    const component = mount(<MonitorInstantiation history={ history }/>)
     const logSpy = jest.spyOn(console, 'log');
 
     act(() => {
-      component.find('[size="xl"]').get(0).props.onHide();
+      containerWithHistory.find('[size="xl"]').get(0).props.onHide();
       expect(logSpy).toHaveBeenCalledWith('handleClose called');
     });
   });
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/AccordionHeader.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/AccordionHeader.test.js.snap
new file mode 100644
index 0000000..b4a707b
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/AccordionHeader.test.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify AccordionHeader renders correctly 1`] = `""`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElementItem.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElementItem.test.js.snap
new file mode 100644
index 0000000..2c5d298
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElementItem.test.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify InstantiationElementItem renders correctly 1`] = `<Fragment />`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElements.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElements.test.js.snap
new file mode 100644
index 0000000..8fa928e
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationElements.test.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify InstantiationElements renders correctly 1`] = `<Fragment />`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationItem.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationItem.test.js.snap
new file mode 100644
index 0000000..a3a230a
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/ControlLoop/__snapshots__/InstantiationItem.test.js.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify InstantiationItem renders correctly 1`] = `
+<Accordion>
+  <styled.div>
+    <AccordionHeader
+      index={
+        Object {
+          "index": 0,
+        }
+      }
+      key="[object Object]"
+      title={
+        Object {
+          "title": "PMSH Instance",
+        }
+      }
+    />
+    <AccordionCollapse
+      eventKey="[object Object]"
+    >
+      <Styled(CardBody) />
+    </AccordionCollapse>
+  </styled.div>
+</Accordion>
+`;