Merge "Added Policy Jest Tests"

11 files changed, 1222 insertions, 76 deletions

diff --git a/gui-clamp/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js b/gui-clamp/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js
index 5bca4e6..7ec7eef 100644
--- a/gui-clamp/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js
+++ b/gui-clamp/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js
@@ -2,8 +2,8 @@
  * ============LICENSE_START=======================================================
  * ONAP POLICY-CLAMP
  * ================================================================================
- * Copyright (C) 2021 AT&T Intellectual Property. All rights
- *                             reserved.
+ * Copyright (C) 2021 AT&T Intellectual Property. All rights reserved.
+ * Modifications Copyright (C) 2022 Nordix Foundation.
  * ================================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@
  *
  */
 
-import React, { forwardRef } from 'react'
+import React from 'react'
 import TreeView from '@material-ui/lab/TreeView';
 import TreeItem from '@material-ui/lab/TreeItem';
 import FolderIcon from '@material-ui/icons/Folder';
@@ -31,79 +31,91 @@ import DescriptionIcon from '@material-ui/icons/Description';
 
 export default class PoliciesTreeViewer extends React.Component {
 
-  separator = ".";
+    separator = ".";
 
-  nodesList = new Map();
+    nodesList = new Map();
 
-  constructor(props, context) {
-    super(props, context);
-    this.createPoliciesTree = this.createPoliciesTree.bind(this);
-    this.handleTreeItemClick = this.handleTreeItemClick.bind(this);
-    this.buildNameWithParent = this.buildNameWithParent.bind(this);
+    constructor(props, context) {
+        super(props, context);
+        this.createPoliciesTree = this.createPoliciesTree.bind(this);
+        this.handleTreeItemClick = this.handleTreeItemClick.bind(this);
+        this.buildNameWithParent = this.buildNameWithParent.bind(this);
 
-  }
+    }
 
-  state = {
-    policiesTreeData: this.createPoliciesTree(this.props.policiesData),
-  }
+    state = {
+        policiesTreeData: this.createPoliciesTree(this.props.policiesData),
+    }
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.policiesData !== this.props.policiesData) {
-      this.setState({ policiesTreeData: this.createPoliciesTree(this.props.policiesData) })
+    componentDidUpdate(prevProps) {
+        if (prevProps.policiesData !== this.props.policiesData) {
+            this.setState({policiesTreeData: this.createPoliciesTree(this.props.policiesData)})
+        }
     }
-  }
-
-  createPoliciesTree(policiesArray) {
-    // put my policies array in a Json
-    let nodeId = 1;
-    let root = { id: nodeId, policyCount: 0, name: "ROOT", children: [], parent: undefined };
-    this.nodesList.set(nodeId++, root);
-
-    policiesArray.forEach(policy => {
-      let currentTreeNode = root;
-      policy[this.props.valueForTreeCreation].split(this.separator).forEach((policyNamePart, index, policyNamePartsArray) => {
-        let node = currentTreeNode["children"].find(element => element.name === policyNamePart);
-        if (typeof (node) === "undefined") {
-          node = { id: nodeId, policyCount: 0, children: [], name: policyNamePart, parent: currentTreeNode };
-          this.nodesList.set(nodeId++, node);
-          currentTreeNode["children"].push(node);
+
+    createPoliciesTree(policiesArray) {
+        console.log('createPoliciesTree called')
+        // put my policies array in a Json
+        let nodeId = 1;
+        let root = {id: nodeId, policyCount: 0, name: "ROOT", children: [], parent: undefined};
+        this.nodesList.set(nodeId++, root);
+
+        if (policiesArray !== null && policiesArray.forEach !== undefined) {
+
+            policiesArray.forEach(policy => {
+                let currentTreeNode = root;
+                policy[this.props.valueForTreeCreation].split(this.separator).forEach((policyNamePart, index, policyNamePartsArray) => {
+                    let node = currentTreeNode["children"].find(element => element.name === policyNamePart);
+                    if (typeof (node) === "undefined") {
+                        node = {
+                            id: nodeId,
+                            policyCount: 0,
+                            children: [],
+                            name: policyNamePart,
+                            parent: currentTreeNode
+                        };
+                        this.nodesList.set(nodeId++, node);
+                        currentTreeNode["children"].push(node);
+                    }
+                    if ((index + 1) === policyNamePartsArray.length) {
+                        ++currentTreeNode["policyCount"];
+                    }
+                    currentTreeNode = node;
+                })
+            });
         }
-        if ((index + 1) === policyNamePartsArray.length) {
-          ++currentTreeNode["policyCount"];
+        return root;
+    }
+
+    buildNameWithParent(node) {
+        let nameToBuild = node.name;
+        if (node.parent !== undefined) {
+            nameToBuild = this.buildNameWithParent(node.parent) + this.separator + node.name;
         }
-        currentTreeNode = node;
-      })
-    })
-    return root;
-  }
-
-  buildNameWithParent(node) {
-    let nameToBuild = node.name;
-    if (node.parent !== undefined) {
-      nameToBuild = this.buildNameWithParent(node.parent) + this.separator + node.name;
+        return nameToBuild;
+    }
+
+    handleTreeItemClick(event, value) {
+        let fullName = this.buildNameWithParent(this.nodesList.get(value[0])).substring(5);
+        this.props.policiesFilterFunction(fullName);
+    }
+
+    renderTreeItems(nodes) {
+        return (<TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name + "(" + nodes.policyCount + ")"}
+                          onNodeSelect={this.handleTreeItemClick}>
+            {
+                Array.isArray(nodes.children) ? nodes.children.map((node) => this.renderTreeItems(node)) : null
+            }
+        </TreeItem>);
+    };
+
+    render() {
+        return (
+            <TreeView defaultExpanded={['root']} defaultCollapseIcon={<FolderOpenIcon/>}
+                      defaultExpandIcon={<FolderIcon/>} defaultEndIcon={<DescriptionIcon/>}
+                      onNodeSelect={this.handleTreeItemClick} multiSelect>
+                {this.renderTreeItems(this.state.policiesTreeData)}
+            </TreeView>
+        );
     }
-    return nameToBuild;
-  }
-
-  handleTreeItemClick(event, value) {
-    let fullName = this.buildNameWithParent(this.nodesList.get(value[0])).substring(5);
-    this.props.policiesFilterFunction(fullName);
-  }
-
-  renderTreeItems(nodes) {
-    return (<TreeItem key={ nodes.id } nodeId={ nodes.id } label={ nodes.name + "(" + nodes.policyCount + ")" } onNodeSelect={ this.handleTreeItemClick }>
-      {
-        Array.isArray(nodes.children) ? nodes.children.map((node) => this.renderTreeItems(node)) : null
-      }
-    </TreeItem>);
-  };
-
-  render() {
-    return (
-      <TreeView defaultExpanded={ ['root'] } defaultCollapseIcon={ <FolderOpenIcon/> }
-                defaultExpandIcon={ <FolderIcon/> } defaultEndIcon={ <DescriptionIcon/> } onNodeSelect={ this.handleTreeItemClick } multiSelect>
-        { this.renderTreeItems(this.state.policiesTreeData) }
-      </TreeView>
-    );
-  }
 }
diff --git a/gui-clamp/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.test.js b/gui-clamp/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.test.js
new file mode 100644
index 0000000..7a6a76a
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.test.js
@@ -0,0 +1,54 @@
+/*
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2022 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 PoliciesTreeViewer from "./PoliciesTreeViewer";
+import fs from "fs";
+import toJson from "enzyme-to-json";
+
+describe('Verify PoliciesTreeViewer', () => {
+
+    let toscaPoliciesData = fs.readFileSync('src/components/dialogs/Policy/toscaPoliciesData.test.json', {
+        encoding: 'utf8',
+        flag: 'r'
+    });
+    const toscaPoliciesDataArray = JSON.parse(toscaPoliciesData);
+
+    const logSpy = jest.spyOn(console, 'log');
+
+
+    it("renders correctly", () => {
+        const component = shallow(<PoliciesTreeViewer policiesData={'[]'} />);
+
+        expect(toJson(component)).toMatchSnapshot();
+    });
+
+    it("tests createPoliciesTree handler", () => {
+        const component = shallow(<PoliciesTreeViewer policiesData={ toscaPoliciesDataArray } valueForTreeCreation="name" />);
+        component.setState({ policiesTreeData: toscaPoliciesDataArray });
+
+        const instance = component.instance();
+        instance.createPoliciesTree(toscaPoliciesDataArray);
+
+        expect(logSpy).toHaveBeenCalledWith('createPoliciesTree called');
+        expect(component.state('policiesTreeData')).toEqual(toscaPoliciesDataArray);
+    });
+
+});
\ No newline at end of file
diff --git a/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js b/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js
index 111f2c6..5e63ab4 100644
--- a/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js
+++ b/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js
@@ -56,7 +56,6 @@ describe('Verify PolicyEditor', () => {
     }
   };
 
-
   it('Test the render method', async () => {
     PolicyToscaService.getToscaPolicyModel = jest.fn().mockImplementation(() => {
       return Promise.resolve(toscaJson);
diff --git a/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js b/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js
index 8093b7e..8051059 100644
--- a/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js
+++ b/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js
@@ -3,6 +3,7 @@
  * ONAP POLICY-CLAMP
  * ================================================================================
  * Copyright (C) 2021 AT&T Intellectual Property. All rights reserved.
+ * Modifications Copyright (C) 2022 Nordix Foundation.
  * ================================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -27,9 +28,9 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import styled from 'styled-components';
 import Alert from 'react-bootstrap/Alert';
-import { Input, InputLabel, Button, SvgIcon } from "@material-ui/core";
+import { Button, SvgIcon } from "@material-ui/core";
 import PublishIcon from '@material-ui/icons/Publish';
-import PolicyService from '../../../api/PolicyService';
+import PolicyService from "../../../api/PolicyService";
 
 const ModalStyled = styled(Modal)`
   background-color: transparent;
@@ -66,6 +67,7 @@ export default class PolicyToscaFileSelector extends React.Component {
   }
 
   onFileChange(target) {
+    console.log('onFileChange target');
     this.setState({ alertMessages: [] });
     target.currentTarget.files.forEach(file => {
       const fileReader = new FileReader();
diff --git a/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.test.js b/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.test.js
new file mode 100644
index 0000000..412b1b0
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.test.js
@@ -0,0 +1,128 @@
+/*
+ * ============LICENSE_START=======================================================
+ *  Copyright (C) 2022 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 PolicyToscaFileSelector from "./PolicyToscaFileSelector";
+import PolicyService from "../../../api/PolicyService";
+import Alert from "react-bootstrap/Alert";
+import PolicyToscaService from "../../../api/PolicyToscaService";
+import fs from "fs";
+
+describe('Verify PolicyToscaFileSelector', () => {
+
+    let toscaPoliciesList = fs.readFileSync('src/components/dialogs/Policy/toscaPoliciesList.test.json', {
+        encoding: 'utf8',
+        flag: 'r'
+    });
+
+    const uploadFile = JSON.stringify(
+        {
+            name: 'test-file.yaml',
+            lastModified: 1639414348371,
+            lastModifiedDate: 'Sat Jan 1 2022 00:00:01 GMT+0000',
+            size: 32880,
+            type: ''
+        });
+
+    const file = new Blob([uploadFile], {type: 'file'})
+    const logSpy = jest.spyOn(console, 'log');
+
+    const alertMessages = [(
+        <Alert variant="success"><Alert.Heading>{file.name}</Alert.Heading><p>Policy Tosca Model Creation Test</p>
+            <hr/>
+            <p>Type: {file.type}</p><p>Size: {file.size}</p></Alert>)];
+
+    it("renders correctly", () => {
+        const component = shallow(<PolicyToscaFileSelector/>);
+        expect(toJson(component)).toMatchSnapshot();
+    });
+
+    it('Test handleClose', async () => {
+        const flushPromises = () => new Promise(setImmediate);
+        const showFileSelectorMock = jest.fn();
+        const showFileSelector = showFileSelectorMock.bind({
+            showFileSelector: false
+        });
+        const handleClose = jest.spyOn(PolicyToscaFileSelector.prototype, 'handleClose');
+        const component = shallow(<PolicyToscaFileSelector disableFunction={showFileSelector} show={false}/>);
+
+        component.find('[variant="secondary"]').get(0).props.onClick();
+        await flushPromises();
+        component.update();
+
+        expect(handleClose).toHaveBeenCalledTimes(1);
+        expect(component.state('show')).toEqual(false);
+
+        handleClose.mockClear();
+    });
+
+    it('handleClose called when top-right button clicked', async () => {
+        const flushPromises = () => new Promise(setImmediate);
+        const showFileSelectorMock = jest.fn();
+        const showFileSelector = showFileSelectorMock.bind({
+            showFileSelector: false
+        });
+        const handleClose = jest.spyOn(PolicyToscaFileSelector.prototype, 'handleClose');
+        const component = shallow(<PolicyToscaFileSelector disableFunction={showFileSelector} show={false}/>);
+
+        component.find('[size="lg"]').get(0).props.onHide();
+        await flushPromises();
+        component.update();
+
+        expect(handleClose).toHaveBeenCalledTimes(1);
+        expect(component.state('show')).toEqual(false);
+
+        handleClose.mockClear();
+    });
+
+    it("onFileChange called when upload button clicked", () => {
+        PolicyService.sendNewPolicyModel = jest.fn().mockImplementation(() => {
+            return Promise.resolve({});
+        });
+
+        const component = shallow(<PolicyToscaFileSelector/>);
+        const instance = component.instance();
+        const target = {
+            currentTarget: {files: [file]}
+        }
+
+        instance.onFileChange(target);
+
+        component.find('[type="file"]').get(0).props.onChange(target);
+        expect(logSpy).toHaveBeenCalledWith('onFileChange target');
+    });
+
+    it("setAlertMessage state", () => {
+        PolicyToscaService.getToscaPolicyModels = jest.fn().mockImplementation(() => {
+            return Promise.resolve(toscaPoliciesList);
+        });
+        const getAllToscaModelsMock = jest.fn();
+        const getAllToscaModels = getAllToscaModelsMock.bind({
+            toscaModelsListData: toscaPoliciesList,
+            toscaModelsListDataFiltered: toscaPoliciesList
+        });
+
+        const component = shallow(<PolicyToscaFileSelector toscaTableUpdateFunction={getAllToscaModels}/>);
+        component.setState({alertMessages: alertMessages});
+
+        expect(component.state('alertMessages')).toEqual(alertMessages);
+    });
+});
\ No newline at end of file
diff --git a/gui-clamp/ui-react/src/components/dialogs/Policy/ViewAllPolicies.test.js b/gui-clamp/ui-react/src/components/dialogs/Policy/ViewAllPolicies.test.js
index d477c9a..d4a3fd9 100644
--- a/gui-clamp/ui-react/src/components/dialogs/Policy/ViewAllPolicies.test.js
+++ b/gui-clamp/ui-react/src/components/dialogs/Policy/ViewAllPolicies.test.js
@@ -24,6 +24,7 @@ import fs from "fs";
 import PolicyToscaService from "../../../api/PolicyToscaService";
 import PolicyService from "../../../api/PolicyService";
 import CreateLoopModal from "../Loop/CreateLoopModal";
+import toJson from "enzyme-to-json";
 
 describe('Verify ViewAllPolicies', () => {
     let toscaPolicyModels = fs.readFileSync('src/components/dialogs/Policy/toscaData.test.json', {
@@ -35,6 +36,11 @@ describe('Verify ViewAllPolicies', () => {
         flag: 'r'
     });
 
+    it("renders correctly", () => {
+        const component = shallow(<ViewAllPolicies />);
+        expect(toJson(component)).toMatchSnapshot();
+    });
+
     it('Test handleClose', () => {
         const historyMock = {push: jest.fn()};
         const handleClose = jest.spyOn(ViewAllPolicies.prototype, 'handleClose');
diff --git a/gui-clamp/ui-react/src/components/dialogs/Policy/__snapshots__/PoliciesTreeViewer.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/Policy/__snapshots__/PoliciesTreeViewer.test.js.snap
new file mode 100644
index 0000000..8d14fa4
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Policy/__snapshots__/PoliciesTreeViewer.test.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify PoliciesTreeViewer renders correctly 1`] = `
+<WithStyles(ForwardRef(TreeView))
+  defaultCollapseIcon={<Memo />}
+  defaultEndIcon={<Memo />}
+  defaultExpandIcon={<Memo />}
+  defaultExpanded={
+    Array [
+      "root",
+    ]
+  }
+  multiSelect={true}
+  onNodeSelect={[Function]}
+>
+  <WithStyles(ForwardRef(TreeItem))
+    key="1"
+    label="ROOT(0)"
+    nodeId={1}
+    onNodeSelect={[Function]}
+  />
+</WithStyles(ForwardRef(TreeView))>
+`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyToscaFileSelector.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyToscaFileSelector.test.js.snap
new file mode 100644
index 0000000..10a5559
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyToscaFileSelector.test.js.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify PolicyToscaFileSelector renders correctly 1`] = `
+<Styled(Modal)
+  backdrop="static"
+  keyboard={false}
+  onHide={[Function]}
+  size="lg"
+>
+  <ModalHeader
+    closeButton={true}
+    closeLabel="Close"
+  >
+    <ModalTitle>
+      Create New Policy Tosca Model
+    </ModalTitle>
+  </ModalHeader>
+  <ModalBody>
+    <FormGroup
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "noGutters": false,
+          },
+          "render": [Function],
+        }
+      }
+      controlId="formPlaintextEmail"
+    >
+      <Col
+        sm="10"
+      >
+        <input
+          accept=".yaml,.yml"
+          id="fileUploadButton"
+          multiple={true}
+          onChange={[Function]}
+          style={
+            Object {
+              "display": "none",
+            }
+          }
+          type="file"
+        />
+        <label
+          htmlFor="fileUploadButton"
+        >
+          <WithStyles(ForwardRef(Button))
+            color="primary"
+            component="span"
+            startIcon={
+              <WithStyles(ForwardRef(SvgIcon))
+                fontSize="small"
+              >
+                <Memo />
+              </WithStyles(ForwardRef(SvgIcon))>
+            }
+            variant="contained"
+          >
+            Upload Files
+          </WithStyles(ForwardRef(Button))>
+          <p>
+            (Only YAML files are supported)
+          </p>
+        </label>
+        <styled.div />
+      </Col>
+    </FormGroup>
+  </ModalBody>
+  <ModalFooter>
+    <WithStyles(ForwardRef(Button))
+      onClick={[Function]}
+      variant="secondary"
+    >
+      Close
+    </WithStyles(ForwardRef(Button))>
+  </ModalFooter>
+</Styled(Modal)>
+`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/Policy/__snapshots__/ViewAllPolicies.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/Policy/__snapshots__/ViewAllPolicies.test.js.snap
new file mode 100644
index 0000000..24b631b
--- /dev/null
+++ b/gui-clamp/ui-react/src/components/dialogs/Policy/__snapshots__/ViewAllPolicies.test.js.snap
@@ -0,0 +1,598 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify ViewAllPolicies renders correctly 1`] = `
+<Fragment>
+  <Styled(Modal)
+    backdrop="static"
+    keyboard={false}
+    onHide={[Function]}
+    show={true}
+    size="xl"
+  >
+    <ModalHeader
+      closeButton={true}
+      closeLabel="Close"
+    />
+    <Tabs
+      id="controlled-tab-example"
+      mountOnEnter={false}
+      onSelect={[Function]}
+      unmountOnExit={false}
+      variant="tabs"
+    >
+      <Tab
+        eventKey="policies"
+        title="Policies in Policy Framework"
+      >
+        <ModalBody>
+          <div>
+            <styled.div>
+              <PoliciesTreeViewer
+                policiesData={Array []}
+                policiesFilterFunction={[Function]}
+                valueForTreeCreation="name"
+              />
+            </styled.div>
+            <styled.div>
+              <WithStyles(Component)
+                actions={
+                  Array [
+                    Object {
+                      "icon": Object {
+                        "$$typeof": Symbol(react.memo),
+                        "compare": null,
+                        "type": Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "render": [Function],
+                        },
+                      },
+                      "onClick": [Function],
+                      "tooltip": "Delete Policy",
+                    },
+                  ]
+                }
+                columns={
+                  Array [
+                    Object {
+                      "cellStyle": Object {
+                        "backgroundColor": "#039be5",
+                        "border": "1px solid black",
+                        "color": "#FFF",
+                      },
+                      "field": "name",
+                      "headerStyle": Object {
+                        "backgroundColor": "#ddd",
+                        "border": "2px solid black",
+                      },
+                      "title": "Policy Name",
+                    },
+                    Object {
+                      "cellStyle": Object {
+                        "backgroundColor": "#039be5",
+                        "border": "1px solid black",
+                        "color": "#FFF",
+                      },
+                      "field": "version",
+                      "headerStyle": Object {
+                        "backgroundColor": "#ddd",
+                        "border": "2px solid black",
+                      },
+                      "title": "Policy Version",
+                    },
+                    Object {
+                      "cellStyle": Object {
+                        "backgroundColor": "#039be5",
+                        "border": "1px solid black",
+                        "color": "#FFF",
+                      },
+                      "field": "type",
+                      "headerStyle": Object {
+                        "backgroundColor": "#ddd",
+                        "border": "2px solid black",
+                      },
+                      "title": "Policy Type",
+                    },
+                    Object {
+                      "cellStyle": Object {
+                        "backgroundColor": "#039be5",
+                        "border": "1px solid black",
+                        "color": "#FFF",
+                      },
+                      "field": "type_version",
+                      "headerStyle": Object {
+                        "backgroundColor": "#ddd",
+                        "border": "2px solid black",
+                      },
+                      "title": "Policy Type Version",
+                    },
+                    Object {
+                      "cellStyle": Object {
+                        "backgroundColor": "#039be5",
+                        "border": "1px solid black",
+                        "color": "#FFF",
+                      },
+                      "field": "supportedPdpGroupsString",
+                      "headerStyle": Object {
+                        "backgroundColor": "#ddd",
+                        "border": "2px solid black",
+                      },
+                      "title": "Deployable in PDP Group",
+                    },
+                    Object {
+                      "cellStyle": Object {
+                        "backgroundColor": "#039be5",
+                        "border": "1px solid black",
+                        "color": "#FFF",
+                      },
+                      "field": "pdpGroupInfoString",
+                      "headerStyle": Object {
+                        "backgroundColor": "#ddd",
+                        "border": "2px solid black",
+                      },
+                      "title": "Deployed in PDP Group",
+                    },
+                  ]
+                }
+                data={Array []}
+                detailPanel={
+                  Array [
+                    Object {
+                      "icon": Object {
+                        "$$typeof": Symbol(react.memo),
+                        "compare": null,
+                        "type": Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "render": [Function],
+                        },
+                      },
+                      "render": [Function],
+                      "tooltip": "Show Configuration",
+                    },
+                    Object {
+                      "icon": Object {
+                        "$$typeof": Symbol(react.memo),
+                        "compare": null,
+                        "type": Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "render": [Function],
+                        },
+                      },
+                      "openIcon": Object {
+                        "$$typeof": Symbol(react.memo),
+                        "compare": null,
+                        "type": Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "render": [Function],
+                        },
+                      },
+                      "render": [Function],
+                      "tooltip": "Show Raw Data",
+                    },
+                    Object {
+                      "icon": Object {
+                        "$$typeof": Symbol(react.memo),
+                        "compare": null,
+                        "type": Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "render": [Function],
+                        },
+                      },
+                      "openIcon": Object {
+                        "$$typeof": Symbol(react.memo),
+                        "compare": null,
+                        "type": Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "render": [Function],
+                        },
+                      },
+                      "render": [Function],
+                      "tooltip": "PDP Group Deployment",
+                    },
+                  ]
+                }
+                icons={
+                  Object {
+                    "Add": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "Check": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "Clear": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "Delete": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "DetailPanel": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "Edit": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "Export": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "Filter": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "FirstPage": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "LastPage": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "NextPage": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "PreviousPage": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "ResetSearch": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "Search": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "SortArrow": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "ThirdStateCheck": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "ViewColumn": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                  }
+                }
+                onRowClick={[Function]}
+                options={
+                  Object {
+                    "actionsColumnIndex": -1,
+                    "exportButton": true,
+                    "grouping": true,
+                    "headerStyle": Object {
+                      "backgroundColor": "#ddd",
+                      "border": "1px solid black",
+                      "fontSize": "15pt",
+                      "text": "bold",
+                    },
+                  }
+                }
+                title="Policies"
+              />
+            </styled.div>
+          </div>
+        </ModalBody>
+      </Tab>
+      <Tab
+        eventKey="tosca models"
+        title="Tosca Models in Policy Framework"
+      >
+        <ModalBody>
+          <div>
+            <styled.div>
+              <PoliciesTreeViewer
+                policiesData={Array []}
+                policiesFilterFunction={[Function]}
+                valueForTreeCreation="policyModelType"
+              />
+            </styled.div>
+            <styled.div>
+              <WithStyles(Component)
+                actions={
+                  Array [
+                    Object {
+                      "icon": Object {
+                        "$$typeof": Symbol(react.memo),
+                        "compare": null,
+                        "type": Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "render": [Function],
+                        },
+                      },
+                      "isFreeAction": true,
+                      "onClick": [Function],
+                      "tooltip": "Add New Tosca Model",
+                    },
+                  ]
+                }
+                columns={
+                  Array [
+                    Object {
+                      "cellStyle": Object {
+                        "backgroundColor": "#039be5",
+                        "border": "1px solid black",
+                        "color": "#FFF",
+                      },
+                      "field": "policyModelType",
+                      "headerStyle": Object {
+                        "backgroundColor": "#ddd",
+                        "border": "2px solid black",
+                      },
+                      "title": "Policy Model Type",
+                    },
+                    Object {
+                      "cellStyle": Object {
+                        "backgroundColor": "#039be5",
+                        "border": "1px solid black",
+                        "color": "#FFF",
+                      },
+                      "field": "policyAcronym",
+                      "headerStyle": Object {
+                        "backgroundColor": "#ddd",
+                        "border": "2px solid black",
+                      },
+                      "title": "Policy Acronym",
+                    },
+                    Object {
+                      "cellStyle": Object {
+                        "backgroundColor": "#039be5",
+                        "border": "1px solid black",
+                        "color": "#FFF",
+                      },
+                      "field": "version",
+                      "headerStyle": Object {
+                        "backgroundColor": "#ddd",
+                        "border": "2px solid black",
+                      },
+                      "title": "Version",
+                    },
+                    Object {
+                      "cellStyle": Object {
+                        "backgroundColor": "#039be5",
+                        "border": "1px solid black",
+                        "color": "#FFF",
+                      },
+                      "field": "updatedBy",
+                      "headerStyle": Object {
+                        "backgroundColor": "#ddd",
+                        "border": "2px solid black",
+                      },
+                      "title": "Uploaded By",
+                    },
+                    Object {
+                      "cellStyle": Object {
+                        "backgroundColor": "#039be5",
+                        "border": "1px solid black",
+                        "color": "#FFF",
+                      },
+                      "editable": "never",
+                      "field": "updatedDate",
+                      "headerStyle": Object {
+                        "backgroundColor": "#ddd",
+                        "border": "2px solid black",
+                      },
+                      "title": "Uploaded Date",
+                    },
+                  ]
+                }
+                data={Array []}
+                detailPanel={
+                  Array [
+                    Object {
+                      "icon": Object {
+                        "$$typeof": Symbol(react.memo),
+                        "compare": null,
+                        "type": Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "render": [Function],
+                        },
+                      },
+                      "render": [Function],
+                      "tooltip": "Show Tosca",
+                    },
+                    Object {
+                      "icon": Object {
+                        "$$typeof": Symbol(react.memo),
+                        "compare": null,
+                        "type": Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "render": [Function],
+                        },
+                      },
+                      "openIcon": Object {
+                        "$$typeof": Symbol(react.memo),
+                        "compare": null,
+                        "type": Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "render": [Function],
+                        },
+                      },
+                      "render": [Function],
+                      "tooltip": "Show Raw Data",
+                    },
+                    Object {
+                      "icon": Object {
+                        "$$typeof": Symbol(react.memo),
+                        "compare": null,
+                        "type": Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "render": [Function],
+                        },
+                      },
+                      "openIcon": Object {
+                        "$$typeof": Symbol(react.memo),
+                        "compare": null,
+                        "type": Object {
+                          "$$typeof": Symbol(react.forward_ref),
+                          "render": [Function],
+                        },
+                      },
+                      "render": [Function],
+                      "tooltip": "Create a policy from this model",
+                    },
+                  ]
+                }
+                icons={
+                  Object {
+                    "Add": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "Check": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "Clear": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "Delete": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "DetailPanel": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "Edit": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "Export": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "Filter": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "FirstPage": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "LastPage": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "NextPage": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "PreviousPage": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "ResetSearch": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "Search": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "SortArrow": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "ThirdStateCheck": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                    "ViewColumn": Object {
+                      "$$typeof": Symbol(react.forward_ref),
+                      "render": [Function],
+                    },
+                  }
+                }
+                onRowClick={[Function]}
+                options={
+                  Object {
+                    "actionsColumnIndex": -1,
+                    "exportButton": true,
+                    "grouping": true,
+                    "headerStyle": Object {
+                      "backgroundColor": "#ddd",
+                      "border": "1px solid black",
+                      "fontSize": "15pt",
+                      "text": "bold",
+                    },
+                  }
+                }
+                title="Tosca Models"
+              />
+            </styled.div>
+          </div>
+        </ModalBody>
+      </Tab>
+    </Tabs>
+    <Alert
+      closeLabel="Close alert"
+      dismissible={true}
+      onClose={[Function]}
+      show={false}
+      transition={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "appear": false,
+            "in": false,
+            "mountOnEnter": false,
+            "timeout": 300,
+            "unmountOnExit": false,
+          },
+          "render": [Function],
+        }
+      }
+      variant="success"
+    >
+      <styled.div />
+    </Alert>
+    <Alert
+      closeLabel="Close alert"
+      dismissible={true}
+      onClose={[Function]}
+      show={false}
+      transition={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "appear": false,
+            "in": false,
+            "mountOnEnter": false,
+            "timeout": 300,
+            "unmountOnExit": false,
+          },
+          "render": [Function],
+        }
+      }
+      variant="danger"
+    >
+      <styled.div />
+    </Alert>
+    <ModalFooter>
+      <Button
+        active={false}
+        disabled={false}
+        onClick={[Function]}
+        variant="secondary"
+      >
+        Close
+      </Button>
+    </ModalFooter>
+  </Styled(Modal)>
+  <PolicyToscaFileSelector
+    disableFunction={[Function]}
+    show={false}
+    toscaTableUpdateFunction={[Function]}
+  />
+</Fragment>
+`;
diff --git a/gui-clamp/ui-react/src/components/dialogs/Policy/toscaPoliciesData.test.json b/gui-clamp/ui-react/src/components/dialogs/Policy/toscaPoliciesData.test.json
index 9305243..a852daf 100644
--- a/gui-clamp/ui-react/src/components/dialogs/Policy/toscaPoliciesData.test.json
+++ b/gui-clamp/ui-react/src/components/dialogs/Policy/toscaPoliciesData.test.json
@@ -88,5 +88,249 @@
     "tableData": {
       "id": 0
     }
+  },
+  {
+    "type": "onap.policies.controlloop.operational.common.Drools",
+    "type_version": "1.0.0",
+    "properties": {
+      "abatement": false,
+      "operations": [
+        {
+          "failure_retries": "final_failure_retries",
+          "id": "test1",
+          "failure_timeout": "final_failure_timeout",
+          "failure": "final_failure",
+          "operation": {
+            "payload": {
+              "artifact_name": "baseconfiguration",
+              "artifact_version": "1.0.0",
+              "mode": "async",
+              "data": "{\"resource-assignment-properties\":{\"request-id\":\"\",\"service-instance-id\":\"\",\"hostname\":\"\",\"request-info\":{\"prop1\":\"\",\"prop2\":\"\"}}}"
+            },
+            "target": {
+              "entityIds": {
+                "resourceID": "Vloadbalancerms..vdns..module-3",
+                "modelInvariantId": "4c10ba9b-f88f-415e-9de3-5d33336047fa",
+                "modelVersionId": "4fa73b49-8a6c-493e-816b-eb401567b720",
+                "modelName": "Vloadbalancerms..vdns..module-3",
+                "modelVersion": "1",
+                "modelCustomizationId": "bafcdab0-801d-4d81-9ead-f464640a38b1"
+              },
+              "targetType": "VNF"
+            },
+            "actor": "SDNR",
+            "operation": "BandwidthOnDemand"
+          },
+          "failure_guard": "final_failure_guard",
+          "retries": 0,
+          "timeout": 0,
+          "failure_exception": "final_failure_exception",
+          "description": "test",
+          "success": "final_success"
+        }
+      ],
+      "trigger": "test1",
+      "timeout": 0,
+      "id": "LOOP_test"
+    },
+    "name": "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd",
+    "version": "1.0.0",
+    "metadata": {
+      "policy-id": "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd",
+      "policy-version": "1.0.0"
+    },
+    "pdpGroupInfo": [
+      {
+        "controlloop": {
+          "name": "controlloop",
+          "description": "This group should be used for managing all control loop related policies and pdps",
+          "pdpGroupState": "ACTIVE",
+          "properties": {},
+          "pdpSubgroups": [
+            {
+              "pdpType": "apex",
+              "supportedPolicyTypes": [
+                {
+                  "name": "onap.policies.controlloop.Operational",
+                  "version": "1.0.0"
+                },
+                {
+                  "name": "onap.policies.controlloop.operational.common.*",
+                  "version": "1.0.0"
+                }
+              ],
+              "policies": [
+                {
+                  "name": "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd",
+                  "version": "1.0.0"
+                }
+              ],
+              "currentInstanceCount": 0,
+              "desiredInstanceCount": 1,
+              "properties": {},
+              "pdpInstances": [
+                {
+                  "instanceId": "controlloop-f8287777-5f3e-4f0f-b21b-d8829c93f57b",
+                  "pdpState": "ACTIVE",
+                  "healthy": "HEALTHY",
+                  "message": "Pdp Heartbeat",
+                  "lastUpdate": "2021-09-29T02:51:21Z"
+                }
+              ]
+            },
+            {
+              "pdpType": "drools",
+              "supportedPolicyTypes": [
+                {
+                  "name": "onap.policies.controlloop.operational.common.*",
+                  "version": "1.0.0"
+                },
+                {
+                  "name": "onap.policies.controlloop.Operational",
+                  "version": "1.0.0"
+                }
+              ],
+              "policies": [
+                {
+                  "name": "OPERATIONAL_vLoadBalancerMS_v1_0_Drools_1_0_0_7xd",
+                  "version": "1.0.0"
+                }
+              ],
+              "currentInstanceCount": 0,
+              "desiredInstanceCount": 1,
+              "properties": {},
+              "pdpInstances": [
+                {
+                  "instanceId": "drools-f8287777-5f3e-4f0f-b21b-d8829c93f57b",
+                  "pdpState": "ACTIVE",
+                  "healthy": "HEALTHY",
+                  "message": "Pdp Heartbeat",
+                  "lastUpdate": "2021-09-29T02:51:21Z"
+                }
+              ]
+            }
+          ]
+        }
+      }
+    ],
+    "supportedPdpGroups": [
+      {
+        "controlloop": [
+          "apex",
+          "drools"
+        ]
+      }
+    ],
+    "supportedPdpGroupsString": "controlloop/apex\r\ncontrolloop/drools\r\n",
+    "pdpGroupInfoString": "controlloop/apex (ACTIVE)\r\ncontrolloop/drools (ACTIVE)\r\n",
+    "tableData": {
+      "id": 1
+    }
+  },
+  {
+    "type": "onap.policies.Naming",
+    "type_version": "1.0.0",
+    "properties": {
+      "naming-models": [
+        {
+          "naming-type": "VNF",
+          "naming-recipe": "AIC_CLOUD_REGION|DELIMITER|CONSTANT|DELIMITER|TIMESTAMP",
+          "name-operation": "to_lower_case()",
+          "naming-properties": [
+            {
+              "property-name": "AIC_CLOUD_REGION"
+            },
+            {
+              "property-name": "CONSTANT",
+              "property-value": "onap-nf"
+            },
+            {
+              "property-name": "TIMESTAMP"
+            },
+            {
+              "property-value": "-",
+              "property-name": "DELIMITER"
+            }
+          ]
+        },
+        {
+          "naming-type": "VNFC",
+          "naming-recipe": "VNF_NAME|DELIMITER|NFC_NAMING_CODE|DELIMITER|SEQUENCE",
+          "name-operation": "to_lower_case()",
+          "naming-properties": [
+            {
+              "property-name": "VNF_NAME"
+            },
+            {
+              "property-name": "SEQUENCE",
+              "increment-sequence": {
+                "max": "zzz",
+                "scope": "ENTIRETY",
+                "start-value": "1",
+                "length": "3",
+                "increment": "1",
+                "sequence-type": "alpha-numeric"
+              }
+            },
+            {
+              "property-name": "NFC_NAMING_CODE"
+            },
+            {
+              "property-value": "-",
+              "property-name": "DELIMITER"
+            }
+          ]
+        },
+        {
+          "naming-type": "VF-MODULE",
+          "naming-recipe": "VNF_NAME|DELIMITER|VF_MODULE_LABEL|DELIMITER|VF_MODULE_TYPE|DELIMITER|SEQUENCE",
+          "name-operation": "to_lower_case()",
+          "naming-properties": [
+            {
+              "property-name": "VNF_NAME"
+            },
+            {
+              "property-value": "-",
+              "property-name": "DELIMITER"
+            },
+            {
+              "property-name": "VF_MODULE_LABEL"
+            },
+            {
+              "property-name": "VF_MODULE_TYPE"
+            },
+            {
+              "property-name": "SEQUENCE",
+              "increment-sequence": {
+                "max": "zzz",
+                "scope": "PRECEEDING",
+                "start-value": "1",
+                "length": "3",
+                "increment": "1",
+                "sequence-type": "alpha-numeric"
+              }
+            }
+          ]
+        }
+      ],
+      "policy-instance-name": "ONAP_NF_NAMING_TIMESTAMP"
+    },
+    "name": "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP",
+    "version": "1.0.0",
+    "metadata": {
+      "policy-id": "SDNC_Policy.ONAP_NF_NAMING_TIMESTAMP",
+      "policy-version": "1.0.0"
+    },
+    "supportedPdpGroups": [
+      {
+        "monitoring": [
+          "xacml"
+        ]
+      }
+    ],
+    "supportedPdpGroupsString": "monitoring/xacml\r\n",
+    "tableData": {
+      "id": 2
+    }
   }
 ]
\ No newline at end of file
diff --git a/gui-clamp/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js b/gui-clamp/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
index d93f0b0..fd52761 100644
--- a/gui-clamp/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
+++ b/gui-clamp/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js
@@ -2,8 +2,8 @@
  * ============LICENSE_START=======================================================
  * ONAP CLAMP
  * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- *                             reserved.
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
+ * Modifications Copyright (C) 2022 Nordix Foundation.
  * ================================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -68,7 +68,7 @@ describe('Verify ViewLoopTemplatesModal', () => {
         }
       });
     });
-    const component = shallow(<ViewLoopTemplatesModal/>);
+    shallow(<ViewLoopTemplatesModal/>);
   });
 
   it('Test API Rejection', () => {
@@ -78,7 +78,7 @@ describe('Verify ViewLoopTemplatesModal', () => {
       }),
       100
     );
-    const component = shallow(<ViewLoopTemplatesModal/>);
+    shallow(<ViewLoopTemplatesModal/>);
     expect(myMockFunc.mock.calls.length).toBe(1);
   });