chore: add some missing specs

extension/setup-chrome-mock.ts

@@ -1,17 +1,11 @@
-import { afterEach, beforeEach, vi } from 'vitest'
-import { chrome as chromeMock } from 'vitest-chrome'
+import { afterEach, beforeEach } from 'vitest'
+import { chromeMock } from './test-utils/chrome/chromeMock'
+import { createStorageMock } from './test-utils/chrome/storageMock'
 
-const setPanelBehavior = vi.fn()
-
-Object.assign(chromeMock, {
-  ...chromeMock,
-  sidePanel: {
-    setPanelBehavior,
-  },
+beforeEach(() => {
+  createStorageMock()
 })
 
-beforeEach(() => setPanelBehavior.mockResolvedValue(null))
-
 afterEach(() => {
   clearAllListeners()
 })

extension/src/background/index.spec.ts

@@ -1,5 +1,6 @@
+import { chromeMock } from '@/test-utils'
 import { randomUUID } from 'crypto'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { trackRequests } from './rpcTracking'
 import { trackSessions } from './sessionTracking'
 import { trackSimulations } from './simulationTracking'
@@ -19,6 +20,10 @@ vi.mock('./simulationTracking', () => ({
 describe('Background script', () => {
   const importModule = () => import(`./index?bust=${randomUUID()}`)
 
+  beforeEach(() => {
+    chromeMock.sidePanel.setPanelBehavior.mockResolvedValue()
+  })
+
   it('starts session tracking', async () => {
     expect(trackSessions).not.toHaveBeenCalled()
 

extension/src/components/InlineForm.tsx

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithRef } from 'react'
+import { Form } from 'react-router'
+
+type InlineFormProps = ComponentPropsWithRef<typeof Form> & {
+  context?: Record<string, string>
+}
+
+export const InlineForm = ({
+  children,
+  method = 'post',
+  context = {},
+
+  ...props
+}: InlineFormProps) => {
+  return (
+    <Form method={method} {...props}>
+      {Object.entries(context).map(([key, value]) => (
+        <input type="hidden" key={key} name={key} value={value} />
+      ))}
+
+      {children}
+    </Form>
+  )
+}

extension/src/components/buttons/BaseButton.tsx

@@ -9,6 +9,7 @@ type SharedButtonProps = {
   icon?: LucideIcon
   size?: 'small' | 'base'
   submit?: boolean
+  intent?: string
 }
 
 export type BaseButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'type'> &
@@ -23,12 +24,15 @@ export const BaseButton = ({
   children,
   title,
   submit = false,
+  intent,
   ...props
 }: BaseButtonProps) => (
   <button
     {...props}
     type={submit ? 'submit' : undefined}
     title={title ? title : typeof children === 'string' ? children : undefined}
+    name={intent != null ? 'intent' : props.name}
+    value={intent != null ? intent : props.value}
     className={classNames(
       'flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border text-sm transition-all disabled:cursor-not-allowed disabled:opacity-60',
       fluid && 'flex-1',

extension/src/components/index.ts

@@ -6,6 +6,7 @@ export * from './buttons'
 export { ConfirmationModal, useConfirmationModal } from './ConfirmationModal'
 export { CopyToClipboard } from './CopyToClipboard'
 export { Divider } from './Divider'
+export { InlineForm } from './InlineForm'
 export * from './inputs'
 export * from './logos'
 export { Modal } from './Modal'

extension/src/panel/pages/_index/NoRoutes.spec.ts

@@ -0,0 +1,60 @@
+import {
+  getLastUsedRouteId,
+  getRoutes,
+  saveLastUsedRouteId,
+} from '@/execution-routes'
+import { expectRouteToBe, mockRoutes, render } from '@/test-utils'
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import { action, loader, NoRoutes } from './NoRoutes'
+
+describe('No routes', () => {
+  describe('Default redirects', () => {
+    it('redirects to the last used route if one is present', async () => {
+      await saveLastUsedRouteId('test-route')
+
+      await render('/', [{ path: '/', Component: NoRoutes, loader, action }], {
+        inspectRoutes: ['/:activeRouteId'],
+      })
+
+      await expectRouteToBe('/test-route')
+    })
+
+    it('redirects to the first route if no route was last used', async () => {
+      await mockRoutes({ id: 'first-route' }, { id: 'second-route' })
+
+      await render('/', [{ path: '/', Component: NoRoutes, loader, action }], {
+        inspectRoutes: ['/:activeRouteId'],
+      })
+
+      await expectRouteToBe('/first-route')
+    })
+  })
+
+  describe('No routes available', () => {
+    it('allows to create a new route', async () => {
+      await render('/', [{ path: '/', Component: NoRoutes, loader, action }], {
+        inspectRoutes: ['/routes/edit/:routeId'],
+      })
+
+      await userEvent.click(screen.getByRole('button', { name: 'Add route' }))
+
+      const [newRoute] = await getRoutes()
+
+      await expectRouteToBe(`/routes/edit/${newRoute.id}`)
+    })
+
+    it('marks the new route as the last used one', async () => {
+      await render('/', [{ path: '/', Component: NoRoutes, loader, action }], {
+        inspectRoutes: ['/routes/edit/:routeId'],
+      })
+
+      await userEvent.click(screen.getByRole('button', { name: 'Add route' }))
+
+      const [newRoute] = await getRoutes()
+
+      await expect(getLastUsedRouteId()).resolves.toEqual(newRoute.id)
+    })
+  })
+})

extension/src/panel/pages/_index/NoRoutes.tsx

@@ -1,12 +1,12 @@
-import { Info, Page, PrimaryButton } from '@/components'
+import { Info, InlineForm, Page, PrimaryButton } from '@/components'
 import {
   createRoute,
   getLastUsedRouteId,
   getRoutes,
   saveLastUsedRouteId,
 } from '@/execution-routes'
 import { Plus } from 'lucide-react'
-import { Form, redirect } from 'react-router'
+import { redirect } from 'react-router'
 
 export const loader = async () => {
   const lastUsedRouteId = await getLastUsedRouteId()
@@ -45,11 +45,11 @@ export const NoRoutes = () => {
       </Page.Content>
 
       <Page.Footer>
-        <Form method="post" className="flex flex-col">
+        <InlineForm className="flex flex-col">
           <PrimaryButton submit icon={Plus}>
-            Add Route
+            Add route
           </PrimaryButton>
-        </Form>
+        </InlineForm>
       </Page.Footer>
     </Page>
   )

extension/src/panel/pages/routes/edit.$routeId/EditRoute.spec.tsx

@@ -1,7 +1,7 @@
 import { ZERO_ADDRESS } from '@/chains'
+import { getRoutes } from '@/execution-routes'
 import { getReadOnlyProvider, useInjectedWallet } from '@/providers'
 import {
-  chromeMock,
   expectRouteToBe,
   MockProvider,
   mockRoute,
@@ -85,13 +85,11 @@ describe('Edit Zodiac route', () => {
 
       await userEvent.click(getByRole('button', { name: 'Remove' }))
 
-      expect(chromeMock.storage.sync.remove).toHaveBeenCalledWith(
-        'routes[route-id]',
-      )
+      await expect(getRoutes()).resolves.toEqual([])
     })
 
     it('does not remove the route if the user cancels', async () => {
-      mockRoute({ id: 'route-id' })
+      const route = await mockRoute({ id: 'route-id' })
 
       await render('/routes/route-id', [
         {
@@ -112,11 +110,14 @@ describe('Edit Zodiac route', () => {
 
       await userEvent.click(getAllByRole('button', { name: 'Cancel' })[0])
 
-      expect(chromeMock.storage.sync.remove).not.toHaveBeenCalledWith()
+      await expect(getRoutes()).resolves.toEqual([route])
     })
 
     it('navigates back to all routes after remove', async () => {
-      mockRoute({ id: 'route-id' })
+      await mockRoutes(
+        { id: 'route-id', label: 'First route' },
+        { label: 'Second route' },
+      )
 
       await render(
         '/routes/route-id',
@@ -143,6 +144,35 @@ describe('Edit Zodiac route', () => {
 
       await expectRouteToBe('/routes')
     })
+
+    it('navigates back to the root when the last route is removed', async () => {
+      await mockRoutes({ id: 'route-id' })
+
+      await render(
+        '/routes/route-id',
+        [
+          {
+            path: '/routes/:routeId',
+            Component: EditRoute,
+            loader,
+            action,
+          },
+        ],
+        { inspectRoutes: ['/'] },
+      )
+
+      await userEvent.click(
+        screen.getByRole('button', { name: 'Remove route' }),
+      )
+
+      const { getByRole } = within(
+        screen.getByRole('dialog', { name: 'Remove route' }),
+      )
+
+      await userEvent.click(getByRole('button', { name: 'Remove' }))
+
+      await expectRouteToBe('/')
+    })
   })
 
   describe('Switch chain', () => {

extension/src/panel/pages/routes/edit.$routeId/RemoveButton.tsx

@@ -1,7 +1,6 @@
-import { GhostButton, Modal, PrimaryButton } from '@/components'
+import { GhostButton, InlineForm, Modal, PrimaryButton } from '@/components'
 import { Trash2 } from 'lucide-react'
 import { useState } from 'react'
-import { Form } from 'react-router'
 
 export const RemoveButton = () => {
   const [confirmRemove, setConfirmRemove] = useState(false)
@@ -29,11 +28,11 @@ export const RemoveButton = () => {
             Cancel
           </GhostButton>
 
-          <Form method="post">
+          <InlineForm>
             <PrimaryButton submit style="contrast">
               Remove
             </PrimaryButton>
-          </Form>
+          </InlineForm>
         </Modal.Actions>
       </Modal>
     </>