test: add tests for ManualInstall

jest.config.js

@@ -6,13 +6,13 @@ const config = {
     ],
     coverageThreshold: {
         global: {
-            // TODO: The following should be 50
-            branches: 0,
+            // TODO: The following should be ~50%
+            branches: 10,
 
-            // TODO: The following should be 75
-            functions: 0,
-            lines: 0,
-            statements: 0,
+            // TODO: The following should be ~75%
+            functions: 20,
+            lines: 20,
+            statements: 20,
         },
     },
 }

package.json

@@ -31,6 +31,7 @@
         "@dhis2/cli-style": "^10.4.1",
         "@testing-library/jest-dom": "^6.1.5",
         "@testing-library/react": "^12",
+        "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^29.5.11",
         "jest": "^29.7.0",
         "react-dom": "^16"

src/pages/ManualInstall/ManualInstall.js

@@ -29,7 +29,7 @@ const UploadButton = () => {
     const errorAlert = useAlert(
         ({ error }) =>
             i18n.t('Failed to install app: {{errorMessage}}', {
-                errorMessage: error.message,
+                errorMessage: error?.message,
                 nsSeparator: '-:-',
             }),
         { critical: true }
@@ -57,6 +57,7 @@ const UploadButton = () => {
         <>
             <form className={styles.hiddenForm} ref={formEl}>
                 <input
+                    data-test="file-upload"
                     type="file"
                     accept="application/zip"
                     ref={inputEl}

src/pages/ManualInstall/ManualInstall.spec.js

@@ -0,0 +1,93 @@
+import { Provider } from '@dhis2/app-runtime'
+import { render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import React from 'react'
+import '@testing-library/jest-dom'
+import { useHistory } from 'react-router-dom'
+import { MockAlertStack } from '../../test-utils/index.js'
+import { ManualInstall } from './ManualInstall.js'
+
+jest.mock('react-router-dom', () => ({
+    useHistory: jest.fn(() => ({
+        push: jest.fn(),
+    })),
+}))
+
+const renderWithProvider = (component) => {
+    return render(component, {
+        wrapper: ({ children }) => {
+            return (
+                <Provider config={{}}>
+                    {children}
+                    <MockAlertStack />
+                </Provider>
+            )
+        },
+    })
+}
+describe('Manual Install', () => {
+    const historyPush = jest.fn()
+
+    beforeEach(() => {
+        global.fetch = jest.fn()
+        useHistory.mockImplementation(() => ({ push: historyPush }))
+    })
+
+    afterEach(() => {
+        delete global.fetch
+        jest.resetAllMocks()
+    })
+
+    it('should allow navigating to the app', async () => {
+        jest.spyOn(global, 'fetch').mockResolvedValueOnce({
+            json: () => Promise.resolve({ app_hub_id: 'some_apphub_id' }),
+        })
+
+        const { getByTestId, getByText, findByText } = renderWithProvider(
+            <ManualInstall />
+        )
+
+        const fileInput = getByTestId('file-upload')
+        userEvent.upload(fileInput, 'testfile')
+
+        await findByText('App installed successfully')
+        await userEvent.click(getByText('Go to app'))
+        expect(historyPush).toHaveBeenCalledWith('/app/some_apphub_id')
+    })
+
+    it('should work with an empty response (pre v41)', async () => {
+        jest.spyOn(global, 'fetch').mockResolvedValueOnce({
+            json: () => Promise.resolve(),
+        })
+
+        const { getByTestId, findByText, queryByText } = renderWithProvider(
+            <ManualInstall />
+        )
+
+        const fileInput = getByTestId('file-upload')
+        userEvent.upload(fileInput, 'testfile')
+
+        await findByText('App installed successfully')
+        expect(queryByText('Go to app')).not.toBeInTheDocument()
+        expect(historyPush).not.toHaveBeenCalled()
+    })
+
+    it('should show an error if it fails', async () => {
+        jest.spyOn(global, 'fetch').mockResolvedValueOnce({
+            json: () => {
+                throw 'upload failed'
+            },
+        })
+
+        const { getByTestId, findByText, queryByText } = renderWithProvider(
+            <ManualInstall />
+        )
+
+        const fileInput = getByTestId('file-upload')
+        userEvent.upload(fileInput, 'testfile')
+
+        await findByText('Failed to install app:')
+        expect(queryByText('Go to app')).not.toBeInTheDocument()
+        expect(historyPush).not.toHaveBeenCalled()
+    })
+})

src/test-utils/MockAlertStack.js

@@ -0,0 +1,49 @@
+import { useAlerts } from '@dhis2/app-runtime'
+import PropTypes from 'prop-types'
+import React, { useEffect } from 'react'
+
+const MockAlert = ({ alert }) => {
+    useEffect(() => {
+        if (alert.options?.duration) {
+            setTimeout(() => alert.remove(), alert.options?.duration)
+        }
+    }, [alert])
+    return (
+        <div style={{ backgroundColor: '#CCC', padding: 8 }}>
+            {alert.message}
+            {alert?.options?.actions?.map((action, i) => (
+                <button key={i} onClick={action.onClick}>
+                    {action.label}
+                </button>
+            ))}
+        </div>
+    )
+}
+
+MockAlert.propTypes = {
+    alert: PropTypes.shape({
+        message: PropTypes.string,
+        options: PropTypes.shape({
+            actions: PropTypes.arrayOf(
+                PropTypes.shape({
+                    label: PropTypes.string,
+                    onClick: PropTypes.func,
+                })
+            ),
+            duration: PropTypes.number,
+        }),
+        remove: PropTypes.func,
+    }),
+}
+
+export const MockAlertStack = () => {
+    const alerts = useAlerts()
+
+    return (
+        <div style={{ position: 'absolute', bottom: 16, right: 16 }}>
+            {alerts.map((alert) => (
+                <MockAlert key={alert.id} alert={alert} />
+            ))}
+        </div>
+    )
+}

src/test-utils/index.js

@@ -0,0 +1 @@
+export * from './MockAlertStack.js'

yarn.lock

@@ -3190,6 +3190,13 @@
     "@testing-library/dom" "^8.0.0"
     "@types/react-dom" "<18.0.0"
 
+"@testing-library/user-event@^13.5.0":
+  version "13.5.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
+  integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"