Update playwright tests

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 />,
+  },
 ]

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

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()
   })

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

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')
   })
 })

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])
 

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)} />
+}