CR fixes

extension/src/popup/routes.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { App } from 'app'
 import { ConnectDevicePage } from 'app/pages/ConnectDevicePage'
 import { OpenWalletPageWebExtension } from 'app/pages/OpenWalletPage/webextension'
-import { commonRoutes } from '../../../src/commonRoutes'
+import { commonRoutes, Route } from '../../../src/commonRoutes'
 
-export const routes = [
+export const routes: Route[] = [
   {
     path: '/*',
     element: <App />,

src/app/lib/ledger.test.ts

@@ -17,12 +17,12 @@ function mockAppIsOpen(appName: string) {
 }
 
 describe('Extension access', () => {
-  it('should request ledger device', async () => {
+  it('should return a ledger device when web usb is supported', async () => {
+    const device = {} as USBDevice
     jest.mocked(isSupported).mockResolvedValueOnce(true)
-    jest.mocked(requestLedgerDevice).mockResolvedValueOnce({} as USBDevice)
-    requestDevice()
-    await expect(isSupported).toHaveBeenCalled()
-    await expect(requestLedgerDevice).toHaveBeenCalled()
+    jest.mocked(requestLedgerDevice).mockResolvedValueOnce(device)
+    const result = await requestDevice()
+    expect(result).toBe(device)
   })
 })
 

src/app/lib/ledger.ts

@@ -18,7 +18,7 @@ export function canAccessNavigatorUsb(): Promise<boolean> {
 
 export async function requestDevice(): Promise<USBDevice | undefined> {
   if (await isSupported()) {
-    return requestLedgerDevice()
+    return await requestLedgerDevice()
   }
 }
 

src/app/pages/ConnectDevicePage/__tests__/index.test.tsx

@@ -25,7 +25,7 @@ describe('<ConnectDevicePage />', () => {
 
     render(<ConnectDevicePage />)
 
-    userEvent.click(screen.getByRole('button'))
+    await userEvent.click(screen.getByRole('button'))
 
     expect(await screen.findByText('ledger.extension.succeed')).toBeInTheDocument()
     expect(screen.getByLabelText('Status is okay')).toBeInTheDocument()

src/app/pages/OpenWalletPage/__tests__/index.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import { when } from 'jest-when'
@@ -30,39 +30,40 @@ describe('<SelectOpenMethod />', () => {
     jest.mocked(canAccessNavigatorUsb).mockResolvedValue(false)
   })
 
-  it('should render component', async () => {
-    const { container } = await waitFor(() => renderComponent())
+  it('should render component', () => {
+    const { container } = renderComponent()
 
     expect(container).toMatchSnapshot()
   })
 
-  it('should render component with an access button', async () => {
-    await waitFor(() => renderComponent(() => {}))
+  it('should render component with an access button', () => {
+    renderComponent(() => {})
 
     expect(screen.queryByText('openWallet.method.ledger')).not.toBeInTheDocument()
     expect(screen.getByText('ledger.extension.grantAccess')).toBeInTheDocument()
   })
 
-  it('should redirect user to ledger page', async () => {
+  it('should redirect user to ledger page', () => {
     when(useSelector as any)
       .calledWith(selectShowAccountsSelectionModal)
       .mockReturnValue(true)
 
-    await waitFor(() => renderComponent(() => {}))
+    renderComponent(() => {})
 
     expect(mockNavigate).toHaveBeenCalledWith('/open-wallet/ledger')
   })
 
   it('should render variant with web usb support', async () => {
     jest.mocked(canAccessNavigatorUsb).mockResolvedValue(true)
-    const { rerender } = await waitFor(() => renderComponent())
+
+    const { rerender } = renderComponent()
     rerender(
       <MemoryRouter>
         <SelectOpenMethod />
       </MemoryRouter>,
     )
 
-    expect(screen.queryByText('errors.usbTransportNotSupported')).not.toBeInTheDocument()
+    await waitForElementToBeRemoved(() => screen.queryByText('errors.usbTransportNotSupported'))
     expect(screen.getByRole('button', { name: 'openWallet.method.ledger' })).not.toBeDisabled()
   })
 })

src/app/pages/OpenWalletPage/webextension.tsx

@@ -4,7 +4,7 @@ import { openLedgerAccessPopup } from 'utils/webextension'
 import { SelectOpenMethod } from './'
 
 export function OpenWalletPageWebExtension() {
-  const href = useHref('connect-device')
+  const connectDeviceRoute = useHref('connect-device')
 
-  return <SelectOpenMethod webExtensionLedgerAccess={() => openLedgerAccessPopup(href)} />
+  return <SelectOpenMethod webExtensionLedgerAccess={() => openLedgerAccessPopup(connectDeviceRoute)} />
 }

src/commonRoutes.tsx

@@ -11,7 +11,7 @@ import { ActiveDelegationList } from 'app/pages/StakingPage/Features/DelegationL
 import { DebondingDelegationList } from 'app/pages/StakingPage/Features/DelegationList/DebondingDelegationList'
 import { ParaTimes } from 'app/pages/ParaTimesPage'
 
-type Route = {
+export type Route = {
   path: string
   element: ReactNode
   children?: Route[]

src/routes.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { App } from 'app'
 import { OpenWalletPage } from 'app/pages/OpenWalletPage'
-import { commonRoutes } from './commonRoutes'
+import { commonRoutes, Route } from './commonRoutes'
 
-export const routes = [
+export const routes: Route[] = [
   {
     path: '/*',
     element: <App />,

src/utils/webextension.test.ts

@@ -24,7 +24,7 @@ describe('openLedgerAccessPopup', () => {
       version: '',
     })
     jest.mocked(browser.runtime.getURL).mockReturnValue('mockedUrl')
-    openLedgerAccessPopup('/foo')
+    openLedgerAccessPopup('#/foo')
 
     expect(browser.runtime.getURL).toHaveBeenCalledWith('popup.foo.html#/foo')
     expect(browser.windows.create).toHaveBeenCalledWith({

src/utils/webextension.ts

@@ -5,17 +5,17 @@ type Dimensions = {
   width: number
 }
 
-const getExtensionUrl = (path: string) =>
+const getPopupUrl = (path: string) =>
   browser.runtime.getURL(`${browser.runtime.getManifest()?.browser_action?.default_popup}${path}`)
 
 const openPopup = (path: string, dimensions: Dimensions) => {
   const existingPopupWindow = browser.extension.getViews().find(window => window.location.hash === path)
 
-  if (existingPopupWindow) {
+  if (path && existingPopupWindow) {
     existingPopupWindow.close()
   }
   browser.windows.create({
-    url: getExtensionUrl(path),
+    url: getPopupUrl(path),
     type: 'popup',
     width: dimensions.width,
     height: dimensions.height,