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,72 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import BackupSection from '../BackupSection.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 makeBackup() {
+  return {
+    id: 'backup-one',
+    created_at: '2026-06-10T10:00:00Z',
+    size_bytes: 2048,
+    encrypted: true,
+    description: 'Before upgrade',
+  }
+}
+
+describe('BackupSection', () => {
+  it('keeps backups visible while refresh is pending or fails', async () => {
+    vi.mocked(rpcClient.call).mockResolvedValueOnce({ backups: [makeBackup()] })
+
+    const wrapper = mount(BackupSection, {
+      global: {
+        stubs: {
+          Teleport: true,
+        },
+      },
+    })
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Before upgrade')
+    expect(wrapper.text()).toContain('2.0 KB')
+
+    const pending = deferred<{ backups: [] }>()
+    vi.mocked(rpcClient.call).mockReturnValueOnce(pending.promise)
+
+    const refresh = (wrapper.vm as unknown as { loadBackups: () => Promise<void> }).loadBackups()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('Before upgrade')
+    expect(wrapper.text()).toContain('Refreshing backups...')
+    expect(wrapper.text()).not.toContain('settings.loadingBackups')
+    expect(wrapper.text()).not.toContain('settings.noBackups')
+
+    pending.reject(new Error('offline'))
+    await refresh
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Before upgrade')
+    expect(wrapper.text()).toContain('offline')
+    expect(wrapper.text()).not.toContain('Refreshing backups...')
+    expect(wrapper.text()).not.toContain('settings.noBackups')
+  })
+})
@@ -0,0 +1,58 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import ChangePasswordSection from '../ChangePasswordSection.vue'
+
+const { changePassword } = vi.hoisted(() => ({
+  changePassword: vi.fn(),
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+vi.mock('@/api/rpc-client', () => ({
+  rpcClient: {
+    changePassword,
+  },
+}))
+
+vi.mock('@/composables/useModalKeyboard', () => ({
+  useModalKeyboard: vi.fn(),
+}))
+
+describe('ChangePasswordSection', () => {
+  beforeEach(() => {
+    changePassword.mockReset()
+  })
+
+  it('shows a warning when SSH update fails after web password update succeeds', async () => {
+    changePassword.mockResolvedValueOnce({
+      success: true,
+      ssh_updated: false,
+      ssh_error: 'sudo unavailable',
+    })
+    const wrapper = mount(ChangePasswordSection, {
+      global: {
+        stubs: {
+          Teleport: true,
+        },
+      },
+    })
+
+    await wrapper.find('button').trigger('click')
+    const inputs = wrapper.findAll('input')
+    await inputs[0]!.setValue('password123')
+    await inputs[1]!.setValue('MyP@ssw0rd!123')
+    await inputs[2]!.setValue('MyP@ssw0rd!123')
+    await wrapper.find('form').trigger('submit.prevent')
+
+    expect(changePassword).toHaveBeenCalledWith({
+      currentPassword: 'password123',
+      newPassword: 'MyP@ssw0rd!123',
+      alsoChangeSsh: true,
+    })
+    expect(wrapper.text()).toContain('settings.passwordUpdatedSuccess')
+    expect(wrapper.text()).toContain('settings.passwordUpdatedSshFailed sudo unavailable')
+    expect(wrapper.text()).not.toContain('settings.passwordChangeFailed')
+  })
+})
@@ -0,0 +1,65 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import TransportPrefsCard from '../TransportPrefsCard.vue'
+import { rpcClient } from '@/api/rpc-client'
+
+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 makePrefs() {
+  return {
+    federation: 'auto',
+    peers: 'fips',
+    peer_files: 'tor',
+    messaging: 'auto',
+    mesh_file_sharing: 'fips',
+  }
+}
+
+describe('TransportPrefsCard', () => {
+  it('keeps transport preferences visible while refresh is pending or fails', async () => {
+    vi.mocked(rpcClient.call).mockResolvedValueOnce(makePrefs())
+
+    const wrapper = mount(TransportPrefsCard)
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Federation')
+    expect(wrapper.text()).toContain('Peer Files')
+    expect(wrapper.text()).toContain('Auto')
+    expect(wrapper.text()).toContain('FIPS')
+    expect(wrapper.text()).toContain('Tor')
+
+    const pending = deferred<ReturnType<typeof makePrefs>>()
+    vi.mocked(rpcClient.call).mockReturnValueOnce(pending.promise)
+
+    const refresh = (wrapper.vm as unknown as { load: () => Promise<void> }).load()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('Federation')
+    expect(wrapper.text()).toContain('Peer Files')
+    expect(wrapper.text()).toContain('Refreshing transport preferences...')
+    expect(wrapper.text()).not.toContain('Loading…')
+
+    pending.reject(new Error('offline'))
+    await refresh
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Federation')
+    expect(wrapper.text()).toContain('Peer Files')
+    expect(wrapper.text()).toContain('offline')
+    expect(wrapper.text()).not.toContain('Refreshing transport preferences...')
+  })
+})
@@ -0,0 +1,66 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import VpnStatusSection from '../VpnStatusSection.vue'
+import { rpcClient } from '@/api/rpc-client'
+
+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 makeVpnStatus() {
+  return {
+    connected: true,
+    provider: 'wireguard',
+    interface: 'wg0',
+    ip_address: '10.0.0.2/32',
+    hostname: 'node',
+    peers_connected: 2,
+    bytes_in: 1024,
+    bytes_out: 2048,
+  }
+}
+
+describe('VpnStatusSection', () => {
+  it('keeps VPN status visible while refresh is pending or fails', async () => {
+    vi.mocked(rpcClient.call).mockResolvedValueOnce(makeVpnStatus())
+
+    const wrapper = mount(VpnStatusSection)
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Connected')
+    expect(wrapper.text()).toContain('wireguard')
+    expect(wrapper.text()).toContain('10.0.0.2/32')
+
+    const pending = deferred<ReturnType<typeof makeVpnStatus>>()
+    vi.mocked(rpcClient.call).mockReturnValueOnce(pending.promise)
+
+    const refresh = (wrapper.vm as unknown as { fetchVpnStatus: () => Promise<void> }).fetchVpnStatus()
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.text()).toContain('Connected')
+    expect(wrapper.text()).toContain('wireguard')
+    expect(wrapper.text()).toContain('Refreshing VPN status...')
+    expect(wrapper.text()).not.toContain('Loading VPN status...')
+
+    pending.reject(new Error('offline'))
+    await refresh
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('Connected')
+    expect(wrapper.text()).toContain('wireguard')
+    expect(wrapper.text()).toContain('offline')
+    expect(wrapper.text()).not.toContain('Refreshing VPN status...')
+  })
+})