Merge pull request #26 from dhis2/test/data-workspace

test(data-workspace): add tests

package.json

@@ -8,14 +8,18 @@
         "build": "d2-app-scripts build",
         "deploy": "d2-app-scripts deploy",
         "format": "d2-style apply",
+        "format:staged": "d2-style apply --staged",
         "lint": "d2-style check",
         "start": "d2-app-scripts start",
         "test": "d2-app-scripts test"
     },
     "devDependencies": {
         "@dhis2/cli-app-scripts": "^7.1.0",
         "@dhis2/cli-style": "^9.0.1",
+        "@testing-library/jest-dom": "^5.14.1",
+        "@testing-library/react": "^12.0.0",
         "@testing-library/react-hooks": "^7.0.1",
+        "@testing-library/user-event": "^13.1.9",
         "enzyme": "^3.11.0",
         "enzyme-adapter-react-16": "^1.15.6",
         "identity-obj-proxy": "^3.0.0",

src/data-workspace/data-set-navigation/index.js

@@ -0,0 +1 @@
+export { DataSetNavigation } from './data-set-navigation.js'

src/data-workspace/data-workspace.js

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
 import { useWorkflowContext } from '../workflow-context/index.js'
 import { useSelectionParams } from '../workflow-context/use-selection-params.js'
-import { DataSetNavigation } from './data-set-navigation.js'
-import { Display } from './display.js'
-import { TitleBar } from './title-bar.js'
+import { DataSetNavigation } from './data-set-navigation/index.js'
+import { Display } from './display/index.js'
+import { TitleBar } from './title-bar/index.js'
 
 const DataWorkspace = () => {
     const { pe: periodId, ou: organisationUnitId } = useSelectionParams()
@@ -26,9 +26,9 @@ const DataWorkspace = () => {
             />
             <Display
                 workflowName={workflow.displayName}
+                dataSetId={selectedDataSet}
                 periodId={periodId}
                 organisationUnitId={organisationUnitId}
-                dataSetId={selectedDataSet}
             />
         </>
     )

src/data-workspace/data-workspace.test.js

@@ -0,0 +1,94 @@
+import { shallow } from 'enzyme'
+import React from 'react'
+import { useWorkflowContext } from '../workflow-context/index.js'
+import { useSelectionParams } from '../workflow-context/use-selection-params.js'
+import { DataSetNavigation } from './data-set-navigation/index.js'
+import { DataWorkspace } from './data-workspace.js'
+import { Display } from './display/index.js'
+import { TitleBar } from './title-bar/index.js'
+
+jest.mock('../workflow-context/index.js', () => ({
+    useWorkflowContext: jest.fn(),
+}))
+
+jest.mock('../workflow-context/use-selection-params.js', () => ({
+    useSelectionParams: jest.fn(),
+}))
+
+const mockDataSets = [
+    {
+        id: 'data-set-1',
+        displayName: 'Data set 1',
+        periodType: 'Monthly',
+    },
+    {
+        id: 'data-set-2',
+        displayName: 'Data set 2',
+        periodType: 'Monthly',
+    },
+]
+
+useWorkflowContext.mockImplementation(() => ({
+    displayName: 'Workflow a',
+    id: 'i5m0JPw4DQi',
+    periodType: 'Monthly',
+    dataSets: mockDataSets,
+    approvalState: 'APPROVED_HERE',
+}))
+
+useSelectionParams.mockImplementation(() => ({
+    pe: '201204',
+    ou: 'ImspTQPwCqd',
+}))
+
+describe('<DataWorkspace>', () => {
+    it('renders a TitleBar, DataSetNavigation and Display', () => {
+        const wrapper = shallow(<DataWorkspace />)
+
+        expect(wrapper.find(TitleBar)).toHaveLength(1)
+        expect(wrapper.find(DataSetNavigation)).toHaveLength(1)
+        expect(wrapper.find(Display)).toHaveLength(1)
+    })
+
+    it('if there is only one data set, select it automatically', () => {
+        const dataSet = mockDataSets[0]
+        useWorkflowContext.mockImplementationOnce(() => ({
+            displayName: 'Workflow a',
+            id: 'i5m0JPw4DQi',
+            periodType: 'Monthly',
+            dataSets: [dataSet],
+            approvalState: 'APPROVED_HERE',
+        }))
+        const wrapper = shallow(<DataWorkspace />)
+
+        expect(wrapper.find(DataSetNavigation).prop('selected')).toBe(
+            dataSet.id
+        )
+        expect(wrapper.find(Display).prop('dataSetId')).toBe(dataSet.id)
+    })
+
+    it('if there is more than one data set, do not select one automatically', () => {
+        const wrapper = shallow(<DataWorkspace />)
+
+        expect(
+            wrapper.find(DataSetNavigation).prop('dataSets').length
+        ).toBeGreaterThan(0)
+        expect(wrapper.find(DataSetNavigation).prop('selected')).toBe(null)
+        expect(wrapper.find(Display).prop('dataSetId')).toBe(null)
+    })
+
+    it('if there are no data sets, selection should be empty', () => {
+        useWorkflowContext.mockImplementationOnce(() => ({
+            displayName: 'Workflow a',
+            id: 'i5m0JPw4DQi',
+            periodType: 'Monthly',
+            dataSets: [],
+            approvalState: 'APPROVED_HERE',
+        }))
+        const wrapper = shallow(<DataWorkspace />)
+
+        expect(wrapper.find(DataSetNavigation).prop('dataSets')).toHaveLength(0)
+        expect(wrapper.find(DataSetNavigation).prop('selected')).toBe(null)
+        expect(wrapper.find(Display).prop('dataSetId')).toBe(null)
+    })
+})

src/data-workspace/display.js → src/data-workspace/display/display.js

@@ -17,7 +17,7 @@ const query = {
     },
 }
 
-const Display = ({ workflowName, periodId, organisationUnitId, dataSetId }) => {
+const Display = ({ workflowName, dataSetId, periodId, organisationUnitId }) => {
     const { called, loading, data, error, refetch } = useDataQuery(query, {
         lazy: true,
     })

src/data-workspace/display/display.test.js

@@ -0,0 +1,131 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import {
+    render,
+    screen,
+    waitFor,
+    waitForElementToBeRemoved,
+} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import React from 'react'
+import { Display } from './display.js'
+
+const defaultProps = {
+    workflowName: 'Workflow 1',
+    dataSetId: 'data-set-1',
+    periodId: 'period-1',
+    organisationUnitId: 'ou-1',
+}
+
+describe('<Display>', () => {
+    it('asks the user to select a data set if none is selected', () => {
+        render(
+            <CustomDataProvider options={{ loadForever: true }}>
+                <Display {...defaultProps} dataSetId={null} />
+            </CustomDataProvider>
+        )
+
+        expect(screen.getByRole('heading')).toHaveTextContent(
+            'Choose a data set to review'
+        )
+        expect(
+            screen.getByText(
+                `${defaultProps.workflowName} has multiple data sets. Choose a data set from the tabs above.`
+            )
+        ).toBeInTheDocument()
+    })
+
+    it('renders a loading spinner if a data set is selected', () => {
+        render(
+            <CustomDataProvider options={{ loadForever: true }}>
+                <Display {...defaultProps} />
+            </CustomDataProvider>
+        )
+
+        expect(screen.getByRole('progressbar')).toBeInTheDocument()
+        expect(screen.getByText('Loading data set')).toBeInTheDocument()
+    })
+
+    it('shows an error notice with a retry button if there was an error fetching the data set report', async () => {
+        const data = {}
+        render(
+            <CustomDataProvider data={data}>
+                <Display {...defaultProps} />
+            </CustomDataProvider>
+        )
+
+        await waitFor(() => screen.getByRole('heading'))
+
+        expect(screen.getByRole('heading')).toHaveTextContent(
+            'There was a problem displaying this data set'
+        )
+        expect(
+            screen.getByText(
+                `This data set couldn't be loaded or displayed. Try again, or contact your system administrator.`
+            )
+        ).toBeInTheDocument()
+        expect(screen.getByRole('button')).toHaveTextContent(
+            'Retry loading data set'
+        )
+
+        data.dataSetReport = []
+        userEvent.click(screen.getByRole('button', 'Retry loading data set'))
+        await waitForElementToBeRemoved(() => screen.getByRole('progressbar'))
+
+        expect(
+            screen.queryByRole(
+                'heading',
+                'There was a problem displaying this data set'
+            )
+        ).not.toBeInTheDocument()
+    })
+
+    it('shows a message if the data set report has no data for the seleted period and organisation unit', async () => {
+        const data = {
+            dataSetReport: [],
+        }
+        render(
+            <CustomDataProvider data={data}>
+                <Display {...defaultProps} />
+            </CustomDataProvider>
+        )
+
+        await waitForElementToBeRemoved(() => screen.getByRole('progressbar'))
+
+        expect(
+            screen.getByText(
+                `This data set doesn't have any data for the selected period and organisation unit.`
+            )
+        ).toBeInTheDocument()
+    })
+
+    it('renders one table per data set in the report', async () => {
+        const data = {
+            dataSetReport: [
+                {
+                    title: 'Data set 1',
+                    headers: [{ name: 'Header 1' }, { name: 'Header 2' }],
+                    rows: [],
+                },
+                {
+                    title: 'Data set 2',
+                    headers: [{ name: 'Header 1' }, { name: 'Header 2' }],
+                    rows: [],
+                },
+                {
+                    title: 'Data set 3',
+                    headers: [{ name: 'Header 1' }, { name: 'Header 2' }],
+                    rows: [],
+                },
+            ],
+        }
+        render(
+            <CustomDataProvider data={data}>
+                <Display {...defaultProps} />
+            </CustomDataProvider>
+        )
+
+        await waitForElementToBeRemoved(() => screen.getByRole('progressbar'))
+
+        expect(await screen.findAllByRole('table')).toHaveLength(3)
+    })
+})

src/data-workspace/display/index.js

@@ -0,0 +1 @@
+export { Display } from './display.js'

src/data-workspace/title-bar/index.js

@@ -0,0 +1 @@
+export { TitleBar } from './title-bar.js'

src/data-workspace/title-bar.js → src/data-workspace/title-bar/title-bar.js

@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { IconDimensionDataSet16 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { StatusTag } from '../shared/status-tag/index.js'
+import { StatusTag } from '../../shared/status-tag/index.js'
 import styles from './title-bar.module.css'
 
 const TitleBar = ({ name, dataSetsCount, approvalState }) => (

src/test-utils/setup-tests.js

@@ -1,4 +1,5 @@
 import { configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
+import '@testing-library/jest-dom'
 
 configure({ adapter: new Adapter() })