diff options
Diffstat (limited to 'ui-react/src/components')
10 files changed, 156 insertions, 40 deletions
diff --git a/ui-react/src/components/dialogs/DeployLoop.js b/ui-react/src/components/dialogs/DeployLoop.js index 805f0f29..d71af924 100644 --- a/ui-react/src/components/dialogs/DeployLoop.js +++ b/ui-react/src/components/dialogs/DeployLoop.js @@ -64,14 +64,13 @@ export default class DeployLoop extends React.Component { LoopService.updateGlobalProperties(loopName, this.state.temporaryPropertiesJson).then(resp => { this.setState({ show: false }); - console.log("Perform action: deploy"); LoopActionService.performAction(loopName, "deploy").then(pars => { - alert("Action deploy successfully performed"); + this.props.showAlert("Action deploy successfully performed"); // refresh status and update loop logs this.refreshStatus(loopName); }) .catch(error => { - alert("Action deploy failed"); + this.props.showAlert("Action deploy failed"); // refresh status and update loop logs this.refreshStatus(loopName); }); @@ -84,7 +83,7 @@ export default class DeployLoop extends React.Component { this.props.history.push('/'); }) .catch(error => { - alert("Refresh status failed"); + this.props.showAlert("Refresh status failed"); this.props.history.push('/'); }); } diff --git a/ui-react/src/components/dialogs/DeployLoop.test.js b/ui-react/src/components/dialogs/DeployLoop.test.js index 2959ed65..44bc7837 100644 --- a/ui-react/src/components/dialogs/DeployLoop.test.js +++ b/ui-react/src/components/dialogs/DeployLoop.test.js @@ -61,6 +61,7 @@ describe('Verify DeployLoop', () => { const flushPromises = () => new Promise(setImmediate); const historyMock = { push: jest.fn() }; const updateLoopFunction = jest.fn(); + const showAlert = jest.fn(); const handleSave = jest.spyOn(DeployLoop.prototype,'handleSave'); LoopService.updateGlobalProperties = jest.fn().mockImplementation(() => { return Promise.resolve({ @@ -83,10 +84,9 @@ describe('Verify DeployLoop', () => { json: () => {} }); }); - const jsdomAlert = window.alert; - window.alert = () => {}; + const component = shallow(<DeployLoop history={historyMock} - loopCache={loopCache} updateLoopFunction={updateLoopFunction} />) + loopCache={loopCache} updateLoopFunction={updateLoopFunction} showAlert={showAlert} />) component.find('[variant="primary"]').prop('onClick')(); await flushPromises(); @@ -95,7 +95,6 @@ describe('Verify DeployLoop', () => { expect(handleSave).toHaveBeenCalledTimes(1); expect(component.state('show')).toEqual(false); expect(historyMock.push.mock.calls[0]).toEqual([ '/']); - window.alert = jsdomAlert; handleSave.mockClear(); }); diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js index 4dc1f90a..5c5f0241 100644 --- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js +++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js @@ -54,7 +54,7 @@ export default class OperationalPolicyModal extends React.Component { if (errors.length !== 0) { console.error("Errors detected during config policy data validation ", errors); - alert(errors); + this.props.showAlert(errors); } else { console.info("NO validation errors found in config policy data"); diff --git a/ui-react/src/components/dialogs/PerformActions.js b/ui-react/src/components/dialogs/PerformActions.js index 9c34e141..66b19286 100644 --- a/ui-react/src/components/dialogs/PerformActions.js +++ b/ui-react/src/components/dialogs/PerformActions.js @@ -50,14 +50,14 @@ export default class PerformActions extends React.Component { componentDidMount() { const action = this.state.loopAction; const loopName = this.state.loopName; - console.log("Perform action:" + action); + LoopActionService.performAction(loopName, action).then(pars => { - alert("Action " + action + " successfully performed"); + this.props.showAlert("Action " + action + " successfully performed"); // refresh status and update loop logs this.refreshStatus(loopName); }) .catch(error => { - alert("Action " + action + " failed"); + this.props.showAlert("Action " + action + " failed"); // refresh status and update loop logs this.refreshStatus(loopName); }); diff --git a/ui-react/src/components/dialogs/PerformActions.test.js b/ui-react/src/components/dialogs/PerformActions.test.js index 56fdcf39..0b078629 100644 --- a/ui-react/src/components/dialogs/PerformActions.test.js +++ b/ui-react/src/components/dialogs/PerformActions.test.js @@ -36,6 +36,7 @@ describe('Verify PerformActions', () => { const flushPromises = () => new Promise(setImmediate); const historyMock = { push: jest.fn() }; const updateLoopFunction = jest.fn(); + const showAlert = jest.fn(); LoopActionService.refreshStatus = jest.fn().mockImplementation(() => { return Promise.resolve({ @@ -44,21 +45,19 @@ describe('Verify PerformActions', () => { json: () => {} }); }); - const jsdomAlert = window.alert; - window.alert = () => {}; const component = shallow(<PerformActions loopCache={loopCache} - loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} />) + loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showAlert={showAlert} />) await flushPromises(); component.update(); expect(historyMock.push.mock.calls[0]).toEqual([ '/']); - window.alert = jsdomAlert; }); it('Test the render method action successful', async () => { const flushPromises = () => new Promise(setImmediate); const historyMock = { push: jest.fn() }; const updateLoopFunction = jest.fn(); + const showAlert = jest.fn(); LoopActionService.performAction = jest.fn().mockImplementation(() => { return Promise.resolve({ @@ -74,15 +73,12 @@ describe('Verify PerformActions', () => { json: () => {} }); }); - const jsdomAlert = window.alert; - window.alert = () => {}; const component = shallow(<PerformActions loopCache={loopCache} - loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} />) + loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showAlert={showAlert} />) await flushPromises(); component.update(); expect(historyMock.push.mock.calls[0]).toEqual([ '/']); - window.alert = jsdomAlert; }); }); diff --git a/ui-react/src/components/dialogs/RefreshStatus.js b/ui-react/src/components/dialogs/RefreshStatus.js index cf08655e..64b35d99 100644 --- a/ui-react/src/components/dialogs/RefreshStatus.js +++ b/ui-react/src/components/dialogs/RefreshStatus.js @@ -22,7 +22,7 @@ */ import React from 'react'; import LoopActionService from '../../api/LoopActionService'; -import Spinner from 'react-bootstrap/Spinner' +import Spinner from 'react-bootstrap/Spinner'; import styled from 'styled-components'; const StyledSpinnerDiv = styled.div` @@ -42,15 +42,14 @@ export default class RefreshStatus extends React.Component { } componentDidMount() { - console.log("Refresh status for: " + this.state.loopName); // refresh status and update loop logs LoopActionService.refreshStatus(this.state.loopName).then(data => { - alert("Status successfully refreshed") + this.props.showAlert("Status successfully refreshed"); this.props.updateLoopFunction(data); this.props.history.push('/'); }) .catch(error => { - alert("Status refreshing failed"); + this.props.showAlert("Status refreshing failed"); this.props.history.push('/'); }); } diff --git a/ui-react/src/components/dialogs/RefreshStatus.test.js b/ui-react/src/components/dialogs/RefreshStatus.test.js index cb782ad2..3038eb32 100644 --- a/ui-react/src/components/dialogs/RefreshStatus.test.js +++ b/ui-react/src/components/dialogs/RefreshStatus.test.js @@ -35,21 +35,20 @@ describe('Verify RefreshStatus', () => { it('Test refresh status failed', async () => { const flushPromises = () => new Promise(setImmediate); const historyMock = { push: jest.fn() }; + const showAlert = jest.fn(); - const jsdomAlert = window.alert; - window.alert = () => {}; - const component = shallow(<RefreshStatus loopCache={loopCache} history={historyMock} />) + const component = shallow(<RefreshStatus loopCache={loopCache} history={historyMock} showAlert={showAlert} />) await flushPromises(); component.update(); expect(historyMock.push.mock.calls[0]).toEqual([ '/']); - window.alert = jsdomAlert; }); it('Test refresh status successful', async () => { const flushPromises = () => new Promise(setImmediate); const historyMock = { push: jest.fn() }; const updateLoopFunction = jest.fn(); + const showAlert = jest.fn(); LoopActionService.refreshStatus = jest.fn().mockImplementation(() => { return Promise.resolve({ @@ -58,15 +57,13 @@ describe('Verify RefreshStatus', () => { json: () => {} }); }); - const jsdomAlert = window.alert; - window.alert = () => {}; + const component = shallow(<RefreshStatus loopCache={loopCache} - loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} />) + loopAction="submit" history={historyMock} updateLoopFunction={updateLoopFunction} showAlert={showAlert} />) await flushPromises(); component.update(); expect(historyMock.push.mock.calls[0]).toEqual([ '/']); - window.alert = jsdomAlert; }); }); diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js index 48f0335f..06cfd238 100644 --- a/ui-react/src/components/loop_viewer/svg/LoopSvg.js +++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.js @@ -61,7 +61,7 @@ class LoopViewSvg extends React.Component { return this.state.svgContent !== nextState.svgContent; } - componentWillReceiveProps(newProps) { + componentWillReceiveProps(newProps) { if (this.state.loopCache !== newProps.loopCache) { this.setState({ loopCache: 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 5a28328c..63518546 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 23d22256..cecfb425 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]} +/> `; |