test: changes to jest tests to remove console warnings (#1499)

Changes in this PR are are refactoring and jest test improvements:
Refactor:
* replace windowHeight redux prop with the WindowDimensions context (all components needing window width/height now use the context)

Testing:
* EditBar.spec: use async/act to trigger useEffect and mocked api request - removes error about api request (tests still passed but there was a console error)
* EditDashboard.spec: mock the EditBar and focus on EditDashboard functionality
* Dashboard: use testing-library and test the default component export, which results in mapStateToProps also getting covered by the tests
* Named functions for mocks - removes warning

src/components/ControlBar/__tests__/DashboardItemChip.spec.js

@@ -7,6 +7,7 @@ describe('DashboardItemChip', () => {
     const defaultProps = {
         starred: false,
         selected: false,
+        onClick: jest.fn(),
         label: 'Hello Rainbow Dash',
         dashboardId: 'myLittlePony',
         classes: {

src/components/ControlBar/__tests__/EditBar.spec.js

@@ -10,20 +10,13 @@ import { Router } from 'react-router-dom'
 import { createMemoryHistory } from 'history'
 import EditBar from '../EditBar'
 import { apiFetchDashboard } from '../../../api/dashboards'
-import {
-    acClearEditDashboard,
-    tSaveDashboard,
-} from '../../../actions/editDashboard'
+import { acClearEditDashboard } from '../../../actions/editDashboard'
 
 const mockStore = configureMockStore()
 
 jest.mock('@dhis2/app-runtime-adapter-d2')
 jest.mock('@dhis2/app-runtime')
 jest.mock('../../../api/dashboards')
-jest.mock('../../../actions/editDashboard', () => ({
-    acClearEditDashboard: jest.fn(),
-    tSaveDashboard: jest.fn(),
-}))
 
 jest.mock(
     '@dhis2/d2-ui-translation-dialog',
@@ -49,17 +42,11 @@ useD2.mockReturnValue({
     },
 })
 
-apiFetchDashboard.mockResolvedValue({
-    rainbow: {
-        id: 'rainbow123',
-    },
-})
-
 useDataEngine.mockReturnValue({
     dataEngine: {},
 })
 
-test('renders the EditBar', () => {
+test('renders the EditBar', async () => {
     const store = {
         editDashboard: {
             id: 'rainbowDash',
@@ -71,15 +58,20 @@ test('renders the EditBar', () => {
             printPreviewView: false,
         },
     }
+
+    const promise = Promise.resolve()
+    apiFetchDashboard.mockResolvedValue(promise)
+
     const { container } = render(
         <Provider store={mockStore(store)}>
             <EditBar />
         </Provider>
     )
+    await act(() => promise)
     expect(container).toMatchSnapshot()
 })
 
-test('renders only the Go to Dashboards button when no update access', () => {
+test('renders only the Go to Dashboards button when no update access', async () => {
     const store = {
         editDashboard: {
             id: 'rainbowDash',
@@ -91,15 +83,20 @@ test('renders only the Go to Dashboards button when no update access', () => {
             printPreviewView: false,
         },
     }
+
+    const promise = Promise.resolve()
+    apiFetchDashboard.mockResolvedValue(promise)
+
     const { container } = render(
         <Provider store={mockStore(store)}>
             <EditBar />
         </Provider>
     )
+    await act(() => promise)
     expect(container).toMatchSnapshot()
 })
 
-test('renders Save and Discard buttons but no dialogs when no dashboard id', () => {
+test('renders Save and Discard buttons but no dialogs when no dashboard id', async () => {
     const store = {
         editDashboard: {
             id: '',
@@ -109,15 +106,20 @@ test('renders Save and Discard buttons but no dialogs when no dashboard id', ()
         },
     }
 
+    const promise = Promise.resolve()
+    apiFetchDashboard.mockResolvedValue(promise)
+
     const { container } = render(
         <Provider store={mockStore(store)}>
             <EditBar />
         </Provider>
     )
+
+    await act(() => promise)
     expect(container).toMatchSnapshot()
 })
 
-test('renders Translate, Delete, and Discard buttons when delete access', () => {
+test('renders Translate, Delete, and Discard buttons when delete access', async () => {
     const store = {
         editDashboard: {
             id: 'rainbowDash',
@@ -129,15 +131,20 @@ test('renders Translate, Delete, and Discard buttons when delete access', () =>
             printPreviewView: false,
         },
     }
+    const promise = Promise.resolve()
+    apiFetchDashboard.mockResolvedValue(promise)
+
     const { container } = render(
         <Provider store={mockStore(store)}>
             <EditBar />
         </Provider>
     )
+
+    await act(() => promise)
     expect(container).toMatchSnapshot()
 })
 
-test('shows the confirm delete dialog when delete button clicked', () => {
+test('shows the confirm delete dialog when delete button clicked', async () => {
     const store = {
         editDashboard: {
             id: 'rainbowDash',
@@ -149,12 +156,16 @@ test('shows the confirm delete dialog when delete button clicked', () => {
             printPreviewView: false,
         },
     }
+    const promise = Promise.resolve()
+    apiFetchDashboard.mockResolvedValue(promise)
     const { getByText, asFragment } = render(
         <Provider store={mockStore(store)}>
             <EditBar />
         </Provider>
     )
 
+    await act(() => promise)
+
     asFragment()
 
     act(() => {
@@ -164,7 +175,7 @@ test('shows the confirm delete dialog when delete button clicked', () => {
     expect(asFragment()).toMatchSnapshot()
 })
 
-test('shows the translate dialog', () => {
+test('shows the translate dialog', async () => {
     const store = {
         editDashboard: {
             id: 'rainbowDash',
@@ -176,12 +187,17 @@ test('shows the translate dialog', () => {
             printPreviewView: false,
         },
     }
+
+    const promise = Promise.resolve()
+    apiFetchDashboard.mockResolvedValue(promise)
     const { getByText, asFragment } = render(
         <Provider store={mockStore(store)}>
             <EditBar />
         </Provider>
     )
 
+    await act(() => promise)
+
     act(() => {
         asFragment()
         asFragment()
@@ -192,7 +208,7 @@ test('shows the translate dialog', () => {
     expect(asFragment()).toMatchSnapshot()
 })
 
-test('triggers the discard action', () => {
+test('triggers the discard action', async () => {
     const store = mockStore({
         editDashboard: {
             id: 'rainbowDash',
@@ -207,6 +223,9 @@ test('triggers the discard action', () => {
 
     store.dispatch = jest.fn()
 
+    const promise = Promise.resolve()
+    apiFetchDashboard.mockResolvedValue(promise)
+
     const { getByText } = render(
         <Provider store={store}>
             <Router history={createMemoryHistory()}>
@@ -215,41 +234,12 @@ test('triggers the discard action', () => {
         </Provider>
     )
 
+    await act(() => promise)
+
     act(() => {
         fireEvent.click(getByText('Exit without saving'))
     })
 
     expect(store.dispatch).toHaveBeenCalledTimes(1)
     expect(store.dispatch).toHaveBeenCalledWith(acClearEditDashboard())
 })
-
-test('triggers the save action', () => {
-    const store = mockStore({
-        editDashboard: {
-            id: 'rainbowDash',
-            name: 'Rainbow Dash',
-            access: {
-                update: true,
-                delete: true,
-            },
-            printPreviewView: false,
-        },
-    })
-
-    store.dispatch = jest.fn().mockResolvedValue('rainbowDash')
-
-    const { getByText } = render(
-        <Provider store={store}>
-            <Router history={createMemoryHistory()}>
-                <EditBar />
-            </Router>
-        </Provider>
-    )
-
-    act(() => {
-        fireEvent.click(getByText('Save changes'))
-    })
-
-    expect(store.dispatch).toHaveBeenCalledTimes(1)
-    expect(store.dispatch).toHaveBeenCalledWith(tSaveDashboard())
-})

src/components/Dashboard/Dashboard.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
 import isEmpty from 'lodash/isEmpty'
 import i18n from '@dhis2/d2-i18n'
 import { Layer, CenteredContent, CircularLoader } from '@dhis2/ui'
-import debounce from 'lodash/debounce'
 import { Redirect } from 'react-router-dom'
 
 import DashboardsBar from '../ControlBar/DashboardsBar'
@@ -17,7 +16,6 @@ import PrintLayoutDashboard from './PrintLayoutDashboard'
 
 import { tSelectDashboard } from '../../actions/dashboards'
 import { acClearEditDashboard } from '../../actions/editDashboard'
-import { acSetWindowHeight } from '../../actions/windowHeight'
 import {
     sDashboardsIsFetching,
     sGetAllDashboards,
@@ -56,14 +54,13 @@ const dashboardMap = {
     [PRINT_LAYOUT]: <PrintLayoutDashboard />,
 }
 
-export const Dashboard = ({
+const Dashboard = ({
     id,
     mode,
     dashboardsLoaded,
     dashboardsIsEmpty,
     routeId,
     selectDashboard,
-    setWindowHeight,
     clearEditDashboard,
 }) => {
     const { width } = useWindowDimensions()
@@ -94,17 +91,6 @@ export const Dashboard = ({
         }
     }, [dashboardsLoaded, dashboardsIsEmpty, routeId, mode])
 
-    useEffect(() => {
-        const onResize = debounce(
-            () => setWindowHeight(window.innerHeight),
-            300
-        )
-        window.addEventListener('resize', onResize)
-        return () => {
-            window.removeEventListener('resize', onResize)
-        }
-    }, [])
-
     if (!dashboardsLoaded) {
         return (
             <Layer translucent>
@@ -168,7 +154,6 @@ Dashboard.propTypes = {
     mode: PropTypes.string,
     routeId: PropTypes.string,
     selectDashboard: PropTypes.func,
-    setWindowHeight: PropTypes.func,
 }
 
 const mapStateToProps = (state, ownProps) => {
@@ -183,6 +168,5 @@ const mapStateToProps = (state, ownProps) => {
 
 export default connect(mapStateToProps, {
     selectDashboard: tSelectDashboard,
-    setWindowHeight: acSetWindowHeight,
     clearEditDashboard: acClearEditDashboard,
 })(Dashboard)

src/components/Dashboard/EditDashboard.js

@@ -11,7 +11,6 @@ import { useWindowDimensions } from '../WindowDimensionsProvider'
 import LayoutPrintPreview from './PrintLayoutDashboard'
 import NoContentMessage from '../../widgets/NoContentMessage'
 import { acSetEditDashboard } from '../../actions/editDashboard'
-import { sGetWindowHeight } from '../../reducers/windowHeight'
 import { sGetSelectedId } from '../../reducers/selected'
 import {
     sGetDashboardById,
@@ -26,7 +25,7 @@ import {
 import { isSmallScreen } from '../../modules/smallScreen'
 
 const EditDashboard = props => {
-    const { width } = useWindowDimensions()
+    const { width, height } = useWindowDimensions()
 
     useEffect(() => {
         if (props.dashboard) {
@@ -39,11 +38,14 @@ const EditDashboard = props => {
             return <LayoutPrintPreview fromEdit={true} />
         }
 
-        const height =
-            props.windowHeight - HEADERBAR_HEIGHT - getControlBarHeight(1)
+        const dashboardHeight =
+            height - HEADERBAR_HEIGHT - getControlBarHeight(1)
 
         return (
-            <div className="dashboard-wrapper" style={{ height }}>
+            <div
+                className="dashboard-wrapper"
+                style={{ height: dashboardHeight }}
+            >
                 <EditTitleBar />
                 <EditItemGrid />
             </div>
@@ -82,7 +84,6 @@ EditDashboard.propTypes = {
     items: PropTypes.array,
     setEditDashboard: PropTypes.func,
     updateAccess: PropTypes.bool,
-    windowHeight: PropTypes.number,
 }
 
 const mapStateToProps = state => {
@@ -97,7 +98,6 @@ const mapStateToProps = state => {
         updateAccess,
         items: sGetDashboardItems(state),
         isPrintPreviewView: sGetIsPrintPreviewView(state),
-        windowHeight: sGetWindowHeight(state),
     }
 }