From 1f7fd53065ffad25b115280e89d5b11deec14c03 Mon Sep 17 00:00:00 2001
From: lubej <9722540+lubej@users.noreply.github.com>
Date: Tue, 5 Sep 2023 17:21:20 +0200
Subject: [PATCH] Update playwright tests

---
 extension/src/popup/routes.tsx                             | 6 +++++-
 playwright/tests/extension.spec.ts                         | 1 +
 playwright/tests/ledger.spec.ts                            | 2 +-
 src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx | 6 +++---
 src/app/pages/OpenWalletPage/__tests__/index.test.tsx      | 2 +-
 src/app/pages/OpenWalletPage/index.tsx                     | 2 +-
 src/app/pages/OpenWalletPage/webextension.tsx              | 7 +++++++
 7 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/extension/src/popup/routes.tsx b/extension/src/popup/routes.tsx
index 8f296fe2d1..a4db770e0a 100644
--- a/extension/src/popup/routes.tsx
+++ b/extension/src/popup/routes.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { RouteObject } from 'react-router-dom'
 import { App } from 'app'
 import { ConnectDevicePage } from 'app/pages/ConnectDevicePage'
-import { OpenWalletPageWebExtension } from 'app/pages/OpenWalletPage/webextension'
+import { FromLedgerWebExtension, OpenWalletPageWebExtension } from 'app/pages/OpenWalletPage/webextension'
 import { commonRoutes } from '../../../src/commonRoutes'
 
 export const routes: RouteObject[] = [
@@ -21,4 +21,8 @@ export const routes: RouteObject[] = [
     path: 'open-wallet/connect-device',
     element: <ConnectDevicePage />,
   },
+  {
+    path: 'open-wallet/ledger',
+    element: <FromLedgerWebExtension />,
+  },
 ]
diff --git a/playwright/tests/extension.spec.ts b/playwright/tests/extension.spec.ts
index 17937e1f26..8e5812970f 100644
--- a/playwright/tests/extension.spec.ts
+++ b/playwright/tests/extension.spec.ts
@@ -64,6 +64,7 @@ test.describe('The extension popup should load', () => {
 
   test('ask for USB permissions in ledger popup', async ({ page, context, extensionId }) => {
     await page.goto(`chrome-extension://${extensionId}/${popupFile}#/open-wallet`)
+    await page.getByRole('button', { name: /Ledger/i }).click()
     const popupPromise = context.waitForEvent('page')
     await page.getByRole('button', { name: /Grant access to your Ledger/i }).click()
     const popup = await popupPromise
diff --git a/playwright/tests/ledger.spec.ts b/playwright/tests/ledger.spec.ts
index ed77b04b44..cc0f4d7926 100644
--- a/playwright/tests/ledger.spec.ts
+++ b/playwright/tests/ledger.spec.ts
@@ -6,7 +6,7 @@ test.describe('Ledger', () => {
     expect((await page.request.head('/')).headers()).toHaveProperty('permissions-policy')
     await expectNoErrorsInConsole(page)
 
-    await page.goto('/open-wallet/ledger')
+    await page.goto('/open-wallet/ledger/usb')
     await page.getByRole('button', { name: 'Select accounts to open' }).click()
     await expect(page.getByText('error').or(page.getByText('fail'))).toBeHidden()
   })
diff --git a/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx b/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx
index 34b7170381..aa05c111dd 100644
--- a/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx
+++ b/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx
@@ -23,9 +23,9 @@ export function FromLedger({ webExtensionLedgerAccess }: SelectOpenMethodProps)
       const usbLedgerSupported = await canAccessNavigatorUsb()
       const bleLedgerSupported = await canAccessBle()
 
-      if (usbLedgerSupported && !bleLedgerSupported) {
+      if (usbLedgerSupported && !bleLedgerSupported && !webExtensionLedgerAccess) {
         navigate('usb')
-      } else if (bleLedgerSupported && !usbLedgerSupported) {
+      } else if (bleLedgerSupported && !usbLedgerSupported && !webExtensionLedgerAccess) {
         navigate('ble')
       }
 
@@ -34,7 +34,7 @@ export function FromLedger({ webExtensionLedgerAccess }: SelectOpenMethodProps)
     }
 
     getLedgerSupport()
-  }, [navigate])
+  }, [navigate, webExtensionLedgerAccess])
 
   return (
     <Box
diff --git a/src/app/pages/OpenWalletPage/__tests__/index.test.tsx b/src/app/pages/OpenWalletPage/__tests__/index.test.tsx
index 61660c2e6c..3464aa9b65 100644
--- a/src/app/pages/OpenWalletPage/__tests__/index.test.tsx
+++ b/src/app/pages/OpenWalletPage/__tests__/index.test.tsx
@@ -43,6 +43,6 @@ describe('<SelectOpenMethod />', () => {
 
     renderComponent(() => {})
 
-    expect(mockNavigate).toHaveBeenCalledWith('/open-wallet/ledger')
+    expect(mockNavigate).toHaveBeenCalledWith('/open-wallet/ledger/usb')
   })
 })
diff --git a/src/app/pages/OpenWalletPage/index.tsx b/src/app/pages/OpenWalletPage/index.tsx
index 9d28db28e1..dbc6093e29 100644
--- a/src/app/pages/OpenWalletPage/index.tsx
+++ b/src/app/pages/OpenWalletPage/index.tsx
@@ -26,7 +26,7 @@ export function SelectOpenMethod({ webExtensionLedgerAccess }: SelectOpenMethodP
 
   useEffect(() => {
     if (webExtensionLedgerAccess && showAccountsSelectionModal) {
-      navigate('/open-wallet/ledger')
+      navigate('/open-wallet/ledger/usb')
     }
   }, [navigate, showAccountsSelectionModal, webExtensionLedgerAccess])
 
diff --git a/src/app/pages/OpenWalletPage/webextension.tsx b/src/app/pages/OpenWalletPage/webextension.tsx
index 7a15e396b1..2077ab4b1b 100644
--- a/src/app/pages/OpenWalletPage/webextension.tsx
+++ b/src/app/pages/OpenWalletPage/webextension.tsx
@@ -2,9 +2,16 @@ import React from 'react'
 import { useHref } from 'react-router-dom'
 import { openLedgerAccessPopup } from 'utils/webextension'
 import { SelectOpenMethod } from './'
+import { FromLedger } from './Features/FromLedger'
 
 export function OpenWalletPageWebExtension() {
   const href = useHref('connect-device')
 
   return <SelectOpenMethod webExtensionLedgerAccess={() => openLedgerAccessPopup(href)} />
 }
+
+export function FromLedgerWebExtension() {
+  const href = useHref('/open-wallet/connect-device')
+
+  return <FromLedger webExtensionLedgerAccess={() => openLedgerAccessPopup(href)} />
+}