frontend: polish app launch and release experience

2026-06-11 00:24:40 -04:00
parent c393b96da3
commit 1a3d726eac
140 changed files with 5930 additions and 920 deletions
@@ -0,0 +1,113 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import Web5ConnectedNodes from '../Web5ConnectedNodes.vue'
+import { rpcClient } from '@/api/rpc-client'
+
+const messageState = vi.hoisted(() => ({
+  receivedMessages: { __v_isRef: true, value: [] as Array<{ from_pubkey: string; timestamp: number; message: string }> },
+  loadingMessages: { __v_isRef: true, value: false },
+}))
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+vi.mock('@/api/rpc-client', () => ({
+  rpcClient: {
+    listPeers: vi.fn(() => new Promise(() => {})),
+    federationListNodes: vi.fn().mockResolvedValue({ nodes: [] }),
+    checkPeerReachable: vi.fn().mockResolvedValue({ reachable: false }),
+    call: vi.fn(),
+  },
+}))
+
+vi.mock('@/composables/useMessageToast', () => ({
+  useMessageToast: () => ({
+    receivedMessages: messageState.receivedMessages,
+    loadingMessages: messageState.loadingMessages,
+    unreadCount: { value: 0 },
+    loadReceivedMessages: vi.fn(),
+    markAsRead: vi.fn(),
+  }),
+}))
+
+vi.mock('@/stores/web5Badge', () => ({
+  useWeb5BadgeStore: () => ({ pendingRequestCount: 0 }),
+}))
+
+vi.mock('@/stores/app', () => ({
+  useAppStore: () => ({ peerHealth: {} }),
+}))
+
+vi.mock('@/composables/useModalKeyboard', () => ({
+  useModalKeyboard: vi.fn(),
+}))
+
+describe('Web5ConnectedNodes', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    messageState.receivedMessages.value = []
+    messageState.loadingMessages.value = false
+  })
+
+  it('shows a loading state for empty trusted nodes while peers are loading', async () => {
+    const wrapper = mount(Web5ConnectedNodes)
+
+    wrapper.vm.loadPeers()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('common.loading')
+    expect(wrapper.text()).not.toContain('web5.noPeers')
+  })
+
+  it('keeps received messages visible during refresh', async () => {
+    messageState.receivedMessages.value = [{
+      from_pubkey: 'peer-pubkey',
+      timestamp: 1760000000,
+      message: 'Existing message',
+    }]
+    messageState.loadingMessages.value = true
+
+    const wrapper = mount(Web5ConnectedNodes)
+    wrapper.vm.nodesContainerTab = 'messages'
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('Existing message')
+    expect(wrapper.text()).toContain('common.loading')
+  })
+
+  it('keeps connection requests visible while refresh is pending or fails', async () => {
+    vi.mocked(rpcClient.call).mockResolvedValueOnce({
+      requests: [{
+        id: 'req-1',
+        from_did: 'did:key:alice',
+        from_pubkey: 'alice-pubkey',
+        message: 'Please connect',
+        created_at: '2026-06-10T10:00:00Z',
+      }],
+    })
+
+    const wrapper = mount(Web5ConnectedNodes)
+    await (wrapper.vm as unknown as { loadConnectionRequests: () => Promise<void> }).loadConnectionRequests()
+
+    expect(wrapper.text()).toContain('Please connect')
+
+    vi.mocked(rpcClient.call).mockReturnValueOnce(new Promise((_, reject) => {
+      setTimeout(() => reject(new Error('offline')), 0)
+    }))
+
+    const refresh = (wrapper.vm as unknown as { loadConnectionRequests: () => Promise<void> }).loadConnectionRequests()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('Please connect')
+    expect(wrapper.text()).toContain('common.loading')
+
+    await refresh
+
+    expect(wrapper.text()).toContain('Please connect')
+  })
+})
@@ -0,0 +1,76 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import Web5CredentialsSummary from '../Web5CredentialsSummary.vue'
+import { rpcClient } from '@/api/rpc-client'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+vi.mock('@/api/rpc-client', () => ({
+  rpcClient: {
+    call: vi.fn(),
+  },
+}))
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  let reject!: (reason?: unknown) => void
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve, reject }
+}
+
+function makeCredential() {
+  return {
+    id: 'cred-one',
+    issuer: 'did:key:issuer',
+    subject: 'did:key:subject',
+    type: 'NodeOperator',
+    claims: {},
+    issued_at: '2026-06-10T10:00:00Z',
+    expires_at: null,
+    status: 'active',
+  }
+}
+
+describe('Web5CredentialsSummary', () => {
+  it('keeps credential rows visible while refresh is pending or fails', async () => {
+    vi.mocked(rpcClient.call).mockResolvedValueOnce({ credentials: [makeCredential()] })
+
+    const wrapper = mount(Web5CredentialsSummary, {
+      props: { identityCount: 1 },
+      global: {
+        stubs: {
+          RouterLink: true,
+        },
+      },
+    })
+
+    await (wrapper.vm as unknown as { loadCredentials: () => Promise<void> }).loadCredentials()
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('NodeOperator')
+    expect(wrapper.text()).toContain('did:key:subject')
+
+    const pending = deferred<{ credentials: [] }>()
+    vi.mocked(rpcClient.call).mockReturnValueOnce(pending.promise)
+
+    const refresh = (wrapper.vm as unknown as { loadCredentials: () => Promise<void> }).loadCredentials()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('NodeOperator')
+    expect(wrapper.text()).toContain('Refreshing credentials...')
+    expect(wrapper.text()).not.toContain('Loading credentials...')
+
+    pending.reject(new Error('offline'))
+    await refresh
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('NodeOperator')
+    expect(wrapper.text()).toContain('offline')
+    expect(wrapper.text()).not.toContain('Refreshing credentials...')
+  })
+})
@@ -0,0 +1,94 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import Web5DWN from '../Web5DWN.vue'
+import { rpcClient } from '@/api/rpc-client'
+import { useSyncStore } from '@/stores/sync'
+import { PackageState } from '@/types/api'
+import type { DwnMessageEntry } from '../types'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+vi.mock('@/api/rpc-client', () => ({
+  rpcClient: {
+    call: vi.fn(),
+  },
+}))
+
+function makeMessage(recordId: string): DwnMessageEntry {
+  return {
+    record_id: recordId,
+    author: 'did:key:alice',
+    date_created: '2026-06-10T10:00:00Z',
+    descriptor: {
+      interface: 'Records',
+      method: 'Write',
+      protocol: 'https://example.com/protocol',
+    },
+    data: { title: recordId },
+  }
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  let reject!: (reason?: unknown) => void
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve, reject }
+}
+
+describe('Web5DWN', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+    useSyncStore().data = {
+      'package-data': {
+        dwn: {
+          state: PackageState.Running,
+          manifest: { id: 'dwn', title: 'DWN' },
+          'static-files': {},
+        },
+      },
+    } as never
+  })
+
+  it('keeps stored messages visible while refresh is pending or fails', async () => {
+    vi.mocked(rpcClient.call).mockResolvedValueOnce({
+      messages: [makeMessage('record-one')],
+      count: 1,
+    })
+
+    const wrapper = mount(Web5DWN, {
+      global: {
+        stubs: { RouterLink: true },
+      },
+    })
+
+    ;(wrapper.vm as unknown as { showDwnMessages: boolean }).showDwnMessages = true
+    await (wrapper.vm as unknown as { loadDwnMessages: () => Promise<void> }).loadDwnMessages()
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('record-o')
+
+    const pending = deferred<{ messages: DwnMessageEntry[]; count: number }>()
+    vi.mocked(rpcClient.call).mockReturnValueOnce(pending.promise)
+
+    const refresh = (wrapper.vm as unknown as { loadDwnMessages: () => Promise<void> }).loadDwnMessages()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('record-o')
+    expect(wrapper.text()).toContain('Refreshing messages...')
+    expect(wrapper.text()).not.toContain('Loading messages...')
+
+    pending.reject(new Error('offline'))
+    await refresh
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('record-o')
+    expect(wrapper.text()).not.toContain('Refreshing messages...')
+  })
+})
@@ -0,0 +1,79 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import Web5Domains from '../Web5Domains.vue'
+import { rpcClient } from '@/api/rpc-client'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+vi.mock('@/api/rpc-client', () => ({
+  rpcClient: {
+    call: vi.fn(),
+  },
+}))
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  let reject!: (reason?: unknown) => void
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve, reject }
+}
+
+function makeDomain() {
+  return {
+    id: 'name-one',
+    name: 'satoshi',
+    domain: 'example.com',
+    nip05: 'satoshi@example.com',
+    identity_id: 'identity-one',
+    did: 'did:key:identity',
+    nostr_pubkey: null,
+    status: 'active',
+    registered_at: '2026-06-10T10:00:00Z',
+    expires_at: null,
+  }
+}
+
+describe('Web5Domains', () => {
+  it('keeps registered names visible while refresh is pending or fails', async () => {
+    vi.mocked(rpcClient.call).mockResolvedValueOnce({ names: [makeDomain()] })
+
+    const wrapper = mount(Web5Domains, {
+      props: { showStagger: false, managedIdentities: [] },
+      global: {
+        stubs: {
+          Teleport: true,
+        },
+      },
+    })
+
+    await (wrapper.vm as unknown as { loadDomainNames: () => Promise<void> }).loadDomainNames()
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('1 name')
+    expect(wrapper.text()).toContain('1 Active')
+
+    const pending = deferred<{ names: [] }>()
+    vi.mocked(rpcClient.call).mockReturnValueOnce(pending.promise)
+
+    const refresh = (wrapper.vm as unknown as { loadDomainNames: () => Promise<void> }).loadDomainNames()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('1 name')
+    expect(wrapper.text()).toContain('1 Active')
+    expect(wrapper.text()).toContain('Refreshing domains...')
+
+    pending.reject(new Error('offline'))
+    await refresh
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('1 name')
+    expect(wrapper.text()).toContain('1 Active')
+    expect(wrapper.text()).toContain('offline')
+    expect(wrapper.text()).not.toContain('Refreshing domains...')
+  })
+})
@@ -0,0 +1,82 @@
+import { describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import Web5Federation from '../Web5Federation.vue'
+import { rpcClient } from '@/api/rpc-client'
+
+vi.mock('@/api/rpc-client', () => ({
+  rpcClient: {
+    call: vi.fn().mockResolvedValue({ nodes: [], pending_requests: [] }),
+    getNodeDid: vi.fn().mockResolvedValue({ did: 'did:key:test' }),
+  },
+}))
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  let reject!: (reason?: unknown) => void
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve, reject }
+}
+
+function mountFederation() {
+  return mount(Web5Federation, {
+    global: {
+      stubs: {
+        RouterLink: {
+          props: ['to'],
+          template: '<a :href="to"><slot /></a>',
+        },
+      },
+    },
+  })
+}
+
+describe('Web5Federation', () => {
+  it('surfaces Find Nodes and Fleet routes', () => {
+    const wrapper = mountFederation()
+
+    const links = wrapper.findAll('a').map(link => link.attributes('href'))
+    expect(links).toContain('/dashboard/server/federation')
+    expect(links).toContain('/dashboard/fleet')
+    expect(wrapper.text()).toContain('Find Nodes')
+    expect(wrapper.text()).toContain('Fleet')
+  })
+
+  it('shows federation refresh state without replacing existing counts', async () => {
+    vi.mocked(rpcClient.call).mockResolvedValueOnce({
+      nodes: [{ status: 'online' }, { status: 'offline' }],
+      pending_requests: [{}],
+    })
+    vi.mocked(rpcClient.getNodeDid).mockResolvedValueOnce({ did: 'did:key:node' })
+
+    const wrapper = mountFederation()
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Known Nodes')
+    expect(wrapper.text()).toContain('2')
+    expect(wrapper.text()).toContain('did:key:node')
+
+    const pending = deferred<{ nodes: []; pending_requests: [] }>()
+    vi.mocked(rpcClient.call).mockReturnValueOnce(pending.promise)
+    vi.mocked(rpcClient.getNodeDid).mockResolvedValueOnce({ did: 'did:key:node' })
+
+    const refresh = (wrapper.vm as unknown as { loadFederationSummary: () => Promise<void> }).loadFederationSummary()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('2')
+    expect(wrapper.text()).toContain('did:key:node')
+    expect(wrapper.text()).toContain('Refreshing federation...')
+    expect(wrapper.text()).not.toContain('Loading federation...')
+
+    pending.reject(new Error('offline'))
+    await refresh
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('2')
+    expect(wrapper.text()).toContain('did:key:node')
+    expect(wrapper.text()).toContain('offline')
+    expect(wrapper.text()).not.toContain('Refreshing federation...')
+  })
+})
@@ -0,0 +1,76 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import Web5Identities from '../Web5Identities.vue'
+import { rpcClient } from '@/api/rpc-client'
+import type { ManagedIdentity } from '../types'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+vi.mock('@/api/rpc-client', () => ({
+  rpcClient: {
+    call: vi.fn(),
+  },
+}))
+
+vi.mock('../utils', () => ({
+  safeClipboardWrite: vi.fn(),
+}))
+
+function makeIdentity(name: string): ManagedIdentity {
+  return {
+    id: name,
+    name,
+    purpose: 'personal',
+    pubkey: `${name}-pubkey`,
+    did: `did:key:${name}`,
+    created_at: '2026-06-10T10:00:00Z',
+    is_default: true,
+    profile: {},
+  }
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  let reject!: (reason?: unknown) => void
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve, reject }
+}
+
+describe('Web5Identities', () => {
+  it('keeps identities visible while refresh is pending or fails', async () => {
+    vi.mocked(rpcClient.call).mockResolvedValueOnce({
+      identities: [makeIdentity('Personal')],
+    })
+
+    const wrapper = mount(Web5Identities, {
+      props: { showStagger: false },
+    })
+
+    await (wrapper.vm as unknown as { loadIdentities: () => Promise<void> }).loadIdentities()
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Personal')
+
+    const pending = deferred<{ identities: ManagedIdentity[] }>()
+    vi.mocked(rpcClient.call).mockReturnValueOnce(pending.promise)
+
+    const refresh = (wrapper.vm as unknown as { loadIdentities: () => Promise<void> }).loadIdentities()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('Personal')
+    expect(wrapper.text()).toContain('Refreshing identities...')
+    expect(wrapper.text()).not.toContain('common.loading')
+
+    pending.reject(new Error('offline'))
+    await refresh
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Personal')
+    expect(wrapper.text()).not.toContain('Refreshing identities...')
+  })
+})
@@ -0,0 +1,84 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import Web5NostrRelays from '../Web5NostrRelays.vue'
+import { rpcClient } from '@/api/rpc-client'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+vi.mock('@/api/rpc-client', () => ({
+  rpcClient: {
+    call: vi.fn(),
+  },
+}))
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  let reject!: (reason?: unknown) => void
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve, reject }
+}
+
+function mockRelayCalls() {
+  vi.mocked(rpcClient.call).mockImplementation((request: { method: string }) => {
+    if (request.method === 'nostr.list-relays') {
+      return Promise.resolve({
+        relays: [{ url: 'wss://relay.example', connected: true, enabled: true, added_at: '2026-06-10T10:00:00Z' }],
+      })
+    }
+    if (request.method === 'nostr.get-stats') {
+      return Promise.resolve({ connected_count: 2, total_relays: 3, enabled_count: 1 })
+    }
+    return Promise.resolve({})
+  })
+}
+
+describe('Web5NostrRelays', () => {
+  it('keeps relay stats visible while refresh is pending or fails', async () => {
+    mockRelayCalls()
+
+    const wrapper = mount(Web5NostrRelays, {
+      props: { showStagger: false },
+      global: {
+        stubs: {
+          Teleport: true,
+        },
+      },
+    })
+
+    await (wrapper.vm as unknown as { loadNostrRelays: () => Promise<void> }).loadNostrRelays()
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('2 active')
+    expect(wrapper.text()).toContain('3 configured')
+
+    const pending = deferred<{ relays: [] }>()
+    vi.mocked(rpcClient.call).mockImplementation((request: { method: string }) => {
+      if (request.method === 'nostr.list-relays') return pending.promise
+      if (request.method === 'nostr.get-stats') {
+        return Promise.resolve({ connected_count: 0, total_relays: 0, enabled_count: 0 })
+      }
+      return Promise.resolve({})
+    })
+
+    const refresh = (wrapper.vm as unknown as { loadNostrRelays: () => Promise<void> }).loadNostrRelays()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('2 active')
+    expect(wrapper.text()).toContain('3 configured')
+    expect(wrapper.text()).toContain('Refreshing relays...')
+
+    pending.reject(new Error('offline'))
+    await refresh
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('2 active')
+    expect(wrapper.text()).toContain('3 configured')
+    expect(wrapper.text()).toContain('offline')
+    expect(wrapper.text()).not.toContain('Refreshing relays...')
+  })
+})
@@ -0,0 +1,118 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import Web5SharedContent from '../Web5SharedContent.vue'
+import { rpcClient } from '@/api/rpc-client'
+import type { ContentItemData, PeerContentItem } from '../types'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+vi.mock('@/api/rpc-client', () => ({
+  rpcClient: {
+    call: vi.fn(),
+  },
+}))
+
+function makePeerItem(filename: string): PeerContentItem {
+  return {
+    id: filename,
+    filename,
+    mime_type: 'text/plain',
+    size_bytes: 128,
+    description: '',
+    access: 'free',
+  }
+}
+
+function makeContentItem(filename: string): ContentItemData {
+  return {
+    ...makePeerItem(filename),
+    added_at: '2026-06-10T10:00:00Z',
+  }
+}
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  let reject!: (reason?: unknown) => void
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve, reject }
+}
+
+function getButtonByText(wrapper: ReturnType<typeof mount>, text: string) {
+  const button = wrapper.findAll('button').find((candidate) => candidate.text().trim() === text)
+  if (!button) throw new Error(`Button not found: ${text}`)
+  return button
+}
+
+describe('Web5SharedContent', () => {
+  it('keeps my content visible while a refresh is pending or fails', async () => {
+    vi.mocked(rpcClient.call)
+      .mockResolvedValueOnce({ items: [makeContentItem('notes.txt')] })
+
+    const wrapper = mount(Web5SharedContent, {
+      props: {
+        showStagger: false,
+        peers: [],
+      },
+    })
+
+    await (wrapper.vm as unknown as { loadContentItems: () => Promise<void> }).loadContentItems()
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('notes.txt')
+
+    const pending = deferred<{ items: ContentItemData[] }>()
+    vi.mocked(rpcClient.call).mockReturnValueOnce(pending.promise)
+
+    const refresh = (wrapper.vm as unknown as { loadContentItems: () => Promise<void> }).loadContentItems()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('notes.txt')
+    expect(wrapper.text()).toContain('Refreshing shared content...')
+
+    pending.reject(new Error('offline'))
+    await refresh
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('notes.txt')
+    expect(wrapper.text()).not.toContain('Refreshing shared content...')
+  })
+
+  it('keeps peer content visible while refreshing the same peer tab', async () => {
+    vi.mocked(rpcClient.call)
+      .mockResolvedValueOnce({ items: [makePeerItem('episode-one.txt')] })
+
+    const wrapper = mount(Web5SharedContent, {
+      props: {
+        showStagger: false,
+        peers: [{ onion: 'peer-a.onion', pubkey: 'peer-a', name: 'Peer A' }],
+      },
+    })
+
+    await getButtonByText(wrapper, 'web5.browsePeers').trigger('click')
+    await wrapper.get('select').setValue('peer-a.onion')
+    await getButtonByText(wrapper, 'web5.browse').trigger('click')
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('episode-one.txt')
+
+    const pending = deferred<{ items: PeerContentItem[] }>()
+    vi.mocked(rpcClient.call).mockReturnValueOnce(pending.promise)
+
+    await getButtonByText(wrapper, 'web5.browse').trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('episode-one.txt')
+    expect(wrapper.text()).toContain('Refreshing peer content...')
+
+    pending.resolve({ items: [makePeerItem('episode-two.txt')] })
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('episode-two.txt')
+    expect(wrapper.text()).not.toContain('Refreshing peer content...')
+  })
+})