feat(pilot-app): edit label (#556)

* default starting point to zero address * simplify test setup for app * use new helpers more * make it possible to change the label * create and use updateLabel helper * remove some code duplication * use findBy for elements that require async data * adjust tests with more relevant data
gnosisguild · Jan 16, 2025 · 45b10ec · 45b10ec
1 parent 12229a8
commit 45b10ec
Show file tree

Hide file tree

Showing 14 changed files with 203 additions and 150 deletions.
diff --git a/deployables/app/app/components/wallet/ConnectWallet.tsx b/deployables/app/app/components/wallet/ConnectWallet.tsx
@@ -1,5 +1,6 @@
 import { invariant } from '@epic-web/invariant'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ZERO_ADDRESS } from '@zodiac/chains'
 import { type HexAddress, ProviderType } from '@zodiac/schema'
 import { getDefaultConfig } from 'connectkit'
 import { type ChainId } from 'ser-kit'
@@ -43,7 +44,7 @@ export const ConnectWallet = ({
   onConnect,
   onDisconnect,
 }: Props) => {
-  if (pilotAddress == null) {
+  if (pilotAddress == null || pilotAddress === ZERO_ADDRESS) {
     return (
       <QueryClientProvider client={queryClient}>
         <WagmiProvider config={wagmiConfig}>

diff --git a/deployables/app/app/routes/edit-route.$data.spec.ts b/deployables/app/app/routes/edit-route.$data.spec.ts
@@ -1,7 +1,7 @@
 import { render } from '@/test-utils'
 import { screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { Chain, CHAIN_NAME, ZERO_ADDRESS } from '@zodiac/chains'
+import { Chain, CHAIN_NAME } from '@zodiac/chains'
 import {
   encodeRoleKey,
   fetchZodiacModules,
@@ -16,9 +16,11 @@ import type { initSafeApiKit } from '@zodiac/safe'
 import { ProviderType } from '@zodiac/schema'
 import {
   createMockEndWaypoint,
+  createMockEoaAccount,
   createMockExecutionRoute,
   createMockRoleWaypoint,
   createMockStartingWaypoint,
+  createMockWaypoints,
   randomAddress,
   randomPrefixedAddress,
 } from '@zodiac/test-utils'
@@ -73,6 +75,24 @@ describe('Edit route', () => {
         'Test route',
       )
     })
+
+    it('is possible to change the label of a route', async () => {
+      const route = createMockExecutionRoute()
+
+      await render(`/edit-route/${btoa(JSON.stringify(route))}`)
+
+      await userEvent.type(
+        screen.getByRole('textbox', { name: 'Label' }),
+        'New route label',
+      )
+
+      await userEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+      expect(chromeMock.runtime.sendMessage).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ label: 'New route label' }),
+      )
+    })
   })
 
   describe('Chain', () => {
@@ -106,7 +126,11 @@ describe('Edit route', () => {
     describe('MetaMask', () => {
       it('shows MetaMask as the provider of a route', async () => {
         const route = createMockExecutionRoute({
-          waypoints: [createMockStartingWaypoint()],
+          waypoints: createMockWaypoints({
+            start: createMockStartingWaypoint(
+              createMockEoaAccount({ address: randomAddress() }),
+            ),
+          }),
           providerType: ProviderType.InjectedWallet,
         })
 
@@ -121,7 +145,11 @@ describe('Edit route', () => {
     describe('Wallet Connect', () => {
       it('shows Wallet Connect as the provider of a route', async () => {
         const route = createMockExecutionRoute({
-          waypoints: [createMockStartingWaypoint()],
+          waypoints: createMockWaypoints({
+            start: createMockStartingWaypoint(
+              createMockEoaAccount({ address: randomAddress() }),
+            ),
+          }),
           providerType: ProviderType.WalletConnect,
         })
 
@@ -154,7 +182,6 @@ describe('Edit route', () => {
 
       const route = createMockExecutionRoute({
         waypoints: [createMockStartingWaypoint()],
-        providerType: ProviderType.InjectedWallet,
       })
 
       await render(`/edit-route/${btoa(JSON.stringify(route))}`)
@@ -172,15 +199,14 @@ describe('Edit route', () => {
 
         mockGetSafesByOwner.mockResolvedValue({ safes: [safe] })
 
-        const route = createMockExecutionRoute({
-          waypoints: [createMockStartingWaypoint()],
-          providerType: ProviderType.InjectedWallet,
-        })
+        const route = createMockExecutionRoute()
 
         await render(`/edit-route/${btoa(JSON.stringify(route))}`)
 
         await userEvent.click(
-          screen.getByRole('button', { name: 'View all available Safes' }),
+          await screen.findByRole('button', {
+            name: 'View all available Safes',
+          }),
         )
 
         await userEvent.click(screen.getByRole('option', { name: safe }))
@@ -198,11 +224,7 @@ describe('Edit route', () => {
 
         mockGetSafesByOwner.mockResolvedValue({ safes: [] })
 
-        const route = createMockExecutionRoute({
-          avatar: formatPrefixedAddress(Chain.ETH, ZERO_ADDRESS),
-          waypoints: [createMockStartingWaypoint()],
-          providerType: ProviderType.InjectedWallet,
-        })
+        const route = createMockExecutionRoute()
 
         await render(`/edit-route/${btoa(JSON.stringify(route))}`)
 
@@ -223,11 +245,9 @@ describe('Edit route', () => {
 
         const route = createMockExecutionRoute({
           avatar: formatPrefixedAddress(Chain.ETH, safe),
-          waypoints: [
-            createMockStartingWaypoint(),
-            createMockEndWaypoint({ address: safe }),
-          ],
-          providerType: ProviderType.InjectedWallet,
+          waypoints: createMockWaypoints({
+            end: createMockEndWaypoint({ address: safe }),
+          }),
         })
 
         await render(`/edit-route/${btoa(JSON.stringify(route))}`)
@@ -263,13 +283,12 @@ describe('Edit route', () => {
       mockQueryRolesV2MultiSend.mockResolvedValue([])
 
       const route = createMockExecutionRoute({
-        avatar: randomPrefixedAddress(),
-        waypoints: [
-          createMockStartingWaypoint(),
-          createMockRoleWaypoint({ moduleAddress: selectedMod, version: 1 }),
-          createMockEndWaypoint(),
-        ],
-        providerType: ProviderType.InjectedWallet,
+        waypoints: createMockWaypoints({
+          waypoints: [
+            createMockRoleWaypoint({ moduleAddress: selectedMod, version: 1 }),
+          ],
+          end: true,
+        }),
       })
 
       await render(`/edit-route/${btoa(JSON.stringify(route))}`)
@@ -286,9 +305,7 @@ describe('Edit route', () => {
       mockFetchZodiacModules.mockResolvedValue([])
 
       const route = createMockExecutionRoute({
-        avatar: randomPrefixedAddress({ chainId: Chain.ETH }),
-        providerType: ProviderType.InjectedWallet,
-        waypoints: [createMockStartingWaypoint(), createMockEndWaypoint()],
+        waypoints: createMockWaypoints({ end: true }),
       })
 
       await render(`/edit-route/${btoa(JSON.stringify(route))}`)
@@ -316,11 +333,9 @@ describe('Edit route', () => {
         ])
 
         const route = createMockExecutionRoute({
-          avatar: randomPrefixedAddress(),
-          waypoints: [
-            createMockStartingWaypoint(),
-            createMockRoleWaypoint({ moduleAddress, version: 1 }),
-          ],
+          waypoints: createMockWaypoints({
+            waypoints: [createMockRoleWaypoint({ moduleAddress, version: 1 })],
+          }),
           providerType: ProviderType.InjectedWallet,
         })
 
@@ -340,9 +355,7 @@ describe('Edit route', () => {
         mockQueryRolesV1MultiSend.mockResolvedValue([])
 
         const route = createMockExecutionRoute({
-          avatar: randomPrefixedAddress(),
-          waypoints: [createMockStartingWaypoint(), createMockEndWaypoint()],
-          providerType: ProviderType.InjectedWallet,
+          waypoints: createMockWaypoints({ end: true }),
         })
 
         await render(`/edit-route/${btoa(JSON.stringify(route))}`)
@@ -368,19 +381,18 @@ describe('Edit route', () => {
           ])
 
           const route = createMockExecutionRoute({
-            avatar: randomPrefixedAddress(),
-            providerType: ProviderType.InjectedWallet,
-            waypoints: [
-              createMockStartingWaypoint(),
-              createMockRoleWaypoint({ moduleAddress, roleId, version: 1 }),
-            ],
+            waypoints: createMockWaypoints({
+              waypoints: [
+                createMockRoleWaypoint({ moduleAddress, roleId, version: 1 }),
+              ],
+            }),
           })
 
           await render(`/edit-route/${btoa(JSON.stringify(route))}`)
 
-          expect(screen.getByRole('textbox', { name: 'Role ID' })).toHaveValue(
-            roleId,
-          )
+          expect(
+            await screen.findByRole('textbox', { name: 'Role ID' }),
+          ).toHaveValue(roleId)
         })
 
         it('is possible to update the role ID', async () => {
@@ -394,12 +406,11 @@ describe('Edit route', () => {
           ])
 
           const route = createMockExecutionRoute({
-            avatar: randomPrefixedAddress(),
-            providerType: ProviderType.InjectedWallet,
-            waypoints: [
-              createMockStartingWaypoint(),
-              createMockRoleWaypoint({ moduleAddress, version: 1 }),
-            ],
+            waypoints: createMockWaypoints({
+              waypoints: [
+                createMockRoleWaypoint({ moduleAddress, version: 1 }),
+              ],
+            }),
           })
 
           await render(`/edit-route/${btoa(JSON.stringify(route))}`)
@@ -433,12 +444,9 @@ describe('Edit route', () => {
         ])
 
         const route = createMockExecutionRoute({
-          avatar: randomPrefixedAddress(),
-          waypoints: [
-            createMockStartingWaypoint(),
-            createMockRoleWaypoint({ moduleAddress, version: 2 }),
-          ],
-          providerType: ProviderType.InjectedWallet,
+          waypoints: createMockWaypoints({
+            waypoints: [createMockRoleWaypoint({ moduleAddress, version: 2 })],
+          }),
         })
 
         await render(`/edit-route/${btoa(JSON.stringify(route))}`)
@@ -457,9 +465,7 @@ describe('Edit route', () => {
         mockQueryRolesV2MultiSend.mockResolvedValue([])
 
         const route = createMockExecutionRoute({
-          avatar: randomPrefixedAddress(),
-          waypoints: [createMockStartingWaypoint(), createMockEndWaypoint()],
-          providerType: ProviderType.InjectedWallet,
+          waypoints: createMockWaypoints({ end: true }),
         })
 
         await render(`/edit-route/${btoa(JSON.stringify(route))}`)
@@ -484,19 +490,15 @@ describe('Edit route', () => {
           ])
 
           const route = createMockExecutionRoute({
-            avatar: formatPrefixedAddress(
-              Chain.ETH,
-              '0x58e6c7ab55Aa9012eAccA16d1ED4c15795669E1C',
-            ),
-            waypoints: [
-              createMockStartingWaypoint(),
-              createMockRoleWaypoint({
-                moduleAddress,
-                roleId: encodeRoleKey('TEST-KEY'),
-                version: 2,
-              }),
-            ],
-            providerType: ProviderType.InjectedWallet,
+            waypoints: createMockWaypoints({
+              waypoints: [
+                createMockRoleWaypoint({
+                  moduleAddress,
+                  roleId: encodeRoleKey('TEST-KEY'),
+                  version: 2,
+                }),
+              ],
+            }),
           })
 
           await render(`/edit-route/${btoa(JSON.stringify(route))}`)
@@ -517,12 +519,11 @@ describe('Edit route', () => {
           ])
 
           const route = createMockExecutionRoute({
-            avatar: randomPrefixedAddress(),
-            providerType: ProviderType.InjectedWallet,
-            waypoints: [
-              createMockStartingWaypoint(),
-              createMockRoleWaypoint({ moduleAddress, version: 2 }),
-            ],
+            waypoints: createMockWaypoints({
+              waypoints: [
+                createMockRoleWaypoint({ moduleAddress, version: 2 }),
+              ],
+            }),
           })
 
           await render(`/edit-route/${btoa(JSON.stringify(route))}`)