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,6 +13,7 @@ export default function useIpfs() {
     const [isIpfsReady, setIpfsReady] = useState(Boolean(ipfs))
     const [ipfsError, setIpfsError] = useState(null)
 
+    useEffect(() => {
         async function startIpfs() {
             ipfsMessage = 'Starting IPFS...'
 
@@ -52,7 +53,6 @@ export default function useIpfs() {
             setIpfsReady(Boolean(ipfs))
         }
 
-    useEffect(() => {
         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 Blob([fileContents], { type: 'text/plain' })
+        const file = new File(['(⌐□_□)'], 'chucknorris.png', {
+            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 { pingUrl, readFileAsync } from './utils'
+import { formatBytes, pingUrl, readFileAsync } from '../../../../utils/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)
+    })
+}