message output refactor, testing

client/src/routes/Details/AssetFile.test.tsx

@@ -6,7 +6,7 @@ import { DDO } from '@oceanprotocol/squid'
 import { StateMock } from '@react-mock/state'
 import ReactGA from 'react-ga'
 import { User } from '../../context'
-import AssetFile from './AssetFile'
+import AssetFile, { messages } from './AssetFile'
 
 const file = {
     index: 0,
@@ -57,6 +57,72 @@ describe('AssetFile', () => {
         fireEvent.click(button)
     })
 
+    it('renders feedback message: initial', async () => {
+        const { container } = render(
+            <StateMock state={{ isLoading: true, step: null }}>
+                <AssetFile file={file} ddo={ddo} />
+            </StateMock>
+        )
+        expect(container.querySelector('.spinner')).toHaveTextContent(
+            messages.start
+        )
+    })
+
+    it('renders feedback message: CreatingAgreement', async () => {
+        const { container } = render(
+            <StateMock state={{ isLoading: true, step: 0 }}>
+                <AssetFile file={file} ddo={ddo} />
+            </StateMock>
+        )
+        expect(container.querySelector('.spinner')).toHaveTextContent(
+            messages[0].replace(/<(?:.|\n)*?>/gm, '')
+        )
+    })
+
+    it('renders feedback message: AgreementInitialized', async () => {
+        const { container } = render(
+            <StateMock state={{ isLoading: true, step: 1 }}>
+                <AssetFile file={file} ddo={ddo} />
+            </StateMock>
+        )
+        expect(container.querySelector('.spinner')).toHaveTextContent(
+            messages[1].replace(/<(?:.|\n)*?>/gm, '')
+        )
+    })
+
+    it('renders feedback message: LockingPayment', async () => {
+        const { container } = render(
+            <StateMock state={{ isLoading: true, step: 2 }}>
+                <AssetFile file={file} ddo={ddo} />
+            </StateMock>
+        )
+        expect(container.querySelector('.spinner')).toHaveTextContent(
+            messages[2].replace(/<(?:.|\n)*?>/gm, '')
+        )
+    })
+
+    it('renders feedback message: LockedPayment', async () => {
+        const { container } = render(
+            <StateMock state={{ isLoading: true, step: 3 }}>
+                <AssetFile file={file} ddo={ddo} />
+            </StateMock>
+        )
+        expect(container.querySelector('.spinner')).toHaveTextContent(
+            messages[3].replace(/<(?:.|\n)*?>/gm, '')
+        )
+    })
+
+    it('renders feedback message: before consume', async () => {
+        const { container } = render(
+            <StateMock state={{ isLoading: true, step: 4 }}>
+                <AssetFile file={file} ddo={ddo} />
+            </StateMock>
+        )
+        expect(container.querySelector('.spinner')).toHaveTextContent(
+            messages[4].replace(/<(?:.|\n)*?>/gm, '')
+        )
+    })
+
     it('renders loading state', async () => {
         const { container } = render(
             <StateMock state={{ isLoading: true }}>

client/src/routes/Details/AssetFile.tsx

@@ -7,6 +7,15 @@ import { User } from '../../context'
 import styles from './AssetFile.module.scss'
 import ReactGA from 'react-ga'
 
+export const messages = {
+    start: 'Decrypting file URL...',
+    0: '1/3<br />Asking for agreement signature...',
+    1: '1/3<br />Agreement initialized.',
+    2: '2/3<br />Asking for two payment confirmations...',
+    3: '2/3<br />Payment confirmed. Requesting access...',
+    4: '3/3<br /> Access granted. Consuming file...'
+}
+
 interface AssetFileProps {
     file: File
     ddo: DDO
@@ -14,7 +23,6 @@ interface AssetFileProps {
 
 interface AssetFileState {
     isLoading: boolean
-    message: string
     error: string
     step: number | null
 }
@@ -25,38 +33,13 @@ export default class AssetFile extends PureComponent<
 > {
     public state = {
         isLoading: false,
-        message: 'Decrypting file URL...',
         error: '',
         step: null
     }
 
-    private feedbackMessage = (step: number | null) => {
-        // events from squid-js for `ocean.assets.order`:
-        // 0 CreatingAgreement
-        // 1 AgreementInitialized
-        // 2 LockingPayment
-        // 3 LockedPayment
-        // 4 (not from squid-js) before consume function is executed
-        switch (step) {
-            case 0:
-                return '1/3<br />Asking for agreement signature...'
-            case 1:
-                return '1/3<br />Agreement initialized.'
-            case 2:
-                return '2/3<br />Asking for two payment confirmations...'
-            case 3:
-                return '2/3<br />Payment confirmed. Requesting access...'
-            case 4:
-                return '3/3<br /> Access granted. Consuming file...'
-            default:
-                return this.state.message
-        }
-    }
-
     private resetState = () =>
         this.setState({
             isLoading: true,
-            message: 'Decrypting file URL...',
             error: '',
             step: null
         })
@@ -97,7 +80,7 @@ export default class AssetFile extends PureComponent<
             })
             this.setState({ isLoading: false })
         } catch (error) {
-            Logger.log('error', error)
+            Logger.log('error', error.message)
             this.setState({ isLoading: false, error: error.message })
             ReactGA.event({
                 category: 'Purchase',
@@ -126,14 +109,16 @@ export default class AssetFile extends PureComponent<
                 </ul>
 
                 {isLoading ? (
-                    <Spinner message={this.feedbackMessage(step)} />
+                    <Spinner
+                        message={
+                            step === null ? messages.start : messages[step]
+                        }
+                    />
                 ) : (
                     <Button
                         primary
                         className={styles.buttonMain}
-                        // TODO: remove the || 0 once hack
+                        // weird 0 hack so TypeScript is happy
-                        // https://github.com/oceanprotocol/squid-js/pull/221
-                        // is released
                         onClick={() => this.purchaseAsset(ddo, index || 0)}
                         disabled={!isLogged || !isOceanNetwork}
                     >