From 9df9204e4032b31895b075880a6ac8994e4c39c9 Mon Sep 17 00:00:00 2001
From: naftalimurgor <murgornaftali@gmail.com>
Date: Mon, 12 Sep 2022 01:37:34 +0300
Subject: [PATCH 01/17] Add unit tests for `app/src/components/App` component

---
 app/src/tests/components/App.test.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 app/src/tests/components/App.test.js

diff --git a/app/src/tests/components/App.test.js b/app/src/tests/components/App.test.js
new file mode 100644
index 0000000..a4068b1
--- /dev/null
+++ b/app/src/tests/components/App.test.js
@@ -0,0 +1,19 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+import App from '../../components/App'
+
+test('it should render App component', () => {
+  render(<App/>)
+  // screen.debug()
+
+  const linkElement = screen.getByRole('link')
+  const imgElement = screen.getByRole('img')
+  const tabButtonElement = screen.getAllByRole('tab')
+  
+  expect(linkElement).toBeInTheDocument()
+  expect(imgElement).toBeInTheDocument()
+  // mutliple tabs, atleast one should be in the DOM
+  expect(tabButtonElement[0]).toBeInTheDocument()
+
+})

From 5386150209f79a9f784c342f9a163bf9e41c7e8d Mon Sep 17 00:00:00 2001
From: naftalimurgor <murgornaftali@gmail.com>
Date: Mon, 12 Sep 2022 01:39:21 +0300
Subject: [PATCH 02/17] add unit tests for `app/src/components/Footer`
 component

---
 app/src/tests/components/Footer.test.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 app/src/tests/components/Footer.test.js

diff --git a/app/src/tests/components/Footer.test.js b/app/src/tests/components/Footer.test.js
new file mode 100644
index 0000000..228f83c
--- /dev/null
+++ b/app/src/tests/components/Footer.test.js
@@ -0,0 +1,17 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+import  Footer from '../../components/Footer'
+
+describe('Footer Component Tests', () => {
+ 
+  it('it should render Footer component', () => {
+    render(<Footer />)
+  
+    const loadingText = screen.queryAllByText('Loading...')
+    expect(loadingText[0]).toBeInTheDocument()
+  })
+  
+ 
+  
+})
\ No newline at end of file

From bd5cb1fc55bf8e4e2906d9603e809e753550d23f Mon Sep 17 00:00:00 2001
From: naftalimurgor <murgornaftali@gmail.com>
Date: Mon, 12 Sep 2022 01:45:07 +0300
Subject: [PATCH 03/17] add unit tests for `app/src/components/BglToWbgl`
 component

---
 app/src/tests/components/BglToWbgl.test.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 app/src/tests/components/BglToWbgl.test.js

diff --git a/app/src/tests/components/BglToWbgl.test.js b/app/src/tests/components/BglToWbgl.test.js
new file mode 100644
index 0000000..deca357
--- /dev/null
+++ b/app/src/tests/components/BglToWbgl.test.js
@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+import  BglToWbgl from '../../components/BglToWbgl'
+
+describe('BglToWbgl', () => {
+  test('Should render BglToWbgl component', () => {
+    render(<BglToWbgl/>)
+    const chainLabelElement = screen.getByText('Chain:')
+    const ethereumLabel = screen.getByText('Ethereum')
+    const binanceLabel = screen.getByText('Binance Smart Chain')
+   
+    expect(chainLabelElement).toBeInTheDocument()
+    expect(ethereumLabel).toBeInTheDocument()
+    expect(binanceLabel).toBeInTheDocument()
+  })
+})
\ No newline at end of file

From f7855d9ea8f3a483ca43c4f32917e7ff11340515 Mon Sep 17 00:00:00 2001
From: naftalimurgor <murgornaftali@gmail.com>
Date: Mon, 12 Sep 2022 01:46:50 +0300
Subject: [PATCH 04/17] add unit tests for `app/src/components/Header`
 component

---
 app/src/tests/components/Header.test.js | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 app/src/tests/components/Header.test.js

diff --git a/app/src/tests/components/Header.test.js b/app/src/tests/components/Header.test.js
new file mode 100644
index 0000000..60a61fe
--- /dev/null
+++ b/app/src/tests/components/Header.test.js
@@ -0,0 +1,10 @@
+import {render, screen} from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+import Header from '../../components/Header'
+
+test('renders Header component', () => {
+  render(<Header/>)
+  const linkText = screen.getByText('Bitgesell-WBGL Bridge')
+  expect(linkText).toBeInTheDocument()
+})
\ No newline at end of file

From 3600cf4e2d6bd7d502683e134b4d69c37fa41eda Mon Sep 17 00:00:00 2001
From: naftalimurgor <murgornaftali@gmail.com>
Date: Mon, 12 Sep 2022 01:47:35 +0300
Subject: [PATCH 05/17] add unit tests for `app/src/components/WbglToBgl`
 component

---
 app/src/tests/components/WbglToBgl.test.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 app/src/tests/components/WbglToBgl.test.js

diff --git a/app/src/tests/components/WbglToBgl.test.js b/app/src/tests/components/WbglToBgl.test.js
new file mode 100644
index 0000000..e521740
--- /dev/null
+++ b/app/src/tests/components/WbglToBgl.test.js
@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+
+import  WbglToBgl from '../../components/WbglToBgl'
+
+describe('BglToWbgl', () => {
+  test('Should render BglToWbgl component', () => {
+    render(<WbglToBgl/>)
+    const chainLabelElement = screen.getByText('Chain:')
+    const ethereumLabel = screen.getByText('Ethereum')
+    const binanceLabel = screen.getByText('Binance Smart Chain')
+   
+    expect(chainLabelElement).toBeInTheDocument()
+    expect(ethereumLabel).toBeInTheDocument()
+    expect(binanceLabel).toBeInTheDocument()
+  })
+})
\ No newline at end of file

From 422945c7b6d482487f2bf2e519ff5e7fc5b6db40 Mon Sep 17 00:00:00 2001
From: naftalimurgor <murgornaftali@gmail.com>
Date: Mon, 12 Sep 2022 01:48:10 +0300
Subject: [PATCH 06/17] add unit tests for `app/src/utils` utility functions

---
 app/src/tests/utils/index.test.js | 40 +++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 app/src/tests/utils/index.test.js

diff --git a/app/src/tests/utils/index.test.js b/app/src/tests/utils/index.test.js
new file mode 100644
index 0000000..bb71611
--- /dev/null
+++ b/app/src/tests/utils/index.test.js
@@ -0,0 +1,40 @@
+import { chainLabel, post } from '../../utils'
+
+jest.mock('../../utils', () => ({
+  post: jest.fn((url, data) => { }),
+  chainLabel: jest.fn((chain) => { })
+}))
+
+describe('Utils test', () => {
+  afterAll(() => {
+    jest.resetAllMocks()
+  })
+
+  it('should fetch using post function', async () => {
+    post.mockImplementation((url, data) => {
+      return {
+        success: true,
+        status: "OK"
+      }
+    })
+
+    const response = await post('/health', { check: true })
+    expect(response.success).toBe(true)
+
+  })
+
+  it('should return supported chain name based on chain label', () => {
+    chainLabel.mockImplementation((chain) => {
+      const chains = {
+        eth: 'Ethereum',
+        bsc: 'Binance Smart Chain',
+      }
+      return chains[chain]
+    })
+
+    const chain = 'eth'
+    const chainName = chainLabel(chain)
+    expect(chainName).toEqual('Ethereum')
+  })
+
+})
\ No newline at end of file

From 04bf94e717888fb12ddbe3d0be029172fd79eb5b Mon Sep 17 00:00:00 2001
From: naftalimurgor <murgornaftali@gmail.com>
Date: Mon, 12 Sep 2022 01:48:45 +0300
Subject: [PATCH 07/17] update `app/README.md` add `tests` location

---
 app/README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/README.md b/app/README.md
index 02aac3f..793431c 100644
--- a/app/README.md
+++ b/app/README.md
@@ -19,6 +19,8 @@ You will also see any lint errors in the console.
 Launches the test runner in the interactive watch mode.\
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
+NB: All tests are located under `src/tests`.
+
 ### `yarn build`
 
 Builds the app for production to the `build` folder.\

From d009c677ca6fe53887fb03a9be5fcf0d78fc4fd8 Mon Sep 17 00:00:00 2001
From: 0xSwakei <kewebmasters@gmail.com>
Date: Sun, 23 Oct 2022 10:30:05 +0300
Subject: [PATCH 08/17] add `data-testid`s tags for querying `JSX` for
 `apps/BglToWbgl` component

---
 app/src/components/BglToWbgl.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/src/components/BglToWbgl.js b/app/src/components/BglToWbgl.js
index 29ddab1..42438ae 100644
--- a/app/src/components/BglToWbgl.js
+++ b/app/src/components/BglToWbgl.js
@@ -37,9 +37,9 @@ function BglToWbgl() {
 
   return !sendAddress ? (
     <CheckWalletConnection>
-      <form onSubmit={handleSubmit(onSubmit)} noValidate autoComplete="off">
+      <form onSubmit={handleSubmit(onSubmit)} noValidate autoComplete="off" data-testid='send-form'>
         <List>
-          <ListItemText primary="Chain:" secondary={chainLabel(chainId)}/>
+          <ListItemText  primary="Chain:" secondary={chainLabel(chainId)}/>
           <ListItemText primary={`Receiving Address:`} secondary={account}/>
         </List>
         <Box display="flex" justifyContent="center" m={1}>
@@ -49,12 +49,12 @@ function BglToWbgl() {
     </CheckWalletConnection>
   ) : (
     <Fragment>
-      <Typography variant="body1" gutterBottom>Send BGL to: <code>{sendAddress}</code></Typography>
+      <Typography variant="body1" gutterBottom>Send BGL to: <code data-testid='send-address'>{sendAddress}</code></Typography>
       <Typography variant="body2" gutterBottom>
-        The currently available WBGL balance is <b>{balance}</b>. If you send more BGL than is available to complete the exchange, your BGL will be returned to your address.
+        The currently available WBGL balance is <b data-testid="balance">{balance}</b>. If you send more BGL than is available to complete the exchange, your BGL will be returned to your address.
       </Typography>
       <Typography variant="body2" gutterBottom>
-        Please note, that a fee of <b>{feePercentage}%</b> will be automatically deducted from the transfer amount. This exchange pair is active for <b>7 days</b>.
+        Please note, that a fee of <b data-testid='fee-percentage'>{feePercentage}%</b> will be automatically deducted from the transfer amount. This exchange pair is active for <b>7 days</b>.
       </Typography>
     </Fragment>
   )

From c1310eda00f7912df21b585767ad88801bb1deeb Mon Sep 17 00:00:00 2001
From: 0xSwakei <kewebmasters@gmail.com>
Date: Sun, 23 Oct 2022 10:32:54 +0300
Subject: [PATCH 09/17] add `data-testid`s tags for querying `JSX` for
 `apps/ConnectWallet` component

---
 app/src/components/ConnectWallet.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/src/components/ConnectWallet.js b/app/src/components/ConnectWallet.js
index 97ad3f3..26d100f 100644
--- a/app/src/components/ConnectWallet.js
+++ b/app/src/components/ConnectWallet.js
@@ -21,6 +21,9 @@ function ConnectWallet() {
 
     case 'connected':
       return (<Chip label={chainLabel(chainId)} color={isChainValid(chainId) ? 'primary' : 'secondary'}/>)
+    default:
+      return (<Button variant="contained" color="secondary" onClick={connect}>Connect</Button>)
+
   }
 }
 

From 605bc5880ca651e66d555f71ad9f6355e2e0929e Mon Sep 17 00:00:00 2001
From: 0xSwakei <kewebmasters@gmail.com>
Date: Sun, 23 Oct 2022 10:33:38 +0300
Subject: [PATCH 10/17] add `data-testid`s tags for querying `JSX` for
 `apps/WbglToBgl` component

---
 app/src/components/WbglToBgl.js | 46 +++++++++++++++++----------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/app/src/components/WbglToBgl.js b/app/src/components/WbglToBgl.js
index d44f034..7938e15 100644
--- a/app/src/components/WbglToBgl.js
+++ b/app/src/components/WbglToBgl.js
@@ -1,6 +1,6 @@
-import {Fragment, useState} from 'react'
-import {useMetaMask} from 'metamask-react'
-import {useForm} from 'react-hook-form'
+import { Fragment, useState } from 'react'
+import { useMetaMask } from 'metamask-react'
+import { useForm } from 'react-hook-form'
 import {
   Box,
   Button,
@@ -8,8 +8,8 @@ import {
   TextField,
   Typography,
 } from '@material-ui/core'
-import {chainLabel, isChainBsc, post, url} from '../utils'
-import {sendWbgl, useWbglBalance} from '../utils/wallet'
+import { chainLabel, isChainBsc, post, url } from '../utils'
+import { sendWbgl, useWbglBalance } from '../utils/wallet'
 import CheckWalletConnection from './CheckWalletConnection'
 
 function WbglToBgl() {
@@ -18,11 +18,11 @@ function WbglToBgl() {
   const [balance, setBalance] = useState(0)
   const [feePercentage, setFeePercentage] = useState(0)
   const wbglBalance = useWbglBalance()
-  const {chainId, account, ethereum} = useMetaMask()
+  const { chainId, account, ethereum } = useMetaMask()
   const chain = isChainBsc(chainId) ? 'bsc' : 'eth'
 
   const AddressForm = () => {
-    const {register, handleSubmit, setError, setFocus, formState: {errors}} = useForm()
+    const { register, handleSubmit, setError, setFocus, formState: { errors } } = useForm()
 
     const onSubmit = async data => {
       setSubmitting(true)
@@ -48,40 +48,41 @@ function WbglToBgl() {
         setFeePercentage(response.feePercentage)
       }).catch(result => {
         if (result.hasOwnProperty('field')) {
-          setError(result.field, {type: 'manual', message: result.message})
+          setError(result.field, { type: 'manual', message: result.message })
           setFocus(result.field)
         }
       }).finally(() => setSubmitting(false))
     }
 
     return (
-      <form onSubmit={handleSubmit(onSubmit)} noValidate autoComplete="off">
+      <form onSubmit={handleSubmit(onSubmit)} noValidate autoComplete="off" data-testid="bgl-address-form">
         <TextField
+          data-testid="address-input"
           variant="filled"
           margin="normal"
           label="BGL Address"
           fullWidth
           required
           helperText={errors['bglAddress'] ? 'Please enter a valid Bitgesell address.' : 'Enter the BGL address coins will be sent to.'}
-          {...register('bglAddress', {required: true, pattern: /^(bgl1|[135])[a-zA-HJ-NP-Z0-9]{25,39}$/i})}
+          {...register('bglAddress', { required: true, pattern: /^(bgl1|[135])[a-zA-HJ-NP-Z0-9]{25,39}$/i })}
           error={!!errors['bglAddress']}
         />
         <Box display="flex" justifyContent="center" m={1}>
-          <Button type="submit" variant="contained" color="primary" size="large" disabled={submitting}>Continue</Button>
+          <Button type="submit" variant="contained" color="primary" size="large" disabled={submitting} data-testid='step-1'>Continue</Button>
         </Box>
       </form>
     )
   }
 
   const SendForm = () => {
-    const {register, handleSubmit, setError, formState: {errors}} = useForm()
+    const { register, handleSubmit, setError, formState: { errors } } = useForm()
 
     const onSubmit = async data => {
       const amount = parseFloat(data.amount)
       const balance = parseFloat(wbglBalance)
 
       if (!amount || !balance || amount > balance) {
-        setError('amount', {type: 'manual', message: 'Not enough WBGL available!', shouldFocus: true})
+        setError('amount', { type: 'manual', message: 'Not enough WBGL available!', shouldFocus: true })
         return
       }
 
@@ -91,15 +92,16 @@ function WbglToBgl() {
     }
 
     return (
-      <form onSubmit={handleSubmit(onSubmit)} noValidate autoComplete="off">
+      <form onSubmit={handleSubmit(onSubmit)} noValidate autoComplete="off" data-testid="send-wbgl-form">
         <TextField
+          data-testid="wbgl-amount-input"
           variant="filled"
           margin="normal"
           label="WBGL Amount"
           fullWidth
           required
           helperText={errors['amount'] ? 'Please enter a valid amount.' : 'Enter the amount of tokens to send.'}
-          {...register('amount', {required: true, pattern: /^[0-9]+\.?[0-9]*$/i})}
+          {...register('amount', { required: true, pattern: /^[0-9]+\.?[0-9]*$/i })}
           error={!!errors['amount']}
         />
         <Button type="submit" variant="contained" color="primary" size="large" disabled={submitting}>Send WBGL</Button>
@@ -110,22 +112,22 @@ function WbglToBgl() {
   return (
     <CheckWalletConnection>
       <List>
-        <ListItemText primary="Chain:" secondary={chainLabel(chainId)}/>
-        <ListItemText primary={`Source Address:`} secondary={account}/>
-        <ListItemText primary="WBGL Balance:" secondary={wbglBalance}/>
+        <ListItemText primary="Chain:" secondary={chainLabel(chainId)} />
+        <ListItemText data-testid='source-address' primary={`Source Address:`} secondary={account} />
+        <ListItemText data-testid='balance' primary="WBGL Balance:" secondary={wbglBalance} />
       </List>
       {!sendAddress ? (
-        <AddressForm/>
+        <AddressForm />
       ) : (
         <Fragment>
           <Typography variant="body2" gutterBottom>
-            The currently available BGL balance is <b>{balance}</b>. If you send more WBGL than is available to complete
+            The currently available BGL balance is <b data-testid='balance'>{balance}</b>. If you send more WBGL than is available to complete
             the exchange, your WBGL will be returned to your address.
           </Typography>
           <Typography variant="body2" gutterBottom>
-            Please note, that a fee of <b>{feePercentage}%</b> will be automatically deducted from the transfer amount.
+            Please note, that a fee of <b data-testid='fee-percentage'>{feePercentage}%</b> will be automatically deducted from the transfer amount.
           </Typography>
-          <SendForm/>
+          <SendForm />
         </Fragment>
       )}
 

From 157b26ad3f4edbffe0ecfcdd8952fcad44182d5f Mon Sep 17 00:00:00 2001
From: 0xSwakei <kewebmasters@gmail.com>
Date: Sun, 23 Oct 2022 10:37:54 +0300
Subject: [PATCH 11/17] update `tests/App.test.js` to work with ( #14 )

---
 app/src/tests/components/App.test.js | 32 +++++++++++++++++-----------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/app/src/tests/components/App.test.js b/app/src/tests/components/App.test.js
index a4068b1..68bd6a8 100644
--- a/app/src/tests/components/App.test.js
+++ b/app/src/tests/components/App.test.js
@@ -1,19 +1,25 @@
 import { render, screen, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
-
+import { MetaMaskProvider } from 'metamask-react'
 import App from '../../components/App'
 
-test('it should render App component', () => {
-  render(<App/>)
-  // screen.debug()
+describe('App Tests', () => {
+  test('it should render App component', () => {
+    render(
+      <MetaMaskProvider>
+        <App />
+      </MetaMaskProvider>
+    )
+    // screen.debug()
+    const linkElement = screen.getByRole('link')
+    const imgElement = screen.getByRole('img')
+    const tabButtonElement = screen.getAllByRole('tab')
+
+    expect(linkElement).toBeInTheDocument()
+    expect(imgElement).toBeInTheDocument()
+    // mutliple tabs, atleast one should be in the DOM
+    expect(tabButtonElement[0]).toBeInTheDocument()
 
-  const linkElement = screen.getByRole('link')
-  const imgElement = screen.getByRole('img')
-  const tabButtonElement = screen.getAllByRole('tab')
-  
-  expect(linkElement).toBeInTheDocument()
-  expect(imgElement).toBeInTheDocument()
-  // mutliple tabs, atleast one should be in the DOM
-  expect(tabButtonElement[0]).toBeInTheDocument()
+  })
 
-})
+})
\ No newline at end of file

From cf699ee5becc181eabd3279cc6df013f108a28be Mon Sep 17 00:00:00 2001
From: 0xSwakei <kewebmasters@gmail.com>
Date: Sun, 23 Oct 2022 10:38:59 +0300
Subject: [PATCH 12/17] update `tests/BglToWbgl.test.js` to work with ( #14 )

---
 app/src/tests/components/BglToWbgl.test.js | 116 ++++++++++++++++++---
 1 file changed, 103 insertions(+), 13 deletions(-)

diff --git a/app/src/tests/components/BglToWbgl.test.js b/app/src/tests/components/BglToWbgl.test.js
index deca357..0fec1cd 100644
--- a/app/src/tests/components/BglToWbgl.test.js
+++ b/app/src/tests/components/BglToWbgl.test.js
@@ -1,17 +1,107 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, act, fireEvent, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 
-import  BglToWbgl from '../../components/BglToWbgl'
-
-describe('BglToWbgl', () => {
-  test('Should render BglToWbgl component', () => {
-    render(<BglToWbgl/>)
-    const chainLabelElement = screen.getByText('Chain:')
-    const ethereumLabel = screen.getByText('Ethereum')
-    const binanceLabel = screen.getByText('Binance Smart Chain')
-   
-    expect(chainLabelElement).toBeInTheDocument()
-    expect(ethereumLabel).toBeInTheDocument()
-    expect(binanceLabel).toBeInTheDocument()
+import BglToWbgl from '../../components/BglToWbgl'
+import * as utils from '../../utils'
+
+import { MetaMaskProvider } from 'metamask-react'
+
+const ROPSTEN_TESTNET_CHAINID = 3
+const ROPSTEN_TESTNET_ACCOUNT = '0xBCEeB54fa604FB357750E76229ADf98DfA90580f'
+const BITGESEL_TEST_ACCOUNT = 'qcBCEeB54fa604FB357750E76229ADf98DfA90580f'
+
+const mockHandleSubmit = jest.fn()
+jest.mock('react-hook-form', () => {
+  return {
+    ...jest.requireActual('react-hook-form'),
+    useForm: () => ({
+      register: jest.fn(),
+      handleSubmit: mockHandleSubmit,
+      setError: jest.fn(),
+      setFocus: jest.fn(),
+      formState: { errors: {} }
+    })
+  }
+})
+
+// mock only the hook
+jest.mock('metamask-react', () => {
+  return {
+    ...jest.requireActual('metamask-react'),
+    useMetaMask: () => ({
+      status: 'connected',
+      chainId: ROPSTEN_TESTNET_CHAINID,
+      account: ROPSTEN_TESTNET_ACCOUNT,
+      connect: jest.fn()
+    })
+  }
+})
+
+describe('BglToWbgl Component Tests', () => {
+
+  beforeEach(() => {
+    window.HTMLFormElement.prototype.submit = () => jest.fn()
+  })
+  afterEach(() => {
+    jest.clearAllMocks()
   })
+
+  test('should render BglToWbgl component when MetaMask wallet is connected', async () => {
+    render(
+      <MetaMaskProvider>
+        <BglToWbgl />
+      </MetaMaskProvider>
+    )
+
+    await waitFor(async () => {
+      await screen.findByText(new RegExp(ROPSTEN_TESTNET_ACCOUNT, 'ig'))
+      await screen.findByText(new RegExp(ROPSTEN_TESTNET_CHAINID), 'ig')
+
+      expect(await screen.findByText(new RegExp(ROPSTEN_TESTNET_CHAINID, 'ig'))).toBeInTheDocument()
+      expect(await screen.findByText(new RegExp(ROPSTEN_TESTNET_CHAINID, 'ig'))).toBeInTheDocument()
+    }, { timeout: 4000 })
+
+  })
+
+  test('should send Bgl To Wbgl when user has connected MetaMask Wallet', async () => {
+
+    render(
+      <MetaMaskProvider>
+        <BglToWbgl />
+      </MetaMaskProvider>
+    )
+
+    const spy = jest.spyOn(window, 'fetch')
+
+    const mockBglResponse = {
+      bglAddress: BITGESEL_TEST_ACCOUNT,
+      balance: Math.floor(Math.random() * 10),
+      feePercentage: Math.random()
+    }
+
+    const spyPost = jest.spyOn(utils, 'post')
+
+    const mockedPost = spyPost.mockImplementation((url, data = {}) => {
+      return Promise.resolve(mockBglResponse)
+    })
+
+    const { bglAddress, balance, feePercentage } = await mockedPost()
+    fireEvent.click(screen.getByRole('button'))
+
+
+    await waitFor(async () => {
+      await screen.findByText(new RegExp(ROPSTEN_TESTNET_ACCOUNT, 'ig'))
+      await screen.findByText(new RegExp(balance), 'ig')
+      const recepientAddress = await screen.findByText(new RegExp(ROPSTEN_TESTNET_ACCOUNT, 'ig'))
+
+      const sendForm = screen.getByTestId('send-form')
+      fireEvent.submit(sendForm)
+      await waitFor(() => expect(mockHandleSubmit).toHaveBeenCalled())
+      waitFor(() => expect(recepientAddress).toBeInTheDocument())
+
+
+    }, { timeout: 4000 })
+
+  })
+
 })
\ No newline at end of file

From 10dbae55f2f72e11cbb0d8a0e96da7df7dd88ec8 Mon Sep 17 00:00:00 2001
From: 0xSwakei <kewebmasters@gmail.com>
Date: Sun, 23 Oct 2022 10:39:55 +0300
Subject: [PATCH 13/17] update `tests/WbglToBgl.test.js` to work with ( #14 )

---
 app/src/tests/components/WbglToBgl.test.js | 140 ++++++++++++++++++---
 1 file changed, 126 insertions(+), 14 deletions(-)

diff --git a/app/src/tests/components/WbglToBgl.test.js b/app/src/tests/components/WbglToBgl.test.js
index e521740..f1dca0f 100644
--- a/app/src/tests/components/WbglToBgl.test.js
+++ b/app/src/tests/components/WbglToBgl.test.js
@@ -1,17 +1,129 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
+import { MetaMaskProvider } from 'metamask-react'
+
+import userEvent from '@testing-library/user-event'
+
+import WbglToBgl from '../../components/WbglToBgl'
+import * as utils from '../../utils'
+
+const ROPSTEN_TESTNET_CHAINID = 3
+const ROPSTEN_TESTNET_ACCOUNT = '0xBCEeB54fa604FB357750E76229ADf98DfA90580f'
+const BITGESEL_TEST_ACCOUNT = 'bgl1qdzjn6rd7e84lt2m5d3yf9jcg42ncdje7vhp4rl'
+
+// mock only the hook
+jest.mock('metamask-react', () => {
+  return {
+    ...jest.requireActual('metamask-react'),
+    useMetaMask: () => ({
+      status: 'connected',
+      chainId: ROPSTEN_TESTNET_CHAINID,
+      account: ROPSTEN_TESTNET_ACCOUNT,
+      connect: jest.fn()
+    })
+  }
+})
+
+jest.mock('../../utils/wallet', () => {
+  return {
+    ...jest.requireActual('../../utils/wallet'),
+    useWbglBalance: () => Math.ceil(Math.random() * 10)
+  }
+})
+
+const mockHandleSubmit = jest.fn()
+jest.mock('react-hook-form', () => {
+  return {
+    ...jest.requireActual('react-hook-form'),
+    useForm: () => ({
+      register: jest.fn(),
+      handleSubmit: mockHandleSubmit,
+      setError: jest.fn(),
+      setFocus: jest.fn(),
+      formState: { errors: {} }
+    })
+  }
+})
+
+describe('BglToWbgl Component Tests', () => {
+  jest.setTimeout(10000)
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  const mockBglResponse = {
+    address: BITGESEL_TEST_ACCOUNT,
+    balance: Math.floor(Math.random() * 10),
+    feePercentage: Math.random()
+  }
+
+  test('should render WbglToBgl component when user has connected MetaMask Wallet', async () => {
+    render(
+      <MetaMaskProvider>
+        <WbglToBgl />
+      </MetaMaskProvider>
+    )
+
+    const spy = jest.spyOn(window, 'fetch')
+    const spyPost = jest.spyOn(utils, 'post')
+
+    const mockedPost = spyPost.mockImplementation((url, data = {}) => {
+      return Promise.resolve(mockBglResponse)
+    })
+
+    const { address, balance, feePercentage } = await mockedPost()
+
+    await waitFor(async () => {
+      await screen.findByTestId('source-address')
+      await screen.findByTestId('balance')
+
+      expect(await screen.findByTestId('source-address')).toHaveTextContent(ROPSTEN_TESTNET_ACCOUNT)
+      expect(await screen.findByTestId('balance')).toBeInTheDocument()
+    }, { timeout: 4000 })
+  })
+
+
+  test('user should send WBGL token When wallet is connected', async () => {
+
+    window.HTMLFormElement.prototype.submit = () => jest.fn()
+
+    render(
+      <MetaMaskProvider>
+        <WbglToBgl />
+      </MetaMaskProvider>
+    )
+
+    const spy = jest.spyOn(window, 'fetch')
+    const spyPost = jest.spyOn(utils, 'post')
+    const onSubmit = jest.fn()
+
+    const mockedPost = spyPost.mockImplementation((url, data = {}) => {
+      return Promise.resolve(mockBglResponse)
+    })
+  
+
+    const data = {
+      chain: ROPSTEN_TESTNET_CHAINID,
+      ethAddress: ROPSTEN_TESTNET_ACCOUNT,
+      signature: '0xtest-signature'
+    }
+    
+
+    const { chainId } = await mockedPost('/submit/wbgl', data)
+    await waitFor(async () => {
+
+      const bglAddressInput = screen.getByTestId('address-input').querySelector('input')
+      await userEvent.type(bglAddressInput, BITGESEL_TEST_ACCOUNT)
+      
+      const blgAddressForm = screen.getByTestId('bgl-address-form')
+      fireEvent.submit(blgAddressForm)
+
+      await waitFor(() => expect(mockedPost).toHaveBeenCalled())
+      await waitFor(() => expect(mockHandleSubmit).toHaveBeenCalled())
+     
+    }, { timeout: 4000 })
+
 
-import  WbglToBgl from '../../components/WbglToBgl'
-
-describe('BglToWbgl', () => {
-  test('Should render BglToWbgl component', () => {
-    render(<WbglToBgl/>)
-    const chainLabelElement = screen.getByText('Chain:')
-    const ethereumLabel = screen.getByText('Ethereum')
-    const binanceLabel = screen.getByText('Binance Smart Chain')
-   
-    expect(chainLabelElement).toBeInTheDocument()
-    expect(ethereumLabel).toBeInTheDocument()
-    expect(binanceLabel).toBeInTheDocument()
   })
-})
\ No newline at end of file
+})

From f1d76b3744da7fb7b1b400957274b34ebce8adf3 Mon Sep 17 00:00:00 2001
From: 0xSwakei <kewebmasters@gmail.com>
Date: Sun, 23 Oct 2022 10:41:18 +0300
Subject: [PATCH 14/17] update `tests/Header.test.js` to work with ( #14 )

---
 app/src/tests/components/Header.test.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/src/tests/components/Header.test.js b/app/src/tests/components/Header.test.js
index 60a61fe..2775a43 100644
--- a/app/src/tests/components/Header.test.js
+++ b/app/src/tests/components/Header.test.js
@@ -1,10 +1,16 @@
-import {render, screen} from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 
 import Header from '../../components/Header'
+import { MetaMaskProvider } from 'metamask-react'
 
 test('renders Header component', () => {
-  render(<Header/>)
+  render(
+    <MetaMaskProvider>
+      <Header />
+    </MetaMaskProvider>
+  )
+  
   const linkText = screen.getByText('Bitgesell-WBGL Bridge')
   expect(linkText).toBeInTheDocument()
 })
\ No newline at end of file

From 145abd244b1c723b908f1a6f55167cb569d3834b Mon Sep 17 00:00:00 2001
From: 0xSwakei <kewebmasters@gmail.com>
Date: Sun, 23 Oct 2022 10:42:13 +0300
Subject: [PATCH 15/17] add unit test for `components/CheckWalletConnection`

---
 .../components/CheckWalletConnection.test.js  | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 app/src/tests/components/CheckWalletConnection.test.js

diff --git a/app/src/tests/components/CheckWalletConnection.test.js b/app/src/tests/components/CheckWalletConnection.test.js
new file mode 100644
index 0000000..d1a922c
--- /dev/null
+++ b/app/src/tests/components/CheckWalletConnection.test.js
@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom/extend-expect'
+import { render, screen, waitFor } from '@testing-library/react'
+import * as metamaskReact from 'metamask-react'
+import CheckWalletConnection from '../../components/CheckWalletConnection'
+
+const ROPSTEN_TESTNET_CHAINID = 3
+const ROPSTEN_TESTNET_ACCOUNT = '0xBCEeB54fa604FB357750E76229ADf98DfA90580f'
+const MetaMaskProvider = metamaskReact.MetaMaskProvider
+
+// mock only the hook
+jest.mock('metamask-react', () => {
+  return {
+    ...jest.requireActual('metamask-react'),
+    useMetaMask: () => ({
+      status: 'connected',
+      chainId: ROPSTEN_TESTNET_CHAINID,
+      account: ROPSTEN_TESTNET_ACCOUNT,
+      connect: jest.fn()
+    })
+  }
+})
+
+
+describe('CheckWallectConnection component Test', () => {
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('Should render child props when MetaMask wallet has been connected', async () => {
+    const dummyChild = <p>Test text</p>
+    render(
+      <MetaMaskProvider>
+        <CheckWalletConnection>
+          {dummyChild}
+        </CheckWalletConnection>
+      </MetaMaskProvider>
+    )
+
+    expect(await screen.findByText(/Test text/)).toBeInTheDocument()
+
+
+  })
+})
\ No newline at end of file

From 652103ea291f772de662bb41a0a68d5120589a31 Mon Sep 17 00:00:00 2001
From: 0xSwakei <kewebmasters@gmail.com>
Date: Sun, 23 Oct 2022 10:44:49 +0300
Subject: [PATCH 16/17] add unit tests for `components/ConnectWallet` component
 ( #14 )

---
 .../tests/components/ConnectWallet.test.js    | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 app/src/tests/components/ConnectWallet.test.js

diff --git a/app/src/tests/components/ConnectWallet.test.js b/app/src/tests/components/ConnectWallet.test.js
new file mode 100644
index 0000000..f864c4b
--- /dev/null
+++ b/app/src/tests/components/ConnectWallet.test.js
@@ -0,0 +1,48 @@
+import '@testing-library/jest-dom/extend-expect'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import {useMetaMask, MetaMaskProvider} from 'metamask-react'
+import ConnectWallet from '../../components/ConnectWallet'
+
+const ROPSTEN_TESTNET_CHAINID = 3
+const ROPSTEN_TESTNET_ACCOUNT = '0xBCEeB54fa604FB357750E76229ADf98DfA90580f'
+
+// mock only the hook
+// mock only the function then swap out the implementation
+jest.mock('metamask-react', () => {
+  return {
+    ...jest.requireActual('metamask-react'),
+    useMetaMask: () =>  ({
+      status: 'connected',
+      chainId: ROPSTEN_TESTNET_CHAINID,
+      account: ROPSTEN_TESTNET_ACCOUNT,
+      connect: jest.fn()
+    })
+  }
+})
+
+describe('ConnectWallet component Test', () => {
+
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  afterAll(() => {
+    jest.resetAllMocks()
+  })
+
+  test('renders ConnectWallet component', () => {
+
+    const { getByRole } = render(
+      <MetaMaskProvider>
+        <ConnectWallet />
+      </MetaMaskProvider>
+    )
+
+   
+    expect(screen.getByText('Ethereum')).toBeInTheDocument()
+  })
+
+})
\ No newline at end of file

From 3c859be98ccdee67a6b7c187d2561e14ec838907 Mon Sep 17 00:00:00 2001
From: 0xSwakei <kewebmasters@gmail.com>
Date: Sun, 23 Oct 2022 10:46:20 +0300
Subject: [PATCH 17/17] bump `@testing-library/user-event` to version `v14.0.0`

---
 app/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/package.json b/app/package.json
index 14adca2..b368a79 100644
--- a/app/package.json
+++ b/app/package.json
@@ -7,7 +7,8 @@
     "@material-ui/core": "^4.11.4",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "14",
     "metamask-react": "^2.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",