React test vcoverage doesnot fulfill - reactjs

Question

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { compose } from 'recompose'
import { startWorkflow } from 'wf-dbd-react-ui/es/actions'
import Block from 'wf-dbd-react-ui/es/Block'
import BrowserTitle from 'wf-dbd-react-ui/es/BrowserTitle'
import ScrollToTopOnMount from 'wf-dbd-react-ui/es/ScrollToTopOnMount'
import FormMessages from 'wf-dbd-react-ui/es/FormMessages'
import { globals } from 'wf-dbd-react-ui/es/lib'
import withStrings from 'wf-dbd-react-ui/es/withStrings'
import PanelHeader from './panel-header/PanelHeader'
import AppHubTabs from './app-hub-tabs/AppHubTabs'
import RightRail from '../right-rail/RightRail'
import MessageDisplay from '../common/message-display/MessageDisplay'
import AddPayeeMessage from '../common/add-payee-message/AddPayeeMessage'
import { ADD_PAYEE, SEARCH_PAYEE } from '../workflows/add-payee/constants'
import ChangeFundingAccount from '../common/change-funding-account/ChangeFundingAccount'
import EditPaymentHotTaskModalContainer from '../common/hottask-edit-payment-modal/EditPaymentHotTaskModalContainer'
import DismissReminder from '../common/dismiss-reminder-modal/DismissReminder'
import HistoryTabViewPaymentDetailsModal from '../history-tab/group-history-form/history-tab-hot-task-menu/HistoryTabViewPaymentDetailsModal'
import * as actions from '../../lib/store/hub/actions'
import { getPayeeDetails } from '../../lib/store/payee-details/actions'
import { getPaymentDetails } from '../../lib/store/payment-details/actions'
import { resetPayeeTabFilterOption } from '../../lib/store/payees/actions'
import { closeViewPaymentDetailsModal } from '../../lib/store/history-tab/actions'
import { getHistoricalPayments } from '../../lib/selectors/selectors'
import styles from './AppHub.less'
class AppHub extends React.Component {
componentDidMount() {
const { getPayeeDetails, getPaymentDetails } = this.props
// payee details need to be fetched unconditionally. the cache in saga ensures it is not fetched until required
getPayeeDetails()
getPaymentDetails()
// Fix for for wide page layout issue in ie11 - Problem: ie11 nested flex element issue when window is minimized
Iif (!!window.MSInputMethodContext && !!document.documentMode) { // will be true for only for ie11 browser
document.querySelector('body > div > div > div > div').style.flexBasis = '0%'
}
// end of fix for ie11 wide page layout issue
}
componentWillUnmount() {
const { clearMessages, resetPayeeTabFilterOption } = this.props
clearMessages()
//clearing the selected payees-tab filter option
resetPayeeTabFilterOption()
}
handleTabSelect = activeTabIndexNew => {
const { clearMessages, activeTabIndex, setActiveTabIndex } = this.props
if (activeTabIndexNew !== activeTabIndex) {
setActiveTabIndex(activeTabIndexNew)
clearMessages()
}
}
render() {
const { activeTabIndex,
getString,
successMessage,
errorMessage,
ineligibleAccountMessage,
payees,
noOfHistoricalPayments,
payeesLoaded,
startAddPayeeWorkflow,
shouldShowChangeAccount,
reminderDismissalInProgress,
reminderDueDate,
closeViewPaymentDetailsModal,
isViewPaymentDetailsModalOpen,
viewPaymentData,
showEditPaymentSeriesModal
} = this.props
const panelHeaderId = globals().billpayBusinessUser ? 'app.hub.business.bill.pay.header' : 'app.hub.bill.pay.header'
return (
<Block layout={true} horizontal={true}>
<BrowserTitle title={getString('app.title')} />
<ScrollToTopOnMount />
<Block flex={true} relative={true} className={styles.billPayHub}>
<PanelHeader headerId={panelHeaderId} />
{
successMessage &&
<Block className={styles.message}>
<MessageDisplay messages={successMessage} />
</Block>
}
{
errorMessage &&
<Block className={styles.message}>
<MessageDisplay messages={errorMessage} />
</Block>
}
{
ineligibleAccountMessage && globals().enableDisplayPayeesWithIneligibleAccounts &&
<Block className={styles.message}>
<MessageDisplay messages={ineligibleAccountMessage} focusOnMount={true} />
</Block>
}
<Block className={styles.message}>
<FormMessages formId="makePaymentForm" className="formMessages" />
</Block>
{payeesLoaded && payees.size === 0 && <AddPayeeMessage startAddPayeeWorkflow={startAddPayeeWorkflow} />}
{payeesLoaded && (payees.size > 0 || noOfHistoricalPayments > 0) && (
<AppHubTabs
activeTabIndex={activeTabIndex}
onTabSelect={this.handleTabSelect}
/>
)
}
</Block>
<Block relative={true} styles={styles.rightRailContainer}>
<RightRail />
</Block>
{shouldShowChangeAccount && <ChangeFundingAccount />}
{showEditPaymentSeriesModal && <EditPaymentHotTaskModalContainer />}
{reminderDismissalInProgress && <DismissReminder dueDate={reminderDueDate} />}
{isViewPaymentDetailsModalOpen &&
<HistoryTabViewPaymentDetailsModal
isOpen={isViewPaymentDetailsModalOpen}
closeModal={closeViewPaymentDetailsModal}
viewPaymentData={viewPaymentData}
/>
}
</Block>
)
}
}
AppHub.propTypes = {
activeTabIndex: PropTypes.number.isRequired,
payees: PropTypes.object.isRequired,
noOfHistoricalPayments: PropTypes.number.isRequired,
payeesLoaded: PropTypes.bool,
startAddPayeeWorkflow: PropTypes.func.isRequired,
errorMessage: PropTypes.object,
successMessage: PropTypes.object,
shouldShowChangeAccount: PropTypes.bool,
resetPayeeTabFilterOption: PropTypes.func.isRequired,
getPayeeDetails: PropTypes.func.isRequired,
getPaymentDetails: PropTypes.func.isRequired,
clearMessages: PropTypes.func.isRequired,
setActiveTabIndex: PropTypes.func.isRequired,
getString: PropTypes.func.isRequired,
reminderDismissalInProgress: PropTypes.bool,
reminderDueDate: PropTypes.string,
closeViewPaymentDetailsModal: PropTypes.func.isRequired,
isViewPaymentDetailsModalOpen: PropTypes.bool,
viewPaymentData: PropTypes.object,
showEditPaymentSeriesModal: PropTypes.func.isRequired,
ineligibleAccountMessage: PropTypes.object
}
const mapStateToProps = state => ({
activeTabIndex: state.app.hub.activeHubTab,
successMessage: state.app.hub.successMessage,
errorMessage: state.app.hub.errorMessage,
ineligibleAccountMessage: state.app.hub.ineligibleAccountMessage,
payees: state.app.payees.payees,
noOfHistoricalPayments: getHistoricalPayments(state),
payeesLoaded: state.app.payees.payeesLoaded,
shouldShowChangeAccount: state.app.hub.showChangeAccount,
showEditPaymentSeriesModal: state.app.editPayment.editPaymentModal.isModalOpen,
reminderDismissalInProgress: state.app.hub.reminderDismissalInProgress,
reminderDueDate: state.app.hub.reminderDueDate,
isViewPaymentDetailsModalOpen: state.app.historyTab.isViewPaymentDetailsModalOpen,
viewPaymentData: state.app.historyTab.viewPaymentDetails
})
const mapDispatchToProps = dispatch => ({
setActiveTabIndex: index => dispatch(actions.setHubActiveTab(index)),
clearMessages: () => dispatch(actions.clearMessages()),
startAddPayeeWorkflow: () => dispatch(startWorkflow({ name: ADD_PAYEE, startingView: SEARCH_PAYEE })),
getPayeeDetails: () => dispatch(getPayeeDetails()),
getPaymentDetails: () => dispatch(getPaymentDetails()),
resetPayeeTabFilterOption: () => dispatch(resetPayeeTabFilterOption()),
closeViewPaymentDetailsModal: () => dispatch(closeViewPaymentDetailsModal())
})
export default compose(withStrings, connect(mapStateToProps, mapDispatchToProps))(AppHub)
iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.iamtryingtofindasolutionpleasehelp.
import React from 'react'
import { mount } from 'enzyme'
import MockStoreProvider from 'wf-dbd-react-ui/es/MockStoreProvider'
import Immutable from 'immutable'
import AppHub from '../AppHub'
import AppHubTabs from '../app-hub-tabs/AppHubTabs'
import AddPayeeMessage from '../../common/add-payee-message/AddPayeeMessage'
import PanelHeader from '../panel-header/PanelHeader'
jest.mock('../panel-header/PanelHeader', () => () => 'PanelHeader')
jest.mock('../app-hub-tabs/AppHubTabs', () => () => 'AppHubTabs')
jest.mock('../../common/add-payee-message/AddPayeeMessage', () => () => 'AddPayeeMessage')
jest.mock('../../common/message-display/MessageDisplay', () => () => 'MessageDisplay')
jest.mock('../../right-rail/RightRail', () => () => 'RightRail')
jest.mock('../../history-tab/group-history-form/history-tab-hot-task-menu/HistoryTabViewPaymentDetailsModal', () => () => 'HistoryTabViewPaymentDetailsModal')
describe('AppHub', () => {
let wrapper
describe('when rendered without any payees and payments', () => {
beforeEach(() => {
const getString = jest.fn().mockImplementation(() => 'testString')
const appState = {
hub: {
activeHubTab: 0,
successMessage: { SuccessMessageBean: { globalMessages: [{ level: 'confirm', message: 'message' }] } },
errorMessage: {}
},
payees: {
payees: Immutable.List([]),
enableSubmitBar: false,
payeesLoaded: true
},
paymentAccounts: {
paymentAccounts: Immutable.List([]),
enableSubmitBar: false
},
scheduledPayments: {
paymentsLoaded: false
},
historyTab: {
isViewPaymentDetailsModalOpen: true,
viewPaymentDetails: { key: 'value' },
historicalPayments: {
payments: []
}
},
editPayment: {
editPaymentModal: {
isModalOpen: false
}
}
}
wrapper = mount(
<MockStoreProvider appState={appState}>
<AppHub getString={getString} />
</MockStoreProvider>
)
})
it('should be defined', () => {
expect(AppHub).toBeDefined()
})
it('should render a PanelHeader', () => {
expect(wrapper.find(PanelHeader)).toHaveLength(1)
})
it('should render AddPayeeMessage', () => {
expect(wrapper.find(AddPayeeMessage)).toHaveLength(1)
})
})
describe('when rendered without any payees and historical payments are present', () => {
beforeEach(() => {
const getString = jest.fn().mockImplementation(() => 'testString')
const appState = {
hub: {
activeHubTab: 0,
successMessage: { SuccessMessageBean: { globalMessages: [{ level: 'confirm', message: 'message' }] } },
errorMessage: {}
},
payees: {
payees: Immutable.List([]),
enableSubmitBar: false,
payeesLoaded: true
},
paymentAccounts: {
paymentAccounts: Immutable.List([]),
enableSubmitBar: false
},
scheduledPayments: {
paymentsLoaded: false
},
historyTab: {
isViewPaymentDetailsModalOpen: true,
viewPaymentDetails: { key: 'value' },
historicalPayments: {
payments: [{
mockKey: 'mockValue'
}]
}
},
editPayment: {
editPaymentModal: {
isModalOpen: false
}
}
}
wrapper = mount(
<MockStoreProvider appState={appState}>
<AppHub getString={getString} />
</MockStoreProvider>
)
})
it('should render AppHubTabs', () => {
expect(wrapper.find(AppHubTabs)).toHaveLength(1)
})
it('should render AddPayeeMessage', () => {
expect(wrapper.find(AddPayeeMessage)).toHaveLength(1)
})
})
describe('when rendered with payees and there are no historical payments', () => {
beforeEach(() => {
const getString = jest.fn().mockImplementation(() => 'testString')
const appState = {
hub: {
activeHubTab: 0,
successMessage: { SuccessMessageBean: { globalMessages: [{ level: 'confirm', message: 'message' }] } },
errorMessage: {}
},
payees: {
payees: Immutable.List([{ id: 1 }]),
enableSubmitBar: false,
payeesLoaded: true
},
paymentAccounts: {
paymentAccounts: Immutable.List([]),
enableSubmitBar: false
},
scheduledPayments: {
paymentsLoaded: false
},
historyTab: {
isViewPaymentDetailsModalOpen: true,
viewPaymentDetails: { key: 'value' },
historicalPayments: {
payments: []
}
},
editPayment: {
editPaymentModal: {
isModalOpen: false
}
}
}
wrapper = mount(
<MockStoreProvider appState={appState}>
<AppHub getString={getString} />
</MockStoreProvider>
)
})
it('should render AppHubTabs', () => {
expect(wrapper.find(AppHubTabs)).toHaveLength(1)
})
it('should render AddPayeeMessage', () => {
expect(wrapper.find(AddPayeeMessage)).toHaveLength(0)
})
})
})