test coverage fixes

client/src/components/atoms/Modal.tsx

@@ -32,7 +32,11 @@ const Modal = ({
             overlayClassName={styles.modalOverlay}
             {...props}
         >
-            <button className={styles.close} onClick={toggleModal}>
+            <button
+                className={styles.close}
+                onClick={toggleModal}
+                data-testid="closeModal"
+            >
                 &times;
             </button>
 

client/src/components/organisms/WalletSelector.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import ReactModal from 'react-modal'
+import WalletSelector from './WalletSelector'
+import { User, Market } from '../../context'
+import { userMockConnected } from '../../../__mocks__/user-mock'
+import { marketMock } from '../../../__mocks__/market-mock'
+
+describe('WalletSelector', () => {
+    it('renders without crashing', () => {
+        ReactModal.setAppElement(document.createElement('div'))
+
+        const { container } = render(
+            <User.Provider value={userMockConnected}>
+                <Market.Provider value={marketMock}>
+                    <WalletSelector />
+                </Market.Provider>
+            </User.Provider>
+        )
+        expect(container.firstChild).toBeInTheDocument()
+        fireEvent.click(container.querySelector('button'))
+    })
+})

client/src/components/organisms/Web3message.test.tsx

@@ -38,8 +38,8 @@ describe('Web3message', () => {
 
     it('renders with noAccount message', () => {
         const { container } = render(
-            <User.Provider value={{ ...userMock }}>
-                <Market.Provider value={{ ...marketMock }}>
+            <User.Provider value={userMock}>
+                <Market.Provider value={marketMock}>
                     <Web3message extended />
                 </Market.Provider>
             </User.Provider>
@@ -50,7 +50,7 @@ describe('Web3message', () => {
     it('renders with hasAccount message', () => {
         const { container } = render(
             <User.Provider value={userMockConnected}>
-                <Market.Provider value={{ ...marketMock }}>
+                <Market.Provider value={marketMock}>
                     <Web3message />
                 </Market.Provider>
             </User.Provider>

client/src/components/templates/Asset/Report.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { render, fireEvent, wait } from '@testing-library/react'
+import ReactModal from 'react-modal'
+import mockAxios from 'jest-mock-axios'
+import Report from './Report'
+
+afterEach(() => {
+    mockAxios.reset()
+})
+
+const mockResponse = {
+    data: { status: 'success' }
+}
+
+describe('Report', () => {
+    it('renders without crashing', async () => {
+        ReactModal.setAppElement(document.createElement('div'))
+
+        const { getByText, getByLabelText, getByTestId } = render(
+            <Report did="did:xxx" title="Hello" />
+        )
+        // Renders button by default
+        expect(getByText('Report Data Set')).toBeInTheDocument()
+
+        // open modal
+        fireEvent.click(getByText('Report Data Set'))
+        await wait(() => expect(getByText('did:xxx')).toBeInTheDocument())
+
+        // add comment
+        const comment = getByLabelText('Comment')
+        fireEvent.change(comment, {
+            target: { value: 'Plants' }
+        })
+        expect(comment).toHaveTextContent('Plants')
+        fireEvent.click(getByTestId('report'))
+        mockAxios.mockResponse(mockResponse)
+        // expect(mockAxios.post).toHaveBeenCalled()
+
+        // close modal
+        fireEvent.click(getByTestId('closeModal'))
+    })
+})

client/src/components/templates/Asset/Report.tsx

@@ -142,6 +142,7 @@ export default class Report extends PureComponent<
                                     primary
                                     onClick={(e: Event) => this.sendEmail(e)}
                                     disabled={this.state.comment === ''}
+                                    data-testid="report"
                                 >
                                     Report Data Set
                                 </Button>

client/src/components/templates/Asset/index.test.tsx

@@ -1,22 +1,18 @@
 import React from 'react'
 import { render } from '@testing-library/react'
+import { createMemoryHistory, createLocation } from 'history'
 import Details from './index'
 
+const history = createMemoryHistory()
+const location = createLocation('/asset/did:xxx')
+
 describe('Details', () => {
     it('renders loading state by default', () => {
         const { container } = render(
             <Details
-                location={{
-                    search: '',
-                    pathname: '/',
-                    state: '',
-                    hash: ''
-                }}
-                match={{
-                    params: {
-                        did: ''
-                    }
-                }}
+                history={history}
+                location={location}
+                match={{ params: '', path: '', url: '', isExact: true }}
             />
         )
         expect(container.firstChild).toBeInTheDocument()

client/src/components/templates/Asset/index.tsx

@@ -8,6 +8,7 @@ import stylesApp from '../../../App.module.scss'
 import Content from '../../atoms/Content'
 import CategoryImage from '../../atoms/CategoryImage'
 import styles from './index.module.scss'
+import withTracker from '../../../hoc/withTracker'
 
 interface AssetProps {
     match: {
@@ -23,7 +24,9 @@ interface AssetState {
     error: string
 }
 
-export default class Asset extends Component<AssetProps, AssetState> {
+class Asset extends Component<AssetProps, AssetState> {
+    public static contextType = User
+
     public state = {
         ddo: ({} as any) as DDO,
         metadata: ({ base: { name: '' } } as any) as MetaData,
@@ -79,4 +82,4 @@ export default class Asset extends Component<AssetProps, AssetState> {
     }
 }
 
-Asset.contextType = User
+export default withTracker(Asset)

client/src/context/BurnerWalletProvider.test.ts

@@ -0,0 +1,11 @@
+import { BurnerWalletProvider } from './BurnerWalletProvider'
+
+describe('BurnerWalletProvider', () => {
+    it('Burner wallet can be created', async () => {
+        const burnerwalletProvider = new BurnerWalletProvider()
+        await burnerwalletProvider.startLogin()
+        const web3 = burnerwalletProvider.getProvider()
+
+        expect(web3)
+    })
+})

client/src/context/MarketProvider.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import MarketProvider from './MarketProvider'
+import { User, Market } from '../context'
+import { userMockConnected } from '../../__mocks__/user-mock'
+
+describe('MarketProvider', () => {
+    it('renders without crashing', () => {
+        const { getByTestId } = render(
+            <User.Provider value={userMockConnected}>
+                <MarketProvider ocean={userMockConnected.ocean as any}>
+                    <Market.Consumer>
+                        {market => (
+                            <div data-testid="hello">{market.network}</div>
+                        )}
+                    </Market.Consumer>
+                </MarketProvider>
+            </User.Provider>
+        )
+        expect(getByTestId('hello')).toBeInTheDocument()
+    })
+})

client/src/context/MetamaskProvider.test.tsx

@@ -0,0 +1,11 @@
+import { MetamaskProvider } from './MetamaskProvider'
+
+describe('MetamaskProvider', () => {
+    it('MetamaskProvider can be created', async () => {
+        const metamaskProvider = new MetamaskProvider()
+        await metamaskProvider.startLogin()
+        const web3 = metamaskProvider.getProvider()
+
+        expect(web3)
+    })
+})

client/src/routes/Home/Search.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import Search from './Search'
+
+describe('Search', () => {
+    it('renders without crashing', () => {
+        const { container } = render(<Search searchAssets={() => null} />)
+        expect(container.firstChild).toBeInTheDocument()
+        // type search query
+        fireEvent.change(container.querySelector('input'), {
+            target: { value: 'Plants' }
+        })
+        expect(container.querySelector('input').value).toBe('Plants')
+        // fireEvent.click(getByText('Search'))
+    })
+})

client/src/routes/Home/index.tsx

@@ -24,7 +24,7 @@ interface HomeState {
 class Home extends PureComponent<HomeProps, HomeState> {
     public static contextType = Market
 
-    private searchAssets = (
+    public searchAssets = (
         search: string,
         event: FormEvent<HTMLFormElement>
     ) => {
@@ -40,7 +40,7 @@ class Home extends PureComponent<HomeProps, HomeState> {
                 className={styles.home}
             >
                 <Content>
-                    <Search key="search" searchAssets={this.searchAssets} />
+                    <Search searchAssets={this.searchAssets} />
                 </Content>
 
                 <Content wide>