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: 15,
+            lines: 15,
+            statements: 15,
         },
     },
 }

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 { useAlert } 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 { ManualInstall } from './ManualInstall.js'
+
+jest.mock('@dhis2/app-runtime', () => ({
+    ...jest.requireActual('@dhis2/app-runtime'),
+    useAlert: jest.fn(() => jest.fn()),
+}))
+
+describe('Manual Install', () => {
+    const mockAlert = jest.fn()
+    let fetchSpy
+
+    beforeEach(() => {
+        global.fetch = jest.fn()
+        useAlert.mockImplementation(() => ({ show: mockAlert }))
+    })
+
+    afterEach(() => {
+        delete global.fetch
+        jest.resetAllMocks()
+    })
+
+    it('should call the correct upload endpoint ', async () => {
+        fetchSpy = jest.spyOn(global, 'fetch').mockResolvedValueOnce({
+            json: () => Promise.resolve({ app_hub_id: 'some_apphub_id' }),
+        })
+
+        const { getByTestId, findByText } = render(<ManualInstall />)
+
+        const fileInput = getByTestId('file-upload')
+        userEvent.upload(fileInput, 'testfile')
+
+        await findByText(/Uploading/i)
+
+        expect(fetchSpy).toHaveBeenCalledWith(
+            '../api/apps',
+            expect.objectContaining({
+                method: 'post',
+            })
+        )
+    })
+
+    it('should show the alert', async () => {
+        fetchSpy = jest.spyOn(global, 'fetch').mockResolvedValueOnce({
+            json: () => Promise.resolve({ app_hub_id: 'some_apphub_id' }),
+        })
+
+        const { getByTestId, findByText } = render(<ManualInstall />)
+
+        const fileInput = getByTestId('file-upload')
+        userEvent.upload(fileInput, 'testfile')
+
+        await findByText(/Uploading/i)
+
+        expect(mockAlert).toHaveBeenCalledWith({ id: 'some_apphub_id' })
+    })
+
+    it('should work with an empty response (pre v41)', async () => {
+        fetchSpy = jest.spyOn(global, 'fetch').mockResolvedValueOnce({
+            json: () => Promise.resolve(),
+        })
+
+        const { getByTestId, findByText } = render(<ManualInstall />)
+
+        const fileInput = getByTestId('file-upload')
+        userEvent.upload(fileInput, 'testfile')
+
+        await findByText(/Uploading/i)
+
+        expect(mockAlert).toHaveBeenCalledWith({ id: undefined })
+    })
+
+    it('should show an error if it fails', async () => {
+        fetchSpy = jest.spyOn(global, 'fetch').mockResolvedValueOnce({
+            json: () => {
+                throw 'upload failed'
+            },
+        })
+
+        const { getByTestId, findByText } = render(<ManualInstall />)
+
+        const fileInput = getByTestId('file-upload')
+        userEvent.upload(fileInput, 'testfile')
+
+        await findByText(/Uploading/i)
+
+        expect(mockAlert).toHaveBeenCalledWith({ error: 'upload failed' })
+    })
+})

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"