diff --git a/extension/src/popup/routes.tsx b/extension/src/popup/routes.tsx index a6f36ade33..37ae250396 100644 --- a/extension/src/popup/routes.tsx +++ b/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: , diff --git a/src/app/lib/ledger.test.ts b/src/app/lib/ledger.test.ts index 6d540aae2b..ff4e865fc9 100644 --- a/src/app/lib/ledger.test.ts +++ b/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) }) }) diff --git a/src/app/lib/ledger.ts b/src/app/lib/ledger.ts index 37ca4ffcd8..58b3951570 100644 --- a/src/app/lib/ledger.ts +++ b/src/app/lib/ledger.ts @@ -18,7 +18,7 @@ export function canAccessNavigatorUsb(): Promise { export async function requestDevice(): Promise { if (await isSupported()) { - return requestLedgerDevice() + return await requestLedgerDevice() } } diff --git a/src/app/pages/ConnectDevicePage/__tests__/index.test.tsx b/src/app/pages/ConnectDevicePage/__tests__/index.test.tsx index a93987f67a..627344b6bf 100644 --- a/src/app/pages/ConnectDevicePage/__tests__/index.test.tsx +++ b/src/app/pages/ConnectDevicePage/__tests__/index.test.tsx @@ -25,7 +25,7 @@ describe('', () => { render() - 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() diff --git a/src/app/pages/OpenWalletPage/__tests__/index.test.tsx b/src/app/pages/OpenWalletPage/__tests__/index.test.tsx index 4a9d478953..d6f653c22e 100644 --- a/src/app/pages/OpenWalletPage/__tests__/index.test.tsx +++ b/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('', () => { 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( , ) - expect(screen.queryByText('errors.usbTransportNotSupported')).not.toBeInTheDocument() + await waitForElementToBeRemoved(() => screen.queryByText('errors.usbTransportNotSupported')) expect(screen.getByRole('button', { name: 'openWallet.method.ledger' })).not.toBeDisabled() }) }) diff --git a/src/app/pages/OpenWalletPage/webextension.tsx b/src/app/pages/OpenWalletPage/webextension.tsx index 7a15e396b1..a8f866ad1f 100644 --- a/src/app/pages/OpenWalletPage/webextension.tsx +++ b/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 openLedgerAccessPopup(href)} /> + return openLedgerAccessPopup(connectDeviceRoute)} /> } diff --git a/src/commonRoutes.tsx b/src/commonRoutes.tsx index 2fbde80c41..99b4175e90 100644 --- a/src/commonRoutes.tsx +++ b/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[] diff --git a/src/routes.tsx b/src/routes.tsx index 8a7f38871b..eb0f3f21e6 100644 --- a/src/routes.tsx +++ b/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: , diff --git a/src/utils/webextension.test.ts b/src/utils/webextension.test.ts index 82395747bf..d67c3ca028 100644 --- a/src/utils/webextension.test.ts +++ b/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({ diff --git a/src/utils/webextension.ts b/src/utils/webextension.ts index 11b4adbaa1..a1dfefb0be 100644 --- a/src/utils/webextension.ts +++ b/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,