1 import React from 'react';
2 import { shallow, mount } from 'enzyme';
3 import {Provider} from 'react-redux'
4 import configureStore from 'redux-mock-store';
5 import { BarChart } from 'recharts';
7 import ConnectedVnfSearchNfTypeVisualization,
8 { VnfSearchNfTypeVisualization } from 'app/vnfSearch/VnfSearchNfTypeVisualization.jsx';
9 import { CHART_NF_TYPE } from 'app/vnfSearch/VnfSearchConstants.js';
10 import Spinner from 'utils/SpinnerContainer';
12 describe('VnfSearchNfTypeVisualization - Shallow render of component', () => {
14 const processedNfTypeCountChartDataProp = {
24 <VnfSearchNfTypeVisualization
25 enableBusyFeedback={false}
26 processedNfTypeCountChartData={processedNfTypeCountChartDataProp}
31 it('Render basic component', () => {
32 expect(wrapper.length).toEqual(1);
33 expect(wrapper.hasClass('visualizations')).toEqual(true);
36 it('Verify Spinner is present but not visible', () => {
37 expect(wrapper.find(Spinner)).toHaveLength(1);
38 expect(wrapper.find(Spinner).props().loading).toEqual(false);
41 it('Verify BarChart is displayed', () => {
42 expect(wrapper.find(BarChart)).toHaveLength(1);
43 expect(wrapper.find(BarChart).props().data).toEqual(processedNfTypeCountChartDataProp.values);
47 describe('VnfSearchNfTypeVisualization - Shallow render of component with no chart data', () => {
49 const processedNfTypeCountChartDataProp = {
55 <VnfSearchNfTypeVisualization
56 enableBusyFeedback={false}
57 processedNfTypeCountChartData={processedNfTypeCountChartDataProp}
62 it('Visualization graph hidden', () => {
63 expect(wrapper.length).toEqual(1);
64 expect(['visualizations', 'hidden'].every(className => wrapper.hasClass(className))).toEqual(true);
68 describe('VnfSearchNfTypeVisualization - Shallow render of component with busy feedback', () => {
70 const processedNfTypeCountChartDataProp = {
80 <VnfSearchNfTypeVisualization
81 enableBusyFeedback={true}
82 processedNfTypeCountChartData={processedNfTypeCountChartDataProp}
87 it('Render basic component', () => {
88 expect(wrapper.length).toEqual(1);
89 expect(wrapper.hasClass('visualizations')).toEqual(true);
92 it('Verify Spinner is present and visible', () => {
93 expect(wrapper.find(Spinner)).toHaveLength(1);
94 expect(wrapper.find(Spinner).props().loading).toEqual(true);
97 it('Verify BarChart is displayed', () => {
98 expect(wrapper.find(BarChart)).toHaveLength(1);
99 expect(wrapper.find(BarChart).props().data).toEqual(processedNfTypeCountChartDataProp.values);
103 describe('VnfSearchNfTypeVisualization - Render React Component (wrapped in <Provider>)', () => {
104 const initialState = {
106 processedNfTypeCountChartData: {
113 enableBusyFeedback: false
116 const mockStore = configureStore();
120 store = mockStore(initialState);
121 wrapper = mount(<Provider store={store}><ConnectedVnfSearchNfTypeVisualization /></Provider>);
124 it('Render the connected component', () => {
125 expect(wrapper.find(ConnectedVnfSearchNfTypeVisualization).length).toEqual(1);
128 it('Validate props from store', () => {
129 expect(wrapper.find(VnfSearchNfTypeVisualization).props().enableBusyFeedback).toEqual(initialState.vnfSearch.enableBusyFeedback);
130 expect(wrapper.find(VnfSearchNfTypeVisualization).props().processedNfTypeCountChartData).toEqual(initialState.vnfSearch.processedNfTypeCountChartData);
134 describe('VnfSearchNfTypeVisualization - Render React Component (wrapped in <Provider>) with default props', () => {
135 const initialState = {
138 const mockStore = configureStore();
142 store = mockStore(initialState);
143 wrapper = mount(<Provider store={store}><ConnectedVnfSearchNfTypeVisualization /></Provider>);
146 it('Render the connected component', () => {
147 expect(wrapper.find(ConnectedVnfSearchNfTypeVisualization).length).toEqual(1);
150 it('Validate default props loaded', () => {
151 expect(wrapper.find(VnfSearchNfTypeVisualization).props().enableBusyFeedback).toEqual(false);
152 expect(wrapper.find(VnfSearchNfTypeVisualization).props().processedNfTypeCountChartData).toEqual(CHART_NF_TYPE.emptyData);