mock file fetch request

client/package-lock.json

@@ -1315,6 +1315,17 @@
       "resolved": "https://registry.npmjs.org/@oceanprotocol/typographies/-/typographies-0.1.0.tgz",
       "integrity": "sha512-kMsZsqvzpz9KzVbVZzllwhPoIC3zbqsdRrClagZL/C2PHzgLrKGC1kYn3gPt0RMIFg9ZjrwieKaxlgIK9i9zzg=="
     },
+    "@react-mock/fetch": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@react-mock/fetch/-/fetch-0.3.0.tgz",
+      "integrity": "sha512-q1tqyrqeW4+J0R/rRghK86VG21fFFIMli1kxhi2z9wLAko10YNHB3UuI4fnXc+/kbjne0yVxyTp0s1xdzv+YzA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "fetch-mock": "^7.0.7",
+        "lodash": "^4.17.11"
+      }
+    },
     "@react-mock/state": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/@react-mock/state/-/state-0.1.8.tgz",
@@ -2690,6 +2701,31 @@
       "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==",
       "dev": true
     },
+    "babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
+          "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
+          "dev": true
+        },
+        "regenerator-runtime": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=",
+          "dev": true
+        }
+      }
+    },
     "babel-preset-jest": {
       "version": "24.6.0",
       "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.6.0.tgz",
@@ -6450,6 +6486,43 @@
         "pend": "~1.2.0"
       }
     },
+    "fetch-mock": {
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/fetch-mock/-/fetch-mock-7.3.3.tgz",
+      "integrity": "sha512-MHKcwZ4n9TmnfnVfelUBrrfxtC9tztafIR+F8l/Yu9N+y48fU1BAwj3iSxhYFYELVw73rCZh2DPWtWCekY/t+w==",
+      "dev": true,
+      "requires": {
+        "babel-polyfill": "^6.26.0",
+        "glob-to-regexp": "^0.4.0",
+        "path-to-regexp": "^2.2.1",
+        "whatwg-url": "^6.5.0"
+      },
+      "dependencies": {
+        "glob-to-regexp": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+          "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+          "dev": true
+        },
+        "path-to-regexp": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.4.0.tgz",
+          "integrity": "sha512-G6zHoVqC6GGTQkZwF4lkuEyMbVOjoBKAEybQUypI1WTkqinCOrq2x6U2+phkJ1XsEMTy4LjtwPI7HW+NVrRR2w==",
+          "dev": true
+        },
+        "whatwg-url": {
+          "version": "6.5.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.5.0.tgz",
+          "integrity": "sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==",
+          "dev": true,
+          "requires": {
+            "lodash.sortby": "^4.7.0",
+            "tr46": "^1.0.1",
+            "webidl-conversions": "^4.0.2"
+          }
+        }
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",

client/package.json

@@ -39,6 +39,7 @@
     "web3": "1.0.0-beta.37"
   },
   "devDependencies": {
+    "@react-mock/fetch": "^0.3.0",
     "@react-mock/state": "^0.1.8",
     "@testing-library/react": "^8.0.1",
     "@types/classnames": "^2.2.7",

client/src/routes/Publish/Files/index.test.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 import { render, fireEvent, waitForElement } from '@testing-library/react'
+import { FetchMock } from '@react-mock/fetch'
+import { serviceHost, servicePort, serviceScheme } from '../../../config'
 import Files from '.'
 
 const onChange = jest.fn()
@@ -18,29 +20,43 @@ const files = [
     }
 ]
 
-const setup = () => {
-    const utils = render(
-        <Files
-            files={files}
-            placeholder={'Hello'}
-            name={'Hello'}
-            onChange={onChange}
-        />
+const renderComponent = () =>
+    render(
+        <FetchMock
+            mocks={[
+                {
+                    matcher: `${serviceScheme}://${serviceHost}:${servicePort}/api/v1/urlcheck`,
+                    method: 'POST',
+                    response: {
+                        result: {
+                            url: 'https://demo.com',
+                            contentType: 'application/zip',
+                            contentLength: 237347827,
+                            found: true
+                        }
+                    }
+                }
+            ]}
+        >
+            <Files
+                files={files}
+                placeholder={'Hello'}
+                name={'Hello'}
+                onChange={onChange}
+            />
+        </FetchMock>
     )
-    const { container } = utils
-    return { container, ...utils }
-}
 
 describe('Files', () => {
-    it('renders without crashing', () => {
-        const { container } = setup()
+    it('renders without crashing', async () => {
+        const { container } = renderComponent()
 
         expect(container.firstChild).toBeInTheDocument()
         expect(container.querySelector('.itemForm')).not.toBeInTheDocument()
     })
 
     it('new file form can be opened and closed', async () => {
-        const { container, getByText } = setup()
+        const { container, getByText } = renderComponent()
 
         // open
         fireEvent.click(getByText('+ Add a file'))
@@ -54,14 +70,14 @@ describe('Files', () => {
     })
 
     it('item can be removed', async () => {
-        const { getByTitle } = setup()
+        const { getByTitle } = renderComponent()
 
         fireEvent.click(getByTitle('Remove item'))
         expect(files.length).toBe(0)
     })
 
     it('item can be added', async () => {
-        const { getByText, getByPlaceholderText } = setup()
+        const { getByText, getByPlaceholderText } = renderComponent()
 
         fireEvent.click(getByText('+ Add a file'))
         await waitForElement(() => getByText('- Cancel'))