Refactoring test scripts

Moving the test scripts under one folder and restucting them so that the
clutter can be avoided in the src folder.

Issue-ID: AAI-1371
Change-Id: I41b34acbe79a7a3409f2990f11492614f7ef9c5a
Signed-off-by: Arul.Nambi <arul.nambi@amdocs.com>

8 files changed, 1449 insertions, 0 deletions

diff --git a/test/vnfSearch/VnfSearch.test.js b/test/vnfSearch/VnfSearch.test.js
new file mode 100644
index 0000000..3875543
--- /dev/null
+++ b/test/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 'app/vnfSearch/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/test/vnfSearch/VnfSearchActions.test.js b/test/vnfSearch/VnfSearchActions.test.js
new file mode 100644
index 0000000..e1c3733
--- /dev/null
+++ b/test/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 'app/vnfSearch/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/test/vnfSearch/VnfSearchNfRoleVisualization.test.js b/test/vnfSearch/VnfSearchNfRoleVisualization.test.js
new file mode 100644
index 0000000..2265e6e
--- /dev/null
+++ b/test/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 'app/vnfSearch/VnfSearchNfRoleVisualization.jsx';
+import { CHART_NF_ROLE } from 'app/vnfSearch/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/test/vnfSearch/VnfSearchNfTypeVisualization.test.js b/test/vnfSearch/VnfSearchNfTypeVisualization.test.js
new file mode 100644
index 0000000..485a822
--- /dev/null
+++ b/test/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 'app/vnfSearch/VnfSearchNfTypeVisualization.jsx';
+import { CHART_NF_TYPE } from 'app/vnfSearch/VnfSearchConstants.js';
+import Spinner from 'utils/SpinnerContainer';
+
+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/test/vnfSearch/VnfSearchOrchestratedStatusVisualization.test.js b/test/vnfSearch/VnfSearchOrchestratedStatusVisualization.test.js
new file mode 100644
index 0000000..2586079
--- /dev/null
+++ b/test/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 'app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx';
+import { CHART_ORCH_STATUS } from 'app/vnfSearch/VnfSearchConstants.js';
+import Spinner from 'utils/SpinnerContainer';
+
+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/test/vnfSearch/VnfSearchProvStatusVisualization.test.js b/test/vnfSearch/VnfSearchProvStatusVisualization.test.js
new file mode 100644
index 0000000..f3e7279
--- /dev/null
+++ b/test/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 'app/vnfSearch/VnfSearchProvStatusVisualization.jsx';
+import { CHART_PROV_STATUS } from 'app/vnfSearch/VnfSearchConstants.js';
+import Spinner from 'utils/SpinnerContainer';
+
+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/test/vnfSearch/VnfSearchReducer.test.js b/test/vnfSearch/VnfSearchReducer.test.js
new file mode 100644
index 0000000..381a696
--- /dev/null
+++ b/test/vnfSearch/VnfSearchReducer.test.js
@@ -0,0 +1,438 @@
+import VnfSearchReducer from 'app/vnfSearch/VnfSearchReducer.js';
+import {
+  vnfActionTypes,
+  CHART_ORCH_STATUS,
+  CHART_PROV_STATUS,
+  CHART_NF_ROLE,
+  CHART_NF_TYPE,
+  TOTAL_VNF_COUNT
+} from 'app/vnfSearch/VnfSearchConstants.js';
+import {ERROR_RETRIEVING_DATA} from 'app/networking/NetworkConstants.js';
+import {
+  filterBarActionTypes,
+  MESSAGE_LEVEL_DANGER
+} from 'utils/GlobalConstants';
+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/test/vnfSearch/VnfSearchTotalCountVisualization.test.js b/test/vnfSearch/VnfSearchTotalCountVisualization.test.js
new file mode 100644
index 0000000..a397ff2
--- /dev/null
+++ b/test/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 'app/vnfSearch/VnfSearchTotalCountVisualization.jsx';
+import { TOTAL_VNF_COUNT } from 'app/vnfSearch/VnfSearchConstants.js';
+import Spinner from 'utils/SpinnerContainer';
+
+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);
+  });
+})