update tests

client/src/hooks/use-ipfs.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { render, wait } from '@testing-library/react'
+import useIpfs from './use-ipfs'
+
+export default function TestComponent() {
+    const { ipfsVersion, isIpfsReady, ipfsError, ipfsMessage } = useIpfs()
+
+    return (
+        <div>
+            {isIpfsReady && <span>Ready</span>}
+            {ipfsVersion} - {ipfsMessage} - {ipfsError}
+        </div>
+    )
+}
+
+describe('use-ipfs', () => {
+    it('renders without crashing', async () => {
+        const { container, getByText } = render(<TestComponent />)
+        expect(container.firstChild).toBeInTheDocument()
+        await wait(() => getByText('Ready'))
+    })
+})

client/src/hooks/use-ipfs.tsx

@@ -13,46 +13,46 @@ export default function useIpfs() {
     const [isIpfsReady, setIpfsReady] = useState(Boolean(ipfs))
     const [ipfsError, setIpfsError] = useState(null)
 
-    async function startIpfs() {
-        ipfsMessage = 'Starting IPFS...'
-
-        if (ipfs) {
-            console.log('IPFS already started')
-            // } else if (window.ipfs && window.ipfs.enable) {
-            //     console.log('Found window.ipfs')
-            //     ipfs = await window.ipfs.enable()
-        } else {
-            try {
-                const message = 'IPFS started'
-                console.time(message)
-
-                ipfs = await Ipfs.create({
-                    repo: `${os.homedir()}/.jsipfs-${shortid.generate()}`,
-                    config: {
-                        Addresses: {
-                            // 0 for port so system just assigns a new free port
-                            // to allow multiple nodes running at same time
-                            Swarm: ['/ip4/0.0.0.0/tcp/0']
-                        }
-                    }
-                })
-                console.timeEnd(message)
-                ipfsMessage = message
-
-                const { agentVersion } = await ipfs.id()
-                ipfsVersion = agentVersion
-            } catch (error) {
-                const message = `IPFS init error: ${error.message}`
-                ipfsMessage = message
-                console.error(message)
-                ipfs = null
-                setIpfsError(error.message)
-            }
-        }
-        setIpfsReady(Boolean(ipfs))
-    }
-
     useEffect(() => {
+        async function startIpfs() {
+            ipfsMessage = 'Starting IPFS...'
+
+            if (ipfs) {
+                console.log('IPFS already started')
+                // } else if (window.ipfs && window.ipfs.enable) {
+                //     console.log('Found window.ipfs')
+                //     ipfs = await window.ipfs.enable()
+            } else {
+                try {
+                    const message = 'IPFS started'
+                    console.time(message)
+
+                    ipfs = await Ipfs.create({
+                        repo: `${os.homedir()}/.jsipfs-${shortid.generate()}`,
+                        config: {
+                            Addresses: {
+                                // 0 for port so system just assigns a new free port
+                                // to allow multiple nodes running at same time
+                                Swarm: ['/ip4/0.0.0.0/tcp/0']
+                            }
+                        }
+                    })
+                    console.timeEnd(message)
+                    ipfsMessage = message
+
+                    const { agentVersion } = await ipfs.id()
+                    ipfsVersion = agentVersion
+                } catch (error) {
+                    const message = `IPFS init error: ${error.message}`
+                    ipfsMessage = message
+                    console.error(message)
+                    ipfs = null
+                    setIpfsError(error.message)
+                }
+            }
+            setIpfsReady(Boolean(ipfs))
+        }
+
         startIpfs()
 
         // just like componentWillUnmount()

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

@@ -21,11 +21,12 @@ describe('Ipfs', () => {
         // wait for IPFS node
         await findByText(/Connected to /)
 
-        const fileContents = 'file contents'
+        const file = new File(['(⌐□_□)'], 'chucknorris.png', {
-        const file = new Blob([fileContents], { type: 'text/plain' })
+            type: 'image/png'
+        })
 
         // drop a file
-        const dropzoneInput = container.querySelector('input')
+        const dropzoneInput = container.querySelector('.dropzone input')
         dropzoneInput && fireEvent.change(dropzoneInput, { target: [file] })
     })
 })

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

@@ -1,12 +1,10 @@
 /* eslint-disable no-console */
-
 import React, { useState, useEffect } from 'react'
 import useIpfsApi from '../../../../hooks/use-ipfs-api'
 import Label from '../../../../components/atoms/Form/Label'
 import Spinner from '../../../../components/atoms/Spinner'
 import Dropzone from '../../../../components/molecules/Dropzone'
-import { formatBytes } from '../../../../utils/utils'
+import { formatBytes, pingUrl, readFileAsync } from '../../../../utils/utils'
-import { pingUrl, readFileAsync } from './utils'
 import { ipfsGatewayUri } from '../../../../config'
 import styles from './index.module.scss'
 
@@ -57,6 +55,8 @@ export default function Ipfs({ addFile }: { addFile(url: string): void }) {
     }
 
     async function handleOnDrop(acceptedFiles: File[]) {
+        if (!acceptedFiles[0]) return
+
         const { name, size } = acceptedFiles[0]
         const totalSize = formatBytes(size, 0)
 

client/src/routes/Publish/Files/Ipfs/utils.test.tsx

@@ -1,47 +0,0 @@
-import mockAxios from 'jest-mock-axios'
-import { formatBytes, pingUrl } from './utils'
-
-const mockResponse = {
-    status: 200,
-    data: {}
-}
-
-const mockResponseFaulty = {
-    status: 404,
-    statusText: 'Not Found',
-    data: {}
-}
-
-afterEach(() => {
-    mockAxios.reset()
-})
-
-describe('utils', () => {
-    it('formatBytes outputs as expected', () => {
-        const number = 1024
-        const output = formatBytes(number, 0)
-        expect(output).toBe('1 KB')
-    })
-
-    it('formatBytes 0 conversion', () => {
-        const number = 0
-        const output = formatBytes(number, 0)
-        expect(output).toBe('0 Bytes')
-    })
-
-    it('pingUrl can be called', () => {
-        pingUrl('https://oceanprotocol.com')
-        mockAxios.mockResponse(mockResponse)
-        expect(mockAxios).toHaveBeenCalled()
-    })
-
-    it('pingUrl can be called with non 200 response', () => {
-        pingUrl('https://oceanprotocol.com')
-        mockAxios.mockResponse(mockResponseFaulty)
-    })
-
-    it('pingUrl error catch', () => {
-        pingUrl('https://oceanprotocol.com')
-        mockAxios.mockError({ message: 'Error catch' })
-    })
-})

client/src/routes/Publish/Files/Ipfs/utils.tsx

@@ -1,28 +0,0 @@
-/* eslint-disable no-console */
-import axios from 'axios'
-
-export async function pingUrl(url: string) {
-    try {
-        const response = await axios(url)
-        if (response.status !== 200) console.error(`Not found: ${url}`)
-
-        console.log(`File found: ${url}`)
-        return
-    } catch (error) {
-        console.error(error.message)
-    }
-}
-
-export function readFileAsync(file: File) {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader()
-        reader.onerror = () => {
-            reader.abort()
-            reject(new DOMException('Problem parsing input file.'))
-        }
-        reader.onload = () => {
-            resolve(reader.result)
-        }
-        reader.readAsArrayBuffer(file)
-    })
-}

client/src/utils/utils.test.ts

@@ -0,0 +1,69 @@
+import mockAxios from 'jest-mock-axios'
+import { formatBytes, pingUrl, arraySum, readFileAsync } from './utils'
+
+describe('formatBytes', () => {
+    it('outputs as expected', () => {
+        const number = 1024
+        const output = formatBytes(number, 0)
+        expect(output).toBe('1 KB')
+    })
+
+    it('0 conversion', () => {
+        const number = 0
+        const output = formatBytes(number, 0)
+        expect(output).toBe('0 Bytes')
+    })
+})
+
+describe('pingUrl', () => {
+    const mockResponse = {
+        status: 200,
+        data: {}
+    }
+
+    const mockResponseFaulty = {
+        status: 404,
+        statusText: 'Not Found',
+        data: {}
+    }
+
+    afterEach(() => {
+        mockAxios.reset()
+    })
+
+    it('pingUrl can be called', () => {
+        pingUrl('https://oceanprotocol.com')
+        mockAxios.mockResponse(mockResponse)
+        expect(mockAxios).toHaveBeenCalled()
+    })
+
+    it('pingUrl can be called with non 200 response', () => {
+        pingUrl('https://oceanprotocol.com')
+        mockAxios.mockResponse(mockResponseFaulty)
+    })
+
+    it('pingUrl error catch', () => {
+        pingUrl('https://oceanprotocol.com')
+        mockAxios.mockError({ message: 'Error catch' })
+    })
+})
+
+describe('arraySum', () => {
+    it('outputs as expected', () => {
+        const array = [2, 3]
+        const output = arraySum(array)
+        expect(output).toBe(5)
+    })
+})
+
+describe('readFileAsync', () => {
+    it('outputs as expected', async () => {
+        const file = new File(['ABC'], 'filename.txt', {
+            type: 'text/plain',
+            lastModified: Date.now()
+        })
+
+        const output = await readFileAsync(file)
+        expect(output).toBeInstanceOf(ArrayBuffer)
+    })
+})

client/src/utils/utils.ts

@@ -1,3 +1,6 @@
+/* eslint-disable no-console */
+import axios from 'axios'
+
 export function formatBytes(a: number, b: number) {
     if (a === 0) return '0 Bytes'
     const c = 1024
@@ -11,3 +14,29 @@ export function formatBytes(a: number, b: number) {
 export function arraySum(array: number[]) {
     return array.reduce((a, b) => a + b, 0)
 }
+
+export async function pingUrl(url: string) {
+    try {
+        const response = await axios(url)
+        if (response.status !== 200) console.error(`Not found: ${url}`)
+
+        console.log(`File found: ${url}`)
+        return
+    } catch (error) {
+        console.error(error.message)
+    }
+}
+
+export function readFileAsync(file: File) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.onerror = () => {
+            reader.abort()
+            reject(new DOMException('Problem parsing input file.'))
+        }
+        reader.onload = () => {
+            resolve(reader.result)
+        }
+        reader.readAsArrayBuffer(file)
+    })
+}