Merge pull request #588 from bobanetwork/fix/update-graphql-utils-wit…

…h-timestampfix Fix: Light bridging withdrawal & Deposit fixes
bobanetwork · Jul 24, 2024 · ee22e20 · ee22e20
2 parents 55c8676 + 103b051
commit ee22e20
Show file tree

Hide file tree

Showing 20 changed files with 1,930 additions and 1,625 deletions.
diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml
@@ -51,7 +51,7 @@ jobs:
       - name: Run e2e test (headful)
         working-directory: ./e2e-tests
         run: |
-          Xvfb :0 -screen 0 1024x768x24 -listen tcp -ac &
+          Xvfb :0 -screen 0 1920x1080x24 -listen tcp -ac &
           fluxbox &
           pnpm start:server & 
           pnpm test

diff --git a/e2e-tests/lib/gatewayAction.ts b/e2e-tests/lib/gatewayAction.ts
@@ -2,6 +2,19 @@ import { Page } from '@playwright/test'
 import { BasePage } from '../pages/basePage'
 import { BridgePage } from '../pages/bridgePage'
 
+const networkConfig = {
+  L1: {
+    token: 'ETH',
+    chainId: '11155111',
+    name: 'Sepolia',
+  },
+  L2: {
+    token: 'ETH',
+    chainId: '28882',
+    name: 'Boba Sepolia',
+  },
+}
+
 export class GatewayAction {
   basePage: BasePage
   bridgePage: BridgePage
@@ -15,15 +28,17 @@ export class GatewayAction {
     amountToBridge,
     tokenSymbol,
     successWaitTime = 1000,
+    approveAllowance = false,
   }: {
     amountToBridge: string
     tokenSymbol: string
     successWaitTime?: number
+    approveAllowance?: boolean
   }) {
     await this.bridgePage.openTokenPickerAndSelect(tokenSymbol)
-    await this.bridgePage.bridgeButtonDisable()
-    await this.bridgePage.inputBridgeAmount(amountToBridge)
-    await this.bridgePage.bridgeButtonEnable()
+    await this.bridgePage.bridgeButtonToBeDisable()
+    await this.bridgePage.fillBridgingAmount(amountToBridge)
+    await this.bridgePage.bridgeButtonToBeEnable()
     await this.bridgePage.validateBridgingFee({
       amount: amountToBridge,
       token: tokenSymbol,
@@ -37,7 +52,11 @@ export class GatewayAction {
       toNetwork: 'Boba (Sepolia)',
       estimatedTime: '13 ~ 14mins.',
     })
-    await this.bridgePage.confirmMetaMaskModalToBridge(amountToBridge)
+    if (approveAllowance) {
+      await this.bridgePage.approveAndConfirmMetaMaskSuccess(amountToBridge)
+    } else {
+      await this.bridgePage.confirmMetaMaskModalToBridge(amountToBridge)
+    }
     await this.bridgePage.wait(successWaitTime) // have to wait for success modal
     await this.bridgePage.validateBridgeSuccess()
     await this.bridgePage.toHistoryPage()
@@ -51,9 +70,9 @@ export class GatewayAction {
     tokenSymbol: string
   }) {
     await this.bridgePage.openTokenPickerAndSelect(tokenSymbol)
-    await this.bridgePage.bridgeButtonDisable()
-    await this.bridgePage.inputBridgeAmount(amountToBridge)
-    await this.bridgePage.bridgeButtonEnable()
+    await this.bridgePage.bridgeButtonToBeDisable()
+    await this.bridgePage.fillBridgingAmount(amountToBridge)
+    await this.bridgePage.bridgeButtonToBeEnable()
     await this.bridgePage.validateBridgingFee({
       amount: amountToBridge,
       token: tokenSymbol,
@@ -77,16 +96,18 @@ export class GatewayAction {
     amountToBridge,
     tokenSymbol,
     successWaitTime = 1000,
+    approveAllowance = false,
   }: {
     amountToBridge: string
     tokenSymbol: string
     successWaitTime?: number
+    approveAllowance?: boolean
   }) {
     await this.bridgePage.switchToLightBridge()
     await this.bridgePage.openTokenPickerAndSelect(tokenSymbol)
-    await this.bridgePage.bridgeButtonDisable()
-    await this.bridgePage.inputBridgeAmount(amountToBridge)
-    await this.bridgePage.bridgeButtonEnable()
+    await this.bridgePage.bridgeButtonToBeDisable()
+    await this.bridgePage.fillBridgingAmount(amountToBridge)
+    await this.bridgePage.bridgeButtonToBeEnable()
     await this.bridgePage.validateBridgingFee({
       amount: amountToBridge,
       token: tokenSymbol,
@@ -100,7 +121,11 @@ export class GatewayAction {
       toNetwork: 'Boba (Sepolia)',
       estimatedTime: '~1min.',
     })
-    await this.bridgePage.confirmMetaMaskModalToBridge(amountToBridge)
+    if (approveAllowance) {
+      await this.bridgePage.approveAndConfirmMetaMaskSuccess(amountToBridge)
+    } else {
+      await this.bridgePage.confirmMetaMaskModalToBridge(amountToBridge)
+    }
     await this.bridgePage.wait(successWaitTime) // have to wait for success modal
     await this.bridgePage.validateBridgeSuccess()
     await this.bridgePage.toHistoryPage()
@@ -110,19 +135,21 @@ export class GatewayAction {
     amountToBridge,
     tokenSymbol,
     successWaitTime = 1000,
+    approveAllowance = false,
   }: {
     amountToBridge: string
     tokenSymbol: string
     successWaitTime?: number
+    approveAllowance?: boolean
   }) {
     await this.bridgePage.switchToLightBridge()
     await this.bridgePage.openTokenPickerAndSelect(tokenSymbol)
-    await this.bridgePage.bridgeButtonDisable()
-    await this.bridgePage.inputBridgeAmount(amountToBridge)
-    await this.bridgePage.bridgeButtonEnable()
+    await this.bridgePage.bridgeButtonToBeDisable()
+    await this.bridgePage.fillBridgingAmount(amountToBridge)
+    await this.bridgePage.bridgeButtonToBeEnable()
     const receivableAmt = Number(amountToBridge) * ((100 - 1) / 100)
     await this.bridgePage.validateBridgingFee({
-      amount: receivableAmt.toString(),
+      amount: receivableAmt.toFixed(4),
       token: tokenSymbol,
       estimatedTime: '~1min.',
     })
@@ -134,7 +161,13 @@ export class GatewayAction {
       toNetwork: 'Ethereum (Sepolia)',
       estimatedTime: '~1min.',
     })
-    await this.bridgePage.confirmMetaMaskModalToBridge(amountToBridge)
+
+    if (approveAllowance) {
+      await this.bridgePage.approveAndConfirmMetaMaskSuccess(amountToBridge)
+    } else {
+      await this.bridgePage.confirmMetaMaskModalToBridge(amountToBridge)
+    }
+
     await this.bridgePage.wait(successWaitTime) // have to wait for success modal
     await this.bridgePage.validateBridgeSuccess()
     await this.bridgePage.toHistoryPage()

diff --git a/e2e-tests/package.json b/e2e-tests/package.json
@@ -10,6 +10,7 @@
   },
   "scripts": {
     "clean": "rm -rf ./videos ./test-results ./playwright-report",
+    "clean:test": "pnpm clean && pnpm test",
     "install:chromium": "playwright install chromium",
     "test": "playwright test --project=chromium",
     "test:ui": "playwright test --project=chromium --ui",

diff --git a/e2e-tests/pages/basePage.ts b/e2e-tests/pages/basePage.ts
@@ -85,6 +85,8 @@ export class BasePage {
       await this.page.getByTestId('connect-btn').click()
     }
 
+    await this.page.waitForTimeout(2000)
+
     await expect(this.page.getByTestId('label-address')).toContainText('7428')
 
     await expect(this.page.getByTestId('connect-btn')).not.toBeVisible()

diff --git a/e2e-tests/pages/bridgePage.ts b/e2e-tests/pages/bridgePage.ts
@@ -7,28 +7,26 @@ export class BridgePage extends BasePage {
     super(page)
   }
 
-  // token picker.
-  // minimal assertion write more to validate other things.
-  // tokenSymbol - BOBA ETH DADO
   async openTokenPickerAndSelect(tokenSymbol: string) {
     await this.page.locator('#tokenSelectorInput').click()
     await expect(this.page.getByText('Select Token')).toBeVisible()
+    await this.page.waitForTimeout(4000)
     await this.page
       .locator('div[title="tokenList"]')
       .getByTestId(`token-${tokenSymbol}`)
       .click()
   }
 
   async switchToLightBridge() {
-    await await this.page.getByTestId('light-btn').click()
+    await this.page.getByTestId('light-btn').click()
   }
 
-  async bridgeButtonDisable() {
+  async bridgeButtonToBeDisable() {
     const bridgeBtn = this.page.getByTestId('bridge-btn')
     await expect(bridgeBtn).toBeDisabled()
   }
 
-  async bridgeButtonEnable() {
+  async bridgeButtonToBeEnable() {
     const bridgeBtn = this.page.getByTestId('bridge-btn')
     await expect(bridgeBtn).toBeEnabled()
   }
@@ -64,7 +62,7 @@ export class BridgePage extends BasePage {
     await this.page.getByTestId('bridge-btn').click()
   }
 
-  async inputBridgeAmount(amount: string) {
+  async fillBridgingAmount(amount: string) {
     await this.page.locator('input#bridgeAmount').fill(amount)
   }
 
@@ -114,24 +112,41 @@ export class BridgePage extends BasePage {
       this.page.getByRole('heading', { name: 'Bridging...' })
     ).toBeVisible()
 
-    // for deposit
     await metamask.confirmPermissionToSpend(amount, true)
 
     await expect(this.page.getByTestId('transactionSuccess-modal')).toBeVisible(
       { timeout: 60000 }
     )
   }
 
+  async approveAndConfirmMetaMaskSuccess(amount: string) {
+    await expect(
+      this.page.getByRole('heading', { name: 'Bridging...' })
+    ).toBeVisible()
+
+    await metamask.confirmPermissionToSpend(amount, true)
+
+    this.page.waitForTimeout(3000) // wait for 3 secs.
+
+    await metamask.confirmTransaction({ shouldWaitForPopupClosure: true })
+
+    await expect(this.page.getByTestId('transactionSuccess-modal')).toBeVisible(
+      { timeout: 60000 }
+    )
+  }
+
   async validateBridgeSuccess() {
     await expect(this.page.getByTestId('success')).toHaveText('Successful')
   }
 
   async toHistoryPage() {
     await this.page.getByRole('button', { name: 'Go to history' }).click()
 
-    await expect(
-      this.page.getByRole('heading', { name: 'History' })
-    ).toBeVisible()
+    await this.page.waitForTimeout(1000)
+
+    await expect(this.page.getByRole('heading', { level: 1 })).toHaveText(
+      'History'
+    )
   }
 
   async reviewAndInitiateWithdrawal() {

diff --git a/e2e-tests/tests/bridging.spec.ts b/e2e-tests/tests/bridging.spec.ts
@@ -1,14 +1,11 @@
 import { test } from '../fixture/synpress'
 import { GatewayAction } from '../lib/gatewayAction'
 import { BasePage } from '../pages/basePage'
-import { BridgePage } from '../pages/bridgePage'
 
 const amountToBridge: string = '0.0001'
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/')
-  // To view the page loading console.
-  // page.on('console', (msg) => console.log(msg.text()))
 })
 
 test.describe('Gateway ETHEREUM (Sepolia)', () => {
@@ -31,6 +28,7 @@ test.describe('Gateway ETHEREUM (Sepolia)', () => {
         await bridgeAction.classicBridgeDeposit({
           amountToBridge,
           tokenSymbol: 'BOBA',
+          approveAllowance: true,
         })
       })
     })
@@ -41,26 +39,26 @@ test.describe('Gateway ETHEREUM (Sepolia)', () => {
         const basePage = new BasePage(page)
         const bridgeAction = new GatewayAction(page)
         await bridgeAction.connectToTestnet() // connected to L1.
-        await bridgeAction.switchNetwork() // switches to L2.
+        await bridgeAction.switchNetwork()
         await basePage.disconnectMetamask()
         await basePage.connectToMetamask(true)
         await bridgeAction.classicBridgeWithdrawal({
           amountToBridge,
           tokenSymbol: 'ETH',
-        }) // switches to L2.
+        })
       })
       test('Should withdraw BOBA Successfully', async ({ page }) => {
         test.setTimeout(120000)
         const basePage = new BasePage(page)
         const bridgeAction = new GatewayAction(page)
         await bridgeAction.connectToTestnet() // connected to L1.
-        await bridgeAction.switchNetwork() // switches to L2.
+        await bridgeAction.switchNetwork()
         await basePage.disconnectMetamask()
         await basePage.connectToMetamask(true)
         await bridgeAction.classicBridgeWithdrawal({
           amountToBridge,
           tokenSymbol: 'ETH',
-        }) // switches to L2.
+        })
       })
     })
   })
@@ -77,14 +75,14 @@ test.describe('Gateway ETHEREUM (Sepolia)', () => {
         })
       })
 
-      // NOTE: skip as amount exceed allowance error!
-      test.skip('Should Deposit BOBA Successfully', async ({ page }) => {
+      test('Should Deposit BOBA Successfully', async ({ page }) => {
         test.setTimeout(120000)
         const bridgeAction = new GatewayAction(page)
         await bridgeAction.connectToTestnet()
         await bridgeAction.lightBridgeDeposit({
-          amountToBridge: '20.002',
+          amountToBridge: '20.021',
           tokenSymbol: 'BOBA',
+          approveAllowance: true,
         })
       })
     })
@@ -95,7 +93,7 @@ test.describe('Gateway ETHEREUM (Sepolia)', () => {
         const bridgeAction = new GatewayAction(page)
         const basePage = new BasePage(page)
         await bridgeAction.connectToTestnet()
-        await bridgeAction.switchNetwork() // switches to L2.
+        await bridgeAction.switchNetwork()
         await basePage.disconnectMetamask()
         await basePage.connectToMetamask(true)
         await bridgeAction.lightBridgeWithdraw({
@@ -107,18 +105,14 @@ test.describe('Gateway ETHEREUM (Sepolia)', () => {
         test.setTimeout(120000)
         const bridgeAction = new GatewayAction(page)
         const basePage = new BasePage(page)
-        const bridgePage = new BridgePage(page)
         await bridgeAction.connectToTestnet()
-        await bridgeAction.switchNetwork() // switches to L2.
+        await bridgeAction.switchNetwork()
         await basePage.disconnectMetamask()
         await basePage.connectToMetamask(true)
-        await bridgePage.switchToLightBridge()
-        await bridgePage.openTokenPickerAndSelect('BOBA')
-        await bridgePage.bridgeButtonDisable()
-        await bridgePage.inputBridgeAmount('20')
-        await bridgePage.confirmErrorAlert({
-          error:
-            'Asset not supported, please choose different asset or one of our other bridge modes.',
+        await bridgeAction.lightBridgeWithdraw({
+          amountToBridge: '20.0211',
+          tokenSymbol: 'BOBA',
+          approveAllowance: true,
         })
       })
     })

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
   ],
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@bobanetwork/graphql-utils": "^1.1.11",
+    "@bobanetwork/graphql-utils": "^1.1.15",
     "@bobanetwork/light-bridge-chains": "^1.1.0",
     "@bobanetwork/register": "^0.0.25",
     "@bobanetwork/sdk": "1.0.7",