diff options
Diffstat (limited to 'src/app/vnfSearch')
-rw-r--r-- | src/app/vnfSearch/VnfSearch.jsx | 2 | ||||
-rw-r--r-- | src/app/vnfSearch/VnfSearch.test.js | 49 | ||||
-rw-r--r-- | src/app/vnfSearch/VnfSearchActions.js | 3 | ||||
-rw-r--r-- | src/app/vnfSearch/VnfSearchActions.test.js | 215 | ||||
-rw-r--r-- | src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx | 2 | ||||
-rw-r--r-- | src/app/vnfSearch/VnfSearchNfRoleVisualization.test.js | 154 | ||||
-rw-r--r-- | src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx | 2 | ||||
-rw-r--r-- | src/app/vnfSearch/VnfSearchNfTypeVisualization.test.js | 154 | ||||
-rw-r--r-- | src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx | 2 | ||||
-rw-r--r-- | src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.test.js | 154 | ||||
-rw-r--r-- | src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx | 2 | ||||
-rw-r--r-- | src/app/vnfSearch/VnfSearchProvStatusVisualization.test.js | 154 | ||||
-rw-r--r-- | src/app/vnfSearch/VnfSearchReducer.test.js | 438 | ||||
-rw-r--r-- | src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx | 2 | ||||
-rw-r--r-- | src/app/vnfSearch/VnfSearchTotalCountVisualization.test.js | 131 |
15 files changed, 1455 insertions, 9 deletions
diff --git a/src/app/vnfSearch/VnfSearch.jsx b/src/app/vnfSearch/VnfSearch.jsx index dbcc73d..a409ce2 100644 --- a/src/app/vnfSearch/VnfSearch.jsx +++ b/src/app/vnfSearch/VnfSearch.jsx @@ -157,7 +157,7 @@ let mapActionToProps = (dispatch) => { }; }; -class vnfSearch extends Component { +export class vnfSearch extends Component { static propTypes = { feedbackMsgText: React.PropTypes.string, feedbackSeverity: React.PropTypes.string, diff --git a/src/app/vnfSearch/VnfSearch.test.js b/src/app/vnfSearch/VnfSearch.test.js new file mode 100644 index 0000000..c6c63fc --- /dev/null +++ b/src/app/vnfSearch/VnfSearch.test.js @@ -0,0 +1,49 @@ +import React from 'react'; +import { shallow, mount } from 'enzyme'; +import {Provider} from 'react-redux' +import configureStore from 'redux-mock-store'; + +import ConnectedVnfSearch, { vnfSearch } from './VnfSearch.jsx'; + +describe('VnfSearch - Shallow render of component', () => { + let wrapper; + const vnfFilters = {}; + const vnfVisualizationPanelClass = 'collapsible-panel-main-panel'; + const unifiedFilterValues = {}; + + beforeEach( () => { + wrapper = shallow( + <vnfSearch + vnfFilters={vnfFilters} + unifiedFilterValues={unifiedFilterValues} + vnfVisualizationPanelClass={vnfVisualizationPanelClass} + /> + ); + }) + + it('Render basic component', () => { + expect(wrapper.length).toEqual(1); + }); +}) +// +// describe('VnfSearch - Render React Component (wrapped in <Provider>)', () => { +// const initialState = { +// vnfSearch: {} +// }; +// const mockStore = configureStore(); +// let store, wrapper; +// +// beforeEach( () => { +// store = mockStore(initialState); +// wrapper = mount(<Provider store={store}><ConnectedVnfSearch /></Provider>); +// }) +// +// it('Render the connected component', () => { +// expect(wrapper.find(ConnectedVnfSearch).length).toEqual(1); +// }); +// +// it('Validate props from store', () => { +// expect(wrapper.find(VnfSearchNfRoleVisualization).props().enableBusyFeedback).toEqual(initialState.vnfSearch.enableBusyFeedback); +// expect(wrapper.find(VnfSearchNfRoleVisualization).props().processedNfRoleCountChartData).toEqual(initialState.vnfSearch.processedNfRoleCountChartData); +// }); +// }) diff --git a/src/app/vnfSearch/VnfSearchActions.js b/src/app/vnfSearch/VnfSearchActions.js index 4ca149d..20290d6 100644 --- a/src/app/vnfSearch/VnfSearchActions.js +++ b/src/app/vnfSearch/VnfSearchActions.js @@ -39,9 +39,6 @@ import { } from 'app/globalInlineMessageBar/GlobalInlineMessageBarActions.js'; import {MESSAGE_LEVEL_WARNING} from 'utils/GlobalConstants.js'; -let fetch = require('node-fetch'); -fetch.Promise = require('es6-promise').Promise; - const itemKeyWord = 'key'; const countKeyWord = 'doc_count'; diff --git a/src/app/vnfSearch/VnfSearchActions.test.js b/src/app/vnfSearch/VnfSearchActions.test.js new file mode 100644 index 0000000..927e6ab --- /dev/null +++ b/src/app/vnfSearch/VnfSearchActions.test.js @@ -0,0 +1,215 @@ +import configureStore from 'redux-mock-store'; +import thunk from 'redux-thunk' +import fetchMock from 'fetch-mock'; + +import { + processVnfFilterPanelCollapse, + clearVnfSearchData, + setNotificationText, + processVnfVisualizationsOnFilterChange +} from './VnfSearchActions.js'; +import { + vnfActionTypes, + CHART_PROV_STATUS, + CHART_ORCH_STATUS, + CHART_NF_TYPE, + CHART_NF_ROLE, + TOTAL_VNF_COUNT, + VNF_FILTER_EMPTY_RESULT +} from 'app/vnfSearch/VnfSearchConstants.js'; +import { globalInlineMessageBarActionTypes } from 'app/globalInlineMessageBar/GlobalInlineMessageBarConstants.js'; +import { ERROR_RETRIEVING_DATA } from 'app/networking/NetworkConstants.js'; + +describe('VnfSearchAction - Action Tests', () => { + it('Action: processVnfFilterPanelCollapse - open', () => { + const result = processVnfFilterPanelCollapse(true); + expect(result).toEqual({ + type: vnfActionTypes.VNF_FILTER_PANEL_TOGGLED, + data: { + vnfVisualizationPanelClass: 'collapsible-panel-main-panel vertical-filter-panel-is-open' + } + }); + }); + + it('Action: processVnfFilterPanelCollapse - close', () => { + const result = processVnfFilterPanelCollapse(false); + expect(result).toEqual({ + type: vnfActionTypes.VNF_FILTER_PANEL_TOGGLED, + data: { + vnfVisualizationPanelClass: 'collapsible-panel-main-panel' + } + }); + }); + + it('Action: clearVnfSearchData', () => { + const result = clearVnfSearchData(); + expect(result).toEqual({ + type: vnfActionTypes.VNF_SEARCH_RESULTS_RECEIVED, + data: { + count: '', + provStatusData: CHART_PROV_STATUS.emptyData, + orchStatusData: CHART_ORCH_STATUS.emptyData, + nfTypeData: CHART_NF_TYPE.emptyData, + nfRoleData: CHART_NF_ROLE.emptyData + } + }); + }); + + it('Action: setNotificationText - with message', () => { + const middlewares = [thunk]; + const mockStore = configureStore(middlewares); + const store = mockStore({ vnfSearch: {} }); + store.dispatch(setNotificationText('test error message', 'WARNING')); + const actions = store.getActions(); + expect(actions).toEqual([{ + type: globalInlineMessageBarActionTypes.SET_GLOBAL_MESSAGE, + data: { + msgText: 'test error message', + msgSeverity: 'WARNING' + } + }]); + }); + + it('Action: processVnfVisualizationsOnFilterChange - data for filter values', () => { + const middlewares = [thunk]; + const mockStore = configureStore(middlewares); + const store = mockStore({ vnfSearch: {} }); + const filterValueMap = { + 1: 'Running', + 2: 'Junk', + 7: 'Blah', + 8: 'Doh' + }; + const expectedActions = [ + { type: vnfActionTypes.VNF_ACTIVATE_BUSY_FEEDBACK }, + { type: globalInlineMessageBarActionTypes.CLEAR_GLOBAL_MESSAGE }, + { + type: vnfActionTypes.VNF_SEARCH_RESULTS_RECEIVED, + data: { + count: 10, + provStatusData: { + values: [ + { x: 'junk', y: 10 } + ] + }, + orchStatusData: { + values: [ + { x: 'running', y: 10 } + ] + }, + nfTypeData: { + values: [ + { x: 'doh', y: 10 } + ] + }, + nfRoleData: { + values: [ + { x: 'blah', y: 10 } + ] + } + } + }, + { type: vnfActionTypes.VNF_DISABLE_BUSY_FEEDBACK } + ]; + fetchMock.mock('*', { + "total": 10, + "aggregations":{ + "nf-role":[{"doc_count":10,"key":"blah"}], + "nf-type":[{"doc_count":10,"key":"doh"}], + "prov-status":[{"doc_count":10,"key":"junk"}], + "orchestration-status":[{"doc_count":10,"key":"running"}] + } + }); + + return store.dispatch(processVnfVisualizationsOnFilterChange(filterValueMap)) + .then( () => { + const actions = store.getActions(); + expect(actions).toEqual(expectedActions); + fetchMock.restore(); + }); + }); + + it('Action: processVnfVisualizationsOnFilterChange - no data for filter values', () => { + const middlewares = [thunk]; + const mockStore = configureStore(middlewares); + const store = mockStore({ vnfSearch: {} }); + const filterValueMap = { + 1: 'Running', + 2: 'Junk', + 7: '', + 8: 'Doh' + }; + const expectedActions = [ + { type: vnfActionTypes.VNF_ACTIVATE_BUSY_FEEDBACK }, + { type: globalInlineMessageBarActionTypes.SET_GLOBAL_MESSAGE, + data: { msgSeverity: "warning", msgText: VNF_FILTER_EMPTY_RESULT } + }, + { + type: vnfActionTypes.VNF_SEARCH_RESULTS_RECEIVED, + data: { + count: TOTAL_VNF_COUNT.emptyData, + provStatusData: CHART_PROV_STATUS.emptyData, + orchStatusData: CHART_ORCH_STATUS.emptyData, + nfTypeData: CHART_NF_TYPE.emptyData, + nfRoleData: CHART_NF_ROLE.emptyData + } + }, + { type: vnfActionTypes.VNF_DISABLE_BUSY_FEEDBACK } + ]; + fetchMock.mock('*', { + "total": 0, + "aggregations":{ + "nf-role":[], + "nf-type":[], + "prov-status":[], + "orchestration-status":[] + } + }); + + return store.dispatch(processVnfVisualizationsOnFilterChange(filterValueMap)) + .then( () => { + const actions = store.getActions(); + expect(actions).toEqual(expectedActions); + fetchMock.restore(); + }); + }); + + it('Action: processVnfVisualizationsOnFilterChange - network error', () => { + const middlewares = [thunk]; + const mockStore = configureStore(middlewares); + const store = mockStore({ vnfSearch: {} }); + const filterValueMap = { + 1: 'Running', + 2: 'Junk', + 7: 'Blah', + 8: 'Doh' + }; + const expectedActions = [ + { type: vnfActionTypes.VNF_ACTIVATE_BUSY_FEEDBACK }, + { type: vnfActionTypes.VNF_DISABLE_BUSY_FEEDBACK }, + { + type: vnfActionTypes.VNF_NETWORK_ERROR, + data: { errorMsg: ERROR_RETRIEVING_DATA } + } + ]; + fetchMock.mock('*', 503); + + return store.dispatch(processVnfVisualizationsOnFilterChange(filterValueMap)) + .then( () => { + const actions = store.getActions(); + expect(actions).toEqual(expectedActions); + fetchMock.restore(); + }); + }); + + it('Action: setNotificationText - no message', () => { + const middlewares = [thunk]; + const mockStore = configureStore(middlewares); + const store = mockStore({ vnfSearch: {} }); + store.dispatch(setNotificationText('', '')); + const actions = store.getActions(); + expect(actions).toEqual([{ + type: globalInlineMessageBarActionTypes.CLEAR_GLOBAL_MESSAGE + }]); + }); +}) diff --git a/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx b/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx index 5d09ac4..a71b2ab 100644 --- a/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx @@ -48,7 +48,7 @@ let mapStateToProps = ({vnfSearch}) => { }; }; -class VnfSearchNfRoleVisualization extends Component { +export class VnfSearchNfRoleVisualization extends Component { static propTypes = { processedNfRoleCountChartData: React.PropTypes.object, enableBusyFeedback: React.PropTypes.bool diff --git a/src/app/vnfSearch/VnfSearchNfRoleVisualization.test.js b/src/app/vnfSearch/VnfSearchNfRoleVisualization.test.js new file mode 100644 index 0000000..cf94925 --- /dev/null +++ b/src/app/vnfSearch/VnfSearchNfRoleVisualization.test.js @@ -0,0 +1,154 @@ +import React from 'react'; +import { shallow, mount } from 'enzyme'; +import {Provider} from 'react-redux' +import configureStore from 'redux-mock-store'; +import { BarChart } from 'recharts'; + +import ConnectedVnfSearchNfRoleVisualization, + { VnfSearchNfRoleVisualization } from './VnfSearchNfRoleVisualization.jsx'; +import { CHART_NF_ROLE } from './VnfSearchConstants.js'; +import Spinner from 'utils/SpinnerContainer.jsx'; + +describe('VnfSearchNfRoleVisualization - Shallow render of component', () => { + let wrapper; + const processedNfRoleCountChartDataProp = { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchNfRoleVisualization + enableBusyFeedback={false} + processedNfRoleCountChartData={processedNfRoleCountChartDataProp} + /> + ); + }) + + it('Render basic component', () => { + expect(wrapper.length).toEqual(1); + expect(wrapper.hasClass('visualizations')).toEqual(true); + }); + + it('Verify Spinner is present but not visible', () => { + expect(wrapper.find(Spinner)).toHaveLength(1); + expect(wrapper.find(Spinner).props().loading).toEqual(false); + }); + + it('Verify BarChart is displayed', () => { + expect(wrapper.find(BarChart)).toHaveLength(1); + expect(wrapper.find(BarChart).props().data).toEqual(processedNfRoleCountChartDataProp.values); + }); +}) + +describe('VnfSearchNfRoleVisualization - Shallow render of component with no chart data', () => { + let wrapper; + const processedNfRoleCountChartDataProp = { + values: null + }; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchNfRoleVisualization + enableBusyFeedback={false} + processedNfRoleCountChartData={processedNfRoleCountChartDataProp} + /> + ); + }) + + it('Visualization graph hidden', () => { + expect(wrapper.length).toEqual(1); + expect(['visualizations', 'hidden'].every(className => wrapper.hasClass(className))).toEqual(true); + }); +}) + +describe('VnfSearchNfRoleVisualization - Shallow render of component with busy feedback', () => { + let wrapper; + const processedNfRoleCountChartDataProp = { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchNfRoleVisualization + enableBusyFeedback={true} + processedNfRoleCountChartData={processedNfRoleCountChartDataProp} + /> + ); + }) + + it('Render basic component', () => { + expect(wrapper.length).toEqual(1); + expect(wrapper.hasClass('visualizations')).toEqual(true); + }); + + it('Verify Spinner is present and visible', () => { + expect(wrapper.find(Spinner)).toHaveLength(1); + expect(wrapper.find(Spinner).props().loading).toEqual(true); + }); + + it('Verify BarChart is displayed', () => { + expect(wrapper.find(BarChart)).toHaveLength(1); + expect(wrapper.find(BarChart).props().data).toEqual(processedNfRoleCountChartDataProp.values); + }); +}) + +describe('VnfSearchNfRoleVisualization - Render React Component (wrapped in <Provider>)', () => { + const initialState = { + vnfSearch: { + processedNfRoleCountChartData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + enableBusyFeedback: false + } + }; + const mockStore = configureStore(); + let store, wrapper; + + beforeEach( () => { + store = mockStore(initialState); + wrapper = mount(<Provider store={store}><ConnectedVnfSearchNfRoleVisualization /></Provider>); + }) + + it('Render the connected component', () => { + expect(wrapper.find(ConnectedVnfSearchNfRoleVisualization).length).toEqual(1); + }); + + it('Validate props from store', () => { + expect(wrapper.find(VnfSearchNfRoleVisualization).props().enableBusyFeedback).toEqual(initialState.vnfSearch.enableBusyFeedback); + expect(wrapper.find(VnfSearchNfRoleVisualization).props().processedNfRoleCountChartData).toEqual(initialState.vnfSearch.processedNfRoleCountChartData); + }); +}) + +describe('VnfSearchNfRoleVisualization - Render React Component (wrapped in <Provider>) with default props', () => { + const initialState = { + vnfSearch: {} + }; + const mockStore = configureStore(); + let store, wrapper; + + beforeEach( () => { + store = mockStore(initialState); + wrapper = mount(<Provider store={store}><ConnectedVnfSearchNfRoleVisualization /></Provider>); + }) + + it('Render the connected component', () => { + expect(wrapper.find(ConnectedVnfSearchNfRoleVisualization).length).toEqual(1); + }); + + it('Validate default props loaded', () => { + expect(wrapper.find(VnfSearchNfRoleVisualization).props().enableBusyFeedback).toEqual(false); + expect(wrapper.find(VnfSearchNfRoleVisualization).props().processedNfRoleCountChartData).toEqual(CHART_NF_ROLE.emptyData); + }); +}) diff --git a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx index 5b540d9..492d1c9 100644 --- a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx @@ -48,7 +48,7 @@ let mapStateToProps = ({vnfSearch}) => { }; }; -class VnfSearchNfTypeVisualization extends Component { +export class VnfSearchNfTypeVisualization extends Component { static propTypes = { processedNfTypeCountChartData: React.PropTypes.object, enableBusyFeedback: React.PropTypes.bool diff --git a/src/app/vnfSearch/VnfSearchNfTypeVisualization.test.js b/src/app/vnfSearch/VnfSearchNfTypeVisualization.test.js new file mode 100644 index 0000000..bbb2907 --- /dev/null +++ b/src/app/vnfSearch/VnfSearchNfTypeVisualization.test.js @@ -0,0 +1,154 @@ +import React from 'react'; +import { shallow, mount } from 'enzyme'; +import {Provider} from 'react-redux' +import configureStore from 'redux-mock-store'; +import { BarChart } from 'recharts'; + +import ConnectedVnfSearchNfTypeVisualization, + { VnfSearchNfTypeVisualization } from './VnfSearchNfTypeVisualization.jsx'; +import { CHART_NF_TYPE } from './VnfSearchConstants.js'; +import Spinner from 'utils/SpinnerContainer.jsx'; + +describe('VnfSearchNfTypeVisualization - Shallow render of component', () => { + let wrapper; + const processedNfTypeCountChartDataProp = { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchNfTypeVisualization + enableBusyFeedback={false} + processedNfTypeCountChartData={processedNfTypeCountChartDataProp} + /> + ); + }) + + it('Render basic component', () => { + expect(wrapper.length).toEqual(1); + expect(wrapper.hasClass('visualizations')).toEqual(true); + }); + + it('Verify Spinner is present but not visible', () => { + expect(wrapper.find(Spinner)).toHaveLength(1); + expect(wrapper.find(Spinner).props().loading).toEqual(false); + }); + + it('Verify BarChart is displayed', () => { + expect(wrapper.find(BarChart)).toHaveLength(1); + expect(wrapper.find(BarChart).props().data).toEqual(processedNfTypeCountChartDataProp.values); + }); +}) + +describe('VnfSearchNfTypeVisualization - Shallow render of component with no chart data', () => { + let wrapper; + const processedNfTypeCountChartDataProp = { + values: null + }; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchNfTypeVisualization + enableBusyFeedback={false} + processedNfTypeCountChartData={processedNfTypeCountChartDataProp} + /> + ); + }) + + it('Visualization graph hidden', () => { + expect(wrapper.length).toEqual(1); + expect(['visualizations', 'hidden'].every(className => wrapper.hasClass(className))).toEqual(true); + }); +}) + +describe('VnfSearchNfTypeVisualization - Shallow render of component with busy feedback', () => { + let wrapper; + const processedNfTypeCountChartDataProp = { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchNfTypeVisualization + enableBusyFeedback={true} + processedNfTypeCountChartData={processedNfTypeCountChartDataProp} + /> + ); + }) + + it('Render basic component', () => { + expect(wrapper.length).toEqual(1); + expect(wrapper.hasClass('visualizations')).toEqual(true); + }); + + it('Verify Spinner is present and visible', () => { + expect(wrapper.find(Spinner)).toHaveLength(1); + expect(wrapper.find(Spinner).props().loading).toEqual(true); + }); + + it('Verify BarChart is displayed', () => { + expect(wrapper.find(BarChart)).toHaveLength(1); + expect(wrapper.find(BarChart).props().data).toEqual(processedNfTypeCountChartDataProp.values); + }); +}) + +describe('VnfSearchNfTypeVisualization - Render React Component (wrapped in <Provider>)', () => { + const initialState = { + vnfSearch: { + processedNfTypeCountChartData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + enableBusyFeedback: false + } + }; + const mockStore = configureStore(); + let store, wrapper; + + beforeEach( () => { + store = mockStore(initialState); + wrapper = mount(<Provider store={store}><ConnectedVnfSearchNfTypeVisualization /></Provider>); + }) + + it('Render the connected component', () => { + expect(wrapper.find(ConnectedVnfSearchNfTypeVisualization).length).toEqual(1); + }); + + it('Validate props from store', () => { + expect(wrapper.find(VnfSearchNfTypeVisualization).props().enableBusyFeedback).toEqual(initialState.vnfSearch.enableBusyFeedback); + expect(wrapper.find(VnfSearchNfTypeVisualization).props().processedNfTypeCountChartData).toEqual(initialState.vnfSearch.processedNfTypeCountChartData); + }); +}) + +describe('VnfSearchNfTypeVisualization - Render React Component (wrapped in <Provider>) with default props', () => { + const initialState = { + vnfSearch: {} + }; + const mockStore = configureStore(); + let store, wrapper; + + beforeEach( () => { + store = mockStore(initialState); + wrapper = mount(<Provider store={store}><ConnectedVnfSearchNfTypeVisualization /></Provider>); + }) + + it('Render the connected component', () => { + expect(wrapper.find(ConnectedVnfSearchNfTypeVisualization).length).toEqual(1); + }); + + it('Validate default props loaded', () => { + expect(wrapper.find(VnfSearchNfTypeVisualization).props().enableBusyFeedback).toEqual(false); + expect(wrapper.find(VnfSearchNfTypeVisualization).props().processedNfTypeCountChartData).toEqual(CHART_NF_TYPE.emptyData); + }); +}) diff --git a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx index be13d07..8dc25ca 100644 --- a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx @@ -48,7 +48,7 @@ let mapStateToProps = ({vnfSearch}) => { }; }; -class VnfSearchOrchStatusVisualizations extends Component { +export class VnfSearchOrchStatusVisualizations extends Component { static propTypes = { processedOrchStatusCountChartData: React.PropTypes.object, enableBusyFeedback: React.PropTypes.bool diff --git a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.test.js b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.test.js new file mode 100644 index 0000000..1257f3a --- /dev/null +++ b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.test.js @@ -0,0 +1,154 @@ +import React from 'react'; +import { shallow, mount } from 'enzyme'; +import {Provider} from 'react-redux' +import configureStore from 'redux-mock-store'; +import { BarChart } from 'recharts'; + +import ConnectedVnfSearchOrchStatusVisualizations, + { VnfSearchOrchStatusVisualizations } from './VnfSearchOrchestratedStatusVisualization.jsx'; +import { CHART_ORCH_STATUS } from './VnfSearchConstants.js'; +import Spinner from 'utils/SpinnerContainer.jsx'; + +describe('VnfSearchOrchStatusVisualizations - Shallow render of component', () => { + let wrapper; + const processedOrchStatusCountChartDataProp = { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchOrchStatusVisualizations + enableBusyFeedback={false} + processedOrchStatusCountChartData={processedOrchStatusCountChartDataProp} + /> + ); + }) + + it('Render basic component', () => { + expect(wrapper.length).toEqual(1); + expect(wrapper.hasClass('visualizations')).toEqual(true); + }); + + it('Verify Spinner is present but not visible', () => { + expect(wrapper.find(Spinner)).toHaveLength(1); + expect(wrapper.find(Spinner).props().loading).toEqual(false); + }); + + it('Verify BarChart is displayed', () => { + expect(wrapper.find(BarChart)).toHaveLength(1); + expect(wrapper.find(BarChart).props().data).toEqual(processedOrchStatusCountChartDataProp.values); + }); +}) + +describe('VnfSearchOrchStatusVisualizations - Shallow render of component with no chart data', () => { + let wrapper; + const processedOrchStatusCountChartDataProp = { + values: null + }; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchOrchStatusVisualizations + enableBusyFeedback={false} + processedOrchStatusCountChartData={processedOrchStatusCountChartDataProp} + /> + ); + }) + + it('Visualization graph hidden', () => { + expect(wrapper.length).toEqual(1); + expect(['visualizations', 'hidden'].every(className => wrapper.hasClass(className))).toEqual(true); + }); +}) + +describe('VnfSearchOrchStatusVisualizations - Shallow render of component with busy feedback', () => { + let wrapper; + const processedOrchStatusCountChartDataProp = { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchOrchStatusVisualizations + enableBusyFeedback={true} + processedOrchStatusCountChartData={processedOrchStatusCountChartDataProp} + /> + ); + }) + + it('Render basic component', () => { + expect(wrapper.length).toEqual(1); + expect(wrapper.hasClass('visualizations')).toEqual(true); + }); + + it('Verify Spinner is present and visible', () => { + expect(wrapper.find(Spinner)).toHaveLength(1); + expect(wrapper.find(Spinner).props().loading).toEqual(true); + }); + + it('Verify BarChart is displayed', () => { + expect(wrapper.find(BarChart)).toHaveLength(1); + expect(wrapper.find(BarChart).props().data).toEqual(processedOrchStatusCountChartDataProp.values); + }); +}) + +describe('VnfSearchOrchStatusVisualizations - Render React Component (wrapped in <Provider>)', () => { + const initialState = { + vnfSearch: { + processedOrchStatusCountChartData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + enableBusyFeedback: false + } + }; + const mockStore = configureStore(); + let store, wrapper; + + beforeEach( () => { + store = mockStore(initialState); + wrapper = mount(<Provider store={store}><ConnectedVnfSearchOrchStatusVisualizations /></Provider>); + }) + + it('Render the connected component', () => { + expect(wrapper.find(ConnectedVnfSearchOrchStatusVisualizations).length).toEqual(1); + }); + + it('Validate props from store', () => { + expect(wrapper.find(VnfSearchOrchStatusVisualizations).props().enableBusyFeedback).toEqual(initialState.vnfSearch.enableBusyFeedback); + expect(wrapper.find(VnfSearchOrchStatusVisualizations).props().processedOrchStatusCountChartData).toEqual(initialState.vnfSearch.processedOrchStatusCountChartData); + }); +}) + +describe('VnfSearchOrchStatusVisualizations - Render React Component (wrapped in <Provider>) with default props', () => { + const initialState = { + vnfSearch: {} + }; + const mockStore = configureStore(); + let store, wrapper; + + beforeEach( () => { + store = mockStore(initialState); + wrapper = mount(<Provider store={store}><ConnectedVnfSearchOrchStatusVisualizations /></Provider>); + }) + + it('Render the connected component', () => { + expect(wrapper.find(ConnectedVnfSearchOrchStatusVisualizations).length).toEqual(1); + }); + + it('Validate default props loaded', () => { + expect(wrapper.find(VnfSearchOrchStatusVisualizations).props().enableBusyFeedback).toEqual(false); + expect(wrapper.find(VnfSearchOrchStatusVisualizations).props().processedOrchStatusCountChartData).toEqual(CHART_ORCH_STATUS.emptyData); + }); +}) diff --git a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx index a7c31c0..07ba988 100644 --- a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx @@ -48,7 +48,7 @@ let mapStateToProps = ({vnfSearch}) => { }; }; -class VnfSearchProvStatusVisualization extends Component { +export class VnfSearchProvStatusVisualization extends Component { static propTypes = { processedProvStatusCountChartData: React.PropTypes.object, enableBusyFeedback: React.PropTypes.bool diff --git a/src/app/vnfSearch/VnfSearchProvStatusVisualization.test.js b/src/app/vnfSearch/VnfSearchProvStatusVisualization.test.js new file mode 100644 index 0000000..4812834 --- /dev/null +++ b/src/app/vnfSearch/VnfSearchProvStatusVisualization.test.js @@ -0,0 +1,154 @@ +import React from 'react'; +import { shallow, mount } from 'enzyme'; +import {Provider} from 'react-redux' +import configureStore from 'redux-mock-store'; +import { BarChart } from 'recharts'; + +import ConnectedVnfSearchProvStatusVisualization, + { VnfSearchProvStatusVisualization } from './VnfSearchProvStatusVisualization.jsx'; +import { CHART_PROV_STATUS } from './VnfSearchConstants.js'; +import Spinner from 'utils/SpinnerContainer.jsx'; + +describe('VnfSearchProvStatusVisualization - Shallow render of component', () => { + let wrapper; + const processedProvStatusCountChartDataProp = { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchProvStatusVisualization + enableBusyFeedback={false} + processedProvStatusCountChartData={processedProvStatusCountChartDataProp} + /> + ); + }) + + it('Render basic component', () => { + expect(wrapper.length).toEqual(1); + expect(wrapper.hasClass('visualizations')).toEqual(true); + }); + + it('Verify Spinner is present but not visible', () => { + expect(wrapper.find(Spinner)).toHaveLength(1); + expect(wrapper.find(Spinner).props().loading).toEqual(false); + }); + + it('Verify BarChart is displayed', () => { + expect(wrapper.find(BarChart)).toHaveLength(1); + expect(wrapper.find(BarChart).props().data).toEqual(processedProvStatusCountChartDataProp.values); + }); +}) + +describe('VnfSearchProvStatusVisualization - Shallow render of component with no chart data', () => { + let wrapper; + const processedProvStatusCountChartDataProp = { + values: null + }; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchProvStatusVisualization + enableBusyFeedback={false} + processedProvStatusCountChartData={processedProvStatusCountChartDataProp} + /> + ); + }) + + it('Visualization graph hidden', () => { + expect(wrapper.length).toEqual(1); + expect(['visualizations', 'hidden'].every(className => wrapper.hasClass(className))).toEqual(true); + }); +}) + +describe('VnfSearchProvStatusVisualization - Shallow render of component with busy feedback', () => { + let wrapper; + const processedProvStatusCountChartDataProp = { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchProvStatusVisualization + enableBusyFeedback={true} + processedProvStatusCountChartData={processedProvStatusCountChartDataProp} + /> + ); + }) + + it('Render basic component', () => { + expect(wrapper.length).toEqual(1); + expect(wrapper.hasClass('visualizations')).toEqual(true); + }); + + it('Verify Spinner is present and visible', () => { + expect(wrapper.find(Spinner)).toHaveLength(1); + expect(wrapper.find(Spinner).props().loading).toEqual(true); + }); + + it('Verify BarChart is displayed', () => { + expect(wrapper.find(BarChart)).toHaveLength(1); + expect(wrapper.find(BarChart).props().data).toEqual(processedProvStatusCountChartDataProp.values); + }); +}) + +describe('VnfSearchProvStatusVisualization - Render React Component (wrapped in <Provider>)', () => { + const initialState = { + vnfSearch: { + processedProvStatusCountChartData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + enableBusyFeedback: false + } + }; + const mockStore = configureStore(); + let store, wrapper; + + beforeEach( () => { + store = mockStore(initialState); + wrapper = mount(<Provider store={store}><ConnectedVnfSearchProvStatusVisualization /></Provider>); + }) + + it('Render the connected component', () => { + expect(wrapper.find(ConnectedVnfSearchProvStatusVisualization).length).toEqual(1); + }); + + it('Validate props from store', () => { + expect(wrapper.find(VnfSearchProvStatusVisualization).props().enableBusyFeedback).toEqual(initialState.vnfSearch.enableBusyFeedback); + expect(wrapper.find(VnfSearchProvStatusVisualization).props().processedProvStatusCountChartData).toEqual(initialState.vnfSearch.processedProvStatusCountChartData); + }); +}) + +describe('VnfSearchProvStatusVisualization - Render React Component (wrapped in <Provider>) with default props', () => { + const initialState = { + vnfSearch: {} + }; + const mockStore = configureStore(); + let store, wrapper; + + beforeEach( () => { + store = mockStore(initialState); + wrapper = mount(<Provider store={store}><ConnectedVnfSearchProvStatusVisualization /></Provider>); + }) + + it('Render the connected component', () => { + expect(wrapper.find(ConnectedVnfSearchProvStatusVisualization).length).toEqual(1); + }); + + it('Validate default props loaded', () => { + expect(wrapper.find(VnfSearchProvStatusVisualization).props().enableBusyFeedback).toEqual(false); + expect(wrapper.find(VnfSearchProvStatusVisualization).props().processedProvStatusCountChartData).toEqual(CHART_PROV_STATUS.emptyData); + }); +}) diff --git a/src/app/vnfSearch/VnfSearchReducer.test.js b/src/app/vnfSearch/VnfSearchReducer.test.js new file mode 100644 index 0000000..ff06770 --- /dev/null +++ b/src/app/vnfSearch/VnfSearchReducer.test.js @@ -0,0 +1,438 @@ +import VnfSearchReducer from './VnfSearchReducer.js'; +import { + vnfActionTypes, + CHART_ORCH_STATUS, + CHART_PROV_STATUS, + CHART_NF_ROLE, + CHART_NF_TYPE, + TOTAL_VNF_COUNT +} from './VnfSearchConstants.js'; +import {ERROR_RETRIEVING_DATA} from 'app/networking/NetworkConstants.js'; +import { + filterBarActionTypes, + MESSAGE_LEVEL_DANGER +} from 'utils/GlobalConstants.js'; +import { + globalAutoCompleteSearchBarActionTypes +} from 'app/globalAutoCompleteSearchBar/GlobalAutoCompleteSearchBarConstants.js'; + +describe('VnfSearchReducer - Reducer Action Type Tests', () => { + it('Action Type: VNF_NETWORK_ERROR', () => { + const action = { + type: vnfActionTypes.VNF_NETWORK_ERROR + }; + let state = { + processedProvStatusCountChartData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + processedOrchStatusCountChartData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + processedNfTypeCountChartData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + processedNfRoleCountChartData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + count: 20, + feedbackMsgText: '', + feedbackMsgSeverity: '' + }; + state = VnfSearchReducer(state, action); + expect(state).toEqual({ + processedProvStatusCountChartData: CHART_PROV_STATUS.emptyData, + processedOrchStatusCountChartData: CHART_ORCH_STATUS.emptyData, + processedNfTypeCountChartData: CHART_NF_TYPE.emptyData, + processedNfRoleCountChartData: CHART_NF_ROLE.emptyData, + count: TOTAL_VNF_COUNT.emptyValue, + feedbackMsgText: ERROR_RETRIEVING_DATA, + feedbackMsgSeverity: MESSAGE_LEVEL_DANGER + }); + }); + + it('Action Type: SEARCH_WARNING_EVENT', () => { + const action = { + type: globalAutoCompleteSearchBarActionTypes.SEARCH_WARNING_EVENT + }; + let state = { + processedProvStatusCountChartData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + processedOrchStatusCountChartData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + processedNfTypeCountChartData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + processedNfRoleCountChartData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + count: 20, + }; + state = VnfSearchReducer(state, action); + expect(state).toEqual({ + processedProvStatusCountChartData: CHART_PROV_STATUS.emptyData, + processedOrchStatusCountChartData: CHART_ORCH_STATUS.emptyData, + processedNfTypeCountChartData: CHART_NF_TYPE.emptyData, + processedNfRoleCountChartData: CHART_NF_ROLE.emptyData, + count: TOTAL_VNF_COUNT.emptyValue, + }); + }); + + it('Action Type: NEW_SELECTIONS', () => { + const action = { + type: filterBarActionTypes.NEW_SELECTIONS, + data: { + selectedValuesMap: [ + { filter1: ['someValue'] } + ], + unifiedValues: [ + { filter1: ['someValue', 'someOtherValue']} + ] + } + }; + let state = { + vnfFilterValues: {}, + unifiedFilterValues: {} + }; + state = VnfSearchReducer(state, action); + expect(state).toEqual({ + vnfFilterValues: action.data.selectedValuesMap, + unifiedFilterValues: action.data.unifiedValues + }); + }); + + it('Action Type: SET_UNIFIED_VALUES', () => { + const action = { + type: filterBarActionTypes.SET_UNIFIED_VALUES, + data: { + unifiedValues: [ + { filter1: ['someValue', 'someOtherValue']} + ] + } + }; + let state = { + unifiedFilterValues: {} + }; + state = VnfSearchReducer(state, action); + expect(state).toEqual({ + unifiedFilterValues: action.data + }); + }); + + it('Action Type: VNF_SEARCH_RESULTS_RECEIVED', () => { + const action = { + type: vnfActionTypes.VNF_SEARCH_RESULTS_RECEIVED, + data: { + provStatusData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + orchStatusData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + nfTypeData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + nfRoleData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + count: 25, + } + }; + let state = { + processedProvStatusCountChartData: {}, + processedOrchStatusCountChartData: {}, + processedNfTypeCountChartData: {}, + processedNfRoleCountChartData: {}, + count: 0, + feedbackMsgText: 'some error msg', + feedbackMsgSeverity: 'someSeverityLevel' + }; + state = VnfSearchReducer(state, action); + expect(state).toEqual({ + processedProvStatusCountChartData: action.data.provStatusData, + processedOrchStatusCountChartData: action.data.orchStatusData, + processedNfTypeCountChartData: action.data.nfTypeData, + processedNfRoleCountChartData: action.data.nfRoleData, + count: action.data.count, + feedbackMsgText: '', + feedbackMsgSeverity: '' + }); + }); + + it('Action Type: VNF_FILTER_PANEL_TOGGLED', () => { + const action = { + type: vnfActionTypes.VNF_FILTER_PANEL_TOGGLED, + data: { + vnfVisualizationPanelClass: 'hide', + } + }; + let state = { + vnfVisualizationPanelClass: 'show' + }; + state = VnfSearchReducer(state, action); + expect(state).toEqual({ + vnfVisualizationPanelClass: 'hide' + }); + }); + + it('Action Type: VNF_SEARCH_FILTERS_RECEIVED', () => { + const action = { + type: vnfActionTypes.VNF_SEARCH_FILTERS_RECEIVED, + data: [ + { filter1: 'value 1' }, + { filter2: 'value 2' } + ] + }; + let state = { + vnfFilters: [] + }; + state = VnfSearchReducer(state, action); + expect(state).toEqual({ + vnfFilters: action.data + }); + }); + + it('Action Type: SET_NON_CONVERTED_VALUES', () => { + const action = { + type: filterBarActionTypes.SET_NON_CONVERTED_VALUES, + data: [ + { value1: 'abc' }, + { value2: 'xyz' } + ] + }; + let state = { + nonConvertedFilters: [] + }; + state = VnfSearchReducer(state, action); + expect(state).toEqual({ + nonConvertedFilters: action.data + }); + }); + + it('Action Type: SET_CONVERTED_VALUES', () => { + const action = { + type: filterBarActionTypes.SET_CONVERTED_VALUES, + data: { + convertedValues: { + value1: 'abc', + value2: 'xyz' + }, + nonConvertedValues: { + value1: 123, + value2: 456 + } + } + }; + let state = { + nonConvertedFilters: { + filter1: 'one', + filter2: 'two' + }, + unifiedFilterValues: {}, + vnfFilterValues: {} + }; + state = VnfSearchReducer(state, action); + expect(state).toEqual({ + nonConvertedFilters: {}, + unifiedFilterValues: action.data.convertedValues, + vnfFilterValues: action.data.nonConvertedValues + }); + }); + + it('Action Type: VNF_ACTIVATE_BUSY_FEEDBACK', () => { + const action = { + type: vnfActionTypes.VNF_ACTIVATE_BUSY_FEEDBACK + }; + let state = { + enableBusyFeedback: false + }; + state = VnfSearchReducer(state, action); + expect(state).toEqual({ + enableBusyFeedback: true + }); + }); + + it('Action Type: VNF_DISABLE_BUSY_FEEDBACK', () => { + const action = { + type: vnfActionTypes.VNF_DISABLE_BUSY_FEEDBACK + }; + let state = { + enableBusyFeedback: true + }; + state = VnfSearchReducer(state, action); + expect(state).toEqual({ + enableBusyFeedback: false + }); + }); + + it('Action Type: CLEAR_FILTERS', () => { + const action = { + type: filterBarActionTypes.CLEAR_FILTERS + }; + let state = { + vnfFilters: { + filter1: 'filterName1' + }, + vnfFilterValues: { + filter1: 'value 1' + }, + nonConvertedFilters: { + nonConvertedFilter1: 'some fitler props' + }, + unifiedFilterValues: { + unifiedFilter1: 'some unified props' + } + }; + state = VnfSearchReducer(state, action); + expect(state).toEqual({ + vnfFilters: {}, + vnfFilterValues: {}, + nonConvertedFilters: {}, + unifiedFilterValues: {} + }); + }); + + it('Invalid Action Type', () => { + const action = { + type: 'Nonexistent Action Type', + }; + let state = { + vnfFilters: { + filter1: 'filterName1' + }, + vnfFilterValues: { + filter1: 'value 1' + }, + nonConvertedFilters: { + nonConvertedFilter1: 'some fitler props' + }, + unifiedFilterValues: { + unifiedFilter1: 'some unified props' + }, + enableBusyFeedback: true, + provStatusData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + orchStatusData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + nfTypeData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + nfRoleData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + count: 25 + }; + state = VnfSearchReducer(state, action); + expect(state).toEqual({ + vnfFilters: { + filter1: 'filterName1' + }, + vnfFilterValues: { + filter1: 'value 1' + }, + nonConvertedFilters: { + nonConvertedFilter1: 'some fitler props' + }, + unifiedFilterValues: { + unifiedFilter1: 'some unified props' + }, + enableBusyFeedback: true, + provStatusData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + orchStatusData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + nfTypeData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + nfRoleData: { + values: [ + {x: 'col 1', y: 3}, + {x: 'col 2', y: 7}, + {x: 'col 3', y: 2} + ] + }, + count: 25 + }); + }); +}) diff --git a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx index 3a767b9..3c73d22 100644 --- a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx @@ -38,7 +38,7 @@ let mapStateToProps = ({vnfSearch}) => { }; }; -class VnfSearchTotalCountVisualization extends Component { +export class VnfSearchTotalCountVisualization extends Component { static propTypes = { count: React.PropTypes.oneOfType([ React.PropTypes.string, diff --git a/src/app/vnfSearch/VnfSearchTotalCountVisualization.test.js b/src/app/vnfSearch/VnfSearchTotalCountVisualization.test.js new file mode 100644 index 0000000..e891c12 --- /dev/null +++ b/src/app/vnfSearch/VnfSearchTotalCountVisualization.test.js @@ -0,0 +1,131 @@ +import React from 'react'; +import { shallow, mount } from 'enzyme'; +import {Provider} from 'react-redux' +import configureStore from 'redux-mock-store'; + +import ConnectedVnfSearchTotalCountVisualization, + { VnfSearchTotalCountVisualization } from './VnfSearchTotalCountVisualization.jsx'; +import { TOTAL_VNF_COUNT } from './VnfSearchConstants.js'; +import Spinner from 'utils/SpinnerContainer.jsx'; + +describe('VnfSearchTotalCountVisualization - Shallow render of component', () => { + let wrapper; + const countProp = 25; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchTotalCountVisualization + enableBusyFeedback={false} + count={countProp} + /> + ); + }) + + it('Render basic component', () => { + expect(wrapper.length).toEqual(1); + expect(wrapper.hasClass('visualizations')).toEqual(true); + }); + + it('Verify Spinner is present but not visible', () => { + expect(wrapper.find(Spinner)).toHaveLength(1); + expect(wrapper.find(Spinner).props().loading).toEqual(false); + }); + + it('Verify total count is displayed', () => { + expect(wrapper.contains(<span>{countProp}</span>)).toBe(true); + }); +}) + +describe('VnfSearchTotalCountVisualization - Shallow render of component with no chart data', () => { + let wrapper; + const countProp = null; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchTotalCountVisualization + enableBusyFeedback={false} + count={countProp} + /> + ); + }) + + it('Visualization graph hidden', () => { + expect(wrapper.length).toEqual(1); + expect(['visualizations', 'hidden'].every(className => wrapper.hasClass(className))).toEqual(true); + }); +}) + +describe('VnfSearchTotalCountVisualization - Shallow render of component with busy feedback', () => { + let wrapper; + const countProp = 25; + + beforeEach( () => { + wrapper = shallow( + <VnfSearchTotalCountVisualization + enableBusyFeedback={true} + count={countProp} + /> + ); + }) + + it('Render basic component', () => { + expect(wrapper.length).toEqual(1); + expect(wrapper.hasClass('visualizations')).toEqual(true); + }); + + it('Verify Spinner is present and visible', () => { + expect(wrapper.find(Spinner)).toHaveLength(1); + expect(wrapper.find(Spinner).props().loading).toEqual(true); + }); + + it('Verify total count is displayed', () => { + expect(wrapper.contains(<span>{countProp}</span>)).toBe(true); + }); +}) + +describe('VnfSearchTotalCountVisualization - Render React Component (wrapped in <Provider>)', () => { + const initialState = { + vnfSearch: { + count: 25, + enableBusyFeedback: false + } + }; + const mockStore = configureStore(); + let store, wrapper; + + beforeEach( () => { + store = mockStore(initialState); + wrapper = mount(<Provider store={store}><ConnectedVnfSearchTotalCountVisualization /></Provider>); + }) + + it('Render the connected component', () => { + expect(wrapper.find(ConnectedVnfSearchTotalCountVisualization).length).toEqual(1); + }); + + it('Validate props from store', () => { + expect(wrapper.find(VnfSearchTotalCountVisualization).props().enableBusyFeedback).toEqual(initialState.vnfSearch.enableBusyFeedback); + expect(wrapper.find(VnfSearchTotalCountVisualization).props().count).toEqual(initialState.vnfSearch.count); + }); +}) + +describe('VnfSearchTotalCountVisualization - Render React Component (wrapped in <Provider>) with default props', () => { + const initialState = { + vnfSearch: {} + }; + const mockStore = configureStore(); + let store, wrapper; + + beforeEach( () => { + store = mockStore(initialState); + wrapper = mount(<Provider store={store}><ConnectedVnfSearchTotalCountVisualization /></Provider>); + }) + + it('Render the connected component', () => { + expect(wrapper.find(ConnectedVnfSearchTotalCountVisualization).length).toEqual(1); + }); + + it('Validate default props loaded', () => { + expect(wrapper.find(VnfSearchTotalCountVisualization).props().enableBusyFeedback).toEqual(false); + expect(wrapper.find(VnfSearchTotalCountVisualization).props().count).toEqual(TOTAL_VNF_COUNT.emptyValue); + }); +}) |